只是学习jquery的用法,原算法和css文件基本都没改。增加了已撑时间。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>是男人就撑20秒(jquery 学习)</title>
<link href="style/zns_common.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//生成随机数
function rnd(min,max){
return parseInt((Math.random()*999)%(max-min+1))+min;
}
//鼠标右键无效
$(document).bind("contextmenu",function(e){return false;});
//定时函数
var iTimerBullet=null;
//包装碰撞块对象的数组
var aBullet=[];
var MAX_SPEED=5;
var MIN_SPEED=2;
//每级所用的时间 3000ms
var SCREEN_TIME=3;
var COUNT_BULLET=10;
var iLevel=1;
var iScore=0;
var i=0;
$("#start").click(function(ev){
$("#man").show();
//移动红快
$(document).mousemove(function(ev){
var mLeft=$("#bg").css("margin-left").replace("px","");
var mTop=$("#bg").css("margin-top").replace("px","");
var bgPos=$("#bg").position();
//left
var l=ev.pageX-bgPos.left-mLeft-$("#man").width()/2;
//top
var t=ev.pageY-bgPos.top-mTop-$("#man").height()/2;
//越界判断
if(l<0){
l=0;
}
else if(l>=$("#bg").width()-$("#man").width()){
l=$("#bg").width()-$("#man").width();
}
if(t<0){
t=0;
}
else if(t>=$("#bg").height()-$("#man").height()){
t=$("#bg").height()-$("#man").height();
}
$("#man").css({"left":l+"px","top":t+"px"});
});
//子弹
var startTime=(new Date()).getTime();
var startTimeAll=(new Date()).getTime();
iTimerBullet=setInterval(function (){
for(i=0;i<aBullet.length;i++)
{
aBullet[i].x+=aBullet[i].speedX;
aBullet[i].y+=aBullet[i].speedY;
aBullet[i].obj.css("left",aBullet[i].x+'px')
.css("top",aBullet[i].y+'px');
if(aBullet[i].x<0 || aBullet[i].x>$("#bg").width()|| aBullet[i].y<0 || aBullet[i].y>$("#bg").height())
{
removeBullet(aBullet[i]);
createBullet();
i--;
}
if(cd(aBullet[i].obj, $("#man")))
{
clearInterval(iTimerBullet);
$(document).unbind("mousemove");
$("#game_over").show();
}
}
var t=(new Date()).getTime()-startTimeAll;
$("#spendTime").text(Math.round(t/1000)+"秒");
iScore=parseInt(t/300);
$("#score").html('<li>难度:'+iLevel+'</li><li>得分:'+iScore+'</li>');
var t=(new Date()).getTime()-startTime;
var scale=100*(1-t/(SCREEN_TIME*1000));
var $oProgressSpan=$("#progress span");
if(scale<=0)
{
$oProgressSpan.width(0+'%');
startTime=(new Date()).getTime();
createBullet();
COUNT_BULLET++;
MAX_SPEED+=0.5;
iLevel++;
}
else
{
$oProgressSpan.width(scale+'%');
}
}, 30);
function createBullet()
{
var x,y,speedX,speedY;
do
{
var left=rnd(0,2);
var top=rnd(0,2);
}while(!(left==1 && top!=1 || left!=1 && top==1));
if(0==left)
{
x=0;
speedX=rnd(MIN_SPEED, MAX_SPEED);
}
else if(1==left)
{
x=rnd(0, $("#bg").width());
speedX=rnd(-MAX_SPEED, MAX_SPEED);
}
else
{
x=$("#bg").width();
speedX=-rnd(MIN_SPEED, MAX_SPEED);
}
if(0==top)
{
y=0;
speedY=rnd(MIN_SPEED, MAX_SPEED);
}
else if(1==top)
{
y=rnd(0, $("#bg").height());
speedY=rnd(-MAX_SPEED, MAX_SPEED);
}
else
{
y=$("#bg").height();
speedY=-rnd(MIN_SPEED, MAX_SPEED);
}
var $oDiv=$("<div class='bullet'></div>");
$oDiv.css({"left":x+"px","top":y+"px"});
$("#bg").append($oDiv);
aBullet.push({obj: $oDiv, x: x, y: y, speedX: speedX, speedY: speedY});
}
function removeBullet(oBullet)
{
var aResult=[];
for(i=0;i<aBullet.length;i++)
{
if(aBullet[i]!=oBullet)
{
aResult.push(aBullet[i]);
}
}
oBullet.obj.remove();
aBullet=aResult;
}
for(i=0;i<COUNT_BULLET;i++)
{
createBullet();
}
function cd($obj1, $obj2)
{
var pos1=$obj1.position();
var pos2=$obj2.position();
var l1=pos1.left;
var r1=pos1.left+$obj1.width();
var t1=pos1.top;
var b1=pos1.top+$obj1.height();
var l2=pos2.left;
var r2=pos2.left+$obj2.width();
var t2=pos2.top;
var b2=pos2.top+$obj2.height();
if(r1<l2 || l1>r2 || b1<t2 || t1>b2)
{
return false;
}
else
{
return true;
}
}
$("#start").hide();
});
});
</script>
</head>
<body>
<div id="bg">
<input class="btn" id="start" type="button" value="开始" />
<div id="progress">
<span></span>
</div>
<ul id="score">
<li>难度:1</li>
<li>得分:0</li>
</ul>
<div id="spendTime">0s</div>
<div id="game_over">
<img src="img/game_over.jpg" alt="game_over" />
<div id="btn_pos">
<input class="btn" type="button" value="重新开始" onclick="window.location.reload()" />
</div>
</div>
<div id="man"></div>
</div>
<div id="shadow"></div>
<div id="popup">
<form onsubmit="return auth();" id="form_score" action="http://bbs.miaov.com/applications/man_20/post.php?act=post" method="post" target="_blank">
<ul>
<li><var>分数:</var><span><input type="text" name="cmt_score" style="border:0; background:#EEE;" readonly="1" /></span></li>
<li><var>难度:</var><span><input type="text" name="cmt_level" style="border:0; background:#EEE;" readonly="1" /></span></li>
<li><var>姓名:</var><input type="text" name="cmt_name" /></li>
</ul>
<p>
<input class="btn" type="submit" value="提交"/>
</form>
</div>
</body>
</html>
相关推荐
**jQuery的智能提示** 在开发基于JavaScript的Web应用时,jQuery是一个非常流行的库,它极大地简化了DOM操作、事件处理和动画效果。然而,在没有智能提示的情况下,编写jQuery代码可能会变得困难,因为开发者需要...
"jquery 改写Alert弹出框样式"的主题就围绕着如何使用jQuery来扩展或改变`alert()`函数默认的样式。 首先,让我们理解`alert()`的基本用法。在JavaScript中,`alert(message)`会打开一个包含指定消息的系统对话框,...
对于 Visual Studio(VS)开发者,资源中还包含了 jQuery 的智能提示文件,这意味着在使用 VS 进行开发时,IDE 可以提供自动完成和代码提示功能,极大地提高了开发效率和代码质量。通常,这些智能提示文件是通过 ...
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
在本文中,我们将深入探讨jQuery时间控件,特别是那些能够显示和选择时、分、秒的控件。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。时间控件在Web应用中非常常见,...
**jQuery智能提示中文版**是基于著名的JavaScript库jQuery开发的一款插件,主要目的是为了提高开发者在编写代码时的效率和用户体验。它通过提供实时的、中文的代码提示,帮助开发者快速理解和使用jQuery API,减少...
**jQuery智能提示插件详解** jQuery是一款轻量级的JavaScript库,因其简洁的API和强大的功能,被广泛应用于网页开发中。"jQuery智能提示文件(中文版+英文版)"是针对jQuery开发的一种增强用户交互体验的插件,它提供...
而"jquery时间控件时分秒"是jQuery的一个扩展插件,用于创建用户友好的时间选择器,帮助用户方便地输入或选择时间,通常用于表单中的时间输入字段。这种控件在许多场合都非常实用,比如预订系统、日程安排或时间跟踪...
《jQuery Spinner:构建数字智能加减插件的深入解析》 在Web开发中,用户界面的交互性至关重要,而数字输入框(Spinner)是提升用户体验的一种常见方式。它允许用户通过点击按钮或直接输入数值来增加或减少数字,...
在网页开发中,为了提高用户体验,我们常常会集成各种搜索功能,而将百度智能搜索与jQuery结合使用,可以实现更加高效、便捷的搜索体验。本项目聚焦于利用jQuery来优化和增强百度智能搜索的功能,旨在提供一个用户...
Jquery智能提示完整全部版本 jquery&vsdoc1.4.0-2.1.0 jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js jquery-1.4.4-vsdoc.js jquery-1.4.4.min.js jquery-1.4.min.js jquery-1.5-vsdoc.js...
**jQuery Autocomplete 知识...综上所述,`jQuery Autocomplete` 是一个功能强大且灵活的插件,可以轻松地为网站添加智能提示功能。通过合理的配置和定制,它可以适应各种应用场景,提升用户在搜索和填写表单时的效率。
**jQuery 1.4.4 智能提示** jQuery 是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。版本1.4.4是该库的一个早期版本,发布于2010年,尽管现在已经有更新的版本,但了解它...
spketIDE和插件(JQuery智能提示) 含破解文件
`jQuery UI Datepicker` 是一个流行的 JavaScript 库,用于在网页上添加日期选择功能。它源自 jQuery 库,提供了一种简单、用户友好的方式来处理日期输入。在这个特定的场景中,我们不仅关注基本的日期选择,还涉及...
使用jQuery实现智能表单验证功能涉及前端开发的多个重要知识点,包括HTML表单元素的使用、CSS样式设计、JavaScript编程以及jQuery库的引入和应用。在接下来的内容中,我们将深入探讨这些知识点。 首先,HTML表单是...
jquery-1.3.2-vsdoc.js jquery-1.8.3.min.js jquery-1.3.2.min.js jquery-1.4.1-vsdoc.js jquery-1.4.1.min.js jquery-1.4.2-vsdoc.js jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js ...
"jquery1.3.2vs2008中文版智能提示"就是为了解决这个问题,它提供了在VS2008中使用jQuery时的中文智能感知功能。这意味着在编写代码时,IDE会自动显示与jQuery相关的函数和参数提示,提高了编码效率和准确性,减少了...
本文将深入探讨如何使用jQuery实现页面滚动时元素的智能定位,即所谓的“固定定位”或“粘性定位”。这个功能使得特定元素(如导航栏)在用户滚动页面时始终保持在屏幕的可见区域。 首先,理解CSS中的`position`...