JavaScrip写的贪吃蛇

Posted 2021-01-16 zhaozhaoli

原生javascript写的

贪吃蛇这个游戏好像就如同hello world一样，简单又有代表性，以前我学习c语言的时候，第一个做的趣味小游戏也是贪吃蛇---------------------------------

 1 //贪吃蛇的食物模块
 2 (function(){
 3     var elements = []
 4     // 创建一个食物的构造函数
 5     function Food(x,y,width,height,color){
 6         // 食物方块的坐标
 7         this.x = x || 0;
 8         this.y = y || 0;
 9         // 没有传宽度和高度默认20
10         this.width = width || 20;    
11         this.height = height || 20;
12     
13         this.color = color || ‘green‘;
14     }
15     // 添加初始化方法
16     Food.prototype.init = function(map){
17         remove()
18         // 创建食物方块，添加到地图map里
19         var div = document.createElement(‘div‘)
20         map.appendChild(div);
21         // 设置样式和位置
22         div.style.width = this.width + ‘px‘;
23         div.style.height = this.height + ‘px‘;
24         div.style.backgroundColor = this.color;
25         div.style.position = "absolute";
26         this.x = Math.floor(map.offsetWidth/this.width*Math.random())*this.width;
27         this.y = Math.floor(map.offsetHeight/this.height*Math.random())*this.height;
28         div.style.left = this.x + ‘px‘;
29         div.style.top = this.y + ‘px‘;
30         // 每次创造出一个食物方块就把它push到一个数组中
31         // 删除的时候好找
32         elements.push(div)
33     }
34     // 移除食物函数
35     function remove(){
36         for(var i = 0; i<elements.length; i++){
37             var ele = elements[i]
38             // 找到该食物方块的父节点，从父节点删除该方块
39             elements[i].parentNode.removeChild(ele)
40             // 删除数组中的值
41             elements.splice(i,1)
42         }
43     }
44     // 将构造函数暴露给window，不然new不到Food
45     window.Food = Food;
46 }())

food.js

 1 (function(){
 2     var element = []
 3     // 蛇的构造函数
 4     function Snake(width,height,direction){
 5         this.width = width || 20;
 6         this.height = height || 20;
 7         this.direction = direction || ‘right‘
 8         this.body = [
 9             {x:3,y:1,color:‘red‘},
10             {x:2,y:1,color:‘orange‘},
11             {x:1,y:1,color:‘orange‘}
12         ]
13     }
14     Snake.prototype.init = function(map){
15         // 在地图上画蛇之前把之情画的蛇删除
16        remove()
17     //    在地图上画出蛇
18         for(var i = 0; i < this.body.length; i++){
19             var div = document.createElement(‘div‘);
20             map.appendChild(div)
21             div.style.backgroundColor = this.body[i].color;
22             div.style.width = this.width + ‘px‘;
23             div.style.height = this.height + ‘px‘;
24             div.style.position = "absolute"
25             div.style.left = this.body[i].x * this.width +‘px‘
26             div.style.top = this.body[i].y* this.width +‘px‘
27             element.push(div)
28         }
29         
30     }
31     // 蛇每移动一次就要在地图上画一次
32     // 即move（）后就要init（）
33     // 如果不删除之前画的蛇，就会越来越长
34     var remove = function(){
35         var i = element.length -1
36         for( ; i >=0; i--){
37             var ele = element[i];
38             element[i].parentNode.removeChild(ele)
39             element.splice(i,1)
40         }
41     }
42     // 蛇移动方法
43     Snake.prototype.move = function(food,map){
44         var i = this.body.length -1;
45         // 蛇身的改变
46         for( ; i>0; i--){
47             this.body[i].x = this.body[i-1].x;
48             this.body[i].y = this.body[i-1].y
49         }
50         // 根据方向改变蛇头值
51         switch(this.direction){
52             case ‘right‘: this.body[0].x +=1;break;
53             case ‘left‘: this.body[0].x -=1;break;
54             case ‘up‘: this.body[0].y -=1;break;
55             case ‘down‘: this.body[0].y +=1;break;
56         }
57         // 每次移动后蛇头坐标
58         var headX = this.body[0].x*this.width;
59         var headY = this.body[0].y*this.height;
60         // 吃到食物后
61         if(headX == food.x && headY ==food.y){
62             var lastBody = this.body[this.body.length-1];
63             // 把最后一节蛇身复制，push到蛇的body中
64             this.body.push({
65                 x:lastBody.x,
66                 y:lastBody.y,
67                 color:lastBody.color
68             })
69             // 再画一个食物
70             food.init(map)
71         }
72     }
73     window.Snake = Snake;
74 }())

snake.js

 1 (function(){
 2     // 总的接口
 3     function Game(map){
 4         this.food = new Food;
 5         this.snake = new Snake;
 6         this.map = map
 7     }
 8     // 初始化
 9     Game.prototype.init = function(){
10         this.food.init(this.map);
11        this.snake.init(this.map);  
12         this.runSnake(this.map,this.food);
13         this.keyDown()
14     }
15     // 让蛇跑起来
16     Game.prototype.runSnake = function(map,food){
17         var timeId = setInterval(()=>{
18             this.snake.move(food,map);
19             this.snake.init(map);
20             var mapX = map.offsetWidth / this.snake.width -1;
21             var mapY = map.offsetHeight / this.snake.height -1;
22             var headX = this.snake.body[0].x;
23             var headY = this.snake.body[0].y;
24             console.log(‘蛇头‘+headX+‘,‘+headY+‘--------地图‘+mapX+mapY)
25             // 如果撞到边框，停止定时器，游戏结束
26             if(headX < 0 || headX >mapX || headY < 0 || headY > mapY){
27                 alert(‘err‘)
28                 clearInterval(timeId)
29             }
30         },100)
31     }
32     // 按下按键改变方向
33     Game.prototype.keyDown = function(){
34         // 注册一个keydown事件
35         document.addEventListener(‘keydown‘,(e)=>{
36            switch(e.keyCode){
37             case 65: this.snake.direction = ‘left‘;break;
38             case 68: this.snake.direction = ‘right‘;break;
39             case 87: this.snake.direction = ‘up‘;break;
40             case 83: this.snake.direction = ‘down‘;break;
41            }
42         },false)
43     }
44 window.Game = Game;
45 }())

game.js

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         /* 地图样式 */
10     .map {
11         width: 800px;
12         height: 500px;
13         background: #ccc;
14         position: relative;
15         margin: auto;
16       
17     }
18     
19     </style>
20 </head>
21 <body>
22     <!-- 首先在页面上画出一个框框作为地图 -->
23     <div class=‘map‘>
24       
25     </div>
26     <!-- 引入食物组件 -->
27     <script src="./food.js"></script>
28     <!-- 引入小蛇组件 -->
29     <script src="./snake.js"></script>
30     <!-- 游戏初始化组件 -->
31     <script src="./game.js"></script>
32     <script>
33         // 通过document选择器把地图选中
34         var game = new Game(document.querySelector(‘.map‘));
35         // 初始化，详见game.js
36         game.init();
37        
38     </script>
39 </body>
40 </html>

snake.html

 

游戏game.js集成了food.js和snake.js---然后在snake.html中用game.init就好了

点击这里，我把源码上传到码云了