81款国学游戏开发教程第二篇（飞刀问答）

本篇讲述的是将飞刀游戏和问答游戏结合到一块的一款国学游戏。本文要注意的知识点有粒子效果的使用以及文字格式的使用，比如文字左对齐和换行的代码，要多多留心。

先看截图

下面是代码

(function(){
 var game;
window.onload = function() {	
	var w=window.innerWidth;
	var h=window.innerHeight;
	var config=null;
	if(w>h){
	 config = {
    "width": 640,
    "height": 1136,
    "renderer": Phaser.CANVAS,
    "parent": '',
    "resolution": 4
    };
	}else{
	 config = {
    "width": w,
    "height": h,
    "renderer": Phaser.CANVAS,
    "parent": '',
    "resolution": 4
    };
	
	
	}
	  game = new Phaser.Game(config);
	  game.state.add("PlayGame", playGame);
      game.state.start("PlayGame");
     
	  
}

var tk=[{index:0,t:"天生我材必有用,这句诗出至于那位诗\n人笔下?",sel:["A:李白","B:杜甫","C:王维","D:骆宾王"],d:0,know:"天生我材必有用，千金\n散尽还复来.出至于李\n白的<<将进酒>>"},
	    {index:1,t:"举头望明月,下一句是?",sel:["A:床前明月光","B:疑是地上霜","C:低头思故乡","D:落日故人情"],d:2,know:"举头望明月，低头思故\n乡.出至于李白的\n<<静夜思>>"},
	    {index:2,t:"黄鹤楼送孟浩然之广陵,是那位诗人\n写的?",sel:["A:孟浩然","B:李白","C:汪伦","D:王维"],d:1,know:"<<黄鹤楼送孟浩然之广\n陵>>是李白所写"},
	    {index:3,t:"桃花潭水深千尺，不及汪伦送我情.\n是李白的那首诗?",sel:["A:赠汪伦","B:望庐山瀑布","C:行路难","D:送友人"],d:0,know:"<<赠汪伦>>(唐代：李白)\n 李白乘舟将欲行，\n忽闻岸上踏歌声。\n桃花潭水深千尺，\n不及汪伦送我情."},
	
];
var playGame = function(game){};
playGame.prototype = {
     preload: function(){
          game.load.image("ks", "res/ks.png");
          game.load.image("fd", "res/fd.png");
		  game.load.image("bz", "res/bz.png");
		  game.load.image("zj", "res/zj.png");
		  game.load.image("hzj", "res/hzj.png");
		  game.load.image("hf", "res/hf.png");
		  game.load.image("sx", "res/sx.jpg");
		  game.load.image("xx", "res/xx.png");
		  game.load.image("star", "res/star2.png");
		  game.load.image("star1", "res/lz.png");
		  game.load.audio("sz", "res/sz.mp3");
		  game.load.audio("hh", "res/hh.mp3");
		  game.load.audio("fb", "res/fb.mp3");
		  game.load.spritesheet('balls', 'res/balls.png', 17, 17);
          game.stage.backgroundColor=0xffc773;
          game.scale.pageAlignHorizontally = true;
          game.scale.pageAlignVertically = true;
          game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
     },
     create: function(){
		 this.game_init();
		 var me=this;
		 this.bg=game.add.sprite(this.w/2,this.h/2,'zj');
		 this.bg.anchor.set(0.5,0.5);
		 this.bg.width=me.w*4;
	     this.bg.height=me.h*4;
		 this.down_action=function(){};
		 this.sz_m=game.add.audio("sz");
		 this.fb_m=game.add.audio("fb");
		 this.hh=game.add.audio("hh");
		
         var ks=game.add.button(this.w/2,this.h/2,'ks',function(){
		 
		   ks.destroy();
		   me.game_start();
		 
		 });
			 ks.anchor.set(0.5,0.5);
		 

	 },game_start:function(){
		this.ti_group=game.add.group();
	    this.dis_guan();
		var me=this;
		 //触控监听
	 game.input.onDown.add(function(e){
	 
	 me.down_action();
	 });
	 
	 
	 
	 },
	 game_init:function(){
	     this.w=game.world.width;
		 this.h=game.world.height;
		 this.ti_index=0;
		 this.ti=tk[this.ti_index];
		 this.sj_kg=false;
		
	 }
     , 
	 dis_guan:function(){
     //清空题目
	
     this.ti_group.removeAll();
	 this.ti=tk[this.ti_index];
	 var bg=game.make.sprite(this.w/2,this.h/2,'sx');
	       bg.anchor.set(0.5,0.5);
           bg.width=this.w*3;
		   bg.height=this.h*3;
	 this.ti_group.addChild(bg);
	 //加载题目
     var t1=game.make.text(this.w*0.15,this.h*0.58,this.ti.t,{ font: 'bold 16px Arial', fill: '#4c221b',align: "left"});
     this.ti_group.addChild(t1);
	 //加载答案
     var a=game.make.text(this.w*0.2,this.h*0.68,this.ti.sel[0],{ font: 'bold 15px Arial', fill: 'orange',align: "left"});
	 var b=game.make.text(this.w*0.2,this.h*0.72,this.ti.sel[1],{ font: 'bold 15px Arial', fill: 'orange',align: "left"});
     var c=game.make.text(this.w*0.2,this.h*0.76,this.ti.sel[2],{ font: 'bold 15px Arial', fill: 'orange',align: "left"});
	 var d=game.make.text(this.w*0.2,this.h*0.8,this.ti.sel[3],{ font: 'bold 15px Arial', fill: 'orange',align: "left"});
     this.ti_group.addChild(a);
	 this.ti_group.addChild(b);
	 this.ti_group.addChild(c);
	 this.ti_group.addChild(d);
	 var me=this;
	 //加载飞刀
     var speed=2;
     var fd=game.make.sprite(this.w/2,this.h/2,'fd');
	     fd.anchor.set(0.5,0.5);
		  fd.fd_kg=false;
		 fd.update=function(){
			 if(!fd.fd_kg){
		 fd.x+=speed;
		 if(fd.x>game.world.width*0.9){
		  speed=-2
		  }else if(fd.x<game.world.width*0.1){
		  speed=2;
		 }
	   }else{
	    if(fd.y>game.world.height*0.2+20){
		    fd.y+=-6;
			fd.rotation+=0.2;
		}else{
			 me.js_hit(fd,[b1,b2,b3,b4]);
		 fd.fd_kg=false;
		 fd.y=game.world.height/2;
		 fd.rotation=0;
		}

	   }


	  }
	  fd.anchor.set(0.5,0.5);
        
       
       var ba=game.make.text(this.w*0.2,this.h*0.2-20,"A",{ font: 'bold 18px Arial', fill: 'red',align: "center"});
	   var bb=game.make.text(this.w*0.4,this.h*0.2-20,"B",{ font: 'bold 18px Arial', fill: 'orange',align: "center"});
	   var bc=game.make.text(this.w*0.6,this.h*0.2-20,"C",{ font: 'bold 18px Arial', fill: 'blue',align: "center"});
	   var bd=game.make.text(this.w*0.8,this.h*0.2-20,"D",{ font: 'bold 18px Arial', fill: 'green',align: "center"});
	   ba.anchor.set(0.5,0.5); bb.anchor.set(0.5,0.5); bc.anchor.set(0.5,0.5); bd.anchor.set(0.5,0.5);
	 //记载靶子
       var b1=game.make.sprite(this.w*0.2,this.h*0.2,'bz');
	   var b2=game.make.sprite(this.w*0.4,this.h*0.2,'bz');
	   var b3=game.make.sprite(this.w*0.6,this.h*0.2,'bz');
	   var b4=game.make.sprite(this.w*0.8,this.h*0.2,'bz');
       b1.anchor.set(0.5,0.5); b2.anchor.set(0.5,0.5); b3.anchor.set(0.5,0.5); b4.anchor.set(0.5,0.5);
	   b1.scale.set(2,2);  b2.scale.set(2,2);  b3.scale.set(2,2);  b4.scale.set(2,2);
       this.ti_group.addChild(fd); 
	   this.ti_group.addChild(b1);  
	   this.ti_group.addChild(b2);  
	   this.ti_group.addChild(b3); 
	   this.ti_group.addChild(b4);

	   this.ti_group.addChild(ba);  
	   this.ti_group.addChild(bb); 
	   this.ti_group.addChild(bc);
	   this.ti_group.addChild(bd);  
	 //加载提示
          var me=this; 
	  this.down_action=function(){
		  if(!me.sj_kg){
		   if(fd){
		      if(!fd.fd_kg){
			     fd.fd_kg=true;
				 me.sj_kg=true;
				 me.fb_m.play();
		        }
		     }
		  }
	  }
	 //注意这是粒子的使用方式
	     this.emitter = game.add.emitter(0, 0, 100);
         this.emitter.makeParticles(['xx','star','star1']);//'balls', [0, 1, 2, 3, 4, 5]
         this.emitter.gravity = 200;

		 //this.ti_group.addChild(this.emitter);
	 },next:function(){
	  if(this.ti_index<tk.length-1){
		
            this.emitter.x =this.w/2;
            this.emitter.y = this.h*0.2
            this.emitter.start(true, 2000, null, 30);
		    this.ti_index+=1;
	        this.ti=tk[this.ti_index];
		    this.sj_kg=false;
			this.dis_guan();
			this.hh.play();

	  }else{
	  
	  alert("已是最后一题,重新开始吧");
	    this.ti_index=0;
	        this.ti=tk[this.ti_index];
		    this.sj_kg=false;
			this.dis_guan();
	  }
	 
	 
	 
	 },
		 tip_action:function(){
	     var me=this;
		 var tip=game.make.text(this.w*0.28,this.h*0.43,this.ti.know,{ font: 'bold 15px Arial', fill: 'orange',align: "left"});
		
	     var hzj=game.make.button(this.w/2,this.h/2,'hzj',function(){
		  me.sj_kg=false;
		  hzj.destroy();
		  tip.destroy();
		 });
		 hzj.anchor.set(0.5,0.5);
		 this.ti_group.addChild(hzj);
	     this.ti_group.addChild(tip);
	    
	 
	 },
		 js_pd:function(a){
	      if(this.ti.d==a){
		  console.log("回答正确");
		  this.next();
		  }else{
		     console.log("回答错误");
			 this.tip_action();
		  }
	 }  
	 ,
	  js_hit:function(a,sz){
      
	 
	   if(Math.abs(a.x-sz[0].x)<40){
	       console.log("hit 0");
		   this.fd_tx(a,sz[0]);
            this.js_pd(0);

	   }else if(Math.abs(a.x-sz[1].x)<40){
	       console.log("hit 1");
		     this.fd_tx(a,sz[1]);
			  this.js_pd(1);
	   }else if(Math.abs(a.x-sz[2].x)<40){
	       console.log("hit 2");

		     this.fd_tx(a,sz[2]);
			  this.js_pd(2)
	   }else if(Math.abs(a.x-sz[3].x)<40){
	       console.log("hit 3");
		     this.fd_tx(a,sz[3]);
			  this.js_pd(3)
	   }
	 }
	 ,fd_tx:function(ff,b){
	  var me=this;
	  var fd1=game.make.sprite(b.x,b.y,"hf");
	  fd1.anchor.set(0.5,0);
      this.ti_group.addChild(fd1);
	  fd1.scale.set(2,2);
      fd1.alpha=1;;
	   this.sz_m.play();
	  var tween=game.add.tween(fd1).from({alpha:0},300,"Linear",true).onComplete.add(function(){
	  
	        fd1.destroy();
			//me.sj_kg=false;
	  },this);
	   
	
	 
	 },
	   fd_jz:function(){
	 
	   
	 
	 
	 }




 }








 })()

代码结构与上篇一样，这样方便大家学习。

本游戏飞刀起到选择作用，即使你知道答案但是你飞刀扔的不准，答题也不会正确。这是本游戏的核心。整体而言本游戏比较简单，题目可以自定义增加，格式的话要注意文字叙述的长度，达到某个长度的时候要记得换行（\n使用换行符号）。题目和美工方面大家改进一下会是个不错的游戏，当然也可以发布成微信小游戏。至于如何发布成微信小游戏后面会为大家讲解。

每篇代码源码我会上传到资源下载中，大家搜索下载即可。