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

本篇内容介绍了"怎么用js编写简单的贪吃蛇小游戏"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

代码如下：

HTML 5 部分

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();

"怎么用js编写简单的贪吃蛇小游戏"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！