php中文网最新课程
每日17点准时技术干货分享
使用html+css+js实现弹球游戏
<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">0div> <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>如果您有更好的方法或更多的功能，可以和我们大家一起分享，如有错误，欢迎联系我改正，非常感谢！！！
▼
扫一扫
594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
