html css js 实战案例_使用html+css+js实现弹球游戏
生活随笔
收集整理的這篇文章主要介紹了
html css js 实战案例_使用html+css+js实现弹球游戏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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>如果您有更好的方法或更多的功能，可以和我們大家一起分享，如有錯誤，歡迎聯系我改正，非常感謝！！！
▼
總結
以上是生活随笔為你收集整理的html css js 实战案例_使用html+css+js实现弹球游戏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java excel 注解_Java注解
- 下一篇： recvfrom 无法接收 icmp 差