Trung tâm cá nhân
sách gpt4 ăn đã đi

thiết kế và triển khai trò chơi rắn javascript

In lại Tác giả: qq735679552 Thời gian cập nhật: 29-09-2022 22:32:09 38 4
mua khóa gpt4 giày nike

CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài viết blog CFSDN Thiết kế và triển khai trò chơi rắn săn mồi này được tác giả sưu tầm và biên soạn. Nếu các bạn quan tâm đến bài viết này thì nhớ like nhé.

Bài viết này chia sẻ code cụ thể để triển khai trò chơi Snake bằng JavaScript để các bạn tham khảo.

Kết xuất.

thiết kế và triển khai trò chơi rắn javascript

thiết kế.

Trò chơi rắn là một trò chơi giải đố thông thường. Thật đơn giản và thú vị để chơi. Trò chơi này điều khiển hướng đầu của con rắn ăn trứng, từ đó khiến con rắn ngày càng dài ra.

Cách chơi:

Bấm vào màn hình để điều khiển hướng di chuyển của con rắn và tìm kiếm thứ gì đó để ăn. Bạn sẽ nhận được một số điểm nhất định cho mỗi lần cắn, và cơ thể của con rắn sẽ ngày càng dài ra khi nó ăn càng lâu thì càng cứng. đó là để chơi. Bạn không thể tự cắn vào cơ thể của mình. Đừng cắn vào đuôi của chính mình, hãy đợi cho đến khi đạt được số điểm nhất định và trò chơi sẽ thắng.

thiết kế:

Đầu tiên bạn cần tạo một bàn cờ, sau đó bạn cần tạo ra một con rắn tham lam, sau đó tạo ra thức ăn ngẫu nhiên. Bất cứ khi nào con rắn ăn thức ăn, thức ăn mới sẽ được tạo ra ngẫu nhiên và trò chơi kết thúc khi đầu rắn ăn chính cơ thể của mình.

Thiết kế bàn cờ:

Các phần tử: số hàng, số cột, ô cơ bản (có thể biểu thị dưới dạng rỗng, thức ăn, thân rắn);

Thuộc tính: Tạo bàn cờ, bàn cờ rõ ràng;

Thiết kế tế bào cơ bản:

Thuộc tính: đặt lại màu, đặt lại kích thước;

đồ ăn:

Yêu cầu: Thức ăn cần được tạo ra ở các vị trí ngẫu nhiên ở các vị trí trống còn lại trên bàn cờ;

Con rắn tham lam:

Các phần tử: Bộ vị trí (mảng), tốc độ di chuyển, hướng di chuyển.

Yêu cầu: Tạo ngẫu nhiên ban đầu một con rắn tham lam chỉ có một phần, chức năng hẹn giờ (tìm vị trí tiếp theo để di chuyển dựa trên hướng di chuyển. Cần lưu ý rằng xử lý đặc biệt được thực hiện sau khi đạt đến ranh giới. Xác định xem vị trí tiếp theo có phải không chính là con rắn, nếu là rắn, nó sẽ tự ăn thịt và trò chơi sẽ kết thúc, sau đó thêm vị trí tiếp theo vào vị trí con rắn đã đặt, và cuối cùng xác định xem vị trí tiếp theo có giống với thức ăn hay không. tương tự, tái tạo thức ăn mới, nếu không thì bỏ đuôi rắn).

Điều khiển hướng:

Trò chơi này sử dụng cách nhấp chuột vào màn hình để điều khiển hướng di chuyển của con rắn.

hoàn thành.

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
/*
  * @Tác giả: ls
  * @Ngày: 2020-09-01 18:23:09
  * @LastEditTime: 2020-09-16 14:23:37
  * @LastEditors: Vui lòng thiết lập LastEditors
  * @Description: Lớp ô cơ bản
  * @FilePath: \snake\assets\cell.js
  */
 
cc.Lớp({
  mở rộng: cc.Component,
 
  của cải: {},
 
  khi tải() {},
 
  /**
  * @param {*} Màu ô
  */
  đặtCellColor(cellColor = mới cc.color(255, 255, 255, 255)) {
  cái này .node.getChildByName( 'màu sắc' ).color = màu ô;
  },
 
  /**
  * @param {*} Kích thước ô
  */
  đặtCellPos(kích thước ô = mới cc.v2(20, 20)) {
  cái này .node.width = cellSize.x;
  cái này .node.height = Kích thước ô.y;
  },
});

hướng dẫnCtrl.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
/*
  * @Tác giả: ls
  * @Ngày: 2020-09-03 18:09:18
  * @LastEditTime: 2020-09-14 08:55:47
  * @LastEditors: Vui lòng thiết lập LastEditors
  * @Mô tả: Lớp khởi động
  * @FilePath: \snake\assets\guideCtrl.js
  */
 
cc.Lớp({
  mở rộng: cc.Component,
 
  của cải: {
  bước: [cc.Node],
  bắt đầuToggle: cc.Toggle,
  },
 
  khi tải() {
  cái này .startGuide();
  cái này .startToggle.isChecked = SAI ;
  },
 
  /**
  * Bắt đầu khởi động
  */
  startGuide() {
  nếu như (! cái này .bước.chiều dài) {
  cái này .node.destroy();
  trở lại ;
  }
  vì (cho chỉ số = 0, chiều dài = cái này .step.length; chỉ số < chiều dài; chỉ số++) {
  cái này .step[index].active = SAI ;
  }
  cái này ._bước = 0;
  cái này .step[0].active = ĐÚNG VẬY ;
  },
 
  /**
  * Trang hướng dẫn tiếp theo
  */
  Hướng dẫn tiếp theo() {
  cái này ._bước++;
  nếu như ( cái này ._bước < cái này .bước.chiều dài - 1) {
  cái này .bước chân[ cái này ._step].hoạt động = ĐÚNG VẬY ;
  cái này .bước chân[ cái này ._step - 1].hoạt động = SAI ;
  nếu như ( cái này ._bước === cái này .bước.chiều dài - 2) {
  cái này .bước chân[ cái này ._step + 1].hoạt động = ĐÚNG VẬY ;
  }
  } khác {
  cái này .node.active = SAI ;
  }
  },
 
  gọi lại: chức năng (chuyển đổi) {
  cc.sys.localStorage.setItem( 'isStart' , toggle.isChecked);
  },
});

trò chơiCtrl.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
/*
  * @Tác giả: ls
  * @Ngày: 2020-09-01 15:44:33
  * @LastEditTime: 2020-09-16 14:23:18
  * @LastEditors: Vui lòng thiết lập LastEditors
  * @Mô tả: Lớp đạo diễn trò chơi
  * @FilePath: \snake\assets\gameController.js
  */
 
của chúng tôi không có màu = mới cc. màu(120, 120, 120, 255);
của chúng tôi thực phẩmMàu sắc = mới màu sắc(254, 168, 23, 255);
của chúng tôi snakeColor = mới cc. màu(243, 60, 66, 255);
 
cc.Lớp({
  mở rộng: cc.Component,
 
  của cải: {
  // bàn cờ
  node_grid: cc.Nút,
  // Phân số
  lab_score: cc.Nhãn,
  // điểm tốt nhất
  lab_best: nhãn cc,
 
  // bắt đầu
  node_start: cc.Node,
  // Hướng dẫn người mới
  node_guide: cc.Node,
  // Hoàn thành
  node_over: cc.Nút,
 
  //Lớp cơ bản
  cellPrefab: cc.Prefab,
 
  // tốc độ di chuyển
  mTốc độ: 5,
  //Số cột
  Số lượng cột: 30,
  // số hàng
  số hàng: 30,
  },
 
  khi tải() {
  //Khởi tạo hướng
  // Vẫn, lên, xuống, trái, phải
  // (0,0)、(0,1)、(0,-1)、(-1,0)、(1,0)
  cái này ._hướng = { x: 0, y: 0 };
  // Khởi tạo kích thước ô
  cái này ._cellSize = { x: 10, y: 10 };
 
  cái này ._map = [];
  cái này .initCellPool();
  cái này .onCreateMap();
  //Hiển thị giao diện bắt đầu trò chơi
  cái này .showStartGame();
  },
 
  /**
  * Khởi tạo nhóm đối tượng ô
  */
  initCellPool() {
  cái này .cellPool = mới cc.NodePool();
  hãy để initCount = cái này .rowCount * cái này .đếm cột;
  vì (cho i = 0; i < initCount; i++) {
  hãy để cell = cc.instantiate( cái này .cellPrefab); //Tạo nút
  cái này .cellPool.put(ô); // Đặt nó vào nhóm đối tượng thông qua giao diện put
  }
  },
 
  /**
  * Tạo bản đồ
  */
  trênCreateMap() {
  cái này ._map = [];
  hãy để node_bg = cái này .node_grid.getChildByName( 'lý lịch' );
  cái này ._cellSize = { x: node_bg.width / cái này .rowCount, y: node_bg.height / cái này .colCount };
 
  vì ( của chúng tôi y = 0; y < cái này .colCount; y++) {
  vì (giả sử x = 0; x < cái này .rowCount; x++) {
  của chúng tôi đối tượng = {};
  đối tượng x = x;
  obj.y = y;
  obj.node = cái này .createCell(node_bg, x, y);
 
  cái này ._map.push(đối tượng);
  }
  }
  },
 
  /**
  * Yêu cầu các đối tượng từ nhóm đối tượng
  * @param {*} parentNode
  */
  tạoCell: chức năng (parentNode, x, y) {
  hãy để tế bào = vô giá trị ;
  nếu như ( cái này .cellPool.size() > 0) {
  // Xác định xem có đối tượng trống nào trong nhóm đối tượng thông qua giao diện kích thước không
  tế bào = cái này .cellPool.get();
  } khác {
  // Nếu không có đối tượng trống, tức là không có đủ đối tượng dự phòng trong nhóm đối tượng, chúng ta sẽ sử dụng cc.instantiate để tạo lại chúng.
  ô = cc.instantiate( cái này .cellPrefab);
  }
 
  cell.getComponent( 'tế bào' ).setCellPos( cái này ._Kích thước ô);
 
  ô.x = cái này ._cellSize.x * x;
  tế bào.y = cái này ._cellSize.y * y;
 
  cell.parent = parentNode;
  trở lại tế bào;
  },
 
  /**
  * Khôi phục bản đồ
  */
  xóa bản đồ() {
  vì (cho chỉ số = 0, chiều dài = cái này ._map.length; chỉ mục < chiều dài; chỉ mục++) {
  cái này ._map[chỉ mục].node.getComponent( 'tế bào' ).setCellColor(không có màu);
  }
  },
 
  /**
  * Hiển thị giao diện bắt đầu
  */
  Hiển thịStartGame() {
  cái này .node_over.active = SAI ;
  cái này .node_start.active = ĐÚNG VẬY ;
  },
 
  /**
  * Hiển thị giao diện kết thúc
  */
  Hiển thịOverGame() {
  cái này .node_start.active = SAI ;
  cái này .node_over.active = ĐÚNG VẬY ;
  },
 
  /**
  * Trò chơi bắt đầu
  */
  bắt đầu trò chơi() {
  cái này .node_guide.active = SAI ;
  cái này .node_over.active = SAI ;
  cái này .node_start.active = SAI ;
  cái này .lab_score.node.active = ĐÚNG VẬY ;
  cái này .lab_best.node.active = ĐÚNG VẬY ;
  cái này .node_grid.active = ĐÚNG VẬY ;
  // Có nên vào giao diện lần đầu không
  nếu như (!cc.sys.localStorage.getItem( 'isStart' )) {
  cái này .node_guide.active = ĐÚNG VẬY ;
  }
 
  cái này ._điểm = 0;
  //Cập nhật điểm cao nhất
  cái này .cập nhậtTốt nhất();
 
  cái này ._canControl = ĐÚNG VẬY ;
  cái này ._hướng = { x: 1, y: 0 };
  cái này ._snakeGrid = [];
  cái này ._foodGrid = {};
 
  //Khởi tạo sự kiện chạm
  cái này .openTouchEvent();
 
  cái này .clearMap();
  cái này .onCreateSnake();
  cái này .onCreateFood();
 
  // kích hoạt chuyển động
  cái này .lịch trình( cái này .di chuyển, 1 / cái này .mTốc độ);
  },
 
  /**
  * Cập nhật điểm số
  */
  cập nhậtBest() {
  cái này ._best = cc.sys.localStorage.getItem( 'tốt nhất' );
  nếu như ( cái này ._tốt nhất) {
  nếu như ( cái này ._tốt nhất < cái này ._điểm) {
  cái này ._tốt nhất = cái này ._điểm;
  cc.sys.localStorage.setItem( 'tốt nhất' , cái này ._tốt nhất);
  }
  } khác {
  cái này ._tốt nhất = cái này ._điểm;
  cc.sys.localStorage.setItem( 'tốt nhất' , cái này ._tốt nhất);
  }
 
  cái này .lab_best.string = cái này ._tốt nhất;
  },
 
  /**
  * trò chơi kết thúc
  */
  gameOver() {
  // Có thể điều khiển con rắn thay đổi hướng di chuyển của nó hay không
  cái này ._canControl = SAI ;
 
  cái này .hủy lịch trình( cái này .di chuyển);
  cái này .closeTouchEvent();
  cái này .clearMap();
  cái này .showOverGame();
  },
 
  /**
  * Tạo con rắn
  */
  trênCreateSnake() {
  hãy để x = ~~(Math.random() * cái này .rowCount);
  hãy để y = ~~(Math.random() * cái này .colCount);
 
  vì (cho chỉ số = 0, chiều dài = cái này ._map.length; chỉ mục < chiều dài; chỉ mục++) {
  nếu như ( cái này ._map[chỉ mục].x === x && cái này ._map[chỉ mục].y === y) {
  cái này ._map[chỉ mục].node.getComponent( 'tế bào' ).setCellColor(Màu rắn);
  cái này ._snakeGrid.đẩy( cái này ._map[chỉ mục]);
  }
  }
  },
 
  /**
  *Tạo thức ăn
  */
  khi Tạo Thực Phẩm() {
  nếu như ( cái này ._map.chiều dài !== cái này ._snakeGrid.length) {
  hãy để r = ~~(Math.random() * ( cái này ._map.chiều dài - cái này ._snakeGrid.length));
 
  hãy để subGrid = [];
  vì (giả sử i = 0; i < cái này ._map.length; i++) {
  subGrid.đẩy( cái này ._map[i]);
  }
 
  vì (cho m = 0; m < subGrid.length; m++) {
  vì (giả sử n = 0; n < cái này ._snakeGrid.length; n++) {
   nếu như (subGrid[m].x === cái này ._snakeGrid[n].x && subGrid[m].y === cái này ._snakeGrid[n].y) {
   subGrid.splice(m, 1);
   nếu như (m > 0) {
   m--;
   }
   }
  }
  }
 
  vì (cho index = 0; index < subGrid.length; index++) {
  nếu như (chỉ số === r) {
   cái này ._foodGrid = subGrid[chỉ mục];
   cái này ._foodGrid.node.getComponent( 'tế bào' ).setCellColor(màu thực phẩm);
 
   // tăng điểm
   cái này ._điểm++;
   cái này .lab_score.string = cái này ._điểm;
  }
  }
  }
  },
 
  /**
  * Mở cảm ứng
  */
  mởSự kiệnTouch() {
  của chúng tôi tự = cái này ;
  cái này .node.on(
  cc.Node.EventType.TOUCH_START,
  chức năng (chạm) {
  nếu như (self._canControl) {
   self._canControl = SAI ;
   hãy để touchPos = self.node.convertToNodeSpaceAR(touch.getLocation());
   self._direction = self.getTouchDirection(touchPos);
 
   cái này .lịch trình một lần( chức năng () {
   self._canControl = ĐÚNG VẬY ;
   }, 1 / cái này .mTốc độ);
  }
  },
  cái này
  );
  },
 
  /**
  * Tắt cảm ứng
  */
  closeTouchEvent() {
  cái này .node.off(cc.Node.EventType.TOUCH_START, cái này );
  },
 
  /**
  * Nhận hướng đã chọn
  * @param {* vị trí chạm} touchPos
  */
  lấy hướng chạm(touchPos) {
  // Lấy độ dài vectơ
  chức năng getABS(pos) {
  trở lại Toán.sqrt(vị trí x * vị trí x + vị trí y * vị trí y);
  }
  // Lấy hướng ngang
  chức năng lấyLandscape(touchPos) {
  nếu như (touchPos.x > 0) {
  cc.log( 'Thay đổi để di chuyển sang phải' );
  trở lại { x: 1, y: 0 };
  } khác {
  cc.log( 'Thay đổi để di chuyển sang trái' );
  trở lại { x: -1, y: 0 };
  }
  }
  // Lấy hướng dọc
  chức năng lấy Chân dung(chạm vàoVị trí) {
  nếu như (touchPos.y > 0) {
  cc.log( 'Thay đổi để tiến lên' );
  trở lại { x: 0, y: 1 };
  } khác {
  cc.log( 'Thay đổi để di chuyển xuống' );
  trở lại { x: 0, y: -1 };
  }
  }
 
  nếu như (lấyABS( cái này ._hướng) === 1) {
  cc.log( 'Con rắn đang di chuyển' );
  nếu như ( cái này ._direction.y === 1) {
  cc.log( 'Con rắn đang di chuyển lên' );
  trở lại lấy Cảnh quan(touchPos);
  } khác nếu như ( cái này ._direction.y === -1) {
  cc.log( 'Con rắn đang di chuyển xuống' );
  trở lại lấy Cảnh quan(touchPos);
  } khác nếu như ( cái này ._direction.x === -1) {
  cc.log( 'Con rắn đang di chuyển sang trái' );
  trở lại lấy Chân dung(touchPos);
  } khác nếu như ( cái này ._direction.x === 1) {
  cc.log( 'Con rắn đang di chuyển sang bên phải' );
  trở lại lấy Chân dung(touchPos);
  }
  } khác {
  cc.log( 'Con rắn không di chuyển hoặc ngừng di chuyển. Việc thay đổi hướng không hợp lệ vào thời điểm này! ' );
  }
  },
 
  /**
  * di chuyển
  */
  di chuyển() {
  hãy để nextGrid = {};
  nextGrid.x = cái này ._snakeLưới[ cái này ._snakeGrid.length - 1].x + cái này ._hướng.x;
  nextGrid.y = cái này ._snakeLưới[ cái này ._snakeGrid.length - 1].y + cái này ._direction.y;
 
  nếu như ( cái này ._direction.x === 1) {
  // Bên phải
  nếu như (nextGrid.x > cái này .colCount - 1) {
  nextGrid.x = 0;
  }
  } khác nếu như ( cái này ._direction.x === -1) {
  // bên trái
  nếu như (nextGrid.x < 0) {
  nextGrid.x = cái này .colCount - 1;
  }
  } khác nếu như ( cái này ._direction.y === 1) {
  // hướng lên
  nếu như (nextGrid.y > cái này .rowCount - 1) {
  nextGrid.y = 0;
  }
  } khác nếu như ( cái này ._direction.y === -1) {
  //xuống
  nếu như (nextGrid.y < 0) {
  nextGrid.y = cái này .rowCount - 1;
  }
  }
 
  vì (giả sử m = 0, l = cái này ._map.length; m < l; m++) {
  nếu như ( cái này ._map[m].x === nextGrid.x && cái này ._map[m].y === lưới tiếp theo.y) {
  lưới tiếp theo = cái này ._bản đồ[m];
  }
  }
 
  vì (giả sử n = 0, chiều dài = cái này ._snakeGrid.length; n < chiều dài; n++) {
  nếu như (nextGrid.x === cái này ._snakeGrid[n].x && nextGrid.y === cái này ._snakeGrid[n].y) {
  cái này .gameOver();
  // trả về false;
  }
  }
 
  nextGrid.node.getComponent( 'tế bào' ).setCellColor(Màu rắn);
  cái này ._snakeGrid.đẩy(nextGrid);
 
  nếu như (nextGrid.x === cái này ._foodGrid.x && nextGrid.y === cái này ._foodGrid.y) {
  cái này .onCreateFood();
  } khác {
  hãy bắt đầuGrid = cái này ._snakeGrid.shift();
  startGrid.node.getComponent( 'tế bào' ).setCellColor(không có màu);
  }
  },
});

Mã hoàn chỉnh: trò chơi rắn js.

Các chủ đề triển khai trò chơi mini cổ điển thú vị hơn hiện có sẵn để chia sẻ với bạn:

Trên đây là toàn bộ nội dung bài viết này hi vọng nó sẽ giúp ích cho việc học của mọi người và cũng mong mọi người ủng hộ mình.

Liên kết gốc: https://blog.csdn.net/qq_14965517/article/details/108621493.

Cuối cùng, bài viết về thiết kế và triển khai trò chơi JavaScript Snake kết thúc tại đây. Nếu bạn muốn biết thêm về thiết kế và triển khai trò chơi JavaScript Snake, vui lòng tìm kiếm các bài viết của CFSDN hoặc tiếp tục duyệt qua các bài viết liên quan. Hỗ trợ blog của tôi trong tương lai! .

38 4 0
Đề xuất bài viết: Giải thích chi tiết và ví dụ về sự khác biệt giữa mảng, ArrayList và List trong C#
Đề xuất bài viết: Hướng dẫn đồ họa về thiết lập môi trường máy chủ PHP (chia sẻ)
Đề xuất bài viết: Mã ví dụ về giao tiếp TCP của socket C#
Đề xuất bài viết: Phân tích triển khai tải tự động của nhà soạn nhạc trong khung Laravel
qq735679552
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress