用JS实现一个简单的打砖块游戏
话不多说，先看看效果：
HTML架构部分
<!-- HTML结构 --><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><!-- 分数 --><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结构 --><script>/*// 获取canvas元素const canvas = document.getElementById('canvas');// 获取到上下文，创建context对象const ctx = canvas.getContext('2d');let raf;// 定义一个小球const ball = {x: 100, // 小球的 x 坐标y: 100, // 小球的 y 坐标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();}}// 该函数为绘制函数：主要逻辑就是清空画布，重新绘制小球function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);ball.draw();// 进行边界的判断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);*/// 加载窗口 = initwindow.onload = init;function init() {// 获取元素let gameArea = document.getElementsByClassName("game")[0];// 设置10列let rows = 10;// 设置8行let cols = 8;// 砖块与砖块之间的宽度let b_width = 58;// 砖块与砖块之间的高度let b_height = 28;// 用数组的形式来装砖块let bricks = [];// 小球的X轴方向（上下左右来回的运动）let speedX = 5;// 小球Y轴方向（上下左右来回的运动）let speedY = -5;// 在内部里，小球上下左右来回的运动，【小球碰撞到砖块 = null】let interId = null;// 左边距离为0let lf = 0;// 上边距离为0let tp = 0;// 挡板let flap;// 挡板上面的小球let ball;// 分数记录（初始值为0）let n = 0;// 获取开始游戏按钮的元素let st = document.getElementById("start");// 获取再来一局（重新渲染）按钮的元素let rt = document.getElementById("reset");// 获取分数记录的元素let score = document.getElementById("score");score.innerHTML = "分数：" + n;// 提供（渲染）Dom[渲染砖块] 方法renderDom();// 键盘的操作（A与D;askm查询：A：65，需-32，D：68，需+32）方法bindDom();// 进行渲染砖块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";}}// 为开始游戏按钮添加点击事件st.onclick = function () {// 实现小球上下左右不断移动ballMove();st.onclick = null;}// 为再来一局按钮添加点击事件rt.onclick = function () {window.location.reload();}}// 获得砖块的颜色 rgb ===>>> 随机颜色；random() = 随机数方法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 + ")";}// 实现小球上下左右不断移动function ballMove() {ball = document.getElementsByClassName("ball")[0];interId = setInterval(function () {// 左边（X轴方向）的移动速度lf = ball.offsetLeft + speedX;// 上边（Y轴方向）的移动速度tp = ball.offsetTop + speedY;// 用for（）{}循环实现小球与砖块碰撞后从而消失for (let i = 0; i < bricks.length; i++) {let bk = bricks[i];// if进行判断，判断小球与砖块接触 【若：接触到：面板的宽度：offset ===>>> 抵消的意思，使它/2，简单的说就是：X轴=宽，Y轴=高，边距：上边offsetTop；左边offsetLeft.从什么地方反回到某一个地方接触一次则记为碰撞一次，从而进行让砖块抵消】if ((lf + ball.offsetWidth / 2) >= bk.offsetLeft && (lf + ball.offsetWidth / 2) <= (bk.offsetLeft + bk.offsetWidth) && (bk.offsetTop + bk.offsetHeight) >= ball.offsetTop) {// 执行时 = none时 ===>>> 消失 bk.style.display = "none";// Y轴的移动速度speedY = 5;// 小球与砖块碰撞抵消后，分数+1（n++）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";// 让小球移动是时间参数随便给}, 40)}//判断游戏是否结束function gameOver() {// 弹框提示游戏该结束alert("游戏结束！" + "\n" + score.innerHTML);// 清除间隔clearInterval(interId);}}</script>
