简单的网页游戏之贪吃蛇

最新推荐文章于 2024-09-10 16:01:03 发布
最新推荐文章于 2024-09-10 16:01:03 发布
阅读量214 收藏 1
点赞数
分类专栏： 前端游戏 文章标签： 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Annzz123/article/details/132201217
版权

上课无聊？来一把贪吃蛇游戏吧！

<!DOCTYPE html>
<HTML>
	<HEAD>
		<TITLE></TITLE>
		<style type="text/css">
			* {
				box-sizing: border-box;
			}

			html,
			body {
				background-color: #000;
				height: 100%;
			}

			body {
				background: #222;
				background: radial-gradient(#333, #111);
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
				color: #fff;
				font: 100%/1.5 sans-serif;
				overflow: hidden;
			}

			.score {
				color: rgba(255, 255, 255, 0.5);
				font-size: 16px;
				font-weight: bold;
				padding-top: 5px;
				text-align: center;
			}

			.stage {
				bottom: 0;
				left: 0;
				margin: auto;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 2;
			}

			.tile {
				background: rgba(0, 0, 0, 0.15);
				position: absolute;
				transition-property: background, box-shadow, opacity, transform;
				transform: translateZ(0);
				transition-duration: 3000ms;
			}

			.tile:before {
				bottom: 0;
				content: "";
				height: 0;
				left: 0;
				margin: auto;
				opacity: 0;
				position: absolute;
				right: 0;
				top: 0;
				width: 0;
				transition: opacity 300ms;
			}

			.tile.path:before {
				opacity: 1;
			}

			.tile.up:before {
				border-bottom: 4px inset rgba(255, 255, 255, 0.15);
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
			}

			.tile.down:before {
				border-top: 4px inset rgba(255, 255, 255, 0.15);
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
			}

			.tile.left:before {
				border-right: 4px inset rgba(255, 255, 255, 0.15);
				border-top: 4px solid transparent;
				border-bottom: 4px solid transparent;
			}

			.tile.right:before {
				border-left: 4px inset rgba(255, 255, 255, 0.15);
				border-top: 4px solid transparent;
				border-bottom: 4px solid transparent;
			}

			@media (max-width: 900px),
			(max-height: 900px) {

				.tile.up:before,
				.tile.down:before,
				.tile.left:before,
				.tile.right:before {
					border-width: 3px;
				}
			}

			@media (max-width: 500px),
			(max-height: 500px) {

				.tile.up:before,
				.tile.down:before,
				.tile.left:before,
				.tile.right:before {
					border-width: 2px;
				}
			}

			.tile.pressed {
				background: rgba(0, 0, 0, 0.3);
				box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
				transition-duration: 0ms;
			}
		</style>
	</head>
	<body>
		<div class="score">0</div>
		<div class="stage"></div>
		<script type="text/javascript">
			(function() {
				"use strict";
				var lastTime = 0;
				var vendors = ["webkit", "moz"];
				for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
					window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
					window.cancelAnimationFrame =
						window[vendors[x] + "CancelAnimationFrame"] ||
						window[vendors[x] + "CancelRequestAnimationFrame"];
				}
				if (!window.requestAnimationFrame) {
					window.requestAnimationFrame = function(callback, element) {
						var currTime = new Date().getTime();
						var timeToCall = Math.max(0, 16 - (currTime - lastTime));
						var id = window.setTimeout(function() {
							callback(currTime + timeToCall);
						}, timeToCall);
						lastTime = currTime + timeToCall;
						return id;
					};
				}
				if (!window.cancelAnimationFrame) {
					window.cancelAnimationFrame = function(id) {
						clearTimeout(id);
					};
				}
			})();
			(function() {
				"use strict";

				function hasClass(elem, className) {
					return new RegExp(" " + className + " ").test(" " + elem.className + " ");
				}

				function addClass(elem, className) {
					if (!hasClass(elem, className)) {
						elem.className += " " + className;
					}
				}

				function removeClass(elem, className) {
					var newClass = " " + elem.className.replace(/[\t\r\n]/g, " ") + " ";
					if (hasClass(elem, className)) {
						while (newClass.indexOf(" " + className + " ") >= 0) {
							newClass = newClass.replace(" " + className + " ", " ");
						}
						elem.className = newClass.replace(/^\s+|\s+$/g, "");
					}
				}

				function toggleClass(elem, className) {
					var newClass = " " + elem.className.replace(/[\t\r\n]/g, " ") + " ";
					if (hasClass(elem, className)) {
						while (newClass.indexOf(" " + className + " ") >= 0) {
							newClass = newClass.replace(" " + className + " ", " ");
						}
						elem.className = newClass.replace(/^\s+|\s+$/g, "");
					} else {
						elem.className += " " + className;
					}
				}
			})();
			g = {};

			(function() {
				"use strict";

				g.m = Math;
				g.mathProps =
					"E LN10 LN2 LOG2E LOG10E PI SQRT1_2 SQRT2 abs acos asin atan ceil cos exp floor log round sin sqrt tan atan2 pow max min"
					.split(
						" "
					);
				for (var i = 0; i < g.mathProps.length; i++) {
					g[g.mathProps[i]] = g.m[g.mathProps[i]];
				}
				g.m.TWO_PI = g.m.PI * 2;

				g.isset = function(prop) {
					return typeof prop != "undefined";
				};

				g.log = function() {
					if (g.isset(g.config) && g.config.debug && window.console) {
						console.log(Array.prototype.slice.call(arguments));
					}
				};
			})();

			(function() {
				"use strict";

				g.Group = function() {
					this.collection = [];
					this.length = 0;
				};

				g.Group.prototype.add = function(item) {
					this.collection.push(item);
					this.length++;
				};

				g.Group.prototype.remove = function(index) {
					if (index < this.length) {
						this.collection.splice(index, 1);
						this.length--;
					}
				};

				g.Group.prototype.empty = function() {
					this.collection.length = 0;
					this.length = 0;
				};

				g.Group.prototype.each = function(action, asc) {
					var asc = asc || 0,
						i;
					if (asc) {
						for (i = 0; i < this.length; i++) {
							this.collection[i][action](i);
						}
					} else {
						i = this.length;
						while (i--) {
							this.collection[i][action](i);
						}
					}
				};
			})();

			(function() {
				"use strict";

				g.util = {};

				g.util.rand = function(min, max) {
					return g.m.random() * (max - min) + min;
				};

				g.util.randInt = function(min, max) {
					return g.m.floor(g.m.random() * (max - min + 1)) + min;
				};
			})();

			(function() {
				"use strict";

				g.states = {};

				g.addState = function(state) {
					g.states[state.name] = state;
				};

				g.setState = function(name) {
					if (g.state) {
						g.states[g.state].exit();
					}
					g.state = name;
					g.states[g.state].init();
				};

				g.currentState = function() {
					return g.states[g.state];
				};
			})();

			(function() {
				"use strict";

				g.Time = function() {
					this.reset();
				};

				g.Time.prototype.reset = function() {
					this.now = Date.now();
					this.last = Date.now();
					this.delta = 60;
					this.ndelta = 1;
					this.elapsed = 0;
					this.nelapsed = 0;
					this.tick = 0;
				};

				g.Time.prototype.update = function() {
					this.now = Date.now();
					this.delta = this.now - this.last;
					this.ndelta = Math.min(Math.max(this.delta / (1000 / 60), 0.0001), 10);
					this.elapsed += this.delta;
					this.nelapsed += this.ndelta;
					this.last = this.now;
					this.tick++;
				};
			})();

			(function() {
				"use strict";

				g.Grid = function(cols, rows) {
					this.cols = cols;
					this.rows = rows;
					this.tiles = [];
					for (var x = 0; x < cols; x++) {
						this.tiles[x] = [];
						for (var y = 0; y < rows; y++) {
							this.tiles[x].push("empty");
						}
					}
				};

				g.Grid.prototype.get = function(x, y) {
					return this.tiles[x][y];
				};

				g.Grid.prototype.set = function(x, y, val) {
					this.tiles[x][y] = val;
				};
			})();

			(function() {
				"use strict";

				g.BoardTile = function(opt) {
					this.parentState = opt.parentState;
					this.parentGroup = opt.parentGroup;
					this.col = opt.col;
					this.row = opt.row;
					this.x = opt.x;
					this.y = opt.y;
					this.z = 0;
					this.w = opt.w;
					this.h = opt.h;
					this.elem = document.createElement("div");
					this.elem.style.position = "absolute";
					this.elem.className = "tile";
					this.parentState.stageElem.appendChild(this.elem);
					this.classes = {
						pressed: 0,
						path: 0,
						up: 0,
						down: 0,
						left: 0,
						right: 0
					};
					this.updateDimensions();
				};

				g.BoardTile.prototype.update = function() {
					for (var k in this.classes) {
						if (this.classes[k]) {
							this.classes[k]--;
						}
					}

					if (
						this.parentState.food.tile.col == this.col ||
						this.parentState.food.tile.row == this.row
					) {
						this.classes.path = 1;
						if (this.col < this.parentState.food.tile.col) {
							this.classes.right = 1;
						} else {
							this.classes.right = 0;
						}
						if (this.col > this.parentState.food.tile.col) {
							this.classes.left = 1;
						} else {
							this.classes.left = 0;
						}
						if (this.row > this.parentState.food.tile.row) {
							this.classes.up = 1;
						} else {
							this.classes.up = 0;
						}
						if (this.row < this.parentState.food.tile.row) {
							this.classes.down = 1;
						} else {
							this.classes.down = 0;
						}
					} else {
						this.classes.path = 0;
					}

					if (this.parentState.food.eaten) {
						this.classes.path = 0;
					}
				};

				g.BoardTile.prototype.updateDimensions = function() {
					this.x = this.col * this.parentState.tileWidth;
					this.y = this.row * this.parentState.tileHeight;
					this.w = this.parentState.tileWidth - this.parentState.spacing;
					this.h = this.parentState.tileHeight - this.parentState.spacing;
					this.elem.style.left = this.x + "px";
					this.elem.style.top = this.y + "px";
					this.elem.style.width = this.w + "px";
					this.elem.style.height = this.h + "px";
				};

				g.BoardTile.prototype.render = function() {
					var classString = "";
					for (var k in this.classes) {
						if (this.classes[k]) {
							classString += k + " ";
						}
					}
					this.elem.className = "tile " + classString;
				};
			})();

			(function() {
				"use strict";

				g.SnakeTile = function(opt) {
					this.parentState = opt.parentState;
					this.parentGroup = opt.parentGroup;
					this.col = opt.col;
					this.row = opt.row;
					this.x = opt.x;
					this.y = opt.y;
					this.w = opt.w;
					this.h = opt.h;
					this.color = null;
					this.scale = 1;
					this.rotation = 0;
					this.blur = 0;
					this.alpha = 1;
					this.borderRadius = 0;
					this.borderRadiusAmount = 0;
					this.elem = document.createElement("div");
					this.elem.style.position = "absolute";
					this.parentState.stageElem.appendChild(this.elem);
				};

				g.SnakeTile.prototype.update = function(i) {
					this.x = this.col * this.parentState.tileWidth;
					this.y = this.row * this.parentState.tileHeight;
					if (i == 0) {
						this.color = "#fff";
						this.blur =
							this.parentState.dimAvg * 0.03 +
							Math.sin(this.parentState.time.elapsed / 200) *
							this.parentState.dimAvg *
							0.015;
						if (this.parentState.snake.dir == "n") {
							this.borderRadius =
								this.borderRadiusAmount + "% " + this.borderRadiusAmount + "% 0 0";
						} else if (this.parentState.snake.dir == "s") {
							this.borderRadius =
								"0 0 " +
								this.borderRadiusAmount +
								"% " +
								this.borderRadiusAmount +
								"%";
						} else if (this.parentState.snake.dir == "e") {
							this.borderRadius =
								"0 " +
								this.borderRadiusAmount +
								"% " +
								this.borderRadiusAmount +
								"% 0";
						} else if (this.parentState.snake.dir == "w") {
							this.borderRadius =
								this.borderRadiusAmount + "% 0 0 " + this.borderRadiusAmount + "%";
						}
					} else {
						this.color = "#fff";
						this.blur = 0;
						this.borderRadius = "0";
					}
					this.alpha = 1 - i / this.parentState.snake.tiles.length * 0.6;
					this.rotation =
						this.parentState.snake.justAteTick /
						this.parentState.snake.justAteTickMax *
						90;
					this.scale =
						1 +
						this.parentState.snake.justAteTick /
						this.parentState.snake.justAteTickMax *
						1;
				};

				g.SnakeTile.prototype.updateDimensions = function() {
					this.w = this.parentState.tileWidth - this.parentState.spacing;
					this.h = this.parentState.tileHeight - this.parentState.spacing;
				};

				g.SnakeTile.prototype.render = function(i) {
					this.elem.style.left = this.x + "px";
					this.elem.style.top = this.y + "px";
					this.elem.style.width = this.w + "px";
					this.elem.style.height = this.h + "px";
					this.elem.style.backgroundColor = "rgba(255, 255, 255, " + this.alpha + ")";
					this.elem.style.boxShadow = "0 0 " + this.blur + "px #fff";
					this.elem.style.borderRadius = this.borderRadius;
				};
			})();

			(function() {
				"use strict";

				g.FoodTile = function(opt) {
					this.parentState = opt.parentState;
					this.parentGroup = opt.parentGroup;
					this.col = opt.col;
					this.row = opt.row;
					this.x = opt.x;
					this.y = opt.y;
					this.w = opt.w;
					this.h = opt.h;
					this.blur = 0;
					this.scale = 1;
					this.hue = 100;
					this.opacity = 0;
					this.elem = document.createElement("div");
					this.elem.style.position = "absolute";
					this.parentState.stageElem.appendChild(this.elem);
				};

				g.FoodTile.prototype.update = function() {
					this.x = this.col * this.parentState.tileWidth;
					this.y = this.row * this.parentState.tileHeight;
					this.blur =
						this.parentState.dimAvg * 0.03 +
						Math.sin(this.parentState.time.elapsed / 200) *
						this.parentState.dimAvg *
						0.015;
					this.scale = 0.8 + Math.sin(this.parentState.time.elapsed / 200) * 0.2;

					if (this.parentState.food.birthTick || this.parentState.food.deathTick) {
						if (this.parentState.food.birthTick) {
							this.opacity = 1 - this.parentState.food.birthTick / 1 * 1;
						} else {
							this.opacity = this.parentState.food.deathTick / 1 * 1;
						}
					} else {
						this.opacity = 1;
					}
				};

				g.FoodTile.prototype.updateDimensions = function() {
					this.w = this.parentState.tileWidth - this.parentState.spacing;
					this.h = this.parentState.tileHeight - this.parentState.spacing;
				};

				g.FoodTile.prototype.render = function() {
					this.elem.style.left = this.x + "px";
					this.elem.style.top = this.y + "px";
					this.elem.style.width = this.w + "px";
					this.elem.style.height = this.h + "px";
					this.elem.style["transform"] = "translateZ(0) scale(" + this.scale + ")";
					this.elem.style.backgroundColor = "hsla(" + this.hue + ", 100%, 60%, 1)";
					this.elem.style.boxShadow =
						"0 0 " + this.blur + "px hsla(" + this.hue + ", 100%, 60%, 1)";
					this.elem.style.opacity = this.opacity;
				};
			})();

			(function() {
				"use strict";

				g.Snake = function(opt) {
					this.parentState = opt.parentState;
					(this.dir = "e"), (this.currDir = this.dir);
					this.tiles = [];
					for (var i = 0; i < 5; i++) {
						this.tiles.push(
							new g.SnakeTile({
								parentState: this.parentState,
								parentGroup: this.tiles,
								col: 8 - i,
								row: 3,
								x: (8 - i) * opt.parentState.tileWidth,
								y: 3 * opt.parentState.tileHeight,
								w: opt.parentState.tileWidth - opt.parentState.spacing,
								h: opt.parentState.tileHeight - opt.parentState.spacing
							})
						);
					}
					this.last = 0;
					this.updateTick = 10;
					this.updateTickMax = this.updateTick;
					this.updateTickLimit = 3;
					this.updateTickChange = 0.2;
					this.deathFlag = 0;
					this.justAteTick = 0;
					this.justAteTickMax = 1;
					this.justAteTickChange = 0.05;

					var i = this.tiles.length;

					while (i--) {
						this.parentState.grid.set(this.tiles[i].col, this.tiles[i].row, "snake");
					}
				};

				g.Snake.prototype.updateDimensions = function() {
					var i = this.tiles.length;
					while (i--) {
						this.tiles[i].updateDimensions();
					}
				};

				g.Snake.prototype.update = function() {
					if (this.parentState.keys.up) {
						if (
							this.dir != "s" &&
							this.dir != "n" &&
							this.currDir != "s" &&
							this.currDir != "n"
						) {
							this.dir = "n";
						}
					} else if (this.parentState.keys.down) {
						if (
							this.dir != "n" &&
							this.dir != "s" &&
							this.currDir != "n" &&
							this.currDir != "s"
						) {
							this.dir = "s";
						}
					} else if (this.parentState.keys.right) {
						if (
							this.dir != "w" &&
							this.dir != "e" &&
							this.currDir != "w" &&
							this.currDir != "e"
						) {
							this.dir = "e";
						}
					} else if (this.parentState.keys.left) {
						if (
							this.dir != "e" &&
							this.dir != "w" &&
							this.currDir != "e" &&
							this.currDir != "w"
						) {
							this.dir = "w";
						}
					}

					this.parentState.keys.up = 0;
					this.parentState.keys.down = 0;
					this.parentState.keys.right = 0;
					this.parentState.keys.left = 0;

					this.updateTick += this.parentState.time.ndelta;
					if (this.updateTick >= this.updateTickMax) {
						this.updateTick = this.updateTick - this.updateTickMax;
						this.tiles.unshift(
							new g.SnakeTile({
								parentState: this.parentState,
								parentGroup: this.tiles,
								col: this.tiles[0].col,
								row: this.tiles[0].row,
								x: this.tiles[0].col * this.parentState.tileWidth,
								y: this.tiles[0].row * this.parentState.tileHeight,
								w: this.parentState.tileWidth - this.parentState.spacing,
								h: this.parentState.tileHeight - this.parentState.spacing
							})
						);
						this.last = this.tiles.pop();
						this.parentState.stageElem.removeChild(this.last.elem);

						this.parentState.boardTiles.collection[
							this.last.col + this.last.row * this.parentState.cols
						].classes.pressed = 2;
						var i = this.tiles.length;

						while (i--) {
							this.parentState.grid.set(
								this.tiles[i].col,
								this.tiles[i].row,
								"snake"
							);
						}
						this.parentState.grid.set(this.last.col, this.last.row, "empty");

						if (this.dir == "n") {
							this.currDir = "n";
							this.tiles[0].row -= 1;
						} else if (this.dir == "s") {
							this.currDir = "s";
							this.tiles[0].row += 1;
						} else if (this.dir == "w") {
							this.currDir = "w";
							this.tiles[0].col -= 1;
						} else if (this.dir == "e") {
							this.currDir = "e";
							this.tiles[0].col += 1;
						}

						this.wallFlag = false;
						if (this.tiles[0].col >= this.parentState.cols) {
							this.tiles[0].col = 0;
							this.wallFlag = true;
						}
						if (this.tiles[0].col < 0) {
							this.tiles[0].col = this.parentState.cols - 1;
							this.wallFlag = true;
						}
						if (this.tiles[0].row >= this.parentState.rows) {
							this.tiles[0].row = 0;
							this.wallFlag = true;
						}
						if (this.tiles[0].row < 0) {
							this.tiles[0].row = this.parentState.rows - 1;
							this.wallFlag = true;
						}

						if (
							this.parentState.grid.get(this.tiles[0].col, this.tiles[0].row) ==
							"snake"
						) {
							this.deathFlag = 1;
							clearTimeout(this.foodCreateTimeout);
						}

						if (
							this.parentState.grid.get(this.tiles[0].col, this.tiles[0].row) ==
							"food"
						) {
							this.tiles.push(
								new g.SnakeTile({
									parentState: this.parentState,
									parentGroup: this.tiles,
									col: this.last.col,
									row: this.last.row,
									x: this.last.col * this.parentState.tileWidth,
									y: this.last.row * this.parentState.tileHeight,
									w: this.parentState.tileWidth - this.parentState.spacing,
									h: this.parentState.tileHeight - this.parentState.spacing
								})
							);
							if (this.updateTickMax - this.updateTickChange > this.updateTickLimit) {
								this.updateTickMax -= this.updateTickChange;
							}
							this.parentState.score++;
							this.parentState.scoreElem.innerHTML = this.parentState.score;
							this.justAteTick = this.justAteTickMax;

							this.parentState.food.eaten = 1;
							this.parentState.stageElem.removeChild(this.parentState.food.tile.elem);

							var _this = this;

							this.foodCreateTimeout = setTimeout(function() {
								_this.parentState.food = new g.Food({
									parentState: _this.parentState
								});
							}, 300);
						}

						if (this.deathFlag) {
							g.setState("play");
						}
					}

					var i = this.tiles.length;
					while (i--) {
						this.tiles[i].update(i);
					}

					if (this.justAteTick > 0) {
						this.justAteTick -= this.justAteTickChange;
					} else if (this.justAteTick < 0) {
						this.justAteTick = 0;
					}
				};

				g.Snake.prototype.render = function() {
					var i = this.tiles.length;
					while (i--) {
						this.tiles[i].render(i);
					}
				};
			})();

			(function() {
				"use strict";

				g.Food = function(opt) {
					this.parentState = opt.parentState;
					this.tile = new g.FoodTile({
						parentState: this.parentState,
						col: 0,
						row: 0,
						x: 0,
						y: 0,
						w: opt.parentState.tileWidth - opt.parentState.spacing,
						h: opt.parentState.tileHeight - opt.parentState.spacing
					});
					this.reset();
					this.eaten = 0;
					this.birthTick = 1;
					this.deathTick = 0;
					this.birthTickChange = 0.025;
					this.deathTickChange = 0.05;
				};

				g.Food.prototype.reset = function() {
					var empty = [];
					for (var x = 0; x < this.parentState.cols; x++) {
						for (var y = 0; y < this.parentState.rows; y++) {
							var tile = this.parentState.grid.get(x, y);
							if (tile == "empty") {
								empty.push({
									x: x,
									y: y
								});
							}
						}
					}
					var newTile = empty[g.util.randInt(0, empty.length - 1)];
					this.tile.col = newTile.x;
					this.tile.row = newTile.y;
				};

				g.Food.prototype.updateDimensions = function() {
					this.tile.updateDimensions();
				};

				g.Food.prototype.update = function() {
					this.tile.update();

					if (this.birthTick > 0) {
						this.birthTick -= this.birthTickChange;
					} else if (this.birthTick < 0) {
						this.birthTick = 0;
					}

					this.parentState.grid.set(this.tile.col, this.tile.row, "food");
				};

				g.Food.prototype.render = function() {
					this.tile.render();
				};
			})();

			(function() {
				"use strict";

				function StatePlay() {
					this.name = "play";
				}

				StatePlay.prototype.init = function() {
					this.scoreElem = document.querySelector(".score");
					this.stageElem = document.querySelector(".stage");
					this.dimLong = 28;
					this.dimShort = 16;
					this.padding = 0.25;
					this.boardTiles = new g.Group();
					this.keys = {};
					this.foodCreateTimeout = null;
					this.score = 0;
					this.scoreElem.innerHTML = this.score;
					this.time = new g.Time();
					this.getDimensions();
					if (this.winWidth < this.winHeight) {
						this.rows = this.dimLong;
						this.cols = this.dimShort;
					} else {
						this.rows = this.dimShort;
						this.cols = this.dimLong;
					}
					this.spacing = 1;
					this.grid = new g.Grid(this.cols, this.rows);
					this.resize();
					this.createBoardTiles();
					this.bindEvents();
					this.snake = new g.Snake({
						parentState: this
					});
					this.food = new g.Food({
						parentState: this
					});
				};

				StatePlay.prototype.getDimensions = function() {
					this.winWidth = window.innerWidth;
					this.winHeight = window.innerHeight;
					this.activeWidth = this.winWidth - this.winWidth * this.padding;
					this.activeHeight = this.winHeight - this.winHeight * this.padding;
				};

				StatePlay.prototype.resize = function() {
					var _this = g.currentState();

					_this.getDimensions();

					_this.stageRatio = _this.rows / _this.cols;

					if (_this.activeWidth > _this.activeHeight / _this.stageRatio) {
						_this.stageHeight = _this.activeHeight;
						_this.stageElem.style.height = _this.stageHeight + "px";
						_this.stageWidth = Math.floor(_this.stageHeight / _this.stageRatio);
						_this.stageElem.style.width = _this.stageWidth + "px";
					} else {
						_this.stageWidth = _this.activeWidth;
						_this.stageElem.style.width = _this.stageWidth + "px";
						_this.stageHeight = Math.floor(_this.stageWidth * _this.stageRatio);
						_this.stageElem.style.height = _this.stageHeight + "px";
					}

					_this.tileWidth = ~~(_this.stageWidth / _this.cols);
					_this.tileHeight = ~~(_this.stageHeight / _this.rows);
					_this.dimAvg = (_this.activeWidth + _this.activeHeight) / 2;
					_this.spacing = Math.max(1, ~~(_this.dimAvg * 0.0025));

					_this.stageElem.style.marginTop = -_this.stageElem.offsetHeight / 2 + _this.headerHeight / 2 + "px";

					_this.boardTiles.each("updateDimensions");
					_this.snake !== undefined && _this.snake.updateDimensions();
					_this.food !== undefined && _this.food.updateDimensions();
				};

				StatePlay.prototype.createBoardTiles = function() {
					for (var y = 0; y < this.rows; y++) {
						for (var x = 0; x < this.cols; x++) {
							this.boardTiles.add(
								new g.BoardTile({
									parentState: this,
									parentGroup: this.boardTiles,
									col: x,
									row: y,
									x: x * this.tileWidth,
									y: y * this.tileHeight,
									w: this.tileWidth - this.spacing,
									h: this.tileHeight - this.spacing
								})
							);
						}
					}
				};

				StatePlay.prototype.upOn = function() {
					g.currentState().keys.up = 1;
				};
				StatePlay.prototype.downOn = function() {
					g.currentState().keys.down = 1;
				};
				StatePlay.prototype.rightOn = function() {
					g.currentState().keys.right = 1;
				};
				StatePlay.prototype.leftOn = function() {
					g.currentState().keys.left = 1;
				};
				StatePlay.prototype.upOff = function() {
					g.currentState().keys.up = 0;
				};
				StatePlay.prototype.downOff = function() {
					g.currentState().keys.down = 0;
				};
				StatePlay.prototype.rightOff = function() {
					g.currentState().keys.right = 0;
				};
				StatePlay.prototype.leftOff = function() {
					g.currentState().keys.left = 0;
				};

				StatePlay.prototype.keydown = function(e) {
					e.preventDefault();
					var e = e.keyCode ? e.keyCode : e.which,
						_this = g.currentState();
					if (e === 38 || e === 87) {
						_this.upOn();
					}
					if (e === 39 || e === 68) {
						_this.rightOn();
					}
					if (e === 40 || e === 83) {
						_this.downOn();
					}
					if (e === 37 || e === 65) {
						_this.leftOn();
					}
				};

				StatePlay.prototype.bindEvents = function() {
					var _this = g.currentState();
					window.addEventListener("keydown", _this.keydown, false);
					window.addEventListener("resize", _this.resize, false);
				};

				StatePlay.prototype.step = function() {
					this.boardTiles.each("update");
					this.boardTiles.each("render");
					this.snake.update();
					this.snake.render();
					this.food.update();
					this.food.render();
					this.time.update();
				};

				StatePlay.prototype.exit = function() {
					window.removeEventListener("keydown", this.keydown, false);
					window.removeEventListener("resize", this.resize, false);
					this.stageElem.innerHTML = "";
					this.grid.tiles = null;
					this.time = null;
				};

				g.addState(new StatePlay());
			})();

			(function() {
				"use strict";

				g.config = {
					title: "Snakely",
					debug: window.location.hash == "#debug" ? 1 : 0,
					state: "play"
				};

				g.setState(g.config.state);

				g.time = new g.Time();

				g.step = function() {
					requestAnimationFrame(g.step);
					g.states[g.state].step();
					g.time.update();
				};

				window.addEventListener("load", g.step, false);
			})();
		</script>>
	</body>>
</html>

HTML文件点开就可以玩哦

 

 

小孙同学1024
关注
专栏目录
贪吃蛇html网页小游戏,网页贪吃蛇HTML5小游戏制作
weixin_39976413的博客
05-31 869
贪吃蛇是以前我们经常在手机里玩的一个小游戏，现在要是把它搬到网页上也会让人更回味。这是一款非常有趣的HTML5响应式网页贪吃蛇小游戏。在游戏中你可以使用键盘的上下左右来控制蛇的运动方向。现在要列出的是贪吃蛇的制作方法。enjoy！查看演示下载插件.tile {background: rgba(0, 0, 0, 0.15);position: absolute;-webkit-transition-...
贪吃蛇游戏网页版
06-08
贪吃蛇游戏网页版源码，双击可直接运行，演示地址http://glklkl.top/snake_game.html
贪吃蛇（网页版）
09-16
用JavaScript在网页完成贪吃蛇的移动，和增加食物。
【0基础】制作HTML网页小游戏——贪吃蛇（附详细解析）
最新发布
m0_52177571的博客
09-10 1413
我在昨天的文章里面分享了网页版贪吃蛇小游戏的源码，今天就来给大家详细讲解一下每部分代码是如何运作的，以及以后要如何美化贪吃蛇的UI界面，在哪里修改等。这是基本的HTML结构。元素用于绘制游戏,而标签包含了所有的JavaScript代码。这些CSS规则用于居中显示游戏画布并设置背景颜色。这里获取了canvas元素并创建了2D绘图上下文,用于在canvas上绘制图形。这定义了网格大小和每个单元格的尺寸。初始化蛇的位置,蛇由一系列坐标点组成。随机生成食物的位置。
网页版贪食蛇【基于HTML+CSS+JavaScript】实现
lei20172017的博客
05-04 2099
最终效果 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>贪食蛇</title> </head> <body> <div id="map" style="backg
网页版贪吃蛇游戏开发
李永岩的专栏
06-24 1317
1.游戏开发分析：           开发目的分析：                   为了让大家在工作生活之余休闲只时，能让大家缓解和放松身心特意开发的一款网页版的休闲游戏，同时也是为了自己对javascript语言有更好的了解和应用，提高                   自己的编程能力所开发的一款小游戏。           开发可行性分析：
jQuery贪吃蛇网页版游戏代码
07-29
jQuery贪吃蛇网页版游戏代码,贪吃蛇网页版游戏代码基于jquery.1.11.3.min.js制作，贪吃蛇游戏是一款经典的益智游戏，有PC和手机等多平台版本，既简单又耐玩.Query网页版贪吃蛇游戏，带得分排行榜，交互的贪吃蛇游戏...
贪吃蛇_简单的贪吃蛇网页_
10-02
总结来说，这个简单的贪吃蛇网页项目可以帮助初学者理解如何利用HTML、CSS和JavaScript构建一个交互式的网页游戏。通过这个项目，你可以学习到网页开发的基本流程，理解游戏逻辑的实现，以及实践JavaScript的事件...
js实现网页版贪吃蛇游戏
10-15
在本文档中，我们将详细探讨如何使用JavaScript实现一个基础的网页版贪吃蛇游戏。贪吃蛇游戏是一个经典的游戏类型，玩家通过键盘方向键控制一个不断移动的蛇，吃掉屏幕上随机出现的食物，蛇随着吃掉食物的增多而增长...
童年游戏：贪吃蛇，在线试玩网址在资源描述中 使用JS语言
11-20
贪吃蛇 是一款经典的小游戏。许多电子游戏都是以操作者的胜利而告终，而贪食蛇的结局却是死亡。不管玩得多么纯熟，技术多么高超，你最终听到的都是贪食蛇的一声惨叫。当手机上的小蛇越长越长，积分越来越高的时候，...
网页贪吃蛇
11-19
javascript+html编写的贪吃蛇，思想的面向对象的思想，把蛇看成一个对象
html贪吃蛇
10-28
html网页版的贪吃蛇大战，独特而犀利。虽然样式简便，但是具有一定体验感！
JavaScript实现贪吃蛇小游戏（网页单机版）
千里之行，始于足下
05-13 2060
使用 JavaScript 实现了一个网页版的贪吃蛇小游戏
网页游戏--贪吃蛇游戏
Hling's Blog
06-16 1097
还有一些问题没有解决，能简单的实现。但是没有实现升级的问题以及一些设置和背景画面等，最大的问题是在IE下运行成功，但是google和360浏览器都不能实现，其他的浏览器还没有测试。先贴在这里，具体的分析过程和总结等解决此问题后全部给出，具体解决方案还没想好。希望大神提供问题的解决方案！ Untitled Document #t{ width:450px; he
贪吃蛇网页
m0_58811578的博客
06-10 711
贪吃蛇相信大部分网友应该都有玩过，这个游戏哪里有呢？它可以是一个APP，可以是一个微信小程序或者是QQ小程序，许多人用来消耗无聊的时间，是一个很好的业余小游戏，这里为大家分享一个网页贪吃蛇，有很多地方没有完善，所以仅供参考借鉴 ...
网页版贪吃蛇
06-10 1011
 http://www28.websamba.com/blackbow/snake/snake.html谁说javascript只是用来搞一些小特效或者表单验证的？
网页版贪吃蛇(HTML 5)
weixin_30876945的博客
07-24 3203
(文字描述太繁琐了, 贪吃蛇算法很经典不多说， 那个伪播放器，不值一提。） 源码： 网页版贪吃蛇【http://files.cnblogs.com/crystalplus/%E4%B8%A4%E4%B8%AA%E7%BD%91%E9%A1%B5%E6%A0%B7%E4%BE%8B(%E6%97%A0%E9%9F%B3%E4%B9%90%E7%89%88).7z】 显示截图: ...
#demo#网页小游戏：贪吃蛇
老衲的少女心i~
05-08 156
贪吃蛇 目标： 整图为一个 64 * 40 大小的矩形 随机在空白坐标点生成食物 蛇不能撞墙和吃自己 每吃一个食物身体长一格 初始速度为 150ms 移动一次，随着食物越多，速度越快，最快 50ms 移动一次 方向的改变用键盘的方向键控制，不能直接往反方向转向 思路： 使用 canvas 作为基础实现方式 蛇的主体采用一个二维数组来实现绘制 蛇的移动去掉蛇数据结构的最后一位，根据方向和蛇头的数据做相应更改再添加到蛇主体头部，同时判断是否结束 蛇将要移动的坐标点是否是食物的位置，如果是则不删除蛇的最后一位
网页版贪吃蛇游戏 - JavaScript实现
在该网页版的贪吃蛇游戏中，主要涉及以下几个关键知识点： 1. **HTML 结构**：游戏的基础框架由HTML构建，包括`<html>`、`<head>`和`<body>`等元素。`<meta>`标签用于定义文档的字符编码，原本设置为UTF-8，需要改...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小孙同学1024

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值