基于javascript实现泡泡大冒险网页版小嬉戏_

《基于javascript实现泡泡大冒险网页版小嬉戏_》由会员分享，可在线阅读，更多相关《基于javascript实现泡泡大冒险网页版小嬉戏_（17页珍藏版）》请在装配图网上搜索。

1、基于javascript实现泡泡大冒险网页版小嬉戏_ 本文实例为大家分享了一个很好玩的网页版嬉戏，有点类似金山打字嬉戏的青蛙过河，供大家参考，具体内容如下 效果图： 实现思路： 益智类小嬉戏，主要练习打字力量，基于jq开发。 1.在输入框输入泡泡对应文字，点击enter提交 2.与泡泡文字相对提示分数 3.可以暂停操作 4.每次泡泡着地会削减血量，削减到0结束嬉戏 5.每过一段时间会加快泡泡下落速度 具体代码： html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titlejavascript实现泡

2、泡大冒险/title link href=css/reset.css rel=stylesheet / link href=css/paopao.css rel=stylesheet / script type=text/javascript src=js/jquery-1.10.2.js/script script type=text/javascript $(function() /data var arr_word= 你,在,我,啊,真,全,或, 人们,你的,傻子,哈哈,加油,喂食,电视,汉语,嬉戏,真的,说谎, 大家好,红领巾,共产党,爱人民,学习吧,不情愿,棒棒糖, 望尘莫及,大智若

3、愚,小小可爱,真心英雄,最新战舰,小米手机,苹果电脑 ; var arr_type= one_1,one_2,one_3,one_4,one_5, two_1,two_2,two_3,two_4,two_5, three_1,three_2,three_3,three_4,three_5, four_1,four_2,four_3,four_4,four_5 ; var arr_wh=50,70,90,110; /init var dong=null;/动画 var obj_arr=;/总下落物体 var time=7000;/下落间隔 var downtime=80;/下落速度 var sk

4、ip=100;/skip*ji为加速判定依据 var num=0;/击中个数 var ji=1;/所在级别，开头在第一级别 var guan=300;/下一关测试基本值 var hji=1;/跳 300 600 900 var isnext=true; /event $(.game-start).click(function() start(); ); $(#pause).click(function() if($(this).val()=暂停) $(#keyval).attr(disabled,disabled); $(this).val(开头); for(var i=0;iobj_arr.

5、length;i+) obj_arri.pause(); ; clearInterval(dong); else $(#keyval).removeAttr(disabled); $(#keyval).focus(); $(this).val(暂停); for(var i=0;iobj_arr.length;i+) obj_arri.start(); ; dong=setInterval(down,time); ; ); $(#greset).click(function() greset(); ); $(window).keyup(function(event) if(event.which

6、=13) if(isnext) var textval=$(#keyval).val(); for(var i=0;iobj_arr.length;i+) if(obj_arri.text=textval obj_arri.is=true) var zz=parseInt($(.game-tools-count).children(em).html()+parseInt(obj_arri.fen); $(.game-tools-count).children(em).html(zz); fskip(zz); obj_arri.success(); num=parseInt(num)+parse

7、Int(1); else ; ; $(#keyval).val(); $(#keyval).focus(); else $(.game-connect).hide(); jixu(); isnext=true; ; else if(event.which=27) $(.game-connect).hide(); greset(); ; ); /function function start() $(#keyval).removeAttr(disabled); $(.game-logo).hide(); $(.shuo-ming).hide(); $(.game-start).hide(); $

8、(.game-tools).show(); $(.game-xue).show(); $(#game-box).show(); $(#keyval).focus(); $(#keyval).val(); down(); dong=setInterval(down,time); ; function jixu() for(var i=0;iobj_arr.length;i+) obj_arri.clear(); ; clearInterval(dong); start(); ; function fskip(count) if(count=skip*ji) if(count=guan*hji)

9、hji=parseInt(hji)+parseInt(1); downtime=downtime-5; if(downtime=0)downtime=0else; isnext=false; connect(); else speed(); ji=parseInt(ji)+parseInt(1); downtime=downtime-5; ; else ; ; function speed() $(.game-speed).show(); setTimeout(function() $(.game-speed).hide(); ,1000); ; function connect() $(.g

10、ame-connect).find(.game-connect-fen).children(span).html($(.game-tools-count).children(em).html(); $(.game-connect).find(.game-connect-sum).children(span).html(num); $(.game-connect).show(); $(#keyval).attr(disabled,disabled); for(var i=0;iobj_arr.length;i+) obj_arri.pause(); ; clearInterval(dong);

11、; function down() var word=Math.floor(Math.random()*arr_word.length); var w=arr_wordwordreal(word)0; var t=arr_typewordreal(word)1; var fen=(parseInt(word)+parseInt(1)*10; var x=Math.floor(Math.random()*570); var wu=new Wu($(#game-box),w,t,fen,x,arr_whword); obj_arr.push(wu); wu.init(); ; function r

12、eal(word) var w_len=arr_wordword.length; var t_len=arr_typeword.length; var w_index=Math.floor(Math.random()*w_len); var t_index=Math.floor(Math.random()*t_len); var arr=; arr0=w_index; arr1=t_index; return arr; ; function gameover() $(.game-reset).find(.game-reset-fen).children(span).html($(.game-t

13、ools-count).children(em).html(); $(.game-reset).find(.game-reset-sum).children(span).html(num); $(.game-reset).show(); $(#keyval).attr(disabled,disabled); for(var i=0;iobj_arr.length;i+) obj_arri.pause(); ; clearInterval(dong); ; function greset() for(var i=0;iobj_arr.length;i+) obj_arri.clear(); ;

14、obj_arr=; $(.game-reset).hide(); $(.game-xue-val).children(span).html(100); $(.game-xue-val).children(span).css(width,100%); $(.game-tools-count).children(em).html(0); time=7000;/下落间隔 downtime=80;/下落速度 skip=100;/skip*ji为加速判定依据 num=0;/击中个数 ji=1;/所在级别，开头在第一级别 guan=300; hji=1; clearInterval(dong); star

15、t(); ; function gameval(val) $(.game-xue-val).children(span).html(val); $(.game-xue-val).children(span).css(width,val+%); ; /class function Wu(parent,w,t,fen,x,wh) this.parent=parent; this.obj=null; this.text=w; this.wh=wh; this.endwh=450-wh; this.classname=t; this.fen=fen; this.left=x; this.don=nul

16、l; this.is=true; var that=this; this.init=function() this.append(); this.odown(); ; this.append=function() var tmp=$(span/span); tmp.attr(class,this.classname+ down-animation+this.fen/10); tmp.text(this.text); tmp.css(top,-this.wh/2); tmp.css(left,this.left); this.parent.append(tmp); this.obj=tmp; ;

17、 this.odown=function() this.don=setInterval(this.donn,downtime); ; this.donn=function() var newt=that.obj.position().top+1 if(newtthat.endwh) clearInterval(that.don); that.val(); that.clear(); else that.obj.css(top,newt) ; ; this.clear=function() this.obj.remove(); this.is=false; clearInterval(this.

18、don); ; this.success=function() this.obj.removeClass(down-animation+this.fen/10).addClass(clear-animation); this.obj.html(this.fen); setTimeout(function() that.clear(); ,2021); ; this.val=function() var val=parseInt($(.game-xue-val).children(span).html()-parseInt(20); if(val=0) gameover(); else game

19、val(val); ; ; this.pause=function() clearInterval(this.don); ; this.start=function() this.don=setInterval(this.donn,downtime); ; ; /end ); /script /head body div id=game div class=game-logo泡泡大冒险/div div class=shuo-ming p1.嬉戏开头前，请切换到中文输入法。/p p2.输入泡泡中的词语，按Enter键确认。/p p3.打错按Enter键清除，节约时间。/p p4.别让泡泡落地，您

20、只有5次几乎。/p /div div class=game-start开头嬉戏/div div class=game-tools dis-none span class=game-tools-la当前输入/span div class=game-tools-input input type=text id=keyval / /div span class=game-tools-count strong得分：/strong em0/em /span input type=button id=pause value=暂停/ input type=button id=help value=关心 /

21、/div div class=game-xue dis-none span class=game-xue-la生命/span div class=game-xue-val span100/span /div em/em /div div id=game-box class=dis-none/div div class=game-reset p class=game-reset-ti嬉戏结束/p p class=game-reset-fen最终得分span0/span/p p class=game-reset-sum击中个数span0/span/p p class=game-reset-btni

22、nput type=button value=再玩一次 id=greset /p /div div class=game-speed加速/div div class=game-connect p class=game-connect-ti恭喜/p p class=game-connect-fen您得分已达到span0/span/p p class=game-connect-sum击中个数span0/span/p p class=game-connect-btninput type=button value=按Enter连续 id=gjixu /input type=button value=按Esc重新开头 id=gstart /p /div /div /body /html 以上就是本文的全部内容，盼望对大家的学习有所关心，在工作学习累了，大家可以玩一玩一些益智嬉戏，做到劳逸结合。 .