用js编写简单的贪吃蛇小游戏
本文实例为大家分享了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();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)