代码实现ts：
  1 'use strict'
  2 module Main {
  3 
  4     const FloorType = {
  5         space: "space",
  6         snack: "body",
  7         food: "food"
  8     }
  9     const enum Direction {
 10         left = 37,
 11         up = 38,
 12         right = 39,
 13         down = 40
 14     }
 15     interface Block {
 16         pos: Pos
 17         type: string
 18         node: HTMLElement
 19 
 20     }
 21     interface Pos {
 22         x: number
 23         y: number
 24     }
 25     let score: number = 0;
 26     export class FLoor {
 27 
 28         private table: HTMLTableElement
 29         public row: number
 30         public col: number
 31         public blocks: Block[]
 32         private parent: HTMLElement
 33         constructor(options?) {
 34             console.log(options);
 35             options = options || {};
 36             this.table = document.createElement("table");
 37             this.parent = options.parent || document.body;
 38             this.row = options.row || 20;
 39             this.col = options.col || 20;
 40             this.blocks = [];
 41         }
 42         DrawFloor() {
 43 
 44             for (let i = 0; i < this.row; i++) {
 45                 let tr = <HTMLTableRowElement>this.table.insertRow(-1);
 46                 for (let k = 0; k < this.col; k++) {
 47                     let td = <HTMLTableCellElement>tr.insertCell(-1);
 48                     td.className = FloorType.space;
 49                     let block: Block = {
 50                         pos: { x: k, y: i },
 51                         type: FloorType.space,
 52                         node: td
 53                     }
 54                     this.blocks.push(block);
 55                 }
 56             }
 57             this.parent.appendChild(this.table);
 58 
 59         }
 60         DrawGameOver() {
 61             let div = document.createElement("div");
 62             div.className = "gameover";
 63             div.innerHTML = "Game Over score:" + score;
 64             div.style.top = this.row * 20 / 2 - 50 + "px";
 65             div.style.left = this.row * 20 / 2 - 100 + "px";
 66             this.parent.appendChild(div);
 67 
 68         }
 69 
 70         ReDraw(blocks: Block[]) {
 71 
 72             blocks.forEach((block) => { block.node.className = block.type })
 73         }
 74     }
 75     export class Snack {
 76 
 77         private len: number;
 78         private speed: number;
 79         private bodies: Block[];
 80         private direction: Direction;
 81         private floor: FLoor;
 82         private timer?: number;
 83         constructor(floor: FLoor, options?) {
 84             options = options || {};
 85             this.len = options.len || 3;
 86             this.speed = options.speed || 60;
 87             this.direction = options.direction || Direction.right;
 88             this.floor = options.floor || floor;
 89             this.bodies = [];
 90         }
 91         DrawSnack() {
 92 
 93             let setDirection = (e: KeyboardEvent): void => {
 94                 const keycode = e.keyCode;
 95                 switch (keycode) {
 96                     case Direction.left:
 97                         if (this.direction !== Direction.right) {
 98                             this.direction = Direction.left;
 99                         }
100                         break;
101 
102                     case Direction.right:
103                         if (this.direction !== Direction.left) {
104                             this.direction = Direction.right;
105                         }
106                         break;
107                     case Direction.up:
108                         if (this.direction !== Direction.down) {
109                             this.direction = Direction.up;
110                         }
111                         break;
112                     case Direction.down:
113                         if (this.direction !== Direction.up) {
114                             this.direction = Direction.down;
115                         }
116                         break;
117                 }
118             }
119             document.addEventListener('keydown', setDirection, false);
120             for (let i = 0; i < this.len; i++) {
121                 this.bodies.push(this.floor.blocks[i]);
122             }
123             this.RandFood();
124             this.bodies.forEach((block) => { block.type = FloorType.snack });
125             this.floor.ReDraw(this.bodies);
126             this.timer = setInterval(() => { this.Move() }, this.speed);
127         }
128         RandFood() {
129 
130             let p: Pos = {
131                 x: Math.ceil(this.floor.col * Math.random()),
132                 y: Math.ceil(this.floor.row * Math.random()),
133             }
134             let food = this.floor.blocks.filter((block) => {
135                 if (block.pos.x == p.x && block.pos.y == p.y) {
136                     return true;
137                 }
138             });
139             food[0].type = FloorType.food;
140             this.floor.ReDraw(food);
141 
142 
143         }
144         Move() {
145 
146             let head: Block = this.bodies[this.bodies.length - 1];
147             let next: Block = this.next(head);
148             if (!next || next.type == FloorType.snack) {
149                 this.Die();
150                 return;
151             }
152             if (next.type == FloorType.food) {
153                 this.bodies.push(next);
154                 next.type = FloorType.snack;
155                 this.floor.ReDraw(this.bodies);
156                 this.RandFood();
157                 next = this.next(this.bodies[this.bodies.length - 1]);
158                 score++;
159             }
160 
161             let tail: Block = <Block>this.bodies.shift();
162             tail.type = FloorType.space;
163             next.type = FloorType.snack;
164             this.bodies.push(next);
165             this.floor.ReDraw([tail]);
166             this.floor.ReDraw(this.bodies);
167         }
168         Die() {
169             clearInterval(this.timer);
170             this.floor.DrawGameOver();
171         }
172 
173         next(targert: Block): Block {
174             let x: number;
175             let y: number;
176             switch (this.direction) {
177                 case Direction.left:
178                     x = targert.pos.x - 1;
179                     y = targert.pos.y;
180                     break;
181                 case Direction.right:
182                     x = targert.pos.x + 1;
183                     y = targert.pos.y;
184                     break;
185                 case Direction.up:
186                     x = targert.pos.x;
187                     y = targert.pos.y - 1;
188                     break;
189                 case Direction.down:
190                     x = targert.pos.x;
191                     y = targert.pos.y + 1;
192                     break;
193             }
194             return this.floor.blocks.filter((block) => {
195                 if (x == block.pos.x && y == block.pos.y) {
196                     return true;
197                 }
198             })[0];
199 
200         }
201 
202 
203     }
204 
205 }
206 let floor=new Main.FLoor({
207 
208     parent:document.getElementById("box")
209 });
210 floor.DrawFloor();
211 let snack=new Main.Snack(floor);
212 snack.DrawSnack();
html页面

 1 <html lang="en">
 2 
 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         table {
10             border-bottom: 1px solid black;
11             border-right: 1px solid black;
12             border-collapse: collapse;
13         }
14 
15         td {
16             border-left: 1px solid black;
17             border-top: 1px solid black;
18             padding: 10px;
19             
20         }
21 
22         .space {
23             background-color: white;
24         }
25 
26         .body {
27             background-color: black;
28         }
29 
30         .food {
31             background-color: red;
32         }
33         .gameover{
34 
35             position: absolute;
36             font-size: 36px;
37             color: aqua;
38             width:200px;
39             text-align: center;
40         }
41         #box{
42             float: left;
43             position: relative;
44           
45         }
46     </style>
47 </head>
48 
49 <body>
50 
51  <div id="box">
52 
53  </div>
54  <script src="Snack.js"></script>
55 <!-- <script src="Game.js"></script> -->
56 </body>
57 
58 </html>
代码下载：发送邮件to:[email protected]