美文网首页
利用键盘监听事件做的接球小游戏

利用键盘监听事件做的接球小游戏

作者: 深漂浪子 | 来源:发表于2019-06-03 15:14 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .contater{
                width: 800px;
                height: 600px;
                background-color: #000;
                margin: 20px auto;
                position: relative;
            }
           .box{
                width: 200px;
                height: 20px;
                background-color: pink;
               position: absolute;
               left: 300px;
               bottom: 0;
            }
            p{
                width: 100%;
                height: 80px;
                text-align: center;
                font-size: 60px;
                line-height: 80px;
            }
            p>span{
                color: red;
            }
        </style>
    </head>
    <body>
    <p class="score">得分:<span>0</span></p>
    <div class="contater">
        <div class="box"></div>
    </div>
    <script>
        var box=document.querySelector(".box");
        var contater=document.querySelector(".contater");
        var pScore = document.querySelector(".score>span");
        var score = 0;
        var speed = 2;
        var ball;
        var speedX=randomInt(-8,8);
        var speedY=randomInt(-8,8);
        var timeOutId;
    
    //初始化
      init();
        function init(){
            listenKey(); // 监听用户的按键
            // 投放小球
            putBall();
            //让小球运动起来
            move(ball);
        }
        //键盘监听事件,按方向键移动下面的矩形
        function listenKey() {
            document.onkeydown = function (event) {
                var keyCode = event.keyCode;
                switch (keyCode) {
                    case 37:
                    case 65:
                        var Bleft = box.offsetLeft - 10 ; //往左
                        if(Bleft<=0){
                            box.style.left=0+"px";
                        }else{
                            box.style.left=Bleft+"px";
                        }
                        break;
                    case 38:
                    case 87:
                        var Btop = box.offsetTop - 10 ;//往上
                        if(Btop<=0){
                            box.style.top=0+"px";
                        }else{
                            box.style.top=Btop+"px";
                        }
                        break;
                    case 39:
                    case 68:
                        var Bright = box.offsetLeft + 10 ;//往右
    
                        if(Bright>=600){
                            box.style.left=600+"px";
                        }else{
                            box.style.left=Bright+ "px";
                        }
                        break;
                    case 40:
                    case 83:
                        var Bbottom= box.offsetTop + 10 ;//往下
                        if(Bbottom>=580){
                            box.style.top=580+"px";
                        }else{
                            box.style.top=Bbottom+"px";
                        }
                        break;
                }
            }
        }
    
        /*投放小球*/
        function putBall(){
            // 创建一个div, 然后把这个地方背景变化
           ball = document.createElement("div");
            var left;
            var top;
            while (true){
                var flag = true;  // 是否找到了正确值
                left = randomInt(-1, 19) * 40;
                top = randomInt(0,0) * 40;
                    if (box.offsetLeft == left && box.offsetTop <= top){
                        flag = false;
                        break;
                    }
                if (flag) break;
            }
    
            ball.style.position="absolute";
            ball.style.width=40+"px";
            ball.style.height=40+"px";
            ball.style.borderRadius="50%";
            ball.style.left = left + "px";
            ball.style.top = top + "px";
            ball.style.backgroundColor = "green";
            contater.appendChild(ball);
        }
    
        //让小球运动起来
        function move(ball) {
            var parent=ball.parentNode;
            var maxLeft=parent.offsetWidth-ball.offsetWidth;
            var maxTop=parent.offsetHeight-ball.offsetHeight;
    
          timeOutId=setTimeout(function step() {
                var left=ball.offsetLeft+speedX;
                var top=ball.offsetTop+speedY;
                left=left<=0 ? 0:left;
                left=left>=maxLeft ? maxLeft:left;
                top=top<=0 ? 0:top;
                top=top>maxTop ? maxTop:top;
                speedX=(left==0 || left==maxLeft) ? -speedX:speedX;
                speedY=(top==0 || top==maxTop) ? -speedY:speedY;
                ball.style.left=left+"px";
                ball.style.top=top+"px";
                // 判断游戏是否结束
                if (isGtBall(ball)||isDead()){
                    contater.innerHTML = "<h1 style='width: 100%" +
                        "; height:100%; font-size: 100px; color:red;text-align: center; line-height: 600px'>游戏结束</h1>";
                    return;
                }
              timeOutId=setTimeout(step,200/speed);
            },0)
        }
    
        //是否接住小球
        function isGtBall() {
            var boxLeft = box.offsetLeft;//矩形的左边距
            var boxTop = box.offsetTop;//矩形的上边距
            var left=ball.offsetLeft+speedX;
            var top=ball.offsetTop+speedY;
            if((boxLeft <=left && left<=boxLeft+160)){
                if(boxTop-(top+ball.offsetHeight)<=0 && boxTop-(top+ball.offsetHeight)>=-10){
                    console.log("aaaaa");
                    contater.removeChild(ball);
                    clearTimeout(timeOutId);
                    ball.style.top=top+"px";
                    ball.style.left=left+"px";
                    score += 100;
                    pScore.innerHTML = score;
                    speed += 0.2;
                    putBall();
                    move(ball)
                    return false;
                }
            }
        }
    
        /*判断小球是否碰到了下边界 (容器的下边缘)*/
        function isDead(){
            var parent=ball.parentNode;
            var top=ball.offsetTop;
            var maxTop=parent.offsetHeight-ball.offsetHeight;
            return top == maxTop;
        }
    
        // 返回随机的 [from, to] 之间的整数(包括from,也包括to)
        function randomInt(from, to){
            return parseInt(Math.random() * (to - from + 1) + from);
        }
    </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:利用键盘监听事件做的接球小游戏

          本文链接:https://www.haomeiwen.com/subject/fmmcxctx.html