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. 百度的js日历

    <title>百度的Js日历,值得一看</title> <style> body,td,.p1,.p2,.i{font-family:arial} body{mar ...

  2. MyServer

    //一.设置一个8089端口的本地IP服务器 1 package myserver; import java.io.IOException; import java.net.ServerSocket; ...

  3. 搭建Hadoop平台(新手入门)

    刚刚大学毕业,接触大数据有一年的时间了,把自己的一些学习笔记分享给大家,希望同热爱大数据的伙伴们一起学习,成长! 资料准备: Hadoop-2.7.1下载:http://pan.baidu.com/s ...

  4. elasticsearch+kibana+metricbeat安装部署方法

    elasticsearch+kibana+metricbeat安装部署方法 本文是elasticsearch + kibana + metricbeat,没有涉及到logstash部分.通过beat收 ...

  5. LVS原理讲解

    一.lvs介绍 LVS的英文全名为"Linux Virtual Server",即Linux虚拟服务器,是一个虚拟的四层交换器集群系统,根据目标地址和目标端口实现用户请求转发,本身 ...

  6. ~.NET下国际化i18n简单示例

    因业务需要,后台站点需要出一个国际化的解决方案,偷懒后用微软自带资源文件暂时解决.废话不多说,进入正题. 第一步:在项目菜单下选择添加国际化资源文件夹. 第二部:添加完毕之后,添加各语言版本下的资源信 ...

  7. 【转】缓存淘汰算法系列之2——LFU类

    原文地址 :http://www.360doc.com/content/13/0805/16/13247663_304916783.shtml 1. LFU类 1.1. LFU 1.1.1. 原理 L ...

  8. 1. Apache ZooKeeper快速课程入门

    Tips Tips做一个终身学习的人! 日拱一卒,功不唐捐. 在过去的几十年里,互联网改变了我们生活的方式.Internet上提供的服务通常由复杂的软件系统支持,这些系统跨越了大量的服务器,而且常常位 ...

  9. 【NOIP模拟】jzoj5233概率博弈（树规）

    Description 小A和小B在玩游戏.这个游戏是这样的: 有一棵

  10. BandwagonHost搬瓦工VPS自建

    地址:https://bwh1.net/aff.php?aff=18648 ,购买$2.99的就够用了(现在没有$2.99的了,最低是$4.99) 步骤一: 步骤二: 步骤三:选图中的选项,然后点 A ...