用JS实现贪吃蛇小游戏_js简单小游戏

作者：Li_阴宅 | 2024-08-19 08:35:15

踩

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);
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
'运行

蛇

蛇的原理和食物差不多，只不过这里将蛇分成一个个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);
            }
        };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

添加游戏自调用函数

//编写游戏的自调用方便使用
        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)
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
'运行

全部代码

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

结语

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/1001525