JavaScript小游戏-贪吃蛇

最新推荐文章于 2024-05-02 14:46:08 发布
toby爱cv
最新推荐文章于 2024-05-02 14:46:08 发布
阅读量179
点赞数
文章标签： javascript 前端
本文链接：https://blog.csdn.net/weixin_49097655/article/details/131256694
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box;}
        .box{width: 602px;height: 602px;margin: 50px auto;position: relative;border: 1px solid black;}
        .box > div{width: 15px;height: 15px;border: 1px solid #ccc;position: absolute;left: 0;top: 0;}
        .box .body{background: gray;}
        .box .header{background: red;}
        .box > span{width: 15px;height: 15px;position: absolute;left: 0;top: 0;}
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        class Snake{
            constructor(){
                this.snake=[{x:45,y:15},{x:30,y:15},{x:15,y:15}];
                this.d='right';
                this.mapObj={left:'right',top:'bottom',right:'left',bottom:'top'};
                this.init();
            }
            // 初始小蛇
            init(){
                let div;
                this.snake.forEach((val,i)=>{
                    if(i===0){
                        div=document.createElement('div');
                        div.className='header';
                    }else{
                        div=document.createElement('div');
                        div.className='body';
                    }
                    div.style.left=val.x+'px';
                    div.style.top=val.y+'px';
                    m.box.appendChild(div);
                })
                this.t=setInterval(()=>{
                    this.move();
                },100)
            }
            // 自动移动
            move(){
                for(let i=this.snake.length-1;i>0;i--){
                    this.snake[i].x=this.snake[i-1].x;
                    this.snake[i].y=this.snake[i-1].y;
                }
                switch(this.d){
                    case 'left':this.snake[0].x-=15;break;
                    case 'right':this.snake[0].x+=15;break;
                    case 'top':this.snake[0].y-=15;break;
                    case 'bottom':this.snake[0].y+=15;break;
                }
                const div=document.querySelectorAll('.box div');
                for(let i=0;i<div.length;i++){
                    div[i].style.left=this.snake[i].x+'px';
                    div[i].style.top=this.snake[i].y+'px';
                }
                this.eat();
                // 界面控制，撞到界面游戏结束
                        if(this.snake[0].x<0||this.snake[0].x>585||this.snake[0].y<0||this.snake[0].y>585){
                    alert('game over!');
                    clearInterval(this.t);
                }
                // 蛇头碰到蛇身，游戏结束
                for(let i=1;i<this.snake.length;i++){
                    if(this.snake[i].x===this.snake[0].x&&this.snake[i].y===this.snake[0].y){
                        alert('game over!');
                        clearInterval(this.t);
                    }
                }
            }
            // 吃到食物后生成一节
            create(){
                const div=document.createElement('div');
                div.className='body';
                div.style.left=this.snake[this.snake.length-1].x+'px';
                div.style.top=this.snake[this.snake.length-1].y+'px';
                m.box.appendChild(div);
            }
            // 吃随机生成的食物
            eat(){
                if(this.snake[0].x===f.position.x&&this.snake[0].y===f.position.y){
                    const food=document.querySelector('span');
                    m.box.removeChild(food);
                    this.snake.push({
                        x:this.snake[this.snake.length-1].x,
                        y:this.snake[this.snake.length-1].y
                    })
                    f.create();
                    this.create();
                }
            }
            // 键盘控制方向
            direction(orient){
                if(this.mapObj[this.d]!=orient) this.d=orient;
            }
        }
        class Food{
            constructor(){
                this.position={}
                this.create();
            }
            // 随机生成食物
            create(){
                const position_arr=[];
                // 创建一个数组存放可以生成食物的位置，避免与蛇的各个节点重复
                for(let j=0;j<m.positionArr.length;j++){
                    let flag=false;
                    for(let i=0;i<s.snake.length;i++){
                        if(s.snake[i].x===m.positionArr[j].x&&s.snake[i].y===m.positionArr[j].y){
                            flag=true;
                        }
                    }
                    if(flag) continue; 
                    position_arr.push(m.positionArr[j]);
                }
                const food=document.createElement('span');
                const index=random(0,position_arr.length-1);
                food.style.background=getColor();
                food.style.left=position_arr[index].x+'px';
                food.style.top=position_arr[index].y+'px';
                m.box.appendChild(food);
                this.position.x=position_arr[index].x;
                this.position.y=position_arr[index].y;
            }
        }
        class Map{
            constructor(){
                this.box=document.querySelector('.box');
                this.positionArr=[];
                this.create();
            }
            create(){
                for(let i=0;i<40;i++){
                    for(let j=0;j<40;j++){
                        this.positionArr.push({x:i*15,y:j*15});
                    }
                }
            }
        }
        const m=new Map();
        const s=new Snake();
        const f=new Food();
        document.onkeydown=function(eve){
            const e=eve||window.event;
            const keyCode=e.keyCode||e.which;
            switch(keyCode){
                case 37:s.direction('left');break;
                case 38:s.direction('top');break;
                case 39:s.direction('right');break;
                case 40:s.direction('bottom');break;
            }
        }
        function random(a,b){
            return Math.floor(Math.random()*(b-a+1)+a);
        }
        function getColor(){
            return `rgb(${random(120,255)},${random(120,255)},${random(120,255)})`;
        }
    </script>
</body>
</html>