用JS实现贪吃蛇小游戏

疫情期间呆在家里无聊，于是深入学习了一下JS。自己也模仿写一个贪吃蛇的小游戏，本人刚接触JS不久如有错误，望评论区指出。
因为一般贪吃蛇游戏中的CSS样式较为简单，所以这里主要讲一下JS的写法。

食物生成

贪吃蛇中的食物是随机生成的且可以删除，这就需要我们利用js生成div。方便生成与删除，首先将食物存放进数组中方便删除，在利用随机数函数生成在地图的其他位置

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";//颜色
            //还可以在加入其他style
        }
        //食物原型
        Food.prototype.init= function(map){
            //先删除小球
            remove();
            var div=document.createElement('div');//创建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);
            }
        }

蛇

蛇的原理和食物差不多，只不过这里将蛇分成一个个body，方便生成和调用

var ele=[];
        function snake(width,height,direction){
        //设置蛇的样式
            this.width=width||20;//每一个body的宽度
            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;//将i-1的body的位置穿给i
                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];//获取最后一个body
                //增加body
                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);
            }
        };

添加游戏自调用函数

//编写游戏的自调用方便使用
        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)
        }

全部代码

<!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>

结语

这个方法是跟着黑马程序员学习的，里面有许多原型用法，下次准备详细介绍JS中原型的写法，如有错误请在评论区指出，有疑惑的可以私聊我，谢谢。