(资料图片仅供参考)
本文实例为大家分享了一个很有趣的网页版游戏，有点类似金山打字游戏的青蛙过河，供大家参考，具体内容如下
效果图：
实现思路：
益智类小游戏，主要练习打字能力，基于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 class="game-logo">泡泡大冒险</div> <div class="shuo-ming"> <p>1.游戏开始前，请切换到中文输入法。</p> <p>2.输入泡泡中的词语，按Enter键确认。</p> <p>3.打错按Enter键清除，节省时间。</p> <p>4.别让泡泡落地，您只有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> <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">游戏结束</p> <p class="game-reset-fen">最终得分<span>0</span></p> <p class="game-reset-sum">击中个数<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">您得分已达到<span>0</span></p> <p class="game-connect-sum">击中个数<span>0</span></p> <p class="game-connect-btn"><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经典小游戏
以上就是本文的全部内容，希望对大家的学习有所帮助，在工作学习累了，大家可以玩一玩一些益智游戏，做到劳逸结合。
