基于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 相关文章推荐
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 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
VFP与其他应用程序的集成
2006/10/09 PHP
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
CI框架常用函数封装实例
2016/11/21 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
python3实现短网址和数字相互转换的方法
2015/04/28 Python
python使用opencv进行人脸识别
2017/04/07 Python
python reverse反转部分数组的实例
2018/12/13 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
Pandas中resample方法详解
2019/07/02 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
音乐表演专业毕业生求职信
2013/10/14 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
2015中学教学工作总结
2015/07/22 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
2019公司管理制度
2019/04/19 职场文书