`
zwm512327
  • 浏览: 56682 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

用jquery改写智能社【是男人就撑20秒】

 
阅读更多

只是学习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的智能提示

    **jQuery的智能提示** 在开发基于JavaScript的Web应用时,jQuery是一个非常流行的库,它极大地简化了DOM操作、事件处理和动画效果。然而,在没有智能提示的情况下,编写jQuery代码可能会变得困难,因为开发者需要...

    jquery 改写Alert弹出框样式

    "jquery 改写Alert弹出框样式"的主题就围绕着如何使用jQuery来扩展或改变`alert()`函数默认的样式。 首先,让我们理解`alert()`的基本用法。在JavaScript中,`alert(message)`会打开一个包含指定消息的系统对话框,...

    jquery和jqueryUI最新1.7.3(含vs智能提示文件)

    对于 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源码jQuery源码...

    jquery jquery控件 时间控件 时分秒控件

    在本文中,我们将深入探讨jQuery时间控件,特别是那些能够显示和选择时、分、秒的控件。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。时间控件在Web应用中非常常见,...

    Jquery智能提示中文版

    **jQuery智能提示中文版**是基于著名的JavaScript库jQuery开发的一款插件,主要目的是为了提高开发者在编写代码时的效率和用户体验。它通过提供实时的、中文的代码提示,帮助开发者快速理解和使用jQuery API,减少...

    jquery智能提示文件(中文版+英文版)

    **jQuery智能提示插件详解** jQuery是一款轻量级的JavaScript库,因其简洁的API和强大的功能,被广泛应用于网页开发中。"jQuery智能提示文件(中文版+英文版)"是针对jQuery开发的一种增强用户交互体验的插件,它提供...

    jquery时间控件时分秒

    而"jquery时间控件时分秒"是jQuery的一个扩展插件,用于创建用户友好的时间选择器,帮助用户方便地输入或选择时间,通常用于表单中的时间输入字段。这种控件在许多场合都非常实用,比如预订系统、日程安排或时间跟踪...

    jquery.spinner一款jquery数字智能加减插件

    《jQuery Spinner:构建数字智能加减插件的深入解析》 在Web开发中,用户界面的交互性至关重要,而数字输入框(Spinner)是提升用户体验的一种常见方式。它允许用户通过点击按钮或直接输入数值来增加或减少数字,...

    jquery百度智能搜索

    在网页开发中,为了提高用户体验,我们常常会集成各种搜索功能,而将百度智能搜索与jQuery结合使用,可以实现更加高效、便捷的搜索体验。本项目聚焦于利用jQuery来优化和增强百度智能搜索的功能,旨在提供一个用户...

    Jquery智能提示 jquery&vsdoc1.4.0-2.1.0

    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 Autocomplete` 是一个功能强大且灵活的插件,可以轻松地为网站添加智能提示功能。通过合理的配置和定制,它可以适应各种应用场景,提升用户在搜索和填写表单时的效率。

    Jquery1.4.4 智能提示

    **jQuery 1.4.4 智能提示** jQuery 是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。版本1.4.4是该库的一个早期版本,发布于2010年,尽管现在已经有更新的版本,但了解它...

    spketIDE和插件(JQuery智能提示)

    spketIDE和插件(JQuery智能提示) 含破解文件

    jquery datepicker 时分秒

    `jQuery UI Datepicker` 是一个流行的 JavaScript 库,用于在网页上添加日期选择功能。它源自 jQuery 库,提供了一种简单、用户友好的方式来处理日期输入。在这个特定的场景中,我们不仅关注基本的日期选择,还涉及...

    使用JQuery实现智能表单验证功能

    使用jQuery实现智能表单验证功能涉及前端开发的多个重要知识点,包括HTML表单元素的使用、CSS样式设计、JavaScript编程以及jQuery库的引入和应用。在接下来的内容中,我们将深入探讨这些知识点。 首先,HTML表单是...

    Jquery智能提示完整全部版本vsdoc.js

    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 ...

    jquery14.1chm、jquery1.3.2vs2008中文版智能提示

    "jquery1.3.2vs2008中文版智能提示"就是为了解决这个问题,它提供了在VS2008中使用jQuery时的中文智能感知功能。这意味着在编写代码时,IDE会自动显示与jQuery相关的函数和参数提示,提高了编码效率和准确性,减少了...

    jQuery实现页面滚动时元素智能定位

    本文将深入探讨如何使用jQuery实现页面滚动时元素的智能定位,即所谓的“固定定位”或“粘性定位”。这个功能使得特定元素(如导航栏)在用户滚动页面时始终保持在屏幕的可见区域。 首先,理解CSS中的`position`...

Global site tag (gtag.js) - Google Analytics