<!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>jqueryrotate演示7种不同的旋转效果</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="img/chrome.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 src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.rotate.min.js"></script>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
<script>
var myVar;
var sng2 = 0;
var app = new Vue({
el: '#app',
data: {
num:10,
angle:0,
quan:0,
she:0,
over:false,
sj:[]
},
created: function () {
console.log(1)
this.amit()
},
methods: {
gogo: function () {
this.she++
this.num--
//this.sj[this.she] = this.angle;
var sng = this.angle
if(this.she > 0){
for (var item of this.sj) {
if((sng+15) > item && (sng-15) < item){
clearInterval(myVar)
this.over = true
vant.Dialog.alert({
message: '游戏结束！最好成绩是：'+this.she
}).then(() => {
// on close
});
break;
}
console.log(sng2,item)
}
}
this.sj.push(sng);
var _this = this
if(!this.over && this.num==0){
clearInterval(myVar)
vant.Dialog.alert({
message: '闯关成功，请进入下一关！'
}).then(() => {
_this.next()
});
}
},
amit:function(){
_this = this
myVar=setInterval(function() {
_this.angle ++ ;
$(".rota").rotate(_this.angle);
if(_this.angle > 359){
_this.angle = 0;
_this.quan++;
}
}, 10);
},
next:function(){
this.sj = [];
this.num = 10;
this.quan = 0
this.amit()
this.rands()
},
rands:function(){
var x = 0
var sn
while(x<this.she/5){
sn = Math.ceil(Math.random()*360);
this.sj.push(sn);
x++
}
}
}
})
</script>
</body>
</html>
game_jfcz.zip （7个子文件） 
game_jfcz js 
vant.min.js 185KB jquery.rotate.min.js 7KB css index.css 79KB
index.html 4KB img 
chrome.png 10KB watermelon.png 54KB xigua.png 609KB资源评论
泰山AI
- 粉丝: 3w+
- 资源: 287
最新资源
- VCU整车控制器主控芯片MPC5744，原理图＋源代码
- 基于非线性干扰观测器的直升机滑模反演控制，期刊simulink模型复现
- 51单片机串口通信程序源码，注释详细，包含接收和传输代码，以及文档说明
- FX3U和三菱伺服控制的框架标准程序，适合新手学习定位用 用 标签分层，说明了定位控制中的公共参数设定、回原点、JOG手动、绝对定位、相对定位、控制等部分，有伺服驱动器的针脚接线 ‘包括有： 1、
- 电动汽车有序充电参与电网负荷削峰填谷
- 热电联产系统智能经济调度：一种深度强化学习方法 关键词：热电联产，经济调度，深度强化学习，近端优化 一种热电组合(CHP)系统经济调度的深度强化学习(DRL)方法，该方法具有对不同操作场景的适应性，显
- 魔术轮胎，dugoff轮胎建模 软件使用：Matlab Simulink 适用场景：采用模块化建模方法，搭建非线性魔术轮胎PAC2002，dugoff模型 非线性轮胎模型输入： 轮胎侧偏角，轮胎滑
- 啊阿斯顿撒法公分的身高是是
- 基于时域信号 逆变器 阻抗模型 特征值识别 稳定性分析 关键词 系统识别、导纳模型、阻抗模型、基于逆变器的资源、稳定性分析 测试环境：MATLAB 由于越来越多的基于逆变器的资源(IBR)的集成，电
- 有源电力滤波器matlab仿真， 并联型apf仿真fft分析 谐波电流检测ipiq法 跟踪电流控制（传统滞环控制 空间电压矢量滞环控制） 总谐波畸变率降至3%以下
- 编程领域中正则表达式的全面介绍与典型应用场景解析
- 使用STM32DSP库制作的数字滤波器， 滤波器系数通过MATLAB生成 配合STM32串口输出，在Excel中绘图，上面只是演示了低通滤波器 源码，包括滤波器系数生成教程
- 基于VHDL的数字密码锁设计，使用FPGA作为控制器，包括相应的功能仿真和相关设计资料
- 深入解析 Vue3 框架：新特性、改进与应用案例的技术指南
- 胶钉机程序 用国产三菱3U和威纶触摸屏编写 此程序已经实际设备上批量应用，程序成熟可靠，借鉴价值高，程序有注释
- 在IEEE-14总线系统中执行连续功率流 测试环境：MATLAB 读取IEEE14和 IEEE30系统数据 连续潮流又称为延拓潮流，是电力系统电压稳定性分析的有力工具 PV曲线由于反映了系统随着负
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
