- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章javascript贪吃蛇游戏设计与实现由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
本文为大家分享了javascript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 。
效果图 。
设计 。
贪吃蛇游戏是一款休闲益智类游戏。既简单又耐玩。该游戏通过控制蛇头方向吃蛋,从而使得蛇变得越来越长.
玩法:
点击屏幕控制蛇的移动方向,寻找吃的东西,每吃一口就能得到一定的积分,而且蛇的身子会越吃越长,身子越长玩的难度就越大,不能咬到自己的身体,更不能咬自己的尾巴,等到了一定的分数,游戏胜利.
设计:
首先需要创建一个棋盘,然后需要生成一条贪吃蛇,接着随机生成食物。每当蛇吃到食物的时候,随机生成新的食物,蛇头吃到自己的身体的时候游戏结束.
棋盘设计:
元素 :行数,列数,基础细胞(可表现为空,食物,蛇身体); 。
属性 :创建棋盘,清空棋盘; 。
基础细胞设计:
属性 :重设颜色,重设大小; 。
食物:
需求 : 需要在棋盘剩余空白位置随机位置生成食物; 。
贪吃蛇:
元素 : 位置集合(数组),移动速率,移动方向 。
需求: 初始随机生成只有一节的贪吃蛇,定时器函数(根据移动方向求得下一个要移动到的位置,需要注意的是到达边界后进行特殊处理。判断下个位置是否为蛇本身,如果是蛇就吃到自己,游戏结束。接着将下个位置添加到蛇位置集合内,最后判断下个位置 是否与食物相同,如果相同,则重现生成新的食物,否则移除蛇尾).
方向控制:
本游戏使用点击屏幕,控制蛇移动方向.
实现 。
cell.js 。
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
|
/*
* @Author: ls
* @Date: 2020-09-01 18:23:09
* @LastEditTime: 2020-09-16 14:23:37
* @LastEditors: Please set LastEditors
* @Description: 基础细胞类
* @FilePath: \snake\assets\cell.js
*/
cc.Class({
extends: cc.Component,
properties: {},
onLoad() {},
/**
* @param {*} cellColor
*/
setCellColor(cellColor =
new
cc.color(255, 255, 255, 255)) {
this
.node.getChildByName(
'color'
).color = cellColor;
},
/**
* @param {*} cellSize
*/
setCellPos(cellSize =
new
cc.v2(20, 20)) {
this
.node.width = cellSize.x;
this
.node.height = cellSize.y;
},
});
|
guideCtrl.js 。
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
|
/*
* @Author: ls
* @Date: 2020-09-03 18:09:18
* @LastEditTime: 2020-09-14 08:55:47
* @LastEditors: Please set LastEditors
* @Description: 引导类
* @FilePath: \snake\assets\guideCtrl.js
*/
cc.Class({
extends: cc.Component,
properties: {
step: [cc.Node],
startToggle: cc.Toggle,
},
onLoad() {
this
.startGuide();
this
.startToggle.isChecked =
false
;
},
/**
* 开始引导
*/
startGuide() {
if
(!
this
.step.length) {
this
.node.destroy();
return
;
}
for
(let index = 0, length =
this
.step.length; index < length; index++) {
this
.step[index].active =
false
;
}
this
._step = 0;
this
.step[0].active =
true
;
},
/**
* 下一个引导页面
*/
nextGuide() {
this
._step++;
if
(
this
._step <
this
.step.length - 1) {
this
.step[
this
._step].active =
true
;
this
.step[
this
._step - 1].active =
false
;
if
(
this
._step ===
this
.step.length - 2) {
this
.step[
this
._step + 1].active =
true
;
}
}
else
{
this
.node.active =
false
;
}
},
callback:
function
(toggle) {
cc.sys.localStorage.setItem(
'isStart'
, toggle.isChecked);
},
});
|
gameCtrl.js 。
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
|
/*
* @Author: ls
* @Date: 2020-09-01 15:44:33
* @LastEditTime: 2020-09-16 14:23:18
* @LastEditors: Please set LastEditors
* @Description: 游戏导演类
* @FilePath: \snake\assets\gameController.js
*/
var
noneColor =
new
cc.color(120, 120, 120, 255);
var
foodColor =
new
cc.color(254, 168, 23, 255);
var
snakeColor =
new
cc.color(243, 60, 66, 255);
cc.Class({
extends: cc.Component,
properties: {
// 棋盘
node_grid: cc.Node,
// 分数
lab_score: cc.Label,
// 最好分数
lab_best: cc.Label,
// 开始
node_start: cc.Node,
// 新人引导
node_guide: cc.Node,
// 结束
node_over: cc.Node,
// 基础类
cellPrefab: cc.Prefab,
// 移动速度
mSpeed: 5,
// 列数
colCount: 30,
// 行数
rowCount: 30,
},
onLoad() {
// 初始化方向
// 静止、上、下、左、右
// (0,0)、(0,1)、(0,-1)、(-1,0)、(1,0)
this
._direction = { x: 0, y: 0 };
// 初始化细胞大小
this
._cellSize = { x: 10, y: 10 };
this
._map = [];
this
.initCellPool();
this
.onCreateMap();
// 显示开始游戏界面
this
.showStartGame();
},
/**
* 初始化细胞对象池
*/
initCellPool() {
this
.cellPool =
new
cc.NodePool();
let initCount =
this
.rowCount *
this
.colCount;
for
(let i = 0; i < initCount; i++) {
let cell = cc.instantiate(
this
.cellPrefab);
// 创建节点
this
.cellPool.put(cell);
// 通过 put 接口放入对象池
}
},
/**
* 创建地图
*/
onCreateMap() {
this
._map = [];
let node_bg =
this
.node_grid.getChildByName(
'background'
);
this
._cellSize = { x: node_bg.width /
this
.rowCount, y: node_bg.height /
this
.colCount };
for
(
var
y = 0; y <
this
.colCount; y++) {
for
(let x = 0; x <
this
.rowCount; x++) {
var
obj = {};
obj.x = x;
obj.y = y;
obj.node =
this
.createCell(node_bg, x, y);
this
._map.push(obj);
}
}
},
/**
* 从对象池请求对象
* @param {*} parentNode
*/
createCell:
function
(parentNode, x, y) {
let cell =
null
;
if
(
this
.cellPool.size() > 0) {
// 通过 size 接口判断对象池中是否有空闲的对象
cell =
this
.cellPool.get();
}
else
{
// 如果没有空闲对象,也就是对象池中备用对象不够时,我们就用 cc.instantiate 重新创建
cell = cc.instantiate(
this
.cellPrefab);
}
cell.getComponent(
'cell'
).setCellPos(
this
._cellSize);
cell.x =
this
._cellSize.x * x;
cell.y =
this
._cellSize.y * y;
cell.parent = parentNode;
return
cell;
},
/**
* 还原地图
*/
clearMap() {
for
(let index = 0, length =
this
._map.length; index < length; index++) {
this
._map[index].node.getComponent(
'cell'
).setCellColor(noneColor);
}
},
/**
* 显示开始界面
*/
showStartGame() {
this
.node_over.active =
false
;
this
.node_start.active =
true
;
},
/**
* 显示结束界面
*/
showOverGame() {
this
.node_start.active =
false
;
this
.node_over.active =
true
;
},
/**
* 游戏开始
*/
startGame() {
this
.node_guide.active =
false
;
this
.node_over.active =
false
;
this
.node_start.active =
false
;
this
.lab_score.node.active =
true
;
this
.lab_best.node.active =
true
;
this
.node_grid.active =
true
;
// 是否首次进入界面
if
(!cc.sys.localStorage.getItem(
'isStart'
)) {
this
.node_guide.active =
true
;
}
this
._score = 0;
// 更新最高分数
this
.updateBest();
this
._canControl =
true
;
this
._direction = { x: 1, y: 0 };
this
._snakeGrid = [];
this
._foodGrid = {};
// 初始化触摸事件
this
.openTouchEvent();
this
.clearMap();
this
.onCreateSnake();
this
.onCreateFood();
// 开启移动
this
.schedule(
this
.move, 1 /
this
.mSpeed);
},
/**
* 更新分数
*/
updateBest() {
this
._best = cc.sys.localStorage.getItem(
'best'
);
if
(
this
._best) {
if
(
this
._best <
this
._score) {
this
._best =
this
._score;
cc.sys.localStorage.setItem(
'best'
,
this
._best);
}
}
else
{
this
._best =
this
._score;
cc.sys.localStorage.setItem(
'best'
,
this
._best);
}
this
.lab_best.string =
this
._best;
},
/**
* 游戏结束
*/
gameOver() {
// 是否能控制 蛇改变移动方向
this
._canControl =
false
;
this
.unschedule(
this
.move);
this
.closeTouchEvent();
this
.clearMap();
this
.showOverGame();
},
/**
* 创建蛇
*/
onCreateSnake() {
let x = ~~(Math.random() *
this
.rowCount);
let y = ~~(Math.random() *
this
.colCount);
for
(let index = 0, length =
this
._map.length; index < length; index++) {
if
(
this
._map[index].x === x &&
this
._map[index].y === y) {
this
._map[index].node.getComponent(
'cell'
).setCellColor(snakeColor);
this
._snakeGrid.push(
this
._map[index]);
}
}
},
/**
* 创建食物
*/
onCreateFood() {
if
(
this
._map.length !==
this
._snakeGrid.length) {
let r = ~~(Math.random() * (
this
._map.length -
this
._snakeGrid.length));
let subGrid = [];
for
(let i = 0; i <
this
._map.length; i++) {
subGrid.push(
this
._map[i]);
}
for
(let m = 0; m < subGrid.length; m++) {
for
(let n = 0; n <
this
._snakeGrid.length; n++) {
if
(subGrid[m].x ===
this
._snakeGrid[n].x && subGrid[m].y ===
this
._snakeGrid[n].y) {
subGrid.splice(m, 1);
if
(m > 0) {
m--;
}
}
}
}
for
(let index = 0; index < subGrid.length; index++) {
if
(index === r) {
this
._foodGrid = subGrid[index];
this
._foodGrid.node.getComponent(
'cell'
).setCellColor(foodColor);
// 增加分数
this
._score++;
this
.lab_score.string =
this
._score;
}
}
}
},
/**
* 打开触摸
*/
openTouchEvent() {
var
self =
this
;
this
.node.on(
cc.Node.EventType.TOUCH_START,
function
(touch) {
if
(self._canControl) {
self._canControl =
false
;
let touchPos = self.node.convertToNodeSpaceAR(touch.getLocation());
self._direction = self.getTouchDirection(touchPos);
this
.scheduleOnce(
function
() {
self._canControl =
true
;
}, 1 /
this
.mSpeed);
}
},
this
);
},
/**
* 关闭触摸
*/
closeTouchEvent() {
this
.node.off(cc.Node.EventType.TOUCH_START,
this
);
},
/**
* 获取选择的方向
* @param {* 触摸位置} touchPos
*/
getTouchDirection(touchPos) {
// 获取向量长度
function
getABS(pos) {
return
Math.sqrt(pos.x * pos.x + pos.y * pos.y);
}
// 获取横向 方向
function
getLandscape(touchPos) {
if
(touchPos.x > 0) {
cc.log(
'更改为 向 右 移动'
);
return
{ x: 1, y: 0 };
}
else
{
cc.log(
'更改为 向 左 移动'
);
return
{ x: -1, y: 0 };
}
}
// 获取竖向 方向
function
getPortrait(touchPos) {
if
(touchPos.y > 0) {
cc.log(
'更改为 向 上 移动'
);
return
{ x: 0, y: 1 };
}
else
{
cc.log(
'更改为 向 下 移动'
);
return
{ x: 0, y: -1 };
}
}
if
(getABS(
this
._direction) === 1) {
cc.log(
'蛇 正在移动'
);
if
(
this
._direction.y === 1) {
cc.log(
'蛇 正在向 上 移动'
);
return
getLandscape(touchPos);
}
else
if
(
this
._direction.y === -1) {
cc.log(
'蛇 正在向 下 移动'
);
return
getLandscape(touchPos);
}
else
if
(
this
._direction.x === -1) {
cc.log(
'蛇 正在向 左 移动'
);
return
getPortrait(touchPos);
}
else
if
(
this
._direction.x === 1) {
cc.log(
'蛇 正在向 右 移动'
);
return
getPortrait(touchPos);
}
}
else
{
cc.log(
'蛇 未开始 或 停止了移动。此时修改方向无效!'
);
}
},
/**
* 移动
*/
move() {
let nextGrid = {};
nextGrid.x =
this
._snakeGrid[
this
._snakeGrid.length - 1].x +
this
._direction.x;
nextGrid.y =
this
._snakeGrid[
this
._snakeGrid.length - 1].y +
this
._direction.y;
if
(
this
._direction.x === 1) {
// 向右
if
(nextGrid.x >
this
.colCount - 1) {
nextGrid.x = 0;
}
}
else
if
(
this
._direction.x === -1) {
// 向左
if
(nextGrid.x < 0) {
nextGrid.x =
this
.colCount - 1;
}
}
else
if
(
this
._direction.y === 1) {
// 向上
if
(nextGrid.y >
this
.rowCount - 1) {
nextGrid.y = 0;
}
}
else
if
(
this
._direction.y === -1) {
// 向下
if
(nextGrid.y < 0) {
nextGrid.y =
this
.rowCount - 1;
}
}
for
(let m = 0, l =
this
._map.length; m < l; m++) {
if
(
this
._map[m].x === nextGrid.x &&
this
._map[m].y === nextGrid.y) {
nextGrid =
this
._map[m];
}
}
for
(let n = 0, length =
this
._snakeGrid.length; n < length; n++) {
if
(nextGrid.x ===
this
._snakeGrid[n].x && nextGrid.y ===
this
._snakeGrid[n].y) {
this
.gameOver();
// return false;
}
}
nextGrid.node.getComponent(
'cell'
).setCellColor(snakeColor);
this
._snakeGrid.push(nextGrid);
if
(nextGrid.x ===
this
._foodGrid.x && nextGrid.y ===
this
._foodGrid.y) {
this
.onCreateFood();
}
else
{
let startGrid =
this
._snakeGrid.shift();
startGrid.node.getComponent(
'cell'
).setCellColor(noneColor);
}
},
});
|
完整代码:js贪吃蛇游戏 。
更多有趣的经典小游戏实现专题,分享给大家:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我.
原文链接:https://blog.csdn.net/qq_14965517/article/details/108621493 。
最后此篇关于javascript贪吃蛇游戏设计与实现的文章就讲到这里了,如果你想了解更多关于javascript贪吃蛇游戏设计与实现的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
关闭。这个问题需要更多focused .它目前不接受答案。 想改善这个问题吗?更新问题,使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
.NET 框架:4.5.1 我在 Blend for visual studio 2015 中遇到一个奇怪的错误,我找不到它的来源。 如果我在 VS 中打开我的 WPF 解决方案,它会加载并运行良好。
我经常遇到这样的问题,与 Hierarchical RESTful URL design 非常相似 假设该服务仅提供用户上传文档。 POST, GET /accounts PUT, DELETE /a
在 Rails 应用程序中,我使用 devise 来管理我的用户,而我用来销毁 session 的链接不再有效。它正在工作,现在我添加了事件管理员,但没有。 我的链接是 :delete, :clas
我已经坚持了超过 24 小时,试图按照此处发布的其他解决方案进行操作,但我无法使其正常工作。我是 Rails 新手,需要帮助! 我想让我的/users/edit 页面正常工作,以便我可以简单地更改用户
Devise 在以下情况下不会使用户超时: 用户登录,关闭选项卡,然后在超时 + X 分钟内重新访问该 URL。用户仍处于登录状态。 如果选项卡已打开并且稍后刷新/单击,则超时可以正常工作。这意味着
我想使用这样的 slider 我希望该 slider 根据提供给它的值进行相应调整。到目前为止,我只能应用具有渐变效果的背景,但无法获得这种效果。请通过提供样式代码来帮助我。
您应该为每种方法创建一个请求/响应对象,还是应该为每个服务创建一个? 如果我在所有方法中使用它,我的服务请求对象中将只有 5 个不同的东西,因为我对几乎所有方法使用相同的输入。 响应对象将只有一个字典
我正在尝试在 REST 中对实体的附件进行建模。假设一个缺陷实体可以附加多个附件。每个附件都有描述和一些其他属性(上次修改时间、文件大小...)。附件本身是任何格式的文件(jpeg、doc ...)
我有以下表格: Blogs { BlogName } BlogPosts { BlogName, PostTitle } 博客文章同时建模一个实体和一个关系,根据 6nf(根据第三个宣言)这是无效的。
如果 A 类与 B、C 和 D 类中的每一个都有唯一的交互,那么交互的代码应该在 A 中还是在 B、C 和 D 中? 我正在编写一个小游戏,其中许多对象可以与其他对象进行独特的交互。例如,EMP点击
关于如何记住我与 Omniauth 一起工作似乎有些困惑。 根据这个wiki ,您需要在 OmniauthCallbacksController 中包含以下内容: remember_me(user)
设计问题: 使用 非线程安全 组件(集合,API,...)在/带有 多线程成分 ... 例子 : 组件 1 :多线程套接字服务器谁向消息处理程序发送消息... 组件 2 :非线程安全 消息处理程序 谁
我们目前正在设计一个 RESTful 应用程序。我们决定使用 XML 作为我们的基本表示。 我有以下关于在 XML 中设计/建模应用程序数据的问题。 在 XML 中进行数据建模的方法有哪些?从头开始然
我正在设计一个新的 XSD 来从业务合作伙伴那里获取积分信息。对于每笔交易,合作伙伴必须提供至少一种积分类型的积分值。我有以下几点:
设计支持多个版本的 API 的最佳方法是什么。我如何确保即使我的数据架构发生更改(微小更改),我的 api 的使用者也不会受到影响?任何引用架构、指南都非常有用。 最佳答案 Mark Nottingh
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭 4 年前。 Improv
我想用 php 创建一个网站,其工作方式与 https://www.bitcoins.lc/ 相同。确实,就每个页面上具有相同布局但内容会随着您更改链接/页面而改变而言,我如何在 php 中使用lay
我有一个关于编写 Swing UI 的问题。如果我想制作一个带有某些选项的软件,例如在第一个框架上,我有三个按钮(新建、选项、退出)。 现在,如果用户单击新按钮,我想将框架中的整个内容更改为其他内容。
我正在尝试找出并学习将应用程序拥有的一堆Docker容器移至Kubernetes的模式和最佳实践。诸如Pod设计,服务,部署之类的东西。例如,我可以创建一个其中包含单个Web和应用程序容器的Pod,但
我是一名优秀的程序员,十分优秀!