用JS实现贪吃蛇小游戏

效果：
在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>贪吃蛇</title>
    <style>
        .map{
            width: 800px;
            height: 600px;
            background-color: black;
            position: relative;
        }
    </style>
</head>
<body>
<div class="map">
</div>

<script>
    (function (){
        var ele =[];
        function Food(x,y,width,height,color){
            this.x=x;
            this.y=y;
            this.width=width||20;
            this.height=height||20;
            this.color=color||"white";
        }
        Food.prototype.init= function(map){
            remove();
            var div=document.createElement('div');
            map.appendChild(div);
            div.style.width=this.width+'px';
            div.style.height=this.height+'px';
            div.style.backgroundColor=this.color;
            this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;
            this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
            div.style.position="absolute";
            div.style.left=this.x+'px';
            div.style.top=this.y+'px';
            ele.push(div);
        }
        function remove(){
            for(var i=0;i<ele.length;i++){
                var eles=ele[i];
                eles.parentNode.removeChild(eles);
                ele.splice(i,1);
            }
        }
        window.Food=Food;
    })();

    (function(){
        var ele=[];
        function snake(width,height,direction){
            this.width=width||20;
            this.height=height||20;
            this.body=[
                {x:3,y:2,color:"white"},
                {x:2,y:2,color:"red"},
                {x:1,y:2,color:"red"},
            ]
            this.direction=direction||"right";
        }
        snake.prototype.init=function(map){
            remove();
            for(var i=0;i<this.body.length;i++){
                var obj=this.body[i];
                var div=document.createElement("div");
                map.appendChild(div);
                div.style.width=this.width+'px';
                div.style.height=this.height+'px';
                div.style.position="absolute";
                div.style.left=obj.x*this.width+'px';
                div.style.top=obj.y*this.height+'px';
                div.style.backgroundColor=obj.color;
                ele.push(div);
            }
        };
        snake.prototype.move=function(food,map,event){
            var i=this.body.length-1;
            for(;i>0;i--){
                this.body[i].x=this.body[i-1].x;
                this.body[i].y=this.body[i-1].y;
            }

            switch(this.direction){
                case "right":this.body[0].x+=1;break;
                case "left":this.body[0].x-=1;break;
                case "top":this.body[0].y+=1;break;
                case "bottom":this.body[0].y-=1;break;
            }
            var snakex=this.body[0].x*this.width;
            var snakey=this.body[0].y*this.height;
            var foodx=food.x;
            var foody=food.y;
            console.log(foodx);
            console.log(snakex);
            if(snakex==foodx&&snakey==foody){
                var last=this.body[this.body.length-1];
                this.body.push({
                    x:last.x,
                    y:last.y,
                    color:last.color
                })
                food.init(map);
            }
        };
        function remove(){
            for(var i=0;i<ele.length;i++){
                var eles=ele[i];
                eles.parentNode.removeChild(eles);
                ele.splice(i,1);
            }
        };
        window.snake=snake;
    })();

    (function(){
        function game(map) {
            this.food= new Food();
            this.snake=new snake();
            this.map=map;
            that=this;
        }
        game.prototype.init=function () {
            this.food.init(this.map);
            this.snake.init(this.map);
            this.run(this.food,this.map);
            this.key();
        }
        game.prototype.run=function(food,map){
            var time=setInterval(function(){
                this.snake.move(food,map);
                this.snake.init(map);
                var snakex=this.snake.body[0].x;
                var snakey=this.snake.body[0].y;
                if(snakex<0||snakex>=40){
                    clearInterval(time);
                    window.alert("失败");
                }
                if(snakey<0||snakey>=30){
                    clearInterval(time);
                    window.alert("失败");
                }
            }.bind(that),100)
        }
        game.prototype.key=function(){
            document.addEventListener("keydown",function (e) {

                switch (e.keyCode) {
                    case 37:this.snake.direction="left";break;
                    case 38:this.snake.direction="bottom";break;
                    case 39:this.snake.direction="right";break;
                    case 40:this.snake.direction="top";break;
                }
            }.bind(that),false)
        }
        window.game=game;
    }());

    var game=new game(document.querySelector(".map"));
    game.init();
</script>

</body>
</html>
原文链接：https://blog.csdn.net/weixin_45959504/article/details/105494337