基于jquery的地址栏射击游戏代码


Posted in Javascript onMarch 10, 2011

演示地址:http://demo.3water.com/js/2011/hunt/index.htm

玩法向下看
请看地址栏上的字母 O! 你使用O来向 a射击。 使用键盘上的 左箭头 和 右箭头 移动字母O. 当O移动到 a 上时,按 空格键射击! 游戏会定时30秒时间,按ESC键重新开始。
注:请使用系统自带的IE浏览器来打开本链接。

基于jquery的地址栏射击游戏代码

你使用O来向 a射击。 使用键盘上的 左箭头 和 右箭头 移动字母O. 当O移动到 a 上时,按 空格键射击! 
基于jquery的地址栏射击游戏代码
核心代码:
(function() { 
var Animal, Game; 
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; 
Game = (function() { 
function Game() { 
this.eventReceived = __bind(this.eventReceived, this);; 
this.update = __bind(this.update, this);; this.level = 1; 
this.levelSize = 60; 
this.playerLocation = this.levelSize / 2; 
this.start(); 
} 
Game.prototype.start = function() { 
var num; 
this.points = 0; 
this.startTime = new Date; 
this.timeLimit = 30; 
this.animals = []; 
for (num = 4; num >= 1; num--) { 
this.addAnimal(); 
} 
return this.interval = setInterval(this.update, 1000 / 30); 
}; 
Game.prototype.gameOver = function() { 
clearInterval(this.interval); 
return location.hash = "在" + (this.elapsedTime()) + "秒中你共射中了" + this.points + "个a! (按ESC键重新开始)"; 
}; 
Game.prototype.elapsedTime = function() { 
return Math.floor(((new Date).getTime() - this.startTime.getTime()) / 1000); 
}; 
Game.prototype.addAnimal = function() { 
var animal; 
animal = new Animal(Math.floor(Math.random() * this.levelSize)); 
return this.animals.push(animal); 
}; 
Game.prototype.removeAnimal = function(deadAnimal) { 
var animal; 
return this.animals = (function() { 
var _i, _len, _ref, _results; 
_ref = this.animals; 
_results = []; 
for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
animal = _ref[_i]; 
if (animal !== deadAnimal) { 
_results.push(animal); 
} 
} 
return _results; 
}).call(this); 
}; 
Game.prototype.isAnimalAt = function(position) { 
var animal, matches; 
matches = (function() { 
var _i, _len, _ref, _results; 
_ref = this.animals; 
_results = []; 
for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
animal = _ref[_i]; 
if (Math.floor(animal.position) === position) { 
_results.push(animal); 
} 
} 
return _results; 
}).call(this); 
return matches[0]; 
}; 
Game.prototype.update = function() { 
var animal, position, timeLeft, url, _i, _len, _ref; 
url = []; 
_ref = this.animals; 
for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
animal = _ref[_i]; 
animal.update(this.levelSize); 
} 
while (url.length < this.levelSize) { 
position = url.length; 
if (position === this.playerLocation) { 
if (this.isAnimalAt(this.playerLocation)) { 
url.push("@"); 
} else { 
url.push("O"); 
} 
} else if (this.isAnimalAt(position)) { 
url.push("a"); 
} else { 
url.push("-"); 
} 
} 
timeLeft = this.timeLimit - this.elapsedTime(); 
if (timeLeft <= 0) { 
return this.gameOver(); 
} else { 
if (timeLeft < 10) { 
timeLeft = "0" + timeLeft; 
} 
location.hash = (" " + timeLeft + "|") + url.join("") + ("|" + timeLeft); 
return document.title = "Points " + this.points; 
} 
}; 
Game.prototype.eventReceived = function(event) { 
var animal; 
switch (event.which) { 
case 37: 
this.playerLocation -= 1; 
if (this.playerLocation < 0) { 
return this.playerLocation = this.levelSize - 1; 
} 
break; 
case 39: 
this.playerLocation += 1; 
return this.playerLocation %= this.levelSize; 
case 38: 
case 32: 
animal = this.isAnimalAt(this.playerLocation); 
if (animal) { 
this.points += 1; 
this.removeAnimal(animal); 
console.log(this.animals.length); 
if (this.animals.length === 0) { 
return this.gameOver(); 
} 
} 
break; 
case 27: 
return this.start(); 
} 
}; 
return Game; 
})(); 
Animal = (function() { 
function Animal(position) { 
this.position = position; 
this.velocityChange = Math.random() * 0.5; 
this.velocityIndex = Math.random() * Math.PI; 
this.dampener = 0.4; 
} 
Animal.prototype.update = function(levelSize) { 
this.velocityIndex += Math.random() * this.velocityChange; 
this.position += Math.sin(this.velocityIndex) * this.dampener; 
this.position %= levelSize; 
if (this.position < 0) { 
return this.position += levelSize; 
} 
}; 
return Animal; 
})(); 
$(function() { 
var game; 
game = new Game(); 
return $(document).keydown(game.eventReceived); 
}); 
}).call(this);
Javascript 相关文章推荐
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 #Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 #Javascript
jQuery总体架构的理解分析
Mar 07 #Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 #Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 #Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 #Javascript
淘宝搜索框效果实现分析
Mar 05 #Javascript
You might like
记录mysql性能查询过程的使用方法
2013/05/02 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
python中map()函数的使用方法示例
2017/09/29 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
python批量修改交换机密码的示例
2020/09/22 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
花卉与景观设计系大学生求职信
2013/10/01 职场文书
大学毕业登记表自我鉴定
2013/10/09 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
银行资信证明
2015/06/17 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js