纯JS实现面向对象版贪吃蛇游戏

最新推荐文章于 2021-09-16 23:25:30 发布
最新推荐文章于 2021-09-16 23:25:30 发布
阅读量414 收藏 3
点赞数
分类专栏： JavaScript 文章标签： 贪吃蛇 JS 面向对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36499016/article/details/99767066
版权

基本思路

1.开始游戏
 1-1.初始化游戏空间
 1-2.初始化蛇
 1-3.初始化食物
2.让蛇移动
 2-1.判断蛇头下一步位置
 2-2.检测碰撞
  2-2-1.碰撞食物？
  2-2-2.碰撞自己？
  2-2-3.碰撞边界?
  2-2-4.正常游走
3.添加键盘的事件监听

再来一张思维导图说明一下
在这里插入图片描述
下面代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
			}
			td{
				padding: 10px;
			}
			td.snake{
				background: #000000;
			}
			td.food{
				background: #FF0000;
			}
		</style>
	</head>
	<body>
		<table id="game" border="1" cellspacing="0" cellpadding="0">
			
		</table>
	</body>
	<script type="text/javascript">
		function Game(){
			this.init();
		}
		Game.prototype = {
			//初始化游戏空间
			init() {
				this.tab = document.getElementById("game");
				for(let i = 0; i < 28; i++){
					let tr = document.createElement("tr");
					for (let j = 0; j < 62; j++) {
						let td = document.createElement("td");
						tr.appendChild(td);
					}
					this.tab.appendChild(tr);
				}
			},
			// 开始游戏:初始化游戏空间->初始化蛇->初始化食物
			start() {
				// this.init();
				//创建蛇
				this.snake = new Snake(this);
				this.snake.show();
				//初始化食物,在print中调用打印
				this.createFood();
				//让蛇移动
				this.snake.run();
				this.addControl();
			},
			//游戏空间内生成食物
			createFood() {
				if(this.food){
					this.tab.children[this.food.row].children[this.food.col].className = "";
				}
				let pos = {row : parseInt(Math.random()*28), col : parseInt(Math.random()*62)};
				while(this.test(pos) == Snake.Constant.NEXT_POSISTION_TYPE_SELF){
					pos = {row : parseInt(Math.random()*28), col : parseInt(Math.random()*62)};
				}
				this.tab.children[pos.row].children[pos.col].className = "food";
				this.food = pos;//记住食物的位置
				// console.log(pos);
			},
			//添加键盘监听,控制蛇的移动
			addControl() {
				// console.log("control")
				document.addEventListener("keydown",(e)=>{
					e = e || event;
					if(this.snake.stepcount > 0){
						switch(e.keyCode){
							case 37 : {//向左移动
								if(this.snake.dir != Snake.Constant.DIR_RIGHT){
									this.snake.dir = Snake.Constant.DIR_LEFT;
									this.snake.stepcount = 0;
								}
								break;
							}
							case 38 : {//上移
								if(this.snake.dir != Snake.Constant.DIR_DOWN){
									this.snake.dir = Snake.Constant.DIR_UP;
									this.snake.stepcount = 0;
								}
								break;
							}
							case 39 : {//右移
								if(this.snake.dir != Snake.Constant.DIR_LEFT){
									this.snake.dir = Snake.Constant.DIR_RIGHT;
									this.snake.stepcount = 0;
								}
								break;
							}
							case 40 : {//下移
								if(this.snake.dir != Snake.Constant.DIR_UP){
									this.snake.dir = Snake.Constant.DIR_DOWN;
									this.snake.stepcount = 0;
								}
								break;
							}
						}
					}
					
				})
			},
			//让蛇和食物在游戏空间内显示
			print() {
				this.clear();
				let pos = this.snake.position();//接收【snakeStep-3】返回的蛇身body
				pos.forEach((p)=>{//画出蛇
					this.tab.children[p.row].children[p.col].className = "snake";
				})
				if(this.food){
					this.tab.children[this.food.row].children[this.food.col].className = "food";
				}
			},
			clear() {//清空当前游戏空间
				for(let i=0; i<28; i++) {
					for(let j=0; j<62; j++) {
						this.tab.children[i].children[j].className = "";
					}
				}
			},
			test(pos) {//检测碰撞
				if(pos.row == 28 || pos.row < 0 || pos.col == 62 || pos.col < 0){
					return Snake.Constant.NEXT_POSISTION_TYPE_RANGE;
				}
				let td = this.tab.children[pos.row].children[pos.col];
				
				if(td.className == "food") return Snake.Constant.NEXT_POSISTION_TYPE_FOOD;
				if(td.className == "snake") return Snake.Constant.NEXT_POSISTION_TYPE_SELF;
				return Snake.Constant.NEXT_POSISTION_TYPE_NORMAL;
			},
			gameover() {
				alert("you have died");
			}
			
		}
		function Snake(game){
			this.game = game;
			this.init();
		}
		//蛇的相关变量
		Snake.Constant = {
			DIR_LEFT : Symbol(),
			DIR_RIGHT : Symbol(),
			DIR_UP : Symbol(),
			DIR_DOWN : Symbol(),
			NEXT_POSISTION_TYPE_FOOD : Symbol(),//检测碰撞点是食物
			NEXT_POSISTION_TYPE_RANGE : Symbol(),//检测碰撞点是边界
			NEXT_POSISTION_TYPE_SELF : Symbol(),//检测碰撞点是自己身体
			NEXT_POSISTION_TYPE_NORMAL : Symbol()//检测正常游走无碰撞
		}
		Snake.prototype = {
			//初始化蛇
			init() {
				this.body = [ { row : parseInt(Math.random()*28), col : parseInt(Math.random()*62) } ];//用数组存储蛇身的每一部分
				this.dir = Snake.Constant.DIR_RIGHT;//初始活动方向
				this.stepcount = 1;//记录步数
				this.speed = 400;//游走速度
			},
			//画出蛇
			show() {
				this.game.print();
			},
			// 返回蛇身给game使用
			position() {
				return this.body;
			},
			//让蛇移动,判断蛇头的下一位置
			run() {
				console.log("run")
				let that = this;
				let timer = setInterval(function(){
					//判断蛇头下一个位置
					switch(that.dir){
						case Snake.Constant.DIR_LEFT : {
							that.next = {
								row : that.body[0].row,
								col : that.body[0].col-1,
							}
							break;
						}
						case Snake.Constant.DIR_RIGHT : {
							that.next = {
								row : that.body[0].row,
								col : that.body[0].col+1,
							}
							break;
						}
						case Snake.Constant.DIR_UP : {
							that.next = {
								row : that.body[0].row-1,
								col : that.body[0].col,
							}
							break;
						}
						case Snake.Constant.DIR_DOWN : {
							that.next = {
								row : that.body[0].row+1,
								col : that.body[0].col,
							}
							break;
						}
					}
					// that.nextStep();
					//走的过程检测碰撞
					 let res = that.game.test(that.next);
					 switch(res){
						 case Snake.Constant.NEXT_POSISTION_TYPE_FOOD:{
							 that.eat();
							 that.stepcount++;
							 break;
						 }
						 case Snake.Constant.NEXT_POSISTION_TYPE_RANGE:{
							 that.stop();
							 that.game.gameover();
							 break;
						 }
						 case Snake.Constant.NEXT_POSISTION_TYPE_SELF:{
							 that.stop();
							 that.game.gameover();
							 break;
						 }
						 case Snake.Constant.NEXT_POSISTION_TYPE_NORMAL:{
							 that.nextStep();
							 that.stepcount++;
							 break;
						 }
					 }
				},that.speed);
			},
			nextStep() {//下一步
				this.body.pop();
				this.body.unshift(this.next);
				this.game.print();
			},
			eat() {//吃掉食物
				this.body.unshift(this.next);
				this.game.createFood();
				this.game.print();
			},
			stop() {//碰撞边界或自己,死亡,关闭定时器
				clearInterval(this.timer);
			}
		}
		new Game().start();
	</script>
</html>
谁家菜鸟初养成
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现贪吃蛇游戏
qq_27009517的博客
12-22 104
https://blog.csdn.net/XVJINHUA954/article/details/111400052?utm_medium=distribute.pc_feed_category.none-task-blog-hot-3.nonecase&depth_1-utm_source=distribute.pc_feed_category.none-task-blog-hot-3.nonecase&spm=1000.2115.3001.4128
原生JS 实现小游戏 贪吃蛇
最新发布
m0_64191440的博客
08-16 3099
JS 超详细 贪吃蛇 案例 速速围观
JavaScript实现五子棋游戏的方法详解
12-08
本文实例讲述了JavaScript实现五子棋游戏的方法。分享给大家供大家参考，具体如下： 最近半个月一直在看深入的学习JavaScript，里面有很多重点和难点，比如闭包、词法分析、面向对象等。今天给大家分享一个由JavaScript编写的五子棋游戏，主要用到JavaScript的面向对象、事件委托、闭包等知识，还是挺有分量的，正好可以检测学习的成果。 老规矩，先上图，再说话。 效果图： 五子棋素材图： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatibl
Web前端学习笔记——JavaScript之面向对象游戏案例：贪吃蛇
唯恋殊雨的博客
09-24 1577
面向对象游戏案例：贪吃蛇 案例相关源码以上传到 GitHub ：https://github.com/lipengzhou/new-snake 案例介绍 游戏演示 在线演示地址：贪吃蛇 案例目标 游戏的目的是用来体会js高级语法的使用 不需要具备抽象对象的能力，使用面向对象的方式分析问题，需要一个漫长的过程。 功能实现 搭建页面 放一个容器盛放游戏场景 div#map，设置样式 #map { ...
js:面向对象：贪吃蛇小游戏（生成地图，边界碰撞，刷新食物，障碍物产生）
冲鸭
09-16 885
目录 index.html Game.js Snake.js Block.js Food.js Map.js 1. 贪吃蛇项目 我们决定使用面向对象的方式来书写该游戏 因为面向对象是最适合书写游戏的 我们将这个游戏看成是一个类(Game类) 既然把游戏看成是一个类，它可以拥有属性和方法 有一个地图属性 有一个蛇属性 有一个食物属性 有一个障碍物属性 2. 我们可以把地图看成一个类 有一个行属性 有一个列属性 有...
收录11款JavaScript游戏、经典高手JS游戏作品在线玩
guoyiqi
05-26 1636
开发游戏，现在可以有好多语言来开发，而以前那些JS高手直接来写出游戏，确实很牛，下面收录11款Javascript游戏中经典，下面一一给你送上。 第1款：Mario(JS版超级马里奥) 传说中的马里奥网页版，一比一实现了红白机时代超级马里奥中所有功能与关卡，精细程度不逊原版游戏。 网址：http://jsmario.com.ar/ 第2款：Bunny Hunt(猎兔...
JavaScript面向对象编程小游戏---贪吃蛇
weixin_34367845的博客
05-21 249
1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在，即使改变需求，那么维护也只是在局部模块 1- 2 维护非常方便并且成本较低。 ​ 2 这个demo是采用了面向对象的编程思想. 用JavaScript 语言编写的游戏小程序--贪吃蛇. ​ 代码注释详细,逻辑清晰 . 非常适合新手前端开发者, 锻炼JavaScript语言的面向对象的编程思想. 该小De...
js实现网页版贪吃蛇游戏
10-15
主要为大家详细介绍了js实现网页版贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小游戏JavaScript面向对象编程贪吃蛇
08-10
在本项目"小游戏JavaScript面向对象编程贪吃蛇"中，我们将深入探讨如何使用JavaScript进行面向对象编程，来实现经典的贪吃蛇游戏。面向对象编程（Object-Oriented Programming, OOP）是编程的一种范式，它将程序设计...
JavaScript面向对象编程小游戏—贪吃蛇代码实例
11-26
用JavaScript 语言编写的游戏小程序–贪吃蛇. ​ 代码注释详细,逻辑清晰 . 非常适合新手前端开发者, 锻炼JavaScript语言的面向对象的编程思想.  该小Demo已上传GitHub,欢迎下载! 觉得好的话,随手给个star, 您的...
js面向对象游戏开发，飞机大战
11-17
js面向对象开发的飞机游戏！简单适合新手
原生JS 实现贪吃蛇
11-11
原生js 实现贪吃蛇。
TypeScript代码贪吃蛇（代码实现地图绘制）
07-26
TypeScript代码-贪吃蛇小游戏，代码实现地图绘制。可用LayaAirIDE等实现。
js实现贪吃蛇游戏-超简单
02-27
大二实习期间用js写的一个贪吃蛇游戏，对有些js和css/html的学习者有很大帮助。
HTML5 js面向对象飞机大战【雷电】游戏代码.rar
07-10
HTML5 js面向对象游戏开发，飞机大战Betrs版，看看界面，感觉和雷电游戏十分相似啊，HTML5版的雷电游戏，放在手机上直接可以玩了，呵呵。PC端适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
纯原生js实现贪吃蛇游戏
12-02
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>贪吃蛇游戏</...
JS实现最简单的贪吃蛇小游戏（面向对象思想）
呵呵到天亮的博客
06-02 3069
本次练习主要是练习javaScript的面对对象思想话不多说，先看看效果图功能描述：1.小蛇在指定地图内移动，撞到边界即弹窗，显示游戏结束                  2.通过上、下、左、右四个按键，控制小蛇运动的方向                   3.随机产生“食物”，小蛇吃到食物就变长。地图再次出现食物                    4.统计分数，每吃一个食物就加一分具体封...
js面向对象编程小游戏2——飞机大战
onlySeungRi的博客
06-06 1651
实现的功能：页面元素有敌机，用户的飞机，子弹，可实现子弹将敌机炸毁，碰撞炸毁等不同的功能代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;&lt;/title&gt;    &lt;style typ
js高级面向对象之贪吃蛇
一只大海
01-23 277
html 部分 给一张地图 蛇活动的范围就在这个地图之内 &lt;body&gt; &lt;div id="map"&gt;&lt;/div&gt; &lt;/body&gt; css部分 地图的样式 &lt;style&gt; #map { width: 800px; height: 600px; ba...
javascript面向对象教程
02-24
很少有人对JavaScript的面向对象特性进行系统的分析。我希望接下来的文字让你了解到这个语言最少为人知的一面

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值