すべらない。。。じゃない失敗しないマリオジャンプ

２年次の少人数ゼミでAndroid アプリ開発をやる予定でしたが。。。開発マシンがのセットアップがうまくいかず断念。しかたがなく、数年前までやっていたMonacaを使ったハイブリッドアプリをやってきました。

アプリといってもゲームの方がいいのかな。。。と思い、これも数年前まで少人数ゼミでやってきたenchant.jsを利用したゲームアプリ製作をやっていきました。

基本的に教科書を与えて独習スタイルで自分のペースで学んでもらってきまして、最後にオリジナルのゲームアプリを開発しよう。。。という状況になっています。残すところあと２週間ですが。。。あまり進みがよくない状況。

例年、マリオジャンプをプログラミングしたいという子が出てくるので、せっかくなら簡単なチュートリアル動画でも作っておいたら何か役に立つかな。。。と思い、２時間ほど前からごにょごにょとやり始めました。

いつのまにか、P5.jsであれこれやるのが面白くなってしまい。。。チュートリアルはぶっとんでしまいました。また次の機会に。

とりあえず、今日はできたところまでをOpenProcessingに投稿したので、記録まで。

作ったのは以下。

変数宣言が面倒だったのでグローバル変数を使いまくりですが。。。小規模なので許してね。

決して失敗しないマリオジャンプの完成です😁　スペースキーを押すとわかると思います。

www.openprocessing.org

マリオジャンプの実装は様々な方法があると思います。

if文と状態変数を利用して、どのときにどの方向に移動させるかを制御する方法が一番カンタンそう。

でも、もっと簡単な方法を今回実装してみて思いつきました。と呼べるほど大した発見ではありませんが。

上のOpenProcessingでもコードが見れますが、以下にも晒します。

物理法則っぽいもの（ジャンプする上方向の力と常に物体にかかる重力の釣り合いの式）を使えばif文や状態変数はほとんどいらなくなります。

ポイントは以下の★と☆です。

y -= dy によって、常にボールが下方向に移動します。dyの値は単位時間当たりの移動量なので速度になります。この速度dyの値を変化させることで加速度になり、いかにもジャンプしているかのような軌跡になります。

具体的にはdyを減らしていきます。ジャンプする瞬間に加速度が最大になり（☆のdy = 30）、重力によって加速度が減少していきます。そこで dy -= 2 としています。

ただ、このままでは、ボールがずーっと落ちていきますので、yが200を越えたら 200以上増えないようにし、停止するので dy=0とします。スプライトを使って物体にあたったらdy=0にするという手もあるでしょう。今回のコードは簡単にしていますので座標で決め撃ちしています。

function setup() {
  createCanvas(400, 400);
  x = 100;
  y = 200;
  dy = 0;
  blocks = [];
  score = 0;
  sound = loadSound('smb_jump-small.wav');
}

function draw() {
  background(255);
  
  ellipse(x, y, 10, 10);
  y -= dy;  //★
  dy -= 2;  //★
  if (y > 200) { y = 200; dy = 0; }  //★

  blocks = blocks.filter(function(e) {
    e.x -= 15;
    rect(e.x, 200 - e.y, 30, e.y);
    return e;
  });
  text("SCORE:" + score, 10,20);
}

function keyPressed() {
  dy = 30;  //☆
  blocks.push({x:width, y:random() * 200});
  score ++;
  sound.play();
}