用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);
    */
    // 加载窗口 = init
    window.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;
      // 左边距离为0
      let lf = 0;
      // 上边距离为0
      let 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>

总结

以上所述是小编给大家介绍的用JS实现一个简单的打砖块游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

时间: 2019-12-10

js实现九宫格拼图小游戏

效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */ body{ width: 100

JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】

本文实例讲述了JavaScript扫雷游戏.分享给大家供大家参考,具体如下: 翻出年初写的游戏贴上来,扫雷相信大家都玩过,先上图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or

JS实现的贪吃蛇游戏完整实例

本文实例讲述了JS实现的贪吃蛇游戏.分享给大家供大家参考,具体如下: 思想: 1.设计蛇:属性有宽.高.方向.状态(有多少节),方法:显示,跑 2.设计食物:属性宽.高 3.显示蛇:根据状态向地图里加元素 4.蛇跑起来:下一节到前一节的位置,蛇头根据方向变,删除原来的蛇,新建蛇:当出界时,死亡,初始化:当蛇头吃到自己的时候,死亡,初始化 5.食物被吃掉,蛇加一节,去掉原来的食物,生成新的食物 6.添加定时器,绑定按键 完整示例: <!doctype html> <html lang=&q

利用原生js实现html5小游戏之打砖块(附源码)

前言 PS:本次项目中使用了大量 es6 语法,故对于 es6 语法不太熟悉的小伙伴最好能先了解一些基本的原理再继续阅读. 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语法,个人认为以后 es6 语法会越来越普及,所以算是提前熟悉语法使用技巧.小游戏的实现逻辑上可能并不完善,也许会有一些 bug ,但是毕竟只是为了提升编程能力与技巧,希望大家不要太较

javascript HTML5 canvas实现打砖块游戏

本文实例编写的一个小游戏,基于HTML5中的canvas.游戏主要是小球反弹击打小方块.在代码中主要实现了小方块的生成,键盘键事件的监听,小球的移动和碰壁之后的反弹以及怎样消除小方块等方法.代码使用到了一个js脚本库 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,再对div标签加上一些样式比如border和border-radius,这样一来使其看上去像手机,利于观看. <div id="main"> <!--将画布嵌在div块

原生javascript实现连连看游戏

本文实例为大家分享了js实现连连看游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>连连看</title> <meta charset="gbk"> <style type="text/css"> body { text-align: center; } .text {text-align: center; margi

原生JavaScript实现连连看游戏(附源码)

向大家推荐一款原生JavaScript版连连看游戏,源码下载,首页如下图所示:  首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>

原生JavaScript编写canvas版的连连看游戏

本文实例为大家分享了JavaScript编写canvas版的连连看游戏的具体实现代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ /*border: 1px solid #D1D1D1; */ overflow: hidden; pos

原生javascript制作的拼图游戏实现方法详解

本文实例讲述了原生javascript制作的拼图游戏实现方法.分享给大家供大家参考,具体如下: 实现方法 //1.让所有的li(在ul里)可以拖拽 //2.交换li的位置  计算背景图位置 //1.让所有的li(在ul里)可以拖拽 //根据鼠标的位置,计算目标li的序号 //根据行号和列号计算下标 //行号*3+列号 //2.归位 此处没有背景图  请自行添加 css样式 <!DOCTYPE html> <html> <head> <meta charset=&q

原生javascript制作贪吃蛇小游戏的方法分析

本文实例讲述了原生javascript制作贪吃蛇小游戏的方法.分享给大家供大家参考,具体如下: <!--1. 创建场景 --> <!-- 2.定义初始数据  以及随机食物 --> <!-- 3.控制贪吃蛇方向 --> <!-- 4.判断位置以及和随机食物的位置 增加贪吃蛇长度 --> HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta char

javascript实现2048游戏示例

原生javascript代码写的2048游戏.建议在谷歌浏览器下跑. 2048.html 复制代码 代码如下: <!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>2048

使用非html5实现js板连连看游戏示例代码

向大家分享一款如何实现js版连连看游戏,如下图所示: 首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http

原生javascript实现文件异步上传的实例讲解

效果图: 代码:(demo33.jsp) <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>demo33.jsp</title> </head> <body> <label for="text">名称</label>

原生javascript实现的全屏滚动功能示例

本文实例讲述了原生javascript实现的全屏滚动功能.分享给大家供大家参考,具体如下: 原理: 1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度 2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题. 废话不多说,直接上代码 html代码: <div id="wrap"> <div id="main" style="top: 0;"> <div class="content num

原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】

本文实例讲述了原生JavaScript实现的淘宝轮播图效果.分享给大家供大家参考,具体如下: 轮播图是我们学习原生js的必经之路 它包含很多基本知识的运用,像this的使用,DOM的操作,还有setInterval的使用和清除,浮动与定位等等,很好的考察了我们的基础知识牢不牢固, 话不多说,直接上图 HTML代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF