使用JavaScript实现贪吃蛇游戏

时间：2021-05-25

本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下

index.html代码如下

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>贪吃蛇</title> <link rel="stylesheet" href="css/index.css" ></head><body><div id="map"></div><script src="js/tool.js"></script><script src="js/food.js"></script><script src="js/snake.js"></script><script src="js/game.js"></script><script src="js/main.js"></script></body></html>

index.css代码如下

#map { width: 600px; height: 400px; background-color: #ccc; position: relative;}

food.js代码如下

//自调函数 开启一个新的作用域，避免命名冲突(function () { //局部作用域//记录上一次创建的食物，为删除做准备 var elements=[]; var position = 'absolute';//构造函数Food function Food(options) { options = options || {}; this.color = options.color || 'green'; this.width = options.width || 20; this.height = options.height || 20; //食物的位置 this.x = options.x || 0; this.y = options.y || 0; }//把食物渲染到map上// prototype,每个函数都具有一个子对象prototype，prototype表示了该函数的原型// prototype表示一个类属性的集合。通过new来生成一个类的对象时，prototype对象的属性就会变成实例化对象的属性 Food.prototype.render = function (map) { //删除之前创建的食物 remove(); //动态创建div，显示页面上的食物 var div = document.createElement('div'); map.appendChild(div); elements.push(div); //随机生成食物 this.x = Tool.getRandom(0,map.offsetWidth/this.width - 1)*this.width; this.y = Tool.getRandom(0,map.offsetHeight/this.height - 1)*this.height; //设置div样式 div.style.position = position; //脱离文档流 div.style.background = this.color; div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; div.style.left = this.x + 'px'; div.style.top = this.y + 'px'; }; function remove() { for (var i = elements.length-1;i >= 0;i-- ){ //删除div elements[i].parentNode.removeChild(elements[i]); //删除数组元素 elements.splice(i,1); //第一个参数，从哪个元素开始 第二个参数，删除几个元素 } } //把Food构造函数 让外部可以访问 window.Food = Food;})()//测试// var map = document.getElementById('map');// var food = new Food(); //这里的Food就是window.Food// food.render(map);

snake.js代码如下

(function () { var position = 'absolute'; //记录之前创建的蛇 var elements = []; function Snake(options) { options = options || {}; //蛇节的大小 this.width = options.width || 20; this.height = options.height || 20; //蛇移动的方向 this.direction = options.direction || 'right'; //蛇身体（蛇节） 第一个元素是蛇头 this.body = [ {x: 5, y: 2, color: 'red'}, {x: 4, y: 2, color: 'blue'}, {x: 3, y: 2, color: 'blue'}, {x: 2, y: 2, color: 'blue'}, {x: 1, y: 2, color: 'blue'} ]; } Snake.prototype.render = function (map) { //删除之前创建的蛇 remove(); //把每一蛇节渲染到地图上 for (var i = 0,len = this.body.length; i<len; i++){ //蛇节 var object = this.body[i]; var div = document.createElement('div'); map.appendChild(div); //记录当前蛇 elements.push(div); //设置样式 div.style.position = position; div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; div.style.left = object.x * this.width + 'px'; div.style.top = object.y * this.height + 'px'; div.style.backgroundColor = object.color; } } //控制蛇移动的方法 Snake.prototype.move = function (food,map) { //控制蛇的身体移动 (当前蛇节 到 上一蛇节的位置) for (var i = this.body.length - 1;i > 0;i--){ this.body[i].x = this.body[i - 1].x; this.body[i].y = this.body[i - 1].y; } //控制蛇头的移动 //判断蛇移动的方向 var head = this.body[0]; switch (this.direction){ case 'right': head.x += 1; break; case 'left': head.x -=1; break; case 'top': head.y -=1; break; case 'bottom': head.y +=1; } //2.4判断蛇头是否和食物重合 var headX = head.x * this.width; var headY = head.y * this.height; if (headX === food.x && headY === food.y){ //让蛇增加一节 //获取蛇的最后一节 var last = this.body[this.body.length - 1]; this.body.push({ x:last.x, y:last.y, color:last.color }) //随机在地图上重新生成食物 food.render(map); } } function remove() { for (var i = elements.length -1;i>= 0;i--){ //删除div elements[i].parentNode.removeChild(elements[i]); //删除数组中的元素 elements.splice(i,1); } } //暴露构造函数给外部 window.Snake = Snake;})()//测试// var map =document.getElementById('map');// var sanke = new Snake();// sanke.render(map);

game.js代码如下

//使用自调函数，创建一个新的局部作用域，防止命名冲突(function () { function Game(map) { this.food = new Food(); this.snake = new Snake(); this.map = map; that=this; } Game.prototype.start = function () { //1.把蛇和食物对象渲染到地图上 this.food.render(this.map); this.snake.render(this.map); //2.开始游戏逻辑 //2.1 让蛇移动起来 //2.2当蛇遇到边界游戏结束 runSnake(); //2.3通过键盘控制蛇移动的方向 bindKey(); //2.4当蛇遇到食物 做相应的处理 } function bindKey() { document.onkeydown = function (e) { switch (e.keyCode){ case 37: if (that.snake.direction === 'right') return; that.snake.direction = 'left'; break; case 38: if (that.snake.direction === 'bottom') return; that.snake.direction = 'top'; break; case 39: if (that.snake.direction === 'left') return; that.snake.direction = 'right'; break; case 40: if (that.snake.direction === 'top') return; that.snake.direction = 'bottom'; break; } } } // function runSnake() { var timerId = setInterval(function () { //让蛇走一格 //在定时器中的function中this是指向window对象的 that.snake.move(that.food,that.map); that.snake.render(that.map); //2.2当蛇遇到边界游戏结束 var maxX = that.map.offsetWidth / that.snake.width; var maxY = that.map.offsetHeight / that.snake.height; //获取蛇头的坐标 var headX = that.snake.body[0].x; var headY = that.snake.body[0].y; if (headX <0 || headX>=maxX){ alert('Game Over'); clearInterval(timerId); } if (headY <0 || headY >= maxY){ alert('Game Over'); clearInterval(timerId); } for (var i = that.snake.body.length - 1;i > 0;i--){ if (headX == that.snake.body[i].x && headY == that.snake.body[i].y){ alert('Game Over'); clearInterval(timerId); break; } } },300) } //暴露构造函数给外部 window.Game = Game;})()// //测试// var map =document.getElementById('map');// var game = new Game(map);// game.start();

main.js代码如下

(function () { var map =document.getElementById('map'); var game = new Game(map); game.start();})()

Tool.js代码如下

// 工具对象(function () { var Tool = { getRandom: function (min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } } window.Tool = Tool;})()

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章