代码实现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]
原文地址：https://www.cnblogs.com/xiaotiejiang/p/9233388.html
时间： 2024-10-12 07:01:42