每天学一个jquery插件-切水果实现2
切水果实现2
额，之前的想法是在js里面弄出一个简陋的碰撞模型，不过感觉有点肝，所以想想还是换了舒服点的方式解决这个实现方式了，毕竟有原生的办法可以实现效果，也算是先给自己之前的flag填个坑
实现效果
代码部分
*{
margin: 0;
padding: 0;
}
.rel{
position: relative;
overflow: hidden;
}
.score{
position: absolute;
bottom: 0;
right: 0;
font-size: 24px;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: gray;
}
.item{
width: 60px;
height: 60px;
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
}
.a0{
animation:a0 5s linear;
}
.a1{
animation:a1 5s linear;
}
.a2{
animation:a2 5s linear;
}
.a3{
animation:a3 5s linear;
}
.a4{
animation:a4 5s linear;
}
@keyframes a0{
from{
left: -60px;
top: -60px;
transform: rotate(0deg);
}
to{
left: 100%;
top: 100%;
transform: rotate(360deg);
}
}
@keyframes a1{
from{
bottom: -60px;
right: -60px;
transform: rotate(0deg);
}
to{
bottom: 100%;
right: 100%;
transform: rotate(480deg);
}
}
@keyframes a2{
0%{
bottom: 0;
right: -60px;
transform: rotate(0deg);
}
30%{
bottom: 60%;
}
50%{
bottom: 80%;
}
70%{
bottom: 60%;
}
100%{
bottom: -64;
right: 100%;
transform: rotate(1080deg);
}
}
@keyframes a3{
0%{
bottom: -60px;
right: -60px;
transform: rotate(0deg);
}
30%{
bottom: 20%;
right: 90%;
}
50%{
bottom: 40%;
right: 0%;
}
70%{
bottom: 60%;
right: 90%;
}
100%{
bottom: 100%;
right: 0%;
transform: rotate(3600deg);
}
}
@keyframes a4{
0%{
top: -60px;
left: -60px;
transform: rotate(0deg);
}
30%{
top: 20%;
left: 90%;
}
50%{
top: 40%;
left: 0%;
}
70%{
top: 60%;
left: 90%;
}
100%{
top: 100%;
left: 0%;
transform: rotate(7200deg);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>切水果实现</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/qsgsx.js"></script>
<link href="css/qsgsx.css" rel="stylesheet" type="text/css" />
<style>
#div{
border: 1px solid lightgray;
margin: 10px auto;
width: 95%;
height: 400px;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
<script>
var temp = qsgsx("div");
temp.load();
</script>
var qsgsx = function(id){
$id = $("#"+id);
$id.addClass("rel");
$score = $("<div class='score'>0</div>");
$score.appendTo($id);
return{
$id:$id,//容器
$score:$score,//计分板
score:0,//得分
span:1000,//多久出一个水果
arr:[],//存水果数据的
load:function(){
var that = this;
var t = setInterval(function(){
var obj = {
};
obj.id = Math.floor(Math.random()*8)+1;//随机进去的是哪一种水果
obj.aid = Math.floor(Math.random()*5);//随机进去的是哪一种动画方式
obj.$dom = $("<div class='item a"+obj.aid+"'></div>");
obj.$dom.appendTo(that.$id);
obj.$dom.css('background-image','url(img/'+obj.id+'.png)');
obj.t = setTimeout(function(){
obj.$dom.remove()
that.score-=1;
that.drawscore();
},5000)//过了5秒之后水果出了边界，直接扣分，并且此水果无法再触发
obj.$dom.mouseenter(function(){
that.score+=1;
that.drawscore();
obj.$dom.remove();
clearTimeout(obj.t)//同时去除定时扣分的选项；
})
},that.span)
},
drawscore:function(){
var that = this;
that.$score.text(that.score);
}
}
}
实现思路
- 额，回顾一下以前的思路，我是打算精确到像素的，然后做一个简陋的碰撞模型出来，就是每个记录的鼠标的位置，然后各个水果在运作的过程中，能够通过自己的旋转位置计算出每一个包含的像素点，这样只要鼠标得前后俩次坐标穿过这个包含的范围那么久能实现切水果的效果的，不过有点肝，所以先暂时放一边，用现成的办法完成基础的效果
- 现在这个实现思路就贼简单了，反正照着js部分的顺序如下讲一下
- 找到容器dom，创建计分dom，然后把所有注释的参数放到控制对象里面去
- 接着就是一个周期的计时器，不断的往游戏容器里面塞dom，这个dom会随机给俩参数，一个是id，用来关联背景图片给不同的水果的，我这里水果的图片网上随便找的，只要按照我随机数取值里面给齐就行了，接着就是给上对应的动画帧的控制类，嗯，这个也是随机给上的，不过对应的动画效果我只写了五个，不想写更多啦。
- 关于动画帧这玩意我也是用了一丢丢效果而已，无非就是定位这个dom会从哪到哪，然后中间有多少个状态之类的，最多还加了个transform:route让水果旋转起来
- 此外就是水果的交互了，反正动画时间我是写死了，当这个水果被扔进容器的时候自己也在计时动画结束就扣分，或者自己的obj.$dom容器本身被鼠标移入，这个虽然不精准，但是也能当做切到水果了，所以切水果的效果就这样实现了
- 关于计分反正就是俩种交互而已，没切到，计时器给扣分，然后画出当前分值，切到了就加分画出来，然后关掉这个dom的计时器
- 完事，点外卖，洗澡