打造AI贪吃蛇

举报
肥学 发表于 2022/06/18 22:46:52 2022/06/18
【摘要】 目录标题 演示技术栈源码构建食物对象构建贪吃蛇对象构建自动贪吃 点击直接资料领取 演示 自动贪吃蛇 技术栈 bottom 属性规定元素的底部边缘。该属性定义了定位元素...

演示

自动贪吃蛇
请添加图片描述

技术栈

bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。

注释:如果 “position” 属性的值为 “static”,那么设置 “bottom” 属性不会产生任何效果。

对于 static 元素,为 auto;对于长度值,则为相应的绝对长度;对于百分比数值,为指定值;否则为 auto。

对于相对定义元素,如果 bottom 和 top 都是 auto,其计算值则都是 0;如果其中之一为auto,则取另一个值的相反数;如果二者都不是 auto,bottom 将取 top 值的相反数。

默认值:	auto
继承性:	no
版本:	CSS2
JavaScript 语法:	object.style.bottom="50px"

  
 
  • 1
  • 2
  • 3
  • 4

user-select 属性规定是否能选取元素的文本。

在 web 浏览器中,如果您在文本上双击,文本会被选取或高亮显示。此属性用于阻止这种行为。

user-select: auto|none|text|all;

  
 
  • 1
auto	默认。如果浏览器允许,则可以选择文本。
none	防止文本选取。
text	文本可被用户选取。
all	单击选取文本,而不是双击。

  
 
  • 1
  • 2
  • 3
  • 4

源码

样式设置

canvas {
	position: absolute;
	width: 100vh;
	height: 100vh;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	user-select: none;
	background: #000;
	cursor: pointer;
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

构建食物对象

var food = {
		x: 0,
		y: 0,
		// add random food
		add: function add() {
			var emptyNodes = [];
			for (var x = 0; x < map.width; ++x) {
				for (var y = 0; y < map.height; ++y) {
					if (!map.collision(x, y)) emptyNodes.push({
						x: x,
						y: y
					});
				}
			}
			if (emptyNodes.length) {
				var p = emptyNodes[Math.floor(Math.random() * emptyNodes.length)];
				this.x = p.x;
				this.y = p.y;
			}
		}
	};

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

构建贪吃蛇对象

var snake = {
		body: [],
		head: {
			x: 0,
			y: 0
		},
		removeTail: function removeTail() {
			var p = this.body.shift();
			map.setSnake(p.x, p.y, 0);
		},
		addHead: function addHead(x, y) {
			this.head.x = x;
			this.head.y = y;
			this.body.push({
				x: x,
				y: y
			});
			map.setSnake(x, y, 1);
		},
		move: function move(dir) {
			var next = map.getNext(this.head.x, this.head.y, dir);
			this.addHead(next.x, next.y);
			if (next.x === food.x && next.y === food.y) {
				food.add();
			} else this.removeTail();
		},

		// snake IA
		nextDirection: function nextDirection() {
			var x = this.head.x;
			var y = this.head.y;
			var pathNumber = map.tour(x, y);
			var distanceToFood = map.distance(pathNumber, map.tour(food.x, food.y));
			var distanceToTail = map.distance(pathNumber, map.tour(snake.body[0].x, snake.body[0].y));
			var cuttingAmountAvailable = distanceToTail - 4;
			var numEmptySquaresOnBoard = map.size - snake.body.length - 1;
			if (distanceToFood < distanceToTail) cuttingAmountAvailable -= 1;
			var cuttingAmountDesired = distanceToFood;
			if (cuttingAmountDesired < cuttingAmountAvailable) cuttingAmountAvailable = cuttingAmountDesired;
			if (cuttingAmountAvailable < 0) cuttingAmountAvailable = 0;
			var canGoRight = !map.collision(x + 1, y);
			var canGoLeft = !map.collision(x - 1, y);
			var canGoDown = !map.collision(x, y + 1);
			var canGoUp = !map.collision(x, y - 1);
			var bestDir = -1;
			var bestDist = -1;
			var dist = 0;
			if (canGoRight) {
				dist = map.distance(pathNumber, map.tour(x + 1, y));
				if (dist <= cuttingAmountAvailable && dist > bestDist) {
					bestDir = map.Right;
					bestDist = dist;
				}
			}
			if (canGoLeft) {
				dist = map.distance(pathNumber, map.tour(x - 1, y));
				if (dist <= cuttingAmountAvailable && dist > bestDist) {
					bestDir = map.Left;
					bestDist = dist;
				}
			}
			if (canGoDown) {
				dist = map.distance(pathNumber, map.tour(x, y + 1));
				if (dist <= cuttingAmountAvailable && dist > bestDist) {
					bestDir = map.Down;
					bestDist = dist;
				}
			}
			if (canGoUp) {
				dist = map.distance(pathNumber, map.tour(x, y - 1));
				if (dist <= cuttingAmountAvailable && dist > bestDist) {
					bestDir = map.Up;
					bestDist = dist;
				}
			}
			if (bestDist >= 0) return bestDir;
			if (canGoUp) return map.Up;
			if (canGoLeft) return map.Left;
			if (canGoDown) return map.Down;
			if (canGoRight) return map.Right;
			return map.Right;
		}
	};

  
 
  • 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

构建自动贪吃

var map = {
		// init map
		init: function init(width, height) {
			var _this = this;

			this.width = width;
			this.height = height;
			this.size = width * height;
			this.scale = Math.min(canvasWidth, canvasHeight) / Math.max(this.width, this.height);
			// Hamiltonian Cycle

			// flags
			var _array2D = this.array2D(width, height, true);

			var _array2D2 = _slicedToArray(_array2D, 2);

			this.tour = _array2D2[0];
			this.setTour = _array2D2[1];

			var _array2D3 = this.array2D(width / 2, height / 2);

			var _array2D4 = _slicedToArray(_array2D3, 2);

			this.isVisited = _array2D4[0];
			this.setVisited = _array2D4[1];

			var _array2D5 = this.array2D(width / 2, height / 2);

			var _array2D6 = _slicedToArray(_array2D5, 2);

			this.canGoRight = _array2D6[0];
			this.setGoRight = _array2D6[1];

			var _array2D7 = this.array2D(width / 2, height / 2);

			var _array2D8 = _slicedToArray(_array2D7, 2);

			this.canGoDown = _array2D8[0];
			this.setGoDown = _array2D8[1];

			var _array2D9 = this.array2D(width, height);

			var _array2D10 = _slicedToArray(_array2D9, 2);

			this.isSnake = _array2D10[0];
			this.setSnake = _array2D10[1];

			this.canGoLeft = function (x, y) {
				if (x === 0) return false;
				return _this.canGoRight(x - 1, y);
			};
			this.canGoUp = function (x, y) {
				if (y === 0) return false;
				return _this.canGoDown(x, y - 1);
			};
		},

		// directions
		Left: 1,
		Up: 2,
		Right: 3,
		Down: 4,
		// flat 2D array
		array2D: function array2D(width, height, protect) {
			var data = new Uint16Array(width * height);
			return [function (x, y) {
				return data[x + width * y];
			}, protect ? function (x, y, value) {
				var i = x + width * y;
				if (!data[i]) data[i] = value;
			} : function (x, y, value) {
				data[x + width * y] = value;
			}];
		},

		// test snake collision
		collision: function collision(x, y) {
			if (x < 0 || x >= this.width) return true;
			if (y < 0 || y >= this.height) return true;
			return this.isSnake(x, y) !== 0;
		},

		// path distance
		distance: function distance(a, b) {
			if (a < b) return b - a - 1;else return b - a - 1 + this.size;
		},

		// Hamiltonian Cycle
		generate_r: function generate_r(fromx, fromy, x, y) {
			if (x < 0 || y < 0 || x >= this.width / 2 || y >= this.height / 2) return;
			if (this.isVisited(x, y)) return;
			this.setVisited(x, y, 1);
			if (fromx !== -1) {
				if (fromx < x) this.setGoRight(fromx, fromy, 1);else if (fromx > x) this.setGoRight(x, y, 1);else if (fromy < y) this.setGoDown(fromx, fromy, 1);else if (fromy > y) this.setGoDown(x, y, 1);
			}
			for (var i = 0; i < 2; i++) {
				var r = Math.floor(Math.random() * 4);
				switch (r) {
					case 0:
						this.generate_r(x, y, x - 1, y);
						break;
					case 1:
						this.generate_r(x, y, x + 1, y);
						break;
					case 2:
						this.generate_r(x, y, x, y - 1);
						break;
					case 3:
						this.generate_r(x, y, x, y + 1);
						break;
				}
			}
			this.generate_r(x, y, x - 1, y);
			this.generate_r(x, y, x + 1, y);
			this.generate_r(x, y, x, y + 1);
			this.generate_r(x, y, x, y - 1);
		},

		// find next direction in cycle
		findNextDir: function findNextDir(x, y, dir) {
			if (dir === this.Right) {
				if (this.canGoUp(x, y)) return this.Up;
				if (this.canGoRight(x, y)) return this.Right;
				if (this.canGoDown(x, y)) return this.Down;
				return this.Left;
			} else if (dir === this.Down) {
				if (this.canGoRight(x, y)) return this.Right;
				if (this.canGoDown(x, y)) return this.Down;
				if (this.canGoLeft(x, y)) return this.Left;
				return this.Up;
			} else if (dir === this.Left) {
				if (this.canGoDown(x, y)) return this.Down;
				if (this.canGoLeft(x, y)) return this.Left;
				if (this.canGoUp(x, y)) return this.Up;
				return this.Right;
			} else if (dir === this.Up) {
				if (this.canGoLeft(x, y)) return this.Left;
				if (this.canGoUp(x, y)) return this.Up;
				if (this.canGoRight(x, y)) return this.Right;
				return this.Down;
			}
			return -1; //Unreachable
		},

		// generate Hamiltonian Cycle
		generateTourNumber: function generateTourNumber() {
			var x = 0;
			var y = 0;
			var dir = this.canGoDown(x, y) ? this.Up : this.Left;
			var number = 0;
			do {
				var nextDir = this.findNextDir(x, y, dir);
				switch (dir) {
					case this.Right:
						this.setTour(x * 2, y * 2, number++);
						if (nextDir === dir || nextDir === this.Down || nextDir === this.Left) this.setTour(x * 2 + 1, y * 2, number++);
						if (nextDir === this.Down || nextDir === this.Left) this.setTour(x * 2 + 1, y * 2 + 1, number++);
						if (nextDir === this.Left) this.setTour(x * 2, y * 2 + 1, number++);
						break;
					case this.Down:
						this.setTour(x * 2 + 1, y * 2, number++);
						if (nextDir === dir || nextDir === this.Left || nextDir === this.Up) this.setTour(x * 2 + 1, y * 2 + 1, number++);
						if (nextDir === this.Left || nextDir === this.Up) this.setTour(x * 2, y * 2 + 1, number++);
						if (nextDir === this.Up) this.setTour(x * 2, y * 2, number++);
						break;
					case this.Left:
						this.setTour(x * 2 + 1, y * 2 + 1, number++);
						if (nextDir === dir || nextDir === this.Up || nextDir === this.Right) this.setTour(x * 2, y * 2 + 1, number++);
						if (nextDir === this.Up || nextDir === this.Right) this.setTour(x * 2, y * 2, number++);
						if (nextDir === this.Right) this.setTour(x * 2 + 1, y * 2, number++);
						break;
					case this.Up:
						this.setTour(x * 2, y * 2 + 1, number++);
						if (nextDir === dir || nextDir === this.Right || nextDir === this.Down) this.setTour(x * 2, y * 2, number++);
						if (nextDir === this.Right || nextDir === this.Down) this.setTour(x * 2 + 1, y * 2, number++);
						if (nextDir === this.Down) this.setTour(x * 2 + 1, y * 2 + 1, number++);
						break;
				}
				dir = nextDir;
				switch (nextDir) {
					case this.Right:
						++x;
						break;
					case this.Left:
						--x;
						break;
					case this.Down:
						++y;
						break;
					case this.Up:
						--y;
						break;
				}
			} while (number !== this.size);
		},

		// get next node
		getNext: function getNext(x, y, dir) {
			switch (dir) {
				case this.Left:
					if (x) return {
						x: x - 1,
						y: y
					};
					break;
				case this.Up:
					if (y) return {
						x: x,
						y: y - 1
					};
					break;
				case this.Right:
					return {
						x: x + 1,
						y: y
					};
					break;
				case this.Down:
					return {
						x: x,
						y: y + 1
					};
					break;
			}
			return {
				x: x,
				y: y
			};
		},

		// draw map
		draw: function draw() {
			ctx.beginPath();
			ctx.strokeStyle = "#fff";
			ctx.lineCap = "round";
			ctx.lineJoin = "round";
			ctx.lineWidth = this.scale * 0.5;
			var _iteratorNormalCompletion = true;
			var _didIteratorError = false;
			var _iteratorError = undefined;

			try {
				for (var _iterator = snake.body[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
					var b = _step.value;

					ctx.lineTo(this.scale * 0.5 + b.x * this.scale, this.scale * 0.5 + b.y * this.scale);
				}
			} catch (err) {
				_didIteratorError = true;
				_iteratorError = err;
			} finally {
				try {
					if (!_iteratorNormalCompletion && _iterator.return) {
						_iterator.return();
					}
				} finally {
					if (_didIteratorError) {
						throw _iteratorError;
					}
				}
			}

			ctx.stroke();
			if (snake.body.length < map.size - 1) {
				ctx.beginPath();
				ctx.fillStyle = "#f80";
				ctx.arc(this.scale * 0.5 + food.x * this.scale, this.scale * 0.5 + food.y * this.scale, 0.4 * this.scale, 0, 2 * Math.PI);
				ctx.fill();
			}
		}
	};

  
 
  • 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

点击直接资料领取

如果你在学习python或者Java哪怕是C遇到问题都可以来给我留言,因为在学习初期新手总会走很多弯路,这个时候如果没有有个人来帮一把的话很容易就放弃了。身边很多这样的例子许多人学着学着就转了专业换了方向,不仅是自身问题还是没有正确的学习。所以作为一个过来人我希望有问题给我留言,说不上是帮助就是顺手敲几行字的事情。

这里有python,Java学习资料还有有有趣好玩的编程项目,更有难寻的各种资源。反正看看也不亏。

文章来源: blog.csdn.net,作者:肥学,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/jiahuiandxuehui/article/details/125326338

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200