智利条这么长,成为贪吃蛇不过分吧

捏他了硝石战争:玻利维亚在这场对智利的战争中失败,失去了唯一的入海口,成为内陆国,而智利变得更长了

Bolivia cannot into coast

代码 效果

玩法

贪吃蛇还能怎么玩?使用键盘的上下左右键操作智利蛇吃掉玻利维亚球,

实现

其实贪吃蛇游戏不难,绝大多数人应该都能敲出来

普通的贪吃蛇游戏中,蛇的每一节身体都是普通的方块,最多也就是头部的方块颜色不同

然而我这只不是普通的蛇,而是有棱有角(?)的智利条,需要有那么个像样的形状

这倒也不难,在绘制每一节蛇身时,根据前一节、这节、后一节坐标,获取行进位置,再判断使用的贴图就行

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
/**
* 判断这一节蛇应该使用什么类
* @param param0 前一个坐标
* @param param1 需判断的坐标
* @param param2 后一个坐标
* @returns
*/
public getClasses([x1, y1]: Index, [x2, y2]: Index, [x3, y3]: Index) {
const classes = []
let dir1: dirNum | 0 = this.getSnakeBodyDirection([x1, y1], [x2,y2]),
dir2: dirNum | 0 = this.getSnakeBodyDirection([x2, y2], [x3, y3])

// 蛇头
if(dir1 === 0) {
// @ts-ignore
classes.push(SnakeClass.SNAKE_HEAD, SnakeClass[SnakeDirectio[dir2]])
}
// 蛇尾
else if (dir2 === 0) {
// @ts-ignore
classes.push(SnakeClass.SNAKE_TAIL, SnakeClass[SnakeDirectio[dir1]])
}
// 蛇身
else {
// 蛇身直行
if(dir1 === dir2) {
classes.push(SnakeClass.SNAKE_BODY_STR)
switch(dir1) {
case SnakeDirection.UP:
classes.push(SnakeClass.UP)
break
case SnakeDirection.RIGHT:
classes.push(SnakeClass.RIGHT)
break
case SnakeDirection.DOWN:
classes.push(SnakeClass.DOWN)
break
case SnakeDirection.LEFT:
classes.push(SnakeClass.LEFT)
break
}
}
// 蛇身转弯
else {
classes.push(SnakeClass.SNAKE_BODY_CUR)
// 右上弧
if ((dir1 === SnakeDirection.LEFT && dir2 === SnakeDirection.UP)
|| (dir1 === SnakeDirection.DOWN && dir2 === SnakeDirectionRIGHT)) {
classes.push(SnakeClass.UP_RIGHT_QUADRANT)
}
// 右下弧
else if((dir1 === SnakeDirection.UP && dir2 === SnakeDirectionRIGHT)
|| (dir1 === SnakeDirection.LEFT && dir2 === SnakeDirectionDOWN)) {
classes.push(SnakeClass.DOWN_RIGHT_QUADRANT)
}
// 左下弧
else if (
(dir1 === SnakeDirection.UP && dir2 === SnakeDirection.LEFT)
|| (dir1 === SnakeDirection.RIGHT && dir2 === SnakeDirectionDOWN)) {
classes.push(SnakeClass.DOWN_LEFT_QUADRANT)
}
// 左上弧
else if ((dir1 === SnakeDirection.RIGHT && dir2 ===SnakeDirection.UP)
|| (dir1 === SnakeDirection.DOWN && dir2 === SnakeDirectionLEFT)) {
classes.push(SnakeClass.UP_LEFT_QUADRANT)
}
}
}
return classes
}

其他的应该也不必多说,看github就好,我是菜鸡

基本就是准备了四个类:Snake、Food、SnakeGame和SnakeGameDOM,看名字也知道是干嘛的

todo(永远不会做)

  1. 制作首次进入的dialog提示玩法,并为dialog绘制一张智利蛇盯上玻利维亚球的背景图
  2. 为标题绘制一条智利蛇作背景图
  3. 适配移动端,考虑增加操作按钮或使用滑动操作
  4. 调整样式使其更好看