打砖块游戏（2）

最新推荐文章于 2024-07-22 17:39:45 发布

@大Z

最新推荐文章于 2024-07-22 17:39:45 发布

阅读量1k

点赞数

分类专栏：游戏文章标签：打砖块游戏（2）

本文链接：https://blog.csdn.net/qq_42159848/article/details/82999143

版权

游戏专栏收录该内容

3 篇文章 0 订阅

订阅专栏

整理代码思路

**
之前说了思路，现在还需要行为。
以下是思路，

        1.创建出砖块
             小球 挡板 砖块区域 初始x位置 初始y位置。
        2.需要进行碰撞检测
              1）小球和挡板的碰撞
              2）小球和砖块的碰撞
              3）小球和游览器边框的碰撞

砖块初始化

            creatBrick: function () {    //砖块初始化
            var x = document.documentElement.offsetWidth / 2 //设置居中位置
            var w = 45 * 2, //设置横向间距
            var h = 15 * 2; //设置纵向间距
            for (var i = 1; i <= 8; i++) {  //循环生成div 8层
                for (var j = 0; j < i * 2; j++) {    //每一层的砖块个数为 层数*2-1
                    var brick = document.createElement("div");
                    brick.style.top = (i - 1) * h + 'px';
                    brick.style.left = x - (i * w) + (j * w) + 'px';
                    this.wrap.appendChild(brick);
                }
            }
        }

documentElement是整个节点树的根节点root，即<html 标签
offsetWidth //返回元素的宽度

挡板初始化

            wardMove: function () {     //挡板初始化
            this.ward.style.top = window.innerHeight - 180 + 'px';  //初始化挡板的top位置
            this.ward.style.left = this.x - 60 + 'px';              //初始化挡板的left位置居中
            this.addEvent(document, 'mousemove', this.mouseMove.bind(this)); //监听鼠标移动
        }