网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 基于javascript实现泡泡大冒险网页版小游戏
内容
    本文实例为大家分享了一个很有趣的网页版游戏，有点类似金山打字游戏的青蛙过河，供大家参考，具体内容如下
    效果图：
    名单
    实现思路：
    益智类小游戏，主要练习打字能力，基于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>
    以上就是本文的全部内容，希望对大家的学习有所帮助，在工作学习累了，大家可以玩一玩一些益智游戏，做到劳逸结合。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/15 12:13:05