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

Pascall ·

更新时间:2024-11-13

· 999 次阅读

本文实例为大家分享了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

1024 个赞