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. vim环境设置(应用于python编程)

    1. 安装完整的vim # apt-get install vim-gnome 2. 安装ctags,ctags用于支持taglist,必需! # apt-get install ctags 3. 安 ...

  2. 小程序的get和post请求头的区别

    小程序在使用wx.request()接口 时 header 请求头默认是这样的 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' ...

  3. Java API 常用类（一）

    Java API 常用类 super类详解 "super"关键字代表父类对象.通过使用super关键字,可以访问父类的属性或方法,也可以在子类构造方法中调用父类的构造方法,以便初始 ...

  4. 在SQLSERVER中创建DBLINK，操作远程服务器数据库

    --配置SQLSERVER数据库的DBLINK exec sp_addlinkedserver @server='WAS_SMS',@srvproduct='',@provider='SQLOLEDB ...

  5. asp.net调用Lodop实现页面打印或局部打印,可进行打印设置或预览

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPrint.aspx.cs ...

  6. 【实验吧】Once More

    <?php if (isset ($_GET['password'])) { if (ereg ("^[a-zA-Z0-9]+$", $_GET['password']) = ...

  7. 广州图书馆借阅抓取——httpClient的使用

    欢迎访问我的个人网站,要是能在GitHub上对网站源码给个star就更好了. 搭建自己的网站的时候,想把自己读过借过的书都想记录一下,大学也做过自己学校的借书记录的爬取,但是数据库删掉了==,只保留一 ...

  8. PE格式第八讲,TLS表(线程局部存储)

    PE格式第八讲,TLS表(线程局部存储) 作者:IBinary出处:http://www.cnblogs.com/iBinary/版权所有,欢迎保留原文链接进行转载:) 一丶复习线程相关知识 首先讲解 ...

  9. 读Zepto源码之Data模块

    Zepto 的 Data 模块用来获取 DOM 节点中的 data-* 属性的数据,和储存跟 DOM 相关的数据. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading ...

  10. Jquery的树插件jqxTreeGrid的使用小结

    一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...