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

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

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

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

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;ithis.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);
    }
}

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