JavaScript贪吃蛇小游戏

风筱默染

已于 2022-02-14 10:14:28 修改

阅读量73

点赞数

分类专栏： JavaScript游戏文章标签： javascript html css

于 2021-09-26 15:17:10 首次发布

本文链接：https://blog.csdn.net/m0_51700376/article/details/120489485

版权

JavaScript游戏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>贪吃蛇</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.btn {
				width: 80px;
				height: 30px;
				border: 1px solid #000000;
				background-color: #eee;
				margin: 20px auto 0;
				display: block;
			}
			.map {
				width: 800px;
				height: 400px;
				background-color: #ccc;
				margin: 0 auto;
				position: relative;
			}
		</style>
	</head>
	<body>
		<button id="btn" class="btn" type="button">开始游戏</button><br />
		<div id="map" class="map"></div>
		<script>
			var map = document.getElementById("map");
			var foodElements = [];
			function Food() {
				this.x = 0;
				this.y = 0;
				Food.prototype.width = 20;
				Food.prototype.height = 20;
				Food.prototype.color = "green";
				if (typeof this.init != "function") {
					Food.prototype.init = function() {
						food.remove();
						var div = document.createElement("div");
						div.style.width = this.width + "px";
						div.style.height = this.height + "px";
						div.style.backgroundColor = this.color;
						div.style.position = "absolute";
						this.x = parseInt(Math.random() * (map.offsetWidth / this.width));
						this.y = parseInt(Math.random() * (map.offsetHeight / this.height));
						for (var i = 0; i < snake.body.length; i++) {
							while (this.x == snake.body[i].x && this.y == snake.body[i].y) {
								this.x = parseInt(Math.random() * (map.offsetWidth / this.width));
								this.y = parseInt(Math.random() * (map.offsetHeight / this.height));
								continue;
							}
						}
						div.style.left = this.x * this.width + "px";
						div.style.top = this.y * this.height + "px";
						map.appendChild(div);
						foodElements.push(div);
					};
				}
				if (typeof this.remove != "function") {
					Food.prototype.remove = function() {
						for (var i = 0; i < foodElements.length; i++) {
							map.removeChild(foodElements[i]);
							foodElements.splice(i, 1);
						}
					};
				}
			};
			var snakeElements = [];
			function Snake() {
				this.direction = "right";
				this.body = [{
						x: 3,
						y: 2,
						color: "red"
					},
					{
						x: 2,
						y: 2,
						color: "orange"
					},
					{
						x: 1,
						y: 2,
						color: "orange"
					}
				];
				Snake.prototype.width = 20;
				Snake.prototype.height = 20;

				if (!(this.init instanceof Function)) {
					Snake.prototype.init = function() {
						this.remove();
						for (var i = 0; i < this.body.length; i++) {
							var obj = this.body[i];
							var div = document.createElement("div");
							map.appendChild(div);
							div.style.width = this.width + "px";
							div.style.height = this.height + "px";
							div.style.position = "absolute";
							div.style.backgroundColor = obj.color;
							div.style.left = obj.x * this.width + "px";
							div.style.top = obj.y * this.height + "px";
							while (i == 0) {
								switch (this.direction) {
									case "right":
										div.style.borderTopRightRadius = "15px";
										div.style.borderBottomRightRadius = "15px";
										break;
									case "left":
										div.style.borderTopLeftRadius = "15px";
										div.style.borderBottomLeftRadius = "15px";
										break;
									case "top":
										div.style.borderTopRightRadius = "15px";
										div.style.borderTopLeftRadius = "15px";
										break;
									case "bottom":
										div.style.borderBottomRightRadius = "15px";
										div.style.borderBottomLeftRadius = "15px";
										break;
								}
								break;
							}
							snakeElements.push(div);
						}
					};
				}
				if (!(this.remove instanceof Function)) {
					Snake.prototype.remove = function() {
						for (var i = snakeElements.length - 1; i >= 0; i--) {
							map.removeChild(snakeElements[i]);
							snakeElements.splice(i, 1);
						}
					};
				}
				if (!(this.move instanceof Function)) {
					Snake.prototype.move = function() {
						for (var i = this.body.length - 1; i > 0; i--) {
							this.body[i].x = this.body[i - 1].x;
							this.body[i].y = this.body[i - 1].y;
						}
						switch (this.direction) {
							case "right":
								this.body[0].x += 1;
								break;
							case "left":
								this.body[0].x -= 1;
								break;
							case "top":
								this.body[0].y -= 1;
								break;
							case "bottom":
								this.body[0].y += 1;
								break;
						}
						this.init();
						if (this.body[0].x == food.x && this.body[0].y == food.y) {
							var last = this.body[this.body.length - 1];
							this.body.push({
								x: last.x,
								y: last.y,
								color: last.color
							});
							food.init();
						}
						var maxX = map.offsetWidth / this.width; 
						var maxY = map.offsetHeight / this.height;
						var headX = this.body[0].x; 
						var headY = this.body[0].y; 
						if (headX < 0 || headX > maxX - 1 || headY < 0 || headY > maxY - 1) {
							clearInterval(timeId);
							timeId = null;
							alert("撞墙了，游戏结束！");
							// 移除snake
							this.remove();
							this.direction = "right";
							this.body = [{
									x: 3,
									y: 2,
									color: "red"
								},
								{
									x: 2,
									y: 2,
									color: "orange"
								},
								{
									x: 1,
									y: 2,
									color: "orange"
								}
							];
							this.init();
							// 结束游戏
							return false;
						}
						for (var i = 4; i < this.body.length; i++) {
							if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
								clearInterval(timeId);
								timeId = null;
								alert("你把自己吃了，游戏结束！");
								// 移除snake
								this.remove();
								this.direction = "right";
								this.body = [{
										x: 3,
										y: 2,
										color: "red"
									},
									{
										x: 2,
										y: 2,
										color: "orange"
									},
									{
										x: 1,
										y: 2,
										color: "orange"
									}
								];
								this.init();
								return false;
							}
						}
					};
				}
			};
			var food = new Food();
			var snake = new Snake();
			food.init();
			snake.init();
			document.onkeydown = function(e) {
				var eve = e || window.event;
				switch (eve.keyCode) {
					case 37:
					case 65:
						if (snake.direction != "right") { 
							snake.direction = "left";
						}
						break;
					case 38:
					case 87:
						if (snake.direction != "bottom") {
							snake.direction = "top";
						}
						break;
					case 39:
					case 68:
						if (snake.direction != "left") {
							snake.direction = "right";
						}
						break;
					case 40:
					case 83:
						if (snake.direction != "top") {
							snake.direction = "bottom";
						}
						break;
				}
			};
			var btn = document.getElementById("btn");
			var timeId = null;
			function begin() {
				if (timeId != null) return;
				timeId = setInterval("snake.move()", 200);
			};
			btn.onclick = begin;
		</script>
	</body>
</html>

风筱默染

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript贪吃蛇小游戏

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style> * { margin: 0; padding: 0; } .btn { width: 80px; height: 30px; border: 1px solid #000000
复制链接

扫一扫