HTML+CSS+JS怎么实现抓娃娃机游戏

这篇文章主要介绍"HTML+CSS+JS怎么实现抓娃娃机游戏"，在日常操作中，相信很多人在HTML+CSS+JS怎么实现抓娃娃机游戏问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"HTML+CSS+JS怎么实现抓娃娃机游戏"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

效果

如上图，一个移动的抓手，以及几个礼物样品，还有左右移动，抓起按钮，素材很简单，但是做出来的效果还是有娃娃机的感觉的

布局

布局部分比较简单，直接贴代码了。可以根据自己的需求不同自定义即可~

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);        });    },};

到此，关于"HTML+CSS+JS怎么实现抓娃娃机游戏"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！