用JS实现一个简单的打砖块游戏


Posted in Javascript onDecember 11, 2019

话不多说,先看看效果:

用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实现一个简单的打砖块游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
JsDom 编程小结
Aug 09 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
js消除图片小游戏代码
Dec 11 #Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 #Javascript
基于jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现可编辑的表格
Dec 11 #jQuery
vue element自定义表单验证请求后端接口验证
Dec 11 #Javascript
详解如何在JS代码中消灭for循环
Dec 11 #Javascript
Angular封装表单控件及思想总结
Dec 11 #Javascript
You might like
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
php 生成短网址原理及代码
2014/01/23 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
python中requests使用代理proxies方法介绍
2017/10/25 Python
详解Python核心对象类型字符串
2018/02/11 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
大课间活动实施方案
2014/03/06 职场文书
教职工代表大会主持词
2014/04/01 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
毕业实习证明范本
2015/06/16 职场文书
关于分班的感言
2015/08/04 职场文书
美元符号 $
2022/02/17 杂记
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
Nginx动静分离配置实现与说明
2022/04/07 Servers
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技