本文實(shí)例為大家分享了一個(gè)很有趣的網(wǎng)頁版游戲，有點(diǎn)類似金山打字游戲的青蛙過河，供大家參考，具體內(nèi)容如下
效果圖：
實(shí)現(xiàn)思路：
益智類小游戲，主要練習(xí)打字能力，基于jq開發(fā)。
1.在輸入框輸入泡泡對應(yīng)文字，點(diǎn)擊enter提交
2.與泡泡文字相對提示分?jǐn)?shù)
3.可以暫停操作
4.每次泡泡著地會減少血量，減少到0結(jié)束游戲
5.每過一段時(shí)間會加快泡泡下落速度
具體代碼：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>javascript實(shí)現(xiàn)泡泡大冒險(xiǎn)</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=[ ['你','在','我','啊','真','全','或'], ['人們','你的','傻子','哈哈','加油','喂食','電視','漢語','游戲','真的','說謊'], ['大家好','紅領(lǐng)巾','共產(chǎn)黨','愛人民','學(xué)習(xí)吧','不愿意','棒棒糖'], ['望塵莫及','大智若愚','小小可愛','真心英雄','最新戰(zhàn)艦','小米手機(jī)','蘋果電腦'] ]; 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 skip=100;//skip*ji為加速判定依據(jù) var num=0;//擊中個(gè)數(shù) var ji=1;//所在級別，開始在第一級別 var guan=300;//下一關(guān)測試基本值 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;i<obj_arr.length;i++){ obj_arr[i].pause(); }; clearInterval(dong); }else{ $("#keyval").removeAttr('disabled'); $("#keyval").focus(); $(this).val("暫停"); for(var i=0;i<obj_arr.length;i++){ obj_arr[i].start(); }; dong=setInterval(down,time); }; }); $("#greset").click(function(){ greset(); }); $(window).keyup(function(event){ if(event.which=='13'){ if(isnext){ var textval=$("#keyval").val(); for(var i=0;i<obj_arr.length;i++){ if(obj_arr[i].text==textval && obj_arr[i].is==true){ var zz=parseInt($(".game-tools-count").children("em").html())+parseInt(obj_arr[i].fen); $(".game-tools-count").children("em").html(zz); fskip(zz); obj_arr[i].success(); num=parseInt(num)+parseInt(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(); $(".game-tools").show(); $(".game-xue").show(); $("#game-box").show(); $("#keyval").focus(); $("#keyval").val(""); down(); dong=setInterval(down,time); }; function jixu(){ for(var i=0;i<obj_arr.length;i++){ obj_arr[i].clear(); }; clearInterval(dong); start(); }; function fskip(count){ if(count>=skip*ji){ if(count>=guan*hji){ hji=parseInt(hji)+parseInt(1); downtime=downtime-5; if(downtime<=0){downtime=0}else{}; 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(){ $(".game-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;i<obj_arr.length;i++){ obj_arr[i].pause(); }; clearInterval(dong); }; function down(){ var word=Math.floor(Math.random()*arr_word.length); var w=arr_word[word][real(word)[0]]; var t=arr_type[word][real(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_wh[word]); obj_arr.push(wu); wu.init(); }; function real(word){ var w_len=arr_word[word].length; var t_len=arr_type[word].length; var w_index=Math.floor(Math.random()*w_len); var t_index=Math.floor(Math.random()*t_len); var arr=[]; arr[0]=w_index; arr[1]=t_index; return arr; }; function gameover(){ $(".game-reset").find(".game-reset-fen").children("span").html($(".game-tools-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;i<obj_arr.length;i++){ obj_arr[i].pause(); }; clearInterval(dong); }; function greset(){ for(var i=0;i<obj_arr.length;i++){ obj_arr[i].clear(); }; 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為加速判定依據(jù) num=0;//擊中個(gè)數(shù) ji=1;//所在級別，開始在第一級別 guan=300; hji=1; clearInterval(dong); start(); }; 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=null; 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; }; this.odown=function(){ this.don=setInterval(this.donn,downtime); }; this.donn=function(){ var newt=that.obj.position().top+1 if(newt>that.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.don); }; this.success=function(){ this.obj.removeClass("down-animation"+this.fen/10).addClass("clear-animation"); this.obj.html(this.fen); setTimeout(function(){ that.clear(); },2000); }; this.val=function(){ var val=parseInt($(".game-xue-val").children("span").html())-parseInt(20); if(val<=0){ gameover(); }else{ gameval(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">泡泡大冒險(xiǎn)</div> <div class="shuo-ming"> <p>1.游戲開始前，請切換到中文輸入法。</p> <p>2.輸入泡泡中的詞語，按Enter鍵確認(rèn)。</p> <p>3.打錯(cuò)按Enter鍵清除，節(jié)省時(shí)間。</p> <p>4.別讓泡泡落地，您只有5次幾乎。</p> </div> <div class="game-start">開始游戲</div> <div class="game-tools dis-none"> <span class="game-tools-la">當(dāng)前輸入</span> <div class="game-tools-input"> <input type="text" id="keyval" /> </div> <span class="game-tools-count"> <strong>得分：</strong> <em>0</em> </span> <input type="button" id="pause" value="暫停"/> <input type="button" id="help" value="幫助" /> </div> <div class="game-xue dis-none"> <span class="game-xue-la">生命</span> <div class="game-xue-val"> <span>100</span> </div> <em></em> </div> <div id="game-box" class="dis-none"></div> <div class="game-reset"> <p class="game-reset-ti">游戲結(jié)束</p> <p class="game-reset-fen">最終得分<span>0</span></p> <p class="game-reset-sum">擊中個(gè)數(shù)<span>0</span></p> <p class="game-reset-btn"><input 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">您得分已達(dá)到<span>0</span></p> <p class="game-connect-sum">擊中個(gè)數(shù)<span>0</span></p> <p class="game-connect-btn"><input type="button" value="按Enter繼續(xù)" id="gjixu" /><input type="button" value="按Esc重新開始" id="gstart" /></p> </div> </div></body></html>代碼下載：http://xiazai.VeVB.COm/201603/yuanma/paopaorisk(VeVB.COm).rar
如果大家覺得玩的還不過癮還可以翻看此專題：javascript經(jīng)典小游戲
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，在工作學(xué)習(xí)累了，大家可以玩一玩一些益智游戲，做到勞逸結(jié)合。
新聞熱點(diǎn)
疑難解答
