原生JS面向对象实现打砖块小游戏

更新时间：2022年09月01日 16:39:04 作者：weixin_44447804

这篇文章主要为大家详细介绍了原生JS面向对象实现打砖块小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现打砖块小游戏的具体代码，供大家参考，具体内容如下

通过面向对象,通过修改对JS的调用次数可直接设置打砖块游戏的个数

小球的反弹速度以及反弹方向都设置了随机值,
当小球与砖块发生碰撞时,会使砖块display属性设置为none,从而达到消失的效果.

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <script type="module">
        import Brick from "./js/Brick.js";
        //可以通过循环创建多个打砖块游戏模块
        var brick = new Brick();
        brick.appendTo("body");
    </script>
</body>
</html>

JS代码1:

export default class Component extends EventTarget{
    elem;
    constructor(){
        super();
        this.elem=this.createElem();
    }
    createElem(){
        if(this.elem) return this.elem;
        let div=document.createElement("div");
        return div;
    }
    appendTo(parent){
        if(typeof parent==="string")parent=document.querySelector(parent);
        parent.appendChild(this.elem);
    }
}

JS代码2:

import Component from "./Component.js";

export default class Brick extends Component{
    box;
    ul;
    li;
    fra;//碎片容器
    bubble;//球
    board;//木板
    start;
    lis=[];
    boxWidth=680;
    liWidth=66;
    liHeight=15;
    fy=-1;
    fx=1;
    static NUM=130;
    static ZHENG=1;
    static FU=-1;
    constructor(){
        super();
        Object.assign(this.elem.style,{
            width:"800px",
            height:"500px",
            border:"orange solid 1px",
            margin:"40px 0 0 200px",
            background:"url('./img/2.jpg')",
            // backgroundSize:"contain",
        });
        this.creatCon();
        // this.sortLi();
        this.creatButton();
        this.creatBoardAndBubble();
        document.body.appendChild(this.elem);
        this.sortLi();
        // this.move();
        this.start.addEventListener("click",e=>this.clickHandler(e))
        // document.addEventListener("keydown",e=>this.keyHandler(e));
    }
    //游戏区域box盒子
    creatCon(){
        this.box=document.createElement("div");
        Object.assign(this.box.style,{
            width:"680px",
            fontSize:"55px",
            textAlign:"center",
            lineHeight:"400px",
            height:"400px",
            position:"relative",
            border:"orangered solid 1px",
            margin:"20px 60px",
            // background:"url('./img/0.jpg') ",
            // backgroundSize:"contain",
        })
        this.creatUl();
        this.creatLi();
        this.elem.appendChild(this.box);
    }
    creatUl(){
        this.ul=document.createElement("ul");
        Object.assign(this.ul.style,{
            listStyle:"none",
        })
    }
    //创建所有li
    creatLi(){
        this.fra=document.createDocumentFragment("div");//碎片容器
        for(var i=0;i<Brick.NUM;i++){
            this.li=document.createElement("li");
            Object.assign(this.li.style,{
                width:"66px",
                height:"15px",
                border:"solid 1px #ccc",
                position:"absolute"
            })
            var r=Math.floor(Math.random()*255);
            var g=Math.floor(Math.random()*255);
            var b=Math.floor(Math.random()*255);
            this.li.style.backgroundColor="rgb("+r+","+g+","+b+")";
            this.fra.appendChild(this.li);
            this.lis.push(this.li)
        }
        this.ul.appendChild(this.fra);
        this.box.appendChild(this.ul);
    }
    //创建滑板和小球
    creatBoardAndBubble(){
        this.bubble=document.createElement("div");
        this.board=document.createElement("div");
        Object.assign(this.bubble.style,{
            width:"15px",
            height:"15px",
            backgroundColor: "red",
            borderRadius:"50%",
            position:"absolute",
            bottom: "10px",
            left:"180px",
        })
        Object.assign(this.board.style,{
            width:"150px",
            height:"10px",
            backgroundColor: "orange",
            borderRadius:"5px",
            position:"absolute",
            bottom:"0",
            left:"160px",
        })
        this.box.appendChild(this.bubble);
        this.box.appendChild(this.board);
        // document.addEventListener("keydown",e=>this.keyHandler(e));
    }
    //创建游戏开始按钮
    creatButton(){
        this.start=document.createElement("button");
        Object.assign(this.start.style,{
            marginLeft:"50px",
            width:"100px",
        })
        this.start.textContent="开始游戏";
        this.elem.appendChild(this.start);
    }
    //摆放li
    sortLi(){
        var leftInit = 0; 
        var topInit = 0; 
        this.cols = parseInt(this.boxWidth / (this.liWidth+2));
        for(var i = 0 ; i < Brick.NUM ; i++){
            var x = leftInit * (this.liWidth+2);
            var y = topInit;
            this.lis[i].style.left = x + "px";
            this.lis[i].style.top = y + "px";
            leftInit++;
            //换行
            if ((i+1)%this.cols==0) {
                leftInit = 0;
                topInit = topInit + this.liHeight;
            }
        }
    }
    clickHandler(e){
        document.addEventListener("keydown",e=>this.keyHandler(e));
        this.move();
    }
    keyHandler(e){
            //左键
            if( e.keyCode === 37 ){
                this.board.style.left = this.board.offsetLeft - 15 + "px";
                if (this.board.offsetLeft<=0) {
                    this.board.style.left = 0;
                }
            }
            //右键
            if( e.keyCode === 39 ){
                this.board.style.left = this.board.offsetLeft + 15 + "px";
                if(this.board.offsetLeft>=this.box.offsetWidth-this.board.offsetWidth){
                    this.board.style.left = this.box.offsetWidth-this.board.offsetWidth +"px";
                }
            }
    }
    move(){
        var timer = setInterval(()=>{
            this.bubble.style.left = this.bubble.offsetLeft + this.fx + "px";
            this.bubble.style.top = this.bubble.offsetTop + this.fy + "px";
            //上边界
            if(this.bubble.offsetTop<=0){
                this.fy = 1;
            }
            //左边界
            if(this.bubble.offsetLeft<=0){
                this.fx = 1;
            }
            //右边界
            if(this.bubble.offsetLeft>=this.box.offsetWidth-this.bubble.offsetWidth){
                this.fx = -1;
            }
            //小球 反弹
            if( this.bubble.offsetTop+this.bubble.offsetHeight >= this.board.offsetTop&&this.bubble.offsetLeft>=this.board.offsetLeft ){
                if(this.bubble.offsetLeft+this.bubble.offsetWidth<=this.board.offsetLeft+this.board.offsetWidth){
                    this.fy = -1;
                }
            if(this.bubble.offsetTop >= this.box.offsetHeight-this.bubble.offsetHeight){
                this.box.appendChild(document.createTextNode("GAME OVER!"));
                clearInterval(timer);
            }
            //小球和砖块的碰撞   以小球为基准  遍历所有砖块
            for( var i =0; i < Brick.NUM ; i++){
                if(this.bubble.offsetTop<=this.lis[i].offsetTop+this.lis[i].offsetHeight&&this.bubble.offsetLeft>=this.lis[i].offsetLeft&&this.bubble.offsetLeft+this.bubble.offsetWidth<=this.lis[i].offsetLeft+this.lis[i].offsetWidth){
                            // this.fy = 3;
                            this.fx=Math.floor(Math.random()*6-3);//
                            this.fy=Math.floor(Math.random()*5+1);
                            console.log(this.fy)
                            this.lis[i].style.display = "none";
                }
            }
        },8);
    }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JS
打砖块

JS实现碰撞检测效果
这篇文章主要为大家详细介绍了JS实现碰撞检测效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
微信小程序实现简单计算器功能
这篇文章主要为大家详细介绍了微信小程序实现简单计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07
微信小程序实战之自定义模态弹窗（8）
这篇文章主要为大家详细介绍了微信小程序实战之自定义模态弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
读懂CommonJS的模块加载
这篇文章主要介绍了CommonJS的模块加载，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
详解webpack babel的配置
本篇文章主要介绍了详解webpack babel的配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
JavaScript 中的运算符和表达式介绍(二)
这篇文章主要介绍了JavaScript 中的运算符和表达式介绍，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
JS添加或修改控件的样式(Class)实现方法
下面小编就为大家带来一篇JS添加或修改控件的样式(Class)实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
关于Layui Table隐藏列问题
今天小编就为大家分享一篇关于Layui Table隐藏列问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
模拟windows平台的上下文菜单效果代码
技术上没什么难的，就是定义一个隐藏的box，当触发上下文事件时显示它，当单击body任意处时又隐藏它。
2011-03-03
JavaScript实现iframe自动高度调整和不同主域名跨域
这篇文章主要介绍了JavaScript实现iframe自动高度调整和不同主域名跨域,作者通过建立一个代理来同步高度调整,需要的朋友可以参考下
2016-02-02

原生JS面向对象实现打砖块小游戏

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具