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

程序员文章站 2022-07-14 12:42:48

...

都是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>

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

转载于:https://my.oschina.net/u/3281152/blog/841725

上一篇：练习一下，写个“排雷”小游戏

下一篇：总结一下疫情期间在家学习的笔记