运动-----打砖块小游戏(原生JS面向对象)

最新推荐文章于 2024-04-28 10:55:39 发布

weixin_44447804

最新推荐文章于 2024-04-28 10:55:39 发布

阅读量162

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_44447804/article/details/109576724

版权

通过面向对象,通过修改对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);
    }
}

weixin_44447804

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
运动-----打砖块小游戏(原生JS面向对象)

通过面向对象,通过修改对JS的调用次数可直接设置打砖块游戏的个数小球的反弹速度以及反弹方向都设置了随机值,当小球与砖块发生碰撞时,会使砖块display属性设置为none,从而达到消失的效果.HTML代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫