Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to write a simple gluttonous Snake Mini Game with js". In the operation of practical cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The code is as follows:

HTML part 5

Greedy snake # 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 part

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,'# 000cycles, 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] -= 1 break; case 'up': snakehead[0] -= 1 break; case 'down': snakehead[0] += 1 break; } 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 Game over 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; iTunes +) {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 generation 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% yield,}); this.scence.appendChild (this.body [3]) } / / the snake ate the food Food.prototype.eat=function () {/ / const new= [0,0, 'grey', null] if (snake.body.length-1] [0] = = this.body [0] & & snake.body.body.length-1] [1] = = this.body [1]) {this.scence.removeChild (this.body [3]); this.crteate () Snake.body.unshift ([- 1 snake.body.unshift 1, "grey", null])}} let food = new Food (); food.crteate (); food.eat (); "how to write a simple gluttonous Snake Mini Game in js" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.