用贪吃蛇小游戏表白

在线体验地址（电脑键盘控制）：

如何使用

文章末尾是该游戏的完整代码（基于html+css+js），没学过前端或者没有编辑器的朋友不要着急，只要有电脑就可以完整运行此项目。

步骤：首先在桌面新建一个文本文档，然后把完整代码复制进去，保存并关闭。接着把文件的后缀改为html，双击即可看到游戏界面。

 不会修改文件后缀或者文件显示不了后缀的朋友可以看教程:https://www.windowszj.com/news/4884.html
界面出现中文乱码的可以看看如何解决：https://zhuanlan.zhihu.com/p/149128500

效果及修改

基础设定：吃一个分数增加52，达到520分会弹出一个表白框。
在这里插入图片描述

在这里插入图片描述
分数达到520之后弹出表白框。（里面的文字可以更改）
如何修改文字：
代码复制过去后，键盘按住ctrl+f 搜索：除夕快乐，永远爱你 应该就可以定位到文字了。

完整源码

完整源码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>贪吃蛇</TITLE><meta charset="utf-8" /><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><style type="text/css">
/*================================================General================================================*/* {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================================================*/.score {color: rgba(255, 255, 255, 0.5);font-size: 16px;font-weight: bold;padding-top: 5px;text-align: center;
}/*================================================Stage================================================*/.stage {bottom: 0;left: 0;margin: auto;position: absolute;right: 0;top: 0;z-index: 2;
}/*================================================Tiles================================================*/.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">var score=0;/*================================================Polyfill================================================*/(function() {"use strict";/*================================================Request Animation Frame================================================*/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);};}
})();/*================================================DOM Manipulation================================================*/(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;}}
})();/*================================================Core================================================*/g = {};(function() {"use strict";/*================================================Math================================================*/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;/*================================================Miscellaneous================================================*/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));}};
})();/*================================================Group================================================*/(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);}}};
})();/*================================================Utilities================================================*/(function() {"use strict";g.util = {};/*================================================Random================================================*/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;};
})();/*================================================State================================================*/(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];};
})();/*================================================Time================================================*/(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++;};
})();/*================================================Grid Entity================================================*/(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;};
})();/*================================================Board Tile Entity================================================*/(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;};
})();/*================================================Snake Tile Entity================================================*/(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;};
})();/*================================================Food Tile Entity================================================*/(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;};
})();/*================================================Snake Entity================================================*/(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;// sync data grid of the play statevar 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) {// reset the update timer to 0, or whatever leftover there isthis.updateTick = this.updateTick - this.updateTickMax;// rotate snake block arraythis.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;// sync data grid of the play statevar 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");// move the snake's headif (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;}// wrap wallsthis.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;}// check death by eating selfif (this.parentState.grid.get(this.tiles[0].col, this.tiles[0].row) =="snake") {this.deathFlag = 1;clearTimeout(this.foodCreateTimeout);}// check eating of foodif (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.score+52;this.parentState.scoreElem.innerHTML = "分数："+this.parentState.score;this.justAteTick = this.justAteTickMax;score=this.parentState.score;this.parentState.food.eaten = 1;this.parentState.stageElem.removeChild(this.parentState.food.tile.elem);if(score==520){alert('永远爱你！');}var _this = this;this.foodCreateTimeout = setTimeout(function() {_this.parentState.food = new g.Food({parentState: _this.parentState});}, 300);}// check death by eating selfif (this.deathFlag) {g.setState("play");}}// update individual snake tilesvar 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() {// render individual snake tilesvar i = this.tiles.length;while (i--) {this.tiles[i].render(i);}};
})();/*================================================Food Entity================================================*/(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() {// update food tilethis.tile.update();if (this.birthTick > 0) {this.birthTick -= this.birthTickChange;} else if (this.birthTick < 0) {this.birthTick = 0;}// sync data grid of the play statethis.parentState.grid.set(this.tile.col, this.tile.row, "food");};g.Food.prototype.render = function() {this.tile.render();};
})();/*================================================Play State================================================*/(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());
})();/*================================================Game================================================*/(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>
上下左右控制（键盘操作）<br>
可以撞墙，但不可以撞到自己<br>
</body>
</html>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

STM32学习笔记（3）掌握GPIO操作—输入模式(上拉/下拉)
目录1、输入模式(上拉/下拉)详细说明2、输入模式实现按键控制1、如何判断按键变化？2、按键监测函数1、输入模式(上拉/下拉)详细说明在输入模式时，施密特触发器打开，输出被禁止。可通过输入数据寄存器 GPIOx_IDR 读取 I/O 状态。输入模式可以…...
2024/4/27 23:40:19
CentOS8图形界面安装
百度安全验证https://baijiahao.baidu.com/s?id1667360460947604107&wfrspider&forpc...
2024/4/15 8:16:28
快速开发一个h5游戏
主要就是三个步骤： 选择一个引擎：pixi，实际上就一个js库搭建一个简易的本地服务器，只是为了能够以http形式访问，越简单越好参考文章：快速搭建一个本地服务器编写一个demo <!doctype html> <htm…...
2024/4/28 7:40:23
新域名和老域名SEO优化区别
用以前的SEO经验看，老域名在SEO优化时具备较强的优势，以前买老域名做站的是主流，就算是现在依然很多人也是如此，对于现在SEO优化来说其实是有点可笑了，但是不能否认老域名在当前SEO优化中还是有一点优势，但…...
2024/4/28 13:19:34
解决Python中ZipFile解压文件名中文乱码的问题
解决Python中ZipFile解压文件名中文乱码的问题问题复现原因分析解决办法问题复现压缩包目录结构里面有中文.zip ├── 中文文件.txt └── 中文文件夹└── 中文文件.txt解压代码 from zipfile import ZipFilewith ZipFile(r./里面有中文.zip) as zfp:zfp.extractall(r…...
2024/4/28 13:56:22
Leetcode数据结构入门第四天（数组）
Leetcode数据结构入门第四天（数组）566. 重塑矩阵题目描述示例1：示例2：思路一知识点补充：C 动态二维数组(二维vector）参考代码思路二(数组映射方法)参考代码118. 杨辉三角题目描述样例思路知识点参考代码566…...
2024/4/28 17:29:05
构建NFS集群文件共享
Master 1、yum install -y nfs-utils rpcbind 2、cd /usr/local 3、mkdir data 4、cd data 5、mkdir www-data 6、cd www-data 7、vim /etc/exports #构建挂载点 /usr/local/data/www-data 192.168.152.16/24(rw,sync) 8、systemctl start nfs.service #启动nfs服务 9、sy…...
2024/4/18 14:57:36
【SLF4J+log4j2】日志输出教程
目录1. 需要引入的jar包2. 下载log4j2的jar包3. 下载slf4j的jar包4. 例子4.1 添加jar包关联4.2 准备log4j2的配置文件4.3 加载配置文件4.4 写出log4.5 运行java程序后，看log。log4j2是一个日志框架，slf4j是日志框架接口。log4j2和slf4j搭配使用&#xff…...
2024/4/19 12:10:37
差分C++差分函数
原文来自我的博客：www.dorkyfox.com，转载引用请注明出处！！！ 差分是前缀和的逆运算。如果将前缀和看作数列an的前n项和Sn，那么差分就是通过Sn求an。原数组：a[1]、a[2]、a[3]、a[4]、a[5] 差分…...
2024/4/13 21:29:26
【苹果推相册软件】imessage群发arrangesAllSubviews安装
推荐内容IMESSGAE相关作者推荐内容参考此文档来操作 *** 点击即可查看作者要求内容信息作者推荐内容1.参考此文档来操作 *** 点击即可查看作者要求内容信息作者推荐内容2.参考此文档来操作 *** 点击即可查看作者要求内容信息作者推荐内容3.参考此文档来操作 *** 点击即可查看…...
2024/4/17 23:15:16
docker 发布.net 5 webapi
右键WebApi添加，选择Docker支持系统选择你需要部署的系统，添加成功后会出现Dockerfile这个文件把文件里面的内容替换成: #基于 microsoft/dotnet:5.0.0-core 来构建我们的镜像 FROM mcr.microsoft.com/dotnet/sdk:5.0#创建项目在docker容器内的工作目…...
2024/4/5 3:31:16
中国自行车十大名牌辐轮王土拨鼠全球10万元以上的自行车排行榜
除了健康，什么都是浮云!没了健康，功名利禄都是浮云;没了健康，半生奔波都是徒劳;没了健康，再多钱财都是虚无。生命是极其宝贵的，生命对于人只有一次，人生没有回程票。互联网日新月异，工作生活节奏…...
2024/4/13 21:29:26
【imessage苹果家庭推】最新版软件安装登录设备上的iMessages
推荐内容IMESSGAE相关作者推荐内容参考此文档来操作 *** 点击即可查看作者要求内容信息作者推荐内容1.参考此文档来操作 *** 点击即可查看作者要求内容信息作者推荐内容2.参考此文档来操作 *** 点击即可查看作者要求内容信息作者推荐内容3.参考此文档来操作 *** 点击即可查看…...
2024/4/13 21:29:06
整人VBS\BAT代码 ② 整蛊系列→可参考
大家好，我是MouBai00001，刚入站不久的孟新。当你在现实生活中被整，你会有怎样的想法呢？ 当你在和朋友在一个Wifi里打电脑游戏时，被你的朋友坑，下面就教大家如何以牙还牙（好像营销号）…...
2024/4/13 21:29:21
无线通信零基础学习记录（2）——GSM空中接口物理层的设计
无线通信零基础学习记录（2）——GSM空中接口物理层的设计本章解释清楚了之前未搞懂的名词，如时隙等，以及各种信道类型，在此一并总结。 TDMA空中接口技术时分多址（TDMA，Time Division Mutipl…...
2024/4/20 5:20:44
使用rsync同步时出现 (in rsync_opt)) failed: Permission denied (13)
检查了服务器的同步的目录权限都没有问题，网上找了说是开启了SELinux 的enforce模式，于事 [roottest01 etc]# getenforce Enforcing 果然是enforce模式，然后 [roottest01 etc]# setenforce 0 关闭enforce模式 [roottest01 etc]# getenforce…...
2024/4/7 19:13:40
多态及引用数据类型转换
多态：多种形态生活中的多态：同一个操作因为环境不同产生不同的效果代码中的多态：同一个方法，因为实际参数或者返回值的不同，产生不同的效果多态是面向对象三大特征之一，在实际开发中，多…...
2024/4/13 21:29:01
一本通 1281：最长上升子序列
【题目描述】一个数的序列bibi，当b1<b2<...<bSb1<b2<...<bS的时候，我们称这个序列是上升的。对于给定的一个序列(a1,a2,...,aN)(a1,a2,...,aN)，我们可以得到一些上升的子序列(ai1,ai2,...,aiK)(ai1,ai2,...,aiK)&#xff…...
2024/4/7 19:13:38
客户端Feign失败回退
...
2024/4/15 13:22:34
JavaSE之注解
目录注解与注释 Java内置注解 Java自定义注解如何在程序中使用注解开始之前，我们首先要区分两个概念：注解与注释！ 注解与注释注解：Annotation，也叫元数据。是一种代码级别的说明，是给计算机看的&…...
2024/4/7 19:13:36

用贪吃蛇小游戏表白

目录

如何使用

效果及修改

完整源码

相关文章

最新文章