FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

キーを押した長さに応じてジャンプの高さを変える

今日は、キーを軽く押したら少しジャンプして、キーを押し続けると高くジャンプする処理を実装した。
HTML5 Canvas で作ったものをこちらに公開してます → スペースキーを押し続けると高くジャンプする
sキーを押してスタートしてください。

ボタンを押した長さに応じてジャンプの高さを変える方法をネットでちょっと調べてみたが、見つけられなかったので自己流で実装した。

1. ジャンプの仕様
キーを離したときにジャンプすれば簡単なのだが、それだとゲームになりにくいので
「キーを押した時点でジャンプ開始し、ジャンプ中に高さが変わる」仕様とする。

ジャンプの高さの仕様は次のようにした。
・ジャンプの高さは5段階。キーを押し続けて3、5、7、9フレーム目で高さが変わる。それ以上押し続けても変わらない。
(今回作ったプログラムは12fpsなので、2フレームごとに変わるようにした)
・ジャンプの高さは段階にほぼ正比例する。

2. ジャンプ中のy座標計算方法
ジャンプ中のy座標はVerlet法で求める。その式に値を加算してジャンプの高さを変えることにした。
Verlet法については ジャンプしたときの座標をVerlet法で求める を参照。
その部分の処理は以下のとおり。
  // this.charObj.y : 現在のy座標
  // this.charObj.y0 : 前フレームでのy座標
  // this.gh2 : 物体にかかる重力に関係する値
  // this.jumpval : キーを押した長さに応じて加算される値
  this.charObj.y += this.charObj.y - this.charObj.y0 + this.gh2 + this.jumpval;

y座標を求める前に this.jumpval を求める必要がある。
this.jumpval は毎フレームで加算するのではなく、高さを変えるときだけ加算しそれ以外では this.jumpval = 0 とした。
また、高さを変えるときに加算する値は、以下のように配列 this.jumpvalArr で持つことにした。
  // ジャンプ力加算値の配列
  // 3、5、7、9フレーム目で加える this.jumpval が格納されている。
  this.jumpvalArr = [-5, -4, -4, -3.5];
こうすることで、this.jumpvalArr 要素の値を変えるだけでジャンプの高さを調整することができる。

以上を盛り込んだ、ジャンプ中のy座標を求める処理は以下のとおり。
この処理がフレームごとに実行される。
  /* ジャンプ中のy座標を求める処理 */
  this.jump = function(){
    // ジャンプ力を加算するか判定し、加算値を求める
    // this.jumpval : y座標を求める際に加算される値。上記のthis.jumpvalと同じ
    this.jumpval = 0;
    if(this.addjump){  // SPACEキーが押され続けている状態のとき this.addjump = true
      // SPACEキーが押され続けている状態の場合、this.jumpAddSepフレームごとにジャンプ力を加算
      // this.addjumpCnt : SPACEキーが押され続けて何フレーム経過したか
      // this.jumpAddSep : 何フレームごとに this.jumpval を加算するか。今回は2
      // this.jumpadded : 何回 this.jumpval が加算されたか
      // this.jumpvalArr[] : this.jumpval の値を格納した配列
      // this.showJumpMsg() : ジャンプ力を表示
      if((this.addjumpCnt % this.jumpAddSep == 0) && (this.addjumpCnt > 0)){
        // ジャンプ力加算値を求める
        this.jumpadded++;
        if(this.jumpadded >= this.jumpvalArr.length){
          // 最後の加算。これ以上SPACEキーを押し続けても加算しない
          this.jumpval = this.jumpvalArr[this.jumpvalArr.length - 1];
          this.addjump = false;
        }else{
          this.jumpval = this.jumpvalArr[this.jumpadded - 1]
        }
        this.showJumpMsg(this.jumpadded);
      }
      this.addjumpCnt++;
    }
  
    // キャラクターの座標をVerlet法で算出
    // 詳細な説明は ジャンプしたときの座標をVerlet法で求める を参照
    // this.charObj.y : 現在のy座標
    // this.charObj.y0 : 前フレームでのy座標
    // this.gh2 : 物体にかかる重力に関係する値
    var backy = this.charObj.y;  // 現在のy座標を待避
    if(this.charObj.y == this.charObj.y0){
      // 初速度から1フレーム目のy座標を算出。詳細は略
      this.charObj.y = this.G / (2 * Math.pow(fps,2)) + this.v0 / fps + this.charY0;
    }else{
      this.charObj.y += this.charObj.y - this.charObj.y0 + this.gh2 + this.jumpval;
    }
    this.charObj.y0 = backy;
    
    // this.charY0 : y座標初期値
    if(this.charObj.y >= this.charY0){
      // ジャンプ終了
      this.charObj.y = this.charY0;
      this.jumping = false;  // ジャンプ中フラグをOFF
      this.showJumpMsg(-1);
    }
  }

以上。
this.jumpvalArr の値を調整するのがちょっと大変だった。
重力加速度にこだわらなければもっとシンプルになるのだろうか。

せっかくなので作ったページのソースを載せておく。jQuery は Ver1.4.2 を使用。
html5game2.html  canvasgame2.js
スポンサーサイト

コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。