您的位置：首页 > 其它

无聊的产物--仿说剑中的一个小游戏

2017-02-19 00:00 253 查看

都是BUG 不过勉强玩玩可以啦

1.复制下面的代码

2.把图片保存到同一目录下（文件名修改成 'IMG_0124.JPG'）

3.可以分享一下怎么BUG 补上比如说第一次点击会跳的问题...

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

body {
perspective: 1000px;
}

.father {
width: 1000px;
height: 773px;
background: url('IMG_0124.JPG') no-repeat;
position: absolute;
transform-style: preserve-3d;
transition: all 5s;
opacity: .8;
}

.son {
height: 50px;
width: 50px;
background-color: white;
position: absolute;
left: 500px;
top: 300px;
border-radius: 50%;
background: radial-gradient(rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 50%);
cursor: pointer;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="father">
<div class="son"></div>
</div>
<div class="father">
<div class="son"></div>
</div>
<div class="father">
<div class="son"></div>
</div>
<div class="father">
<div class="son"></div>
</div>
<div class="father">
<div class="son"></div>
</div>
<div class="father">
<div class="son"></div>
</div>
<div class="father">
<div class="son"></div>
</div>
<div class="father">
<div class="son"></div>
</div>
<div class="father">
<div class="son"></div>
</div>
<div class="father">
<div class="son"></div>
</div>
<div class="father">
<div class="son"></div>
</div>
<div class="father">
<div class="son"></div>
</div>
<div class="father">
<div class="son"></div>
</div>
<div class="father">
<div class="son"></div>
</div>
<script>
//用DOM设置body的perspectiveOrigin
//第一次点击会有BUG
document.body.style.perspectiveOrigin = '50% 50%'
var tar = document.querySelectorAll('.son')
//注册点击事件
for(var i=0;i<tar.length;i++){
tar[i].onclick = clickHandle
}
//记录点击次数
var clickCount=0
function clickHandle() {
//计算perspectiveOrigin位置
var x2 = this.offsetWidth / 2 + this.offsetLeft
var y2 = this.offsetHeight / 2 + this.offsetTop
//用动画改变perspectiveOrigin位置
animate(x2, y2)
clickCount++
}
function animate(x2, y2) {
tar[0].timer = setInterval(function () {
var arr = document.body.style.perspectiveOrigin.split(' ');
console.log(arr);
var x = parseFloat(arr[0])
var y = parseFloat(arr[1])
var step1 = ( x2 - x ) / 10;
var step2 = ( y2 - y ) / 10;
step1 = step1 > 0 ? Math.ceil(step1) : Math.floor(step1);
step2 = step2 > 0 ? Math.ceil(step2) : Math.floor(step2);
document.body.style.perspectiveOrigin = (x + step1) + 'px ' + (y + step2) + 'px'
if (x == x2 && y == y2) {
clearInterval(tar[0].timer)
}
}, 15)
}
//获取墨迹和入口
var moji = document.getElementsByClassName('father');
var enter =document.querySelectorAll('.son')
//随机入口位置，给墨迹3D定位
for (var i = 0; i < moji.length; i++) {
moji[i].style.transform = 'translateZ(' + (i*2 - 30) * 1000 + 'px)'
enter[i].style.top=parseInt(Math.random()*300)+200+"px"
enter[i].style.left=parseInt(Math.random()*500)+234+"px"
}
//记数还有初始化步长 用来增加速度
var step = 50
var count =1
function move() {
tar[1].timer=setInterval(function () {
//让墨迹不断向屏幕（自己）过来的动画
for (var i = 0; i < moji.length; i++) {
var num = (parseFloat(moji[i].style.transform.split('(')[1]) + step)
moji[i].style.transform = 'translateZ(' + num + 'px)'
//当计数一定时 增加墨迹过来的速度
if(i==1){
count++
if(count>200){
count=count-200;
step=step+50
}
}
}
//当第一个墨迹大于27000 认为游戏结束 获取得分
if(parseFloat(moji[0].style.transform.split('(')[1])>27000){
clearInterval(tar[1].timer)
alert('得分：'+clickCount/15*100)
}
}, 50)
}
move()
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航