用js编写简单的贪吃蛇小游戏用js编写简单的贪吃蛇小游戏

本文实例为大家分享了js编写简单的贪吃蛇小游戏的具体代码，供大家参考，具体内容如下
代码如下： HTML 5 部分

贪恰蛇 - 锐客网#scence{width: 800px; height: 600px; border: 1px solid #000; margin: 50px auto; background-color: aliceblue; position: relative; overflow: hidden; }.head{position: absolute; width: 20px; height: 20px; background-color: #000; }.tail{position: absolute; width: 20px; height: 20px; background-color: grey; }

js部分
tools.js

function getStyle(ele, styleObj) {for (const key in styleObj) {ele.style[key] = styleObj[key]; }}function getRandom(a, b) {return Math.floor(Math.random() * (b - a) + a +1)}

snake.js

function Snake() {this.scence = document.querySelector('#scence'); this.body = [[0, 0, 'grey', null],[0, 1, 'grey', null],[0, 2, '#000', null]]; this.dir = 'right'; this.lastdir = 'right'; this.width = 20; this.height = 20; this.scence_w = scence.offsetWidth; this.scence_h = scence.offsetHeight; }Snake.prototype.found = function () {for (let i = 0; i < this.body.length; i++) {if (this.body[i][3] == null) {this.body[i][3] = document.createElement('div'); }getStyle(this.body[i][3], {width: this.width + 'px',height: this.height + 'px',position: 'absolute',top: this.height * (this.body[i][0]) + 'px',left: this.width * (this.body[i][1]) + 'px',backgroundColor: this.body[i][2]}); this.scence.appendChild(this.body[i][3]); }}//运动函数Snake.prototype.move = function () {var length = this.body.length; for (let i = 0; i < length - 1; i++) {this.body[i][0] = this.body[i + 1][0]; this.body[i][1] = this.body[i + 1][1]; }let snakehead = this.body[length - 1]switch (this.dir) {case 'right':snakehead[1] += 1; break; case 'left':snakehead[1] -= 1break; case 'up':snakehead[0] -= 1break; case 'down':snakehead[0] += 1break; }this.lastdir = this.dir; snake.found(); }//计时运动Snake.prototype.shift = function () {document.onkeydown = (e) => {e = e || window.event; let key = e.keyCode; switch (key) {case 39:if (this.lastdir == 'left') {this.dir = 'left'} else {this.dir = 'right'}; break; case 37:if (this.lastdir == 'right') {this.dir = 'right'} else {this.dir = 'left'}; break; case 38:if (this.lastdir == 'down') {this.dir = 'down'} else {this.dir = 'up'}; break; case 40:if (this.lastdir == 'up') {this.dir = 'up'} else {this.dir = 'down'}; break; }}}//游戏结束Snake.prototype.over = function () {let top = this.body[this.body.length - 1][0]; let left = this.body[this.body.length - 1][1]; let width = this.scence_w / this.width - 1; let height = this.scence_w / this.height - 1; if (top < 0 || left < 0 || top > width || left > height) {clearInterval(timeid)alert('game over'); }for (let i = 0; i < this.body.length - 1; i++) {if (top == this.body[i][0] && left == this.body[i][1]) {clearInterval(timeid)alert('game over'); }}}let snake = new Snake(); snake.found(); snake.shift(); timeid = setInterval(function () {snake.move(); food.eat(); snake.over()}, 100)

food.js

function Food() {this.scence = document.querySelector('#scence'); this.width = 20; this.height = 20; this.body = [-1, -1, 'red', null]; this.scence_w = scence.offsetWidth; this.scence_h = scence.offsetHeight; }//食物生成Food.prototype.crteate = function () {this.body[1] = getRandom(0, this.scence_w / this.width-1); this.body[0] = getRandom(0, this.scence_h / this.height-1); this.body[3] = document.createElement('div'); getStyle(this.body[3], {width: this.width + 'px',height: this.height + 'px',position: 'absolute',top: this.height * (this.body[0] ) + 'px',left: this.width * (this.body[1] ) + 'px',backgroundColor: this.body[2],borderRadius: ' 50%',}); this.scence.appendChild(this.body[3]); }//蛇吃到食物Food.prototype.eat=function(){// const new=[0, 0, 'grey', null]if(snake.body[snake.body.length-1][0]==this.body[0] && snake.body[snake.body.length-1][1]==this.body[1]){this.scence.removeChild(this.body[3]); this.crteate(); snake.body.unshift([-1,-1,"grey",null])}}let food = new Food(); food.crteate(); food.eat();

【用js编写简单的贪吃蛇小游戏】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。