vue制作抓娃娃机
去年为联通制作双十一活动,做四个小游戏:‘配对消消乐’、移动拼图、抓娃娃、倒计时。 现在先做来分享一下制作抓娃娃游戏时的经验 先上效果图 游戏规则:在指定时间内抓到上图四张卡片为挑战成功。 现在直接说游戏主要内容:娃娃滚动、爪子向下抓取、抓到卡片 废话不多说直接上代码!(此样式是根据需求而定) <!--布局样式--> <div class= "game" > <!--爪子--> <div class= "paw" > <div class= "pawer" ></div> <div class= "pawerPic" > <img src= "./../assets/img/zhuashou.png" class= "lose" /> <div class= "win" v-if= "gzShow2" > <img :src= "t_img" /> </div> </div> </div> <!--区域--> <div class= "area" > <!--娃娃滚动--> <div id= "pack" ref= "pack" > <div id= "sel1" class= "father" ref= "imgs" > <img v-for= "img in imgs" :class= "img.isSuc ? 'yes' : 'no'" :src= "img.img"