使用html+css+js实现弹球游戏
导读:收集整理的这篇文章主要介绍了使用html+css+js实现弹球游戏,觉得挺不错的,现在分享给大家,也给大家做个参考。使用htML+css+js实现弹球游戏 代码如下,复制即可使用:<!doctyPE html><head&...
收集整理的这篇文章主要介绍了使用html+css+js实现弹球游戏,觉得挺不错的,现在分享给大家,也给大家做个参考。使用htML+css+js实现弹球游戏代码如下,复制即可使用:
!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实现弹球游戏的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 使用html+css+js实现弹球游戏
本文地址: https://pptw.com/jishu/590781.html