使用html+css+js实现弹球游戏

前端  /  管理员 发布于 7年前   265

使用html+css+js实现弹球游戏

17969075ca2705a31a16ae54b880bb9.png

代码如下，复制即可使用：

<!doctype html><head>    <style type="text/css">        .panel{position: relative;z-index: 0;top:0px;left: 400px;width: 300px;height: 500px;        }        .console{position: absolute;z-index: 1;top:0;left:0;width:100%;height: 40px;background-color: #bbb;        }        .message{position: absolute;z-index: 1;top:40px;left:0;width:100%;height: 460px;color: white;font-size: 50px;text-align: center;line-height: 460px;background-color: #999;        }        .start,.score,.pause{position: absolute;z-index: 2;top: 0;width: 100px;height: 100%;font-size: large;color: white;text-align: center;line-height: 40px;background: -webkit-linear-gradient(top,#4ca8ff,yellow);        }        .start{left: 0px;        }        .score{left:100px;background-color: red;        }        .pause{left:200px;        }        .start:after,.pause:before{content: "";position: absolute;z-index: 2;top: 0;width: 3px;height: 100%;background: -webkit-linear-gradient(top,#666,#999);        }        .start:after{left: 97px;        }        .pause:before{left: 0px;        }        .start:hover,.pause:hover{cursor: pointer;background: -webkit-linear-gradient(top,#4ca8ff,red);        }        .panel span{position: absolute;z-index: 0;top:50%;left: 50%;font-size: 50px;color: blue;        }        .ball,.secondBall{position:absolute;z-index: 2;border-radius:50%;width: 20px;height: 20px;        }        .ball{top: 460px;left:140px;background-color: red;        }        .secondBall{top: 40px;left:140px;background-color: red;        }        .plate{position: absolute;top:480px;left: 100px;z-index: 2;width: 100px;height: 20px;background-color: #e5e5e5;        }        .promte{margin-top: 20px;text-align: center;        }    </style></head><body>    <div id="panel" class="panel">        <div class="console"><div id="start" class="start">开始</div><div id="score" class="score">0</div><div id="pause" class="pause">暂停</div>        </div>        <div id="message" class="message"></div>        <div id="ball" class="ball"></div>        <div id="plate" class="plate"></div>    </div>    <div class="promte">提示：键盘左右箭头控制滑板</div>    <script     type="text/javascript">        (function(){document.onkeydown = function(e){    var e = e || window.event;    if(e.keyCode == 37){        //键盘向左键        plateMove("left");    }else if(e.keyCode == 39){        //键盘向右键        plateMove("right");    }}        })();        var panel = document.getElementById("panel"),message = document.getElementById("message"),plate = document.getElementById("plate"),ball = document.getElementById("ball"),start = document.getElementById("start"),score = document.getElementById("score"),pause = document.getElementById("pause"),secondBall;        var startGame, x = x2 = -1, y = y2 = -1, speed = 1, positionArr = [], pauseActive = false,//一个标志：表示难度是否还能增加flag = true,//球的起始位置ballX, ballY, secondBallX, secondBallY,//边界minX = 0,maxX = panel.offsetWidth - ball.offsetWidth,minY = 40;maxY = panel.offsetHeight - ball.offsetHeight - plate.offsetHeight;        window.onload = function(){if(window.addEventListener){    start.addEventListener("click",startClick,false);    pause.addEventListener("click",pauseClick,false);}else if(window.attachEvent){    start.attachEvent("onclik",startClick);    pause.attachEvent("onclik",pauseClick);}else{    start.onclik = startClick;    pause.onclik = pauseClick;}        }    function plateMove(direction){if(direction == "left"){    if(plate.offsetLeft > 0){        plate.style.left = (plate.offsetLeft-30 < 0? 0 : plate.offsetLeft-30)+"px";    }}if(direction == "right"){    if(plate.offsetLeft < 200){        plate.style.left = (plate.offsetLeft+30 > 200? 200 : plate.offsetLeft+30)+"px";    }}        }        function startClick(){if(!pauseActive){    resetGame();}else{    pauseActive = !pauseActive;}startGame = setInterval(function(){    //console.log(ballX+"======"+ballY);    positionArr = setPosition(ballX,ballY,true);    if(positionArr == "GAMEOVER"){        return;    }    ballX = positionArr[0];    ballY = positionArr[1];    //设置球的位置    ball.style.left = ballX+"px";    ball.style.top = ballY+"px";    if(!flag){        positionArr = setPosition(secondBallX,secondBallY,false);        secondBallX = positionArr[0];        secondBallY = positionArr[1];        secondBall.style.left = secondBallX+"px";        secondBall.style.top = secondBallY+"px";    }else{        addDifficulty();    }},30);        }        function pauseClick(){pauseActive = true;clearInterval(startGame);        }        function resetGame(){clearInterval(startGame);message.innerHTML="";score.innerHTML="0";ball.style.left = "140px";ball.style.top = "460px";plate.style.left = "100px";plate.style.top = "480px";ballX = ball.offsetLeft;ballY = ball.offsetTop;speed = 1;flag = true;//第二个球设置隐藏if(secondBall){    secondBall.style.display="none";    secondBall.style.left = "140px";    secondBall.style.top = "40px";}        }        function addDifficulty(){if(parseInt(score.innerHTML) > 500 && parseInt(score.innerHTML) < 2000){    speed = 1.2;}else if(parseInt(score.innerHTML) > 2000 && parseInt(score.innerHTML) < 5000){    speed = 1.5;}else if(parseInt(score.innerHTML) > 5000){    if(typeof secondBall != "undefined"){        secondBall.style.display="";    }else{        secondBall = document.createElement('div');    }        secondBall.className = 'secondBall';    panel.appendChild(secondBall);    secondBallX = secondBall.offsetLeft;    secondBallY = secondBall.offsetTop;    flag = false;}        }        function setPosition(_x,_y,firstball){if(_x == minX || _x == maxX){    //x*=-1;    firstball? x*=-1 : x2*=-1;}if(_y == minY || _y == maxY){    //y*=-1;    firstball? y*=-1 : y2*=-1;}if(_y == maxY){    //判断挡板的位置是不是在球的范围内    if(plate.offsetLeft > _x || (plate.offsetLeft + plate.offsetWidth) < _x){        clearInterval(startGame);        message.innerHTML="GAMEOVER";        return "GAMEOVER";    }}if(firstball){    _x+=4*x*speed;    _y+=5*y*speed;}else{    _x+=4*x2*speed;    _y+=5*y2*speed;}//边界处理_x = _x < minX? minX : _x;_x = _x > maxX? maxX : _x;_y = _y < minY? minY : _y;_y = _y > maxY? maxY : _y;//设置分数score.innerHTML=parseInt(score.innerHTML)+10*speed;return [_x,_y];        }    </script></body></html>

如果您有更好的方法或更多的功能，可以和我们大家一起分享哦，如有错误，欢迎联系我改正，非常感谢！！！

更多编程相关内容，请关注编程入门栏目！

以上就是使用html+css+js实现弹球游戏的详细内容，更多请关注其它相关文章！


  • 上一条：
    js中call、apply、bind的区别
    下一条：
    CSS3 flex布局总结

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客