本文实例为大家分享了一个很有趣的网页版游戏，有点类似金山打字游戏的青蛙过河，供大家参考，具体内容如下
效果图：
实现思路：
益智类小游戏，主要练习打字能力，基于jq开发。
1.在输入框输入泡泡对应文字，点击enter提交
2.与泡泡文字相对提示分数
3.可以暂停操作
4.每次泡泡着地会减少血量，减少到0结束游戏
5.每过一段时间会加快泡泡下落速度
具体代码：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript实现泡泡大冒险</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=[ ['你','在','我','啊','真','全','或'], ['人们','你的','傻子','哈哈','加油','喂食','电视','汉语','游戏','真的','说谎'], ['大家好','红领巾','共产党','爱人民','学习吧','不愿意','棒棒糖'], ['望尘莫及','大智若愚','小小可爱','真心英雄','最新战舰','小米手机','苹果电脑'] ]; 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为加速判定依据 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;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为加速判定依据 num=0;//击中个数 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>泡泡大冒险</div> <div> <p>1.游戏开始前，请切换到中文输入法。</p> <p>2.输入泡泡中的词语，按Enter键确认。</p> <p>3.打错按Enter键清除，节省时间。</p> <p>4.别让泡泡落地，您只有5次几乎。</p> </div> <div>开始游戏</div> <div> <span>当前输入</span> <div> <input type="text" id="keyval" /> </div> <span> <strong>得分：</strong> <em>0</em> </span> <input type="button" id="pause" value="暂停"/> <input type="button" id="help" value="帮助" /> </div> <div> <span>生命</span> <div> <span>100</span> </div> <em></em> </div> <div id="game-box"></div> <div> <p>游戏结束</p> <p>最终得分<span>0</span></p> <p>击中个数<span>0</span></p> <p><input type="button" value="再玩一次" id="greset" /></p> </div> <div>加速</div> <div> <p>恭喜</p> <p>您得分已达到<span>0</span></p> <p>击中个数<span>0</span></p> <p><input type="button" value="按Enter继续" id="gjixu" /><input type="button" value="按Esc重新开始" id="gstart" /></p> </div> </div> </body> </html>
代码下载：http://xiazai.jb51.net/201603/yuanma/paopaorisk(jb51.net).rar
如果大家觉得玩的还不过瘾还可以翻看此专题：javascript经典小游戏
以上就是本文的全部内容，希望对大家的学习有所帮助，在工作学习累了，大家可以玩一玩一些益智游戏，做到劳逸结合。