JavaScript實現打磚塊游戲
本文實例為大家分享了JavaScript實現打磚塊游戲的具體代碼，供大家參考，具體內容如下
html+css部分
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>打磚塊</title> <link rel='stylesheet' type='text/css' href='http://www.hdgsjgj.cn/bcjs/css/break.css' rel='external nofollow' /> <script type='text/javascript' src='http://www.hdgsjgj.cn/bcjs/js/break.js'></script> <style type='text/css'> *{ padding: 0; margin: 0; } .content{ position: relative; width: 800px; height: 600px; background-color: #999; margin: 0 auto; overflow: hidden; } .game{ position: relative; width: 550px; height: 500px; background-color: pink; margin: 20px auto 0; } .brick{ position: absolute; width: 50px; height: 20px; background-color: blueviolet; } .flap{ position: absolute; width: 120px; height: 30px; bottom: 0; left: 0; background-color: blue; } .ball{ position: absolute; width: 30px; height: 30px; bottom: 30px; left: 0; border-radius: 50%; background-color: greenyellow; } .btn{ position: absolute; width: 550px; height: 50px; bottom: 0; left: 125px; } .btn button{ width: 120px; height: 40px; } #score{ position: absolute; width: 80px; height: 30px; right: 0; top: 10%; background-color: #fff; /*border: 1px solid red;*/ } </style> </head> <body> <div class='content'> <div class='game'> <!--<div class='brick'></div>--> <!--<div class='flap'></div> <div class='ball'></div>--> </div> <div class='btn'> <button id='start'>開始</button> <button id='reset'>重置</button> </div> <div id='score'> </div> </div> </body></html>
js部分
window.onload = init; function init(){ var gameArea = document.getElementsByClassName('game')[0]; var rows = 5; var cols = 11; var b_width = 50; var b_height = 20; var bricks = []; var speedX = 5; var speedY = -5; var interId = null; var lf = 0; var tp = 0; var flap var ball; var n = 0; var st = document.getElementById('start'); var rt = document.getElementById('reset'); var score = document.getElementById('score'); score.innerHTML = '得分:' + n; renderDom(); bindDom(); function renderDom(){ getBrick(); //得到五彩磚塊 function getBrick(){ for (var i = 0; i < rows; i++) { var tp = i * b_height; var brick = null; for (var j = 0; j < cols; j++) { var lf = j * b_width; brick = document.createElement('div'); brick.className = 'brick'; brick.setAttribute('style','top:' + tp + 'px;left:' + lf + 'px;'); brick.style.backgroundColor = getColor(); bricks.push(brick); gameArea.appendChild(brick); } } } //添加擋板 var flap = document.createElement('div'); flap.className = 'flap'; gameArea.appendChild(flap); //添加擋板小球 var ball = document.createElement('div'); ball.className = 'ball'; gameArea.appendChild(ball); } function bindDom(){ flap = document.getElementsByClassName('flap')[0]; window.onkeydown = function(e){ var ev = e || window.event; var lf = null; if (e.keyCode == 37) { //左鍵往左走 lf = flap.offsetLeft - 10; if (lf < 0) { lf = 0; } flap.style.left = lf + 'px'; }else if (e.keyCode == 39) { //右鍵往右走 lf = flap.offsetLeft + 10; if (lf >= gameArea.offsetWidth - flap.offsetWidth) { lf = gameArea.offsetWidth - flap.offsetWidth } flap.style.left = lf + 'px'; } } st.onclick = function(){ ballMove(); st.onclick = null; } rt.onclick = function(){ window.location.reload(); } } //得到磚塊的隨即顏色 function getColor(){ var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); return 'rgb(' + r + ',' + g + ',' + b +')'; } //實現小球上下左右來回運動 function ballMove(){ ball = document.getElementsByClassName('ball')[0]; interId = setInterval(function(){ lf = ball.offsetLeft + speedX; tp = ball.offsetTop + speedY; //實現磚塊消失的效果 for (var i = 0; i < bricks.length; i++) { var bk = bricks[i]; if ((lf + ball.offsetWidth/2) >= bk.offsetLeft && (lf + ball.offsetWidth/2) <= (bk.offsetLeft + bk.offsetWidth) && (bk.offsetTop + bk.offsetHeight) >= ball.offsetTop ) { bk.style.display = 'none'; speedY = 5; n++; score.innerHTML = '得分:'+n; } } if (lf < 0) { speedX = -speedX; } if (lf >= (gameArea.offsetWidth - ball.offsetWidth)){ speedX = -speedX; } if (tp <= 0) { speedY = 5; }else if((ball.offsetTop + ball.offsetHeight) >= flap.offsetTop && (ball.offsetLeft + ball.offsetWidth/2) >= flap.offsetLeft && (ball.offsetLeft + ball.offsetWidth/2) <= (flap.offsetLeft + flap.offsetWidth) ){ speedY = -5; }else if(ball.offsetTop >= flap.offsetTop){ gameOver(); } ball.style.left = lf + ’px’; ball.style.top = tp + 'px'; },20) } //判斷游戲是否結束 function gameOver(){ alert('game over' + 'n' + '您的得分是' + score.innerHTML); clearInterval(interId); } }
更多關于Js游戲的精彩文章，請查看專題： 《JavaScript經典游戲 玩不停》
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. Spring security 自定義過濾器實現Json參數傳遞并兼容表單參數(實例代碼)2. docker /var/lib/docker/aufs/mnt 目錄清理方法3. JAMon(Java Application Monitor)備忘記4. Python OpenCV去除字母后面的雜線操作5. 在Mac中配置Python虛擬環境過程解析6. IntelliJ IDEA設置默認瀏覽器的方法7. IntelliJ IDEA設置背景圖片的方法步驟8. Python TestSuite生成測試報告過程解析9. Python 的 __str__ 和 __repr__ 方法對比10. Java類加載機制實現步驟解析
網公網安備