原生JS实现一个简单的贪吃蛇小游戏_用js写贪吃蛇

作者：笔触狂放9 | 2024-08-19 08:31:20

踩

用js写贪吃蛇

原生JS实现一个简单的贪吃蛇小游戏

利用javascript制作一个简单的贪吃蛇小游戏
- 相信在我们90后的童年中你们肯定在电视上或者在诺基亚手机上玩过一款叫贪吃蛇的小游戏，今天我就用js来完成一个简单的贪吃蛇小游戏。
- - 首先在写代码之前我们得先知道贪吃蛇这个游戏运行的机制是什么:
  - 下面是效果图

利用javascript制作一个简单的贪吃蛇小游戏

相信在我们90后的童年中你们肯定在电视上或者在诺基亚手机上玩过一款叫贪吃蛇的小游戏，今天我就用js来完成一个简单的贪吃蛇小游戏。

首先在写代码之前我们得先知道贪吃蛇这个游戏运行的机制是什么:

(1)首先我们我们一打开游戏，是根据你屏幕的大小来控制贪吃蛇可活动的范围的，页面上会出现蛇还有蛇要吃的蛋。
(2)当你按下上下左右的时候，蛇会跟着你按的方向前进。
(3)当你的蛇头运动到蛋位置的时候，蛋就会消失，并且会在屏幕的另外一个地方重新产生一个蛋，并且你蛇的身子会变长。
(4)当你不小心控制蛇吃到自己的时候，那么游戏就结束了。这些规则相信大家都知道吧，其实代码编写也是按照这个规则顺序来执行的。并不会很难。

下面是蛇的样式和蛇的结构 (个人审美不行所以可能样式并不是那么好看)

	<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: black;
        }
        #pm{
            position: relative;
            box-shadow: 0 0 40px red;
            background: black;
        }
        .snake{
            width: 10px;
            height: 10px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .head{
            background-color: red;
        }
        .body{
            background-color: greenyellow;
        }

        .egg{
            width: 10px;
            height: 10px;
            background-color: magenta;
            border-radius: 50%;
            position: absolute;
        }
    </style>
<body>
    <div id="pm">
        <div class="snake head"></div>
        <div class="snake body"></div>
        <div class="snake body"></div>
    </div>
</body>
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

下面是蛇如何运动，判断有没有吃到蛇蛋等。。。

<script>
    var pm;//贪吃蛇活动范围
    var ck_w;//活动范围的宽
    var ck_h;//活动范围的高
    var establishEgg;//蛇蛋
    //蛇蛋坐标
    var egg_x = 0;
    var egg_y = 0;
    //获取蛇头
    var head = document.querySelector('.head')
    //获取蛇的所有节点
    var snakes = document.querySelectorAll('.snake')
    snakes = [].slice.call(snakes);

    //获取蛇身的每个坐标
    var bodys = [];

    //移动定时器
    var snake_t = null;
    //蛇移动的方向
    var direction = 'right'
    var x = 0,y = 0

    //贪吃蛇可移动范围窗口初始化
    function inpm(){
        pm = document.querySelector("#pm");
        ck_w = parseInt((window.innerWidth - 200) / 10)* 10;
        ck_h = parseInt((window.innerHeight - 200) / 10)* 10;
        pm.style.width = ck_w + 'px';
        pm.style.height = ck_h + 'px';

        //让游戏窗口在浏览器窗口居中
        pm.style.marginLeft = (window.innerWidth - ck_w) / 2 + "px";
        pm.style.marginTop = (window.innerHeight - ck_h) / 2 + "px";
    }
    inpm();

    //创建随机的蛋
    function egg(){
        egg_x = parseInt(Math.random() * (ck_w - 10) / 10) * 10;
        egg_y = parseInt(Math.random() * (ck_h - 10) / 10) * 10;
        //创建蛇蛋
        establishEgg = document.createElement('div');
        establishEgg.className = 'egg';
        establishEgg.style.top = egg_y + 'px';
        establishEgg.style.left = egg_x + 'px';
        pm.appendChild(establishEgg);
    }
    egg();

    //移动
    snake_t = setInterval(function(){
        //移动坐标
        switch(direction){
            case 'right':
                x = x + 10;
                break;
            case 'left':
                x = x - 10;
                break;
            case 'top':
                y = y - 10;
                break;
            case 'bottom':
                y = y + 10;
                break;
        }
        //判断有没有移出屏幕
        if(x > ck_w - 10){
            x = 0;
        }else if(x < 0){
            x = ck_w - 10;
        }
        if(y > ck_h - 10){
            y = 0;
        }else if(y < 0){
            y = ck_h - 10;
        }

        bodys = [];
        //蛇的身子跟着头
        for(var i=snakes.length-1 ; i>0 ; i--){
            var _left = snakes[i-1].style.left
            var _top = snakes[i-1].style.top
            snakes[i].style.left = _left;
            snakes[i].style.top = _top;
            bodys.push({
                x: parseInt(_left),
                y: parseInt(_top)
            })
        }

        //蛇头位置改变
        head.style.left = x + 'px';
        head.style.top = y + 'px';

        //判断头有没有碰到蛋
        if(x == egg_x && y == egg_y){
            //多一块身体
            var _body = document.createElement('div');
            _body.className = 'snake body';
            _body.style.top = y + 'px';
            _body.style.left = x + 'px';
            //添加到页面中
            pm.appendChild(_body);
            //将新创建的身体添加到蛇身体中
            snakes.push(_body);
            //删除被吃掉的蛋
            establishEgg.parentNode.removeChild(establishEgg);
            //重新随机生成一个蛋
            egg();
        }

        //判断是否吃到自己
        var res = bodys.some(function(item){
            return item.x == x && item.y == y;
        })
        if(res){
            clearInterval(snake_t)
            alert('游戏结束')
        }
    },100)

    //方向盘
    document.onkeydown = function(e){
        var e = e||window.event;
        var code = e.keyCode||e.which;
        switch (code){
            case 37:
                if(direction == 'right'){
                    break
                }
                direction = 'left';
                break;
            case 38:
                if(direction == 'bottom'){
                    break;
                }
                direction = 'top';
                break;
            case 39:
                if(direction == 'left'){
                    break;
                }
                direction = 'right';
                break;
            case 40:{
                if(direction == 'top'){
                    break;
                }
                direction = 'bottom';
                break
            }
        }
    }
</script>
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

下面是效果图

这是运行的效果
动态效果
各位靓仔靓妹觉得不错的点个赞。嘻嘻

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】