基于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 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
vue中的mvvm模式讲解
2019/01/31 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
python 2.7.14安装图文教程
2018/04/08 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
简单了解Python write writelines区别
2020/02/27 Python
python爬虫基础知识点整理
2020/06/02 Python
Python利用命名空间解析XML文档
2020/08/10 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
社区中秋节活动方案
2014/01/29 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
《坐井观天》教学反思
2016/02/18 职场文书