ゲーム開発ラボ

視覚的に楽しいアプリやゲーム開発をしながら,Javaやjavascriptを楽しく学んでいきます

横スクロールゲームを作る-1

webブラウザChromeではネット接続が失敗したときに,なぜか横スクロールのゲームが始まります
f:id:filopodia:20201116170342p:plain

t-rexがサボテンをジャンプしてよけるという内容のゲームですが,今シリーズではこれを再現してみたいと思います
今回完成するアプリは下のようになります
f:id:filopodia:20201116170911g:plain

t-rexのゲームでは,背景が右から左へとスクロールするのですが,今回はスクロールの機能は実装せず,
PCのスペースキーを押したときにプレーヤーキャラクター(楕円)がジャンプする機能だけを実装します

コードは以下となります

float gravity = 1; // 下向きの重力加速度
Player rex;

void setup(){
  size(600,200);
  background(255);
  frameRate(60);
  rex = new Player();
}

void draw(){
  background(255);
  line(0, 0.8*height, width, 0.8*height); // 地面
  rex.update();
}

void keyPressed(){ // スペースキーを押した時にjumpする
  if(key==' '){rex.jump();} 
}

class Player{
  float py; // 位置
  float vy; // 速度
  boolean isGrounded; // 地面に接地しているか
  
  Player(){
    py = 0.75*height;
    vy = 0;
    isGrounded = true;
  }
  
  // function
  void update(){
    vy += gravity;
    py += vy;
    if(py>=0.75*height){
      isGrounded = true; // Playerの位置が0.75*heightであれば接地しているとする
      py = 0.75*height;
    }
    ellipse(40, py, 20, 0.25*height);
  }
  
  void jump(){ 
    if(isGrounded){ // 地面に接地しているときだけjumpできる
      isGrounded = false;
      vy = -14;
    }
  }
}


上のコードではプレーヤーとしてPlayerクラスを定義しています
クラス変数として位置や速度を格納する変数と, jump中かどうかを判定するブール変数を用意します

float gravity = 1; // 下向きの重力加速度

class Player{
  float py; // 位置
  float vy; // 速度
  boolean isGrounded; // 地面に接地しているか
  
  Player(){
    py = 0.75*height; // 初期位置
    vy = 0; // 初期速度
    isGrounded = true; // 初めは地面に接している
  }
  
  // function
  void update(){
     // 位置、速度の更新とキャラの描画を行う
  }
  
  void jump(){ 
    // キャラが地面に接しているとき,上向きの速度を与える
  }
}


プレーヤーキャラクターがどの位置にいる場合に地面に接地しているとみなすか,といった設定はPlayer()クラスのupdate()関数の中で定義しています

  void update(){
    vy += gravity;
    py += vy;
    if(py>=0.75*height){
      isGrounded = true; // Playerの位置が0.75*heightであれば接地しているとする
      py = 0.75*height; 
    }
  }


また, Playerは地面に接地しているときしかjumpできないようにします
この記述がないと,Playerは空中で2回目, 3回目のジャンプができてしまいます

  void jump(){ 
    if(isGrounded){ // 地面に接地しているときだけjumpできる
      isGrounded = false;
      vy = -14;
    }
  }

次回以降は, 横スクロールと当たり判定を実装していきます