基于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 双色表格实现代码
Dec 08 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
使用JS模拟锚点跳转的实例
Feb 01 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
Parse正式发布开源PHP SDK
2014/08/11 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
python3写爬取B站视频弹幕功能
2017/12/22 Python
Python面向对象之继承代码详解
2018/01/29 Python
python实现AES加密和解密
2019/03/27 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技