用JS實(shí)現(xiàn)一個簡單的打磚塊游戲
更新時間：2019年12月11日 13:42:35 作者：yuaiqiuhongyan
這篇文章主要介紹了用JS實(shí)現(xiàn)一個簡單的打磚塊游戲,代碼分為html+css+js三部分，具體實(shí)例代碼感興趣的朋友跟隨小編一起看看吧
話不多說，先看看效果：
HTML架構(gòu)部分
<!-- HTML結(jié)構(gòu) -->
<div class="content">
<div class="game"></div>
<div class="container">
<h2>打磚塊小游戲</h2>
<hr />
<center>
<button id="start"
style="width: 120px;height: 22px;margin: 20px auto;border-radius: 10px;border: none;outline: none;color: rgba(145, 146, 146, 0.918);cursor:pointer;">開始游戲</button>
</center>
<div style="width: 219px;border: 1px solid rgba(145, 146, 146, 0.918);"></div>
<center>
<button id="reset"
style="width: 120px;height: 22px;margin: 20px auto;border-radius: 10px;border: none;outline: none;color: rgba(145, 146, 146, 0.918);cursor:pointer;">再來一局</button>
</center>
<center>
<!-- 分?jǐn)?shù) -->
<div id="score"></div>
</center>
</div>
</div>
CSS樣式部分
<!-- CSS樣式 -->
<style>
* {
padding: 0;
margin: 0;
}
/* body>div {
width: 550px;
height: 520px;
display: flex;
margin: 20px auto;
} */
.container {
width: 220px;
height: 500px;
border: 1px solid rgba(145, 146, 146, 0.918);
margin-top: 20px;
margin-right: 120px;
}
h2 {
text-align: center;
font-size: 26px;
color: rgba(145, 146, 146, 0.918);
margin-bottom: 2px;
}
.content {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
overflow: hidden;
display: flex;
}
.game {
position: relative;
width: 456px;
height: 500px;
border: 1px solid rgba(145, 146, 146, 0.918);
margin: 20px auto 0;
}
.brick {
position: absolute;
width: 50px;
height: 20px;
background-color: rgb(238, 17, 28);
}
/* 畫擋板 */
.flap {
position: absolute;
width: 120px;
height: 10px;
bottom: 0;
left: 0;
background-color: royalblue;
}
.ball {
position: absolute;
width: 20px;
height: 20px;
bottom: 10px;
left: 52px;
border-radius: 50%;
background-color: blue;
}
#score {
width: 100px;
height: 30px;
right: 0;
top: 10%;
color: rgba(145, 146, 146, 0.918);
}
</style>
JavaScript腳本語言部分
<!-- JS結(jié)構(gòu) -->
<script>
/*
// 獲取canvas元素
const canvas = document.getElementById('canvas');
// 獲取到上下文，創(chuàng)建context對象
const ctx = canvas.getContext('2d');
let raf;
// 定義一個小球
const ball = {
x: 100, // 小球的 x 坐標(biāo)
y: 100, // 小球的 y 坐標(biāo)
raduis: 20, // 小球的半徑
color: 'blue', // 小球的顏色
vx: 3, // 小球在 x 軸移動的速度
vy: 2, // 小球在 y 軸移動的速度
// 繪制方法
draw: function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.raduis, Math.PI * 2, false);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
}
}
// 該函數(shù)為繪制函數(shù)：主要邏輯就是清空畫布，重新繪制小球
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ball.draw();
// 進(jìn)行邊界的判斷
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
ball.vy = -ball.vy;
}
if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
ball.vx = -ball.vx;
}
ball.x += ball.vx;
ball.y += ball.vy;
raf = window.requestAnimationFrame(draw);
}
raf = window.requestAnimationFrame(draw);
*/
// 加載窗口 = init
window.onload = init;
function init() {
// 獲取元素
let gameArea = document.getElementsByClassName("game")[0];
// 設(shè)置10列
let rows = 10;
// 設(shè)置8行
let cols = 8;
// 磚塊與磚塊之間的寬度
let b_width = 58;
// 磚塊與磚塊之間的高度
let b_height = 28;
// 用數(shù)組的形式來裝磚塊
let bricks = [];
// 小球的X軸方向（上下左右來回的運(yùn)動）
let speedX = 5;
// 小球Y軸方向（上下左右來回的運(yùn)動）
let speedY = -5;
// 在內(nèi)部里，小球上下左右來回的運(yùn)動，【小球碰撞到磚塊 = null】
let interId = null;
// 左邊距離為0
let lf = 0;
// 上邊距離為0
let tp = 0;
// 擋板
let flap;
// 擋板上面的小球
let ball;
// 分?jǐn)?shù)記錄（初始值為0）
let n = 0;
// 獲取開始游戲按鈕的元素
let st = document.getElementById("start");
// 獲取再來一局（重新渲染）按鈕的元素
let rt = document.getElementById("reset");
// 獲取分?jǐn)?shù)記錄的元素
let score = document.getElementById("score");
score.innerHTML = "分?jǐn)?shù)：" + n;
// 提供（渲染）Dom[渲染磚塊] 方法
renderDom();
// 鍵盤的操作（A與D;askm查詢：A：65，需-32，D：68，需+32）方法
bindDom();
// 進(jìn)行渲染磚塊
function renderDom() {
getBrick();
// 畫磚塊
function getBrick() {
for (let i = 0; i < rows; i++) {
let tp = i * b_height;
let brick = null;
for (let j = 0; j < cols; j++) {
let 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);
}
}
}
//添加擋板
flap = document.createElement("div");
flap.className = "flap";
gameArea.appendChild(flap);
//添加擋板+小球
ball = document.createElement("div");
ball.className = "ball";
gameArea.appendChild(ball);
}
// 鍵盤的操作
function bindDom() {
flap = document.getElementsByClassName("flap")[0];
window.onkeydown = function (e) {
let ev = e || window.event;
// 左邊移動
let lf = null;
// A鍵往左移動
if (e.keyCode == 65) {
lf = flap.offsetLeft - 32;
if (lf < 0) {
lf = 0;
}
flap.style.left = lf + "px";
// D鍵往右移動
} else if (e.keyCode == 68) {
lf = flap.offsetLeft + 32;
if (lf >= gameArea.offsetWidth - flap.offsetWidth) {
lf = gameArea.offsetWidth - flap.offsetWidth
}
flap.style.left = lf + "px";
}
}
// 為開始游戲按鈕添加點(diǎn)擊事件
st.onclick = function () {
// 實(shí)現(xiàn)小球上下左右不斷移動
ballMove();
st.onclick = null;
}
// 為再來一局按鈕添加點(diǎn)擊事件
rt.onclick = function () {
window.location.reload();
}
}
// 獲得磚塊的顏色 rgb ===>>> 隨機(jī)顏色；random() = 隨機(jī)數(shù)方法
function getColor() {
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
// 實(shí)現(xiàn)小球上下左右不斷移動
function ballMove() {
ball = document.getElementsByClassName("ball")[0];
interId = setInterval(function () {
// 左邊（X軸方向）的移動速度
lf = ball.offsetLeft + speedX;
// 上邊（Y軸方向）的移動速度
tp = ball.offsetTop + speedY;
// 用for（）{}循環(huán)實(shí)現(xiàn)小球與磚塊碰撞后從而消失
for (let i = 0; i < bricks.length; i++) {
let bk = bricks[i];
// if進(jìn)行判斷，判斷小球與磚塊接觸 【若：接觸到：面板的寬度：offset ===>>> 抵消的意思，使它/2，簡單的說就是：X軸=寬，Y軸=高，邊距：上邊offsetTop；左邊offsetLeft.從什么地方反回到某一個地方接觸一次則記為碰撞一次，從而進(jìn)行讓磚塊抵消】
if ((lf + ball.offsetWidth / 2) >= bk.offsetLeft && (lf + ball.offsetWidth / 2) <= (bk.offsetLeft + bk.offsetWidth) && (bk.offsetTop + bk.offsetHeight) >= ball.offsetTop) {
// 執(zhí)行時 = none時 ===>>> 消失
bk.style.display = "none";
// Y軸的移動速度
speedY = 5;
// 小球與磚塊碰撞抵消后，分?jǐn)?shù)+1（n++）
n++;
score.innerHTML = "分?jǐn)?shù):" + 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) {
// 游戲結(jié)束
gameOver();
}
ball.style.left = lf + 'px';
ball.style.top = tp + "px";
// 讓小球移動是時間參數(shù)隨便給
}, 40)
}
//判斷游戲是否結(jié)束
function gameOver() {
// 彈框提示游戲該結(jié)束
alert("游戲結(jié)束！" + "\n" + score.innerHTML);
// 清除間隔
clearInterval(interId);
}
}
</script>
總結(jié)
以上所述是小編給大家介紹的用JS實(shí)現(xiàn)一個簡單的打磚塊游戲，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
JavaScript 操作字符串的幾種常見方法，需要的朋友可以參考下。2009-11-11
JavaScript動態(tài)創(chuàng)建二維數(shù)組的方法示例
這篇文章主要介紹了JavaScript動態(tài)創(chuàng)建二維數(shù)組的方法,結(jié)合實(shí)例形式分析了javascript動態(tài)創(chuàng)建二維數(shù)組的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-02-02
在平時工作開發(fā)中，大部分開發(fā)人員都花費(fèi)大量的時間在維護(hù)其他人員的代碼。很難從頭開始開發(fā)新代碼，很多情況下都是以他人成果為基礎(chǔ)的，或者新增修改需求，自己寫的代碼也會被其他開發(fā)人員調(diào)用，所以寫好一份高質(zhì)量可維護(hù)的代碼就顯得十分重要。2021-05-05
js判斷輸入是否為正整數(shù)、浮點(diǎn)數(shù)等數(shù)字的函數(shù)代碼
js判斷輸入是否為正整數(shù)、浮點(diǎn)數(shù)等數(shù)字的函數(shù)代碼，學(xué)習(xí)js的朋友可以參考下。2010-11-11
前端js使用xlsx-js-style導(dǎo)出Excel文件并修飾單元格樣式
這篇文章主要給大家介紹了關(guān)于前端js使用xlsx-js-style導(dǎo)出Excel文件并修飾單元格樣式的相關(guān)資料,前端開發(fā)過程中經(jīng)常遇到導(dǎo)出excel的需求,需要的朋友可以參考下2023-08-08
ExpressJS使用express-ws的實(shí)例詳解
這篇文章主要介紹了ExpressJS使用express-ws的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
刪除表格的第一個tbody2008-11-11
JavaScript 實(shí)現(xiàn)簡單的倒計時彈窗DEMO附圖
做一個簡單的設(shè)置網(wǎng)頁，因?yàn)樾枰貑⒃O(shè)備功能，于是就想在上面加一個倒計時彈窗的界面，下面是具體的實(shí)現(xiàn)，大家可以參考下2014-03-03
原生JS實(shí)現(xiàn)匯率轉(zhuǎn)換功能代碼實(shí)例
這篇文章主要介紹了原生JS實(shí)現(xiàn)匯率轉(zhuǎn)換功能代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了bootstrap選項(xiàng)卡使用方法，包括選項(xiàng)卡組件和底部可以切換的選項(xiàng)卡面板使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01