| 本文实例为大家分享了js编写简单的贪吃蛇小游戏的具体代码，供大家参考，具体内容如下 代码如下：HTML 5 部分 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>贪恰蛇</title> <style> #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; } </style></head><body> <div id="scence"> </div></body></html><script src="tools.js"></script><script src="../贪吃蛇/snake.js"></script><script src="food.js"></script><script src="game.js"></script>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] -= 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; } }}//游戏结束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();以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
JS实现视频弹幕效果
js实现简易弹幕系统 |
