空中跳一跳

玩法：
跳一跳长按鼠标左键，松开鼠标进行跳跃，跳到下一个格子中，进行分数统计，三次生命机会，格子中也会有爱心出现，吃掉安心增加一次生命哦^^。

开始游戏https://www.ormcc.com/play/gameStart/177

html

<div id="game"></div>

css

#game canvas {
    position: relative;
    margin: 0 auto;
}

js

var mainState = function(game){
  var group, player, effect, point;

  var moving; // 用于记录tween动画状态
  var holding;  // 用于记录鼠标按下状态
  var holdTime; // 用于记录鼠标按下时间

  this.pArr = [17,15,12,10,15,13,8,17]; // 各种类型平台宽度，与平台spritesheet各帧对应
  this.init = function(){

    moving = true;
    holding = false;
    holdTime = 0;

    this.lastX = 40;// 最后一次的距离、方向、平台类型
    this.lastY = 20;
    this.lastD = 1;
    this.lastP = 0;

    this.bonus = 0;
    this.playerStyle = this.game.playerStyle; // 角色样式，对应帧号
    this.items = {txt:[null,null,null],val:[0,3,3]}; // 游戏数据在一个对象中保存：[分数，生命，瞄准器]
  };
  this.create = function(){
    var back = this.game.add.sprite(0,0,"back");
    back.scale.set(this.game.width/160,this.game.height/280);
    // clouds
    for (var i=0; i<3; i++){
      var firstX = this.game.rnd.between(20,this.game.width-20);
      var firstTime = Math.floor((20000-3000*i)*(firstX+150)/(this.game.width+200));
      var cloud = this.game.add.sprite(firstX,this.game.height-250+50*i,"cloud",this.game.rnd.integerInRange(0,2));
      cloud.scale.set(1+0.5*i);
      cloud.alpha = 0.3;
      this.game.add.tween(cloud).to({x:-150},firstTime,"Linear",true).onComplete.add(function(obj,tw,twTime){
        obj.x = this.game.width+50;
        this.game.add.tween(obj).to({x:-150},twTime,"Linear",true,0,-1).onLoop.add(function(obj){
          obj.frame = this.game.rnd.integerInRange(0,2);
        },this);
      },this,0,20000-3000*i);
    }

    group = this.game.add.group();
    this.plate1 = group.create(this.world.centerX-this.lastX, this.world.centerY+this.lastY, "plate", 0);
    this.plate1.anchor.set(0.5,0.4);
    // 连环tween
    this.game.add.tween(this.plate1).from({y:this.plate1.y-50,alpha:0},200,"Linear",true).onComplete.add(function(){
      this.plate2 = group.create(this.world.centerX+this.lastX, this.world.centerY-this.lastY, "plate", 0);
      this.plate2.anchor.set(0.5,0.4);
      this.plate2.sendToBack();
      this.game.add.tween(this.plate2).from({y:this.plate2.y-50,alpha:0},200,"Linear",true).onComplete.add(function(){
        // 光效
        effect = group.create(0, 0, "button", 6); 
        effect.anchor.set(0.5);
        effect.visible = false; // 与平台共一个组，只用visible控制显示或隐藏，用kill的话会被拿去做平台

        // 瞄准器
        point = group.create(0, 0, "button", 7); 
        point.anchor.set(0.5);
        point.scale.set(0.5);
        point.visible = false; // 与平台共一个组，只用visible控制显示或隐藏，用kill的话会被拿去做平台

        player = group.create(this.world.centerX-this.lastX, this.world.centerY+this.lastY);
        // 身体
        player.b = player.addChild(this.game.add.sprite(0, 0, "player", this.playerStyle));
        player.b.anchor.set(0.5,0.875);
        player.b.animations.add("delay",[this.playerStyle],10,false);
        // 加分提示文本
        player.txt = player.addChild(this.game.add.text(0, -30, "",
        {fontSize:"16px", fill:"#fff"}));
        player.txt.anchor.set(0.5);

        this.game.add.tween(player).from({y:player.y-50,alpha:0},200,"Linear",true)
        .onComplete.add(function(){
          moving = false;
        },this);
      },this);
    },this);

    this.items.txt[0] = this.game.add.text(this.world.centerX, 80, "0", 
    {fontSize:"48px", fill:"#999"});  
    this.items.txt[0].anchor.set(0.5);
    this.game.add.sprite(10,10,"icon",0);
    this.game.add.sprite(75,10,"icon",1);
    this.items.txt[1] = this.game.add.text(35, 10, this.items.val[1], 
    {fontSize:"16px", fill:"#999"});
    this.items.txt[2] = this.game.add.text(100, 10, this.items.val[2], 
    {fontSize:"16px", fill:"#999"});

    this.game.input.onDown.add(function(){
      if(!moving && !holding){
        holding=true;
        holdTime=this.game.time.now;
        if(this.items.val[2]>0){
          point.x=player.x;
          point.y=player.y;
          point.visible = true;
        }
      }
    },this);
    this.game.input.onUp.add(this._jump,this);
  };
  this.update = function(){
    if(holding){ // 储力效果，简单的缩短
      var power = Math.min(Math.floor((this.game.time.now - holdTime) / 16), 250);
      // 计算力度，限制数值最大为250
      player.scale.y = 1 - (power>100 ? 0.3 : 0.3 * power / 100);
      if(this.items.val[2]>0){
        var tarX = this.world.centerX-this.lastX+this.lastD*power*2;
        var tarY = this.world.centerY+this.lastY-power;
        point.x=tarX;
        point.y=tarY;
      }
    }
  };
  this._setItem = function(id, v){
    this.items.val[id]+=v;
    this.items.txt[id].text = this.items.val[id];
  };
  this._jump = function(){
    if(!moving && holding){
      moving = true;
      holding = false;
      player.scale.y = 1;
      point.visible = false;
      var power = Math.min(Math.floor((this.game.time.now - holdTime) / 16), 250);
      // 计算力度，限制数值最大为250
      var jumpX = this.world.centerX-this.lastX+this.lastD*power*2;
      var jumpY = this.world.centerY+this.lastY-power;
      // *** 跳跃效果 ***
      var jumpTime = 300; // 跳跃动作时长
      // 外壳直线位移至目的地
      this.game.add.tween(player).to({x:jumpX, y:jumpY},jumpTime,"Linear",true)
      .onComplete.add(function(obj){
        if(this._checkScore()){
          obj.b.animations.play("delay",10).onComplete.addOnce(this._newPlate,this);
          // 这里用帧动画实现停顿效果（帧速10代表停顿十分之一秒）
        }else{
          obj.b.animations.play("delay",10).onComplete.addOnce(this._fall,this);
        }
      },this);
      // 身体只做跳跃动作即可
      player.b.y = -40; 
      player.b.angle = -this.lastD * 150;
      this.game.add.tween(player.b).to({angle:-this.lastD*90, 
      x:this.lastD*20, y:-80}, jumpTime/2, Phaser.Easing.Quadratic.Out, false)
      .to({angle:0,x:0,y:0},jumpTime/2,Phaser.Easing.Quadratic.In,true);
      // ******
    }
  };

源码https://www.ormcc.com/

需要源码请关注添加好友哦^ ^