基于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 相关文章推荐
JavaScript 学习笔记(四)
Dec 31 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
ionic3 懒加载
Aug 16 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 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 4.2书写安全的脚本
2006/10/09 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
简单理解Vue中的nextTick方法
2018/01/30 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
Python访问MySQL封装的常用类实例
2014/11/11 Python
python实现定时播放mp3
2015/03/29 Python
python监控文件或目录变化
2016/06/07 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
python3字符串输出常见面试题总结
2020/12/01 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
诉讼财产保全担保书
2014/05/20 职场文书
简单的辞职信模板
2015/05/12 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android
SQL基础的查询语句
2021/11/11 MySQL