vant+vue实现见缝插针小游戏代码
代码语言:html
所属分类:游戏
代码描述:vant+vue实现见缝插针小游戏代码,发射红色针插入上面的风车,同一个角度只能插入一针,否则失败
代码标签: 小游戏
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta charset="utf-8"> <title></title> <style> html,body{ overflow: hidden; height: 100vh;} #app{ height: 100vh;} .box { padding: 100px 0 0 0; } .rota { width: 256px; height: 256px; position: relative; margin: 0 auto;} .li,.ligo { width: 30px; height: 100px; background: #c00; position: absolute; left: 118px; top:-71px; transform-origin: 10px 200px; border: 2px solid #000; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .li:last-child{ /* background: #f60; */ } .ligo{ top:70vh; left:50%; margin-left: -10px; } .btn-go{ font-size: 20px; top:85vh; left:50%; margin-left: -25px; position: absolute; } .header{ font-size: 5vw; background: eee; padding: 1vw; } .dan { width: 30px; font-size: 20px; color:#c00; position: absolute; left: 20px; bottom:30px; } .dan li { border-bottom: 5px solid #c00; margin-bottom: 20px;transform: rotate(45deg);} </style> </head> <body> <div id="app"> <div class="header"> 剩余 <span id="quan">{{num}}</span> 发 角度: <span id="jiao">{{angle}}</span>° 总分: <span id="she">{{she}}</span> </div> <ul class="dan"> <li v-for="i in num"></li> </ul> <div class="box"> <div class="rota"> <img id="img5" src="//repo.bfw.wiki/bfwrepo/icon/5d834e7ee3796.png" width="256" height="256" /> <div :class="['li',item.index]" v-for="(item,index) in sj" :style="{transform: 'rotate('+ (360 - (item + 180)) +'deg)'}">{{item}}</div> </div> </div> <div class="ligo"></div> <button v-on:click="gogo" class="btn-go">发射</button> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.rotate.js"></script> <!-- 引入样式文件 --> <l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0