原创抖音互动无人直播项目大鱼吃小鱼,进入直播间的用户开始吃鱼,吃的鱼越多等级越高越厉害,小鱼会被吃掉。鱼会随等级提高变身不同类型。
有问题问微信:data5u 提供源码:https://download.csdn.net/download/u010978757/85564682
类似的弹幕互动游戏除了挤地铁模拟器以外还有模拟广场舞和舞厅蹦迪的,甚至还有冲马桶的。
如果只是想要体验游玩抖音挤地铁的话,找一个正在进行这种直播的直播间加入就可以了,发送弹幕即可参与。
而如果是想要自己当主播,在自己的直播间里开启这种挤地铁的互动小游戏的话,目前抖音还没有提供官方内置的模式,需要用户自己准备相应的软件挂在后台上运行。
配置文件:
var config = {
bg: 'img/bg/2.jpg',
animatesize: 5,
fishsize: 4,
xiami_size: 8,
debug: false,
maxWidth: $('body').width(),
maxHeight: $('body').height(),
msgTime: 6000,
sharkTime: 10000,
sharkIntervalTime: 120000,
listenIntervalTime: 200,
xiamiIntervalTime: 1000,
}
function initConfig() {
$('#container').css('background', 'url(' + config.bg + ')')
}
window.onresize = function (){
config.maxHeight = $('body').height() ;
config.maxWidth = $('body').width() ;
}
initConfig();
页面文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>V1</title>
<link rel="stylesheet" href="css/index.css" media="all" />
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="plugin/anime/lib/anime.min.js"></script>
</head>
<body style="padding: 0; margin: 0; width: 100%; height: 100vh; overflow: hidden;">
<div id="debugarea">
<button id="come">来人</button>
</div>
<div id="model" style="display: none;">
<div class="aFishModel" data-level="0" style="will-change: left,top; position: absolute; text-align: center; align-items: center; display: flex; flex-direction: column; flex-wrap: wrap; z-index: 1;">
<p class="info" style="background-color: #FFFFFF; font-size: 12px; max-width: 300px; min-width: 70px; left: 5px; border: 1px solid #000000; overflow-wrap: normal; position: absolute; top: -40px; z-index: -1;"></p>
<img class="headimg" src="img/fish/0/fish1.png" style="z-index: 9;" />
</div>
</div>
<div id="message" style="position: absolute; top: 100px; text-align: center; width: 100%;">
<div style="font-size: 30px; font-stretch: unset; font-weight: bolder; word-spacing: 20px; filter: opacity(0.3);">开局一条鱼,越吃就越大</div>
<div style="font-size: 16px; word-spacing: 20px; filter: opacity(0.4); margin-top: 20px">指令:向上、向下、向左、向右、复活</div>
<marquee id="eatmsg" style="position: absolute; top: -90px; left: 0; color: #676767;"></marquee>
</div>
<div id="container" style="display: flex; flex-direction: row; height: 100vh; background: url(img/bg/2.jpg);">
<div class="sharkbox" id="sharkbox" data-shark="1">
<div class="shark"></div>
</div>
</div>
<div id="audio">
<audio src="music/bite0.wav" id="eatmp3"></audio>
<audio src="music/bosswarning.ogg" id="warnmp3"></audio>
</div>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/fish-v1.js"></script>
<script type="text/javascript" src="js/control.js"></script>
</body>
</html>
|