使用JavaScript实现贪吃蛇游戏


Posted in Javascript onSeptember 29, 2020

本文实例为大家分享了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;
})()

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
基于vue2实现上拉加载功能
Nov 28 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 #Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 #Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 #Javascript
JS中队列和双端队列实现及应用详解
Sep 29 #Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 #Javascript
js实现星星海特效的示例
Sep 28 #Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 #Javascript
You might like
php中最简单的字符串匹配算法
2014/12/16 PHP
PHP编写简单的App接口
2016/08/28 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
jQuery Ajax之load()方法
2009/10/12 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
python 创建一维的0向量实例
2019/12/02 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
中专生自荐信
2013/10/12 职场文书
数控技术应届生求职信
2013/11/13 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
教师先进事迹材料
2014/12/16 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
Nginx快速入门教程
2021/03/31 Servers
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Python requests用法和django后台处理详解
2022/03/19 Python