使用JavaScript实现贪吃蛇游戏
(编辑：jimmy 日期: 2024/12/24 浏览：3 次 )
本文实例为大家分享了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="/UploadFiles/2021-04-02/tool.js">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; })()以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：解决idea开发遇到javascript动态添加html元素时中文乱码的问题