基于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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
Vue 去除路径中的#号
Apr 19 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php数组去除空值函数分享
2015/02/02 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
python根据路径导入模块的方法
2014/09/30 Python
Python之父谈Python的未来形式
2016/07/01 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
兼职业务员岗位职责
2014/01/01 职场文书
省三好学生申请材料
2014/01/22 职场文书
《花木兰》教学反思
2014/04/09 职场文书
初中学校军训方案
2014/05/09 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
英语演讲开场白
2015/05/29 职场文书
清明扫墓感想
2015/08/11 职场文书
《窃读记》教学反思
2016/02/18 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
浅谈react useEffect闭包的坑
2021/06/08 Javascript
Python pandas求方差和标准差的方法实例
2021/08/04 Python
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL
React更新渲染原理深入分析
2022/12/24 Javascript