javascript小游戏：贪吃蛇

此小游戏采用的是面向对象的思想，将蛇，食物，和游戏引擎分为3个对象来写的。

为方便下载，我把js写在了html中，

源码中暂时没有注释，等有空我在添加点注释吧。

游戏玩法：直接打开html文件即可开始游戏，用键盘的上下左右键控制蛇的移动。

代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>贪吃蛇</title>

		<style type="text/css">

			*{

				margin:0; padding:0;

			}

			#tab{

				margin:50px auto;

				border:1px solid #000;

				border-collapse:collapse;

			}

			#tab td{

				width:20px; height:20px;

				border:1px solid #555;

			}

			.cover{

				background:#000;

			}

			.food{

				background:#f00;

			}

		</style>

		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			window.onload = function(){

				var tab = document.getElementById('tab');

				for(var i = 0;i<20;i++){

					var temptr = document.createElement('tr');

					for(var j = 0;j<20;j++){

						var temptd = document.createElement('td');

						temptr.appendChild(temptd);

					}

					tab.appendChild(temptr);

				}

				new Game().start();

			}

			function Game(){

				if(Game.instance) {

					return Game.instance;

				}

				var self = this;

				this.flag = true;

				this.keyJudge = true;

				this.body = $('#tab');

				this.start = function(){

					this.flag = true;

					new food().show();

					this.snk = new snake().print().move();

					this.listener();

				}

				this.stop = function(){

					this.flag = false;

					alert("Game Over!");

				}

				this.getDom = function(pos){

					return this.body.children[pos.row].children[pos.col];

				}

				this.listener = function(){

					document.addEventListener("keydown",function(e){

						if(self.keyJudge == true){

							switch(e.keyCode){

								case 37: self.snk.dir = self.snk.dir ==3? 3:1; break;

								case 38: self.snk.dir = self.snk.dir ==4? 4:2; break;

								case 39: self.snk.dir = self.snk.dir ==1? 1:3; break;

								case 40: self.snk.dir = self.snk.dir ==2? 2:4; break;

							}

							self.keyJudge = false;

						}

					});

				}

				Game.instance = this;

			}

			function snake(){

				var self = this;

				this.body = [{row:randomInt(0,19),col:randomInt(0,19)}];

				this.dir = randomInt(1,4);

				this.print = function(){

					 this.body.forEach(function(pos){

					 	new Game().getDom(pos).className = "cover";

					 });

					return this;

				}

				this.step = function(){

						switch(this.dir){

							case 1: this.next = {col:this.body[0].col-1,row:this.body[0].row}; break;

							case 2: this.next = {col:this.body[0].col, row:this.body[0].row-1}; break;

							case 3: this.next = {col:this.body[0].col+1, row:this.body[0].row}; break;

							case 4: this.next = {col:this.body[0].col, row: this.body[0].row+1}; break;

						}

						if(this.next.col<0||this.next.col>19||this.next.row<0||this.next.row>19){

							new Game().stop();

						}else if(new Game().getDom(this.next).className == "food"){

							this.body.unshift(this.next);

							new food().show();

						}else if(new Game().getDom(this.next).className == "cover"){

							new Game().stop();

						}else{

							this.body.unshift(this.next);

							var del = this.body.pop();

							new Game().body.children[del.row].children[del.col].className = "";

						}

						this.print();

						return this;

				}

				this.move = function(){

					this.speed = 300;

					setTimeout(function(){

						switch(self.body.length){

							case 5: self.speed = 250; break;

							case 10: self.speed = 200; break;

							case 15: self.speed = 150; break;

							case 20: self.speed = 100; break;

							case 30: self.speed = 70;

						}

						if(new Game().flag ){

							self.step();

							new Game().keyJudge = true;

							setTimeout(arguments.callee,self.speed);

						}

					}.bind(this),self.speed)

					return this;

				}

			}

			function food(){

				this.show = function(){

					this.body = {row:randomInt(0,19),col:randomInt(0,19)};

					while(new Game().getDom(this.body).className == "cover"){

						this.body = {row:randomInt(0,19),col:randomInt(0,19)};

					}

					 new Game().getDom(this.body).className = "food";

					 return this;

				}

			}

		</script>

	</head>

	<body>

		<table id = "tab" >

		</table>

	</body>

</html>

JS小游戏：贪吃蛇（附源码）的更多相关文章

  1. Ruby for Sketchup 贪吃蛇演示源码（naive_snake）

    sketchup是非常简单易用的三维建模软件,可以利用ruby 做二次开发, api文档 http://www.rbc321.cn/api 今天在su中做了一款小游戏 贪吃蛇,说一下步骤 展示 主要思 ...

  2. JS/Jquery版本的俄罗斯方块(附源码分析)

    转载于http://blog.csdn.net/unionline/article/details/63250597 且后续更新于此 1.前言 写这个jQuery版本的小游戏的缘由在于我想通过从零到有 ...

  3. JavaScript面向对象编程小游戏---贪吃蛇

    1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1- 2 维护非常方便并且成本较低. ​ 2 这个demo是采用了 ...

  4. 第一个windows 小游戏 贪吃蛇

    最近用dx尝试做了一个小的贪吃蛇游戏,代码放到github上面:https://github.com/nightwolf-chen/MyFreakout 说一下自己实现的过程: 首先,我把蛇这个抽象成 ...

  5. Java经典小游戏——贪吃蛇简单实现（附源码）

    一.使用知识 Jframe GUI 双向链表 线程 二.使用工具 IntelliJ IDEA jdk 1.8 三.开发过程 3.1素材准备 首先在开发之前应该准备一些素材,已备用,我主要找了一个图片以 ...

  6. 使用JS制作小游戏贪吃蛇

    先看效果图: 过程如下: 1.首先创建一张画布地图<div class="map"> </div>: 2.创建食物的自调用函数 (function (){ ...

  7. 手把手教学h5小游戏 - 贪吃蛇

    简单的小游戏制作,代码量只有两三百行.游戏可自行扩展延申. 源码已发布至github,喜欢的点个小星星,源码入口:game-snake 游戏已发布,游戏入口:http://snake.game.yan ...

  8. 使用JavaScript实现简单的小游戏-贪吃蛇

    最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...

  9. 用Canvas制作小游戏——贪吃蛇

    今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...

  10. JavaScript 小游戏 贪吃蛇

    贪吃蛇 代码: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <met ...

随机推荐

  1. 扩展javascript扩展(类，对象，原型)

     扩展javascript扩展(类,对象,原型)

  2. Java面向对象 包

       Java面向对象  包 知识概要:              (1)包的概念 (2)包的命名 (3)编译执行 (4)导入 (5)包的访问权限 包:   包(package)用于将完成不同功能 ...

  3. Java面向对象 Main函数 静态的应用 单例设计模式

     Java面向对象 Main函数 静态的应用与单例设计模式 知识概要             (1)Main函数的细解 (2)静态的应用,静态变量,静态代码块,静态函数 (3)单例设计模式 1.M ...

  4. sql 时间格式

    在SQL Server数据库中,SQL Server日期时间格式转换字符串可以改变SQL Server日期和时间的格式,是每个SQL数据库用户都应该掌握的.本文我们主要就介绍一下SQL Server日 ...

  5. asp.net mvc webapi 实用的接口加密方法

    在很多项目中,因为webapi是对外开放的,这个时候,我们就要得考虑接口交换数据的安全性. 安全机制也比较多,如andriod与webapi 交换数据的时候,可以走双向证书方法,但是开发成本比较大, ...

  6. WebApi系列~HttpClient的性能隐患

    回到目录 最近在进行开发过程中,基于都是接口开发,A站接口访问B接口接口来请求数据,而在这个过程中我们使用的是HttpClient这个框架,当然也是微软自己的框架,性能当前没有问题,但如果你直接使用官 ...

  7. hdu 1018 共同交流~

    Big Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  8. Prometheus 到底 NB 在哪里？- 每天5分钟玩转 Docker 容器技术（84）

    本节讨论 Prometheus 的核心,多维数据模型.我们先来看一个例子. 比如要监控容器 webapp1 的内存使用情况,最传统和典型的方法是定义一个指标 container_memory_usag ...

  9. 对ajax请求的简单封装，操作更方便

    我这里的接口数据调用的js叫interface.js,接口路径管理的js叫webSiteControl.js /** * Created by l2776 on 2017/7/11. * 接口数据调用 ...

  10. 如何利用Oracle VM Templates 在几分钟内部署Oracle Real Application Clusters (RAC)

    本文未经授权,禁止一切形式的转载.如果对本文有任何疑问可以通过以下方式和我交流: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiang ...