前言
前段时间去商场吃饭的时候看到一个有趣的娃娃机，一个密封的机器里底部放着一些被捆绑好的龙虾，可以买币去抓龙虾，抓到以后可以初加工费找附近的商家给做成龙虾大餐，感觉很有意思，把抓抓玩出了一个新的高度~
主要是抓到以后还可以出手工费进行烹饪，很吸引人，周边围观的人也很多，观察了一会发现。爪子的抓力不够，龙虾在水里还能移动，而且感觉每一个个头都不小，那小爪感觉根本抓不起来~~
到家后孩子就说爸爸你可不可以做一个娃娃机呢？
身为一个程序员，这点要求我感觉还是难不倒我，然后就突发奇想，给孩子在手机上做一个简易娃娃机。起初的想法是哄她开心，看到掘金最近有小游戏的活动，顺便分享给大家~~
效果
如上图，一个移动的抓手，以及几个礼物样品，还有左右移动，抓起按钮，素材很简单，但是做出来的效果还是有娃娃机的感觉的~
地址
代码托管地址在github在线预览地址资源路径不对无法访问，如果有需要源码的同学可以自行去git仓库获取~
布局
布局部分比较简单，直接贴代码了。可以根据自己的需求不同自定义即可~
<div class="page-portrait" id="page-portrait">
<div id="pageContainer" class="page-container game-box">
<div class="poster-main">
<ul class="poster-list">
<li class="item lw1"><img src="images/dx-lw1.png" alt=""></li>
<li class="item lw2"><img src="images/dx-lw2.png" alt=""></li>
<li class="item lw3"><img src="images/dx-lw3.png" alt=""></li>
<li class="item lw4"><img src="images/dx-lw4.png" alt=""></li>
<li class="item lw5"><img src="images/dx-lw5.png" alt=""></li>
<li class="item lw6"><img src="images/dx-lw6.png" alt=""></li>
</ul>
</div>
<div id="stop" class="button"></div>
<div id="left" class="left-btn"></div>
<div id="right" class="right-btn"></div>
<div class="zhua-top">
<span class="zhua-zuo"></span>
<span class="zhua-zhu"></span>
<div class="zhua zhuamove"></div>
</div>
</div>
</div>css用到了几个运动处理了爪子的动效，如下方代码所示
@keyframes run {
0% {
background-image: url(../images/dx-zhua3.png);
}
25% {
background-image: url(../images/dx-zhua2.png);
}
50% {
background-image: url(../images/dx-zhua1.png);
}
75% {
background-image: url(../images/dx-zhua2.png);
}
100% {
background-image: url(../images/dx-zhua3.png);
}
}
@keyframes zhuashou {
0% {
top: 360px;
background-image: url(../images/dx-zhua1.png);
}
100% {
top: 360px;
background-image: url(../images/dx-zhua2.png);
}
}
@keyframes zhuadown {
0% {
top: 138px;
background-image: url(../images/dx-zhua1.png);
}
100% {
top: 360px;
background-image: url(../images/dx-zhua1.png);
}
}
@keyframes zhua-slideUp {
0% {
top: 360px;
background-image: url(../images/dx-zhua2.png);
}
100% {
top: 138px;
background-image: url(../images/dx-zhua2.png);
}
}
@keyframes img-slideUp {
0% {
top: 23px;
}
100% {
top: -200px;
}
}js代码创建了一个控制器类，处理事件以及动画效果的交替等。
var Carousel = {
data: {
result: 1
},
init: function () {
Carousel.control();
},
stop: function () {
$(".zhua").removeClass("zhuamove").addClass("zhuadown");
$(".zhua-zhu").addClass("zhudown");
var timer01 = setTimeout(function () {
$(".zhua").removeClass("zhuadown").addClass("zhuashou");
var timer03 = setTimeout(function () {
$(".zhua").removeClass("zhuashou").addClass("zhuaup");
$(".zhua-zhu").removeClass("zhudown").addClass("zhuup");
$(".poster-list .lw" + (Carousel.data.result + 1)).addClass("img-slideUp");
clearTimeout(timer03);
timer03 = null;
}, 800);
var timer02 = setTimeout(function () {
$(".zhua").removeClass("zhuaup").removeClass("zhuaup1");
$(".zhua-zhu").removeClass("zhuup");
clearTimeout(timer02);
timer02 = null;
alert("恭喜您抽中一等奖~");
Carousel.start();
}, 2500);
clearTimeout(timer01);
timer01 = null;
}, 1000);
},
start: function () {
$(".zhua").addClass("zhuamove");
$(".zhua").removeClass("zhuadown").removeClass("zhuaup1").removeClass("zhuaup");
$(".poster-list .item").removeClass("img-slideUp").removeClass("img-slideOutUp");
},
zhuaMove: function (num) {
switch (num) {
case 0:
$(".zhua-top").animate({
left: -145,
},300);
break;
case 1:
$(".zhua-top").animate({
left: 0,
},300);
break;
case 2:
$(".zhua-top").animate({
left: 145,
},300);
break;
}
},
control: function () {
$("#left").on("click", function () {
Carousel.data.result--;
if (Carousel.data.result <= 0) {
Carousel.data.result = 0;
}
Carousel.zhuaMove(Carousel.data.result);
});
$("#stop").click(Carousel.stop);
$("#right").on("click", function () {
Carousel.data.result++;
if (Carousel.data.result >= 2) {
Carousel.data.result = 2;
}
Carousel.zhuaMove(Carousel.data.result);
});
},
};总结
css现在有很多的新的特性可以解决我们工作中遇到的动效以及兼容问题，有心的同学可以多多查阅文档，写一写自己感兴趣的小demo，或者给孩子做一个小游戏来玩，何尝不是一件有成就的事呢~
到此这篇关于HTML+CSS+JS实现抓娃娃机游戏的文章就介绍到这了,更多相关JS抓娃娃机内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
