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

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

效果

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

布局

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

<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 class="lazy" data-src="images/dx-lw1.png" alt=""></li>          <li class="item lw2"><img class="lazy" data-src="images/dx-lw2.png" alt=""></li>          <li class="item lw3"><img class="lazy" data-src="images/dx-lw3.png" alt=""></li>          <li class="item lw4"><img class="lazy" data-src="images/dx-lw4.png" alt=""></li>          <li class="item lw5"><img class="lazy" data-src="images/dx-lw5.png" alt=""></li>          <li class="item lw6"><img class="lazy" data-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);        });    },};

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