javascript_javascript 스킬을 기반으로 버블어드벤처 웹버전 미니게임 구현-JS 튜토리얼-php.cn

이 기사의 예는 Kingsoft 타이핑 게임의 Frog Crossing과 다소 유사한 매우 흥미로운 웹 버전의 게임을 여러분과 공유하기 위한 것입니다. 참고로 구체적인 내용은 다음과 같습니다

렌더링:

구현 아이디어:

jq를 기반으로 개발된 타자 연습을 중심으로 한 퍼즐 게임입니다.
1. 입력창에 풍선에 해당하는 텍스트를 입력하고 엔터를 눌러 제출하세요
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

게임이 충분하지 않다고 생각되면 다음 주제를 읽어보세요: 자바스크립트 클래식 미니 게임

위 내용은 모두의 공부에 도움이 되기를 바랍니다. 일과 공부에 지쳤을 때, 일과 휴식의 균형을 이루기 위해 교육용 게임을 플레이해 보세요.