基于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 Div中加载其他页面的实现代码
Feb 27 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
JQuery基础语法小结
Feb 27 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 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
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
ThinkPHP安装和设置
2015/07/27 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
从vue源码看props的用法
2019/01/09 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
Python中基本的日期时间处理的学习教程
2015/10/16 Python
python difflib模块示例讲解
2017/09/13 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Python正则表达式学习小例子
2020/03/03 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
python中pop()函数的语法与实例
2020/12/01 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
PHP如何调用MYSQL存储过程
2014/05/30 面试题
预备党员党校学习自我评价分享
2013/11/12 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
爱牙日活动总结
2014/08/29 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
平面设计师岗位职责
2014/09/18 职场文书
Python 中的Sympy详细使用
2021/08/07 Python
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
实现GO语言对数组切片去重
2022/04/20 Golang