原生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 }())

 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 }())

 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 }())

 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>

遊戲game.js集成了food.js和snake.js---然後在snake.html中用game.init就好了

點選這裡，我把原始碼上傳到碼雲了