vue|抓娃娃机vue版本和jquery版本 jquery|抓娃娃|vue|前端

由于公司需求,着手研究H5抓娃娃，从网上找到一份简单的jQuery手机H5抓娃娃机代码.先感谢下最初始分享代码的那位同志。这个分享对我们这些非专职前端的phper来说很关键。虽然简单，但是功能也是都实现了的。不过该游戏是爪子不动，娃娃循环移动
但是公司需求是爪子左右移动，娃娃不移动。
【vue|抓娃娃机vue版本和jquery版本】笔者用vue进行重构
这里先把借鉴的代码给大家共享下，后面有时间再上vue二次重构的h5抓娃娃
百度网盘下载链接:
链接:百度网盘-抓娃娃（jquery版本）
密码:t28m
(1)jquery版本

(2)vue版本
(简单版)图片资源请到上面的百度网盘自取,请记得

npm install jquery --save

npm install mint-ui -S

目前vue版本复杂版的抓娃娃，已经写完，但是是公司业务，不便分享，大体思想还是一样的

.amap-page-container { width: 100%; height: 100%; position: absolute; } .box{ width:100%; height:100%; background:url(../../assets/images/zwwbj.jpg) no-repeat center; background-size:cover; } .paw{ width:100%; height:20px; background:#8d3835; position:relative; box-shadow:2px 2px 5px rgba(0,0,0,0.3) } .pawer{ width:10px; background:#565656; height:20px; position:absolute; top:20px; left:50%; margin-left:-5px; box-shadow:2px 2px 5px rgba(0,0,0,0.3) } .pawerPic{ width:110px; height:85px; position:absolute; top:40px; left:50%; margin-left:-55px; } .lose{ width:100px; height:85px; display:block; margin:0 auto; } .pawerPic.on .lose{ display:none; } .pawerPic.on .win{ display:block; } .win{ width:110px; height:105px; display:none; margin:0 auto; background:url(../../assets/images/jiazi2.png); background-size:cover; overflow:hidden; } .win img{ display:block; margin:0 auto; margin-top:12px; } .btn{ width:120px; height:120px; position:absolute; bottom:0; left:50%; margin-left:-60px; } .btn.on .btn_star{ display:none; } .btn_star{ background:url(../../assets/images/kaishi.png) no-repeat center; background-size:contain; width:120px; height:120px; } .btn_end{ background:url(../../assets/images/kaishi2.png) no-repeat center; background-size:contain; width:120px; height:120px; } .area{ width:100%; height:auto; overflow:hidden; position:absolute; top:40px; left:0; } /*娃娃滚动*/ #pack{ width:100%; height:90px; white-space:nowrap; overflow:hidden; position:absolute; bottom:0; left:0; } #sel1{ display:inline; } #pack img{ display:inline-block; height:90px; }