使用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 相关文章推荐
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 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查询搜索引擎排名位置的代码
2010/01/05 PHP
PHP多线程类及用法实例
2014/12/03 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
python基础教程之循环介绍
2014/08/29 Python
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
解决python 文本过滤和清理问题
2019/08/28 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
成品仓管员工作职责
2013/12/29 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
工程款申请报告
2015/05/15 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
个人合作协议范本
2015/08/06 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers