#1 JavaScriptでアクションゲームを作る │ 移動 + ジャンプ動作

私が走れないので、代わりにGoogleの恐竜ゲームっぽいのを作ってみんなに走らせてもらおうとおもう。

ただ、終わりがみえないので、チャレンジする過程をコマ切れにしてお披露目していくことにしたい。

目指せ、Google

これもある種「走る、を創る」行為だとおもうので。

ぜひ、温かく見守ってほしい。

ということで、さっそく本日の成果物をお届けしよう。

本日の成果物

• 右に横移動する
• クリックまたはタップするとジャンプする
• キー「J」を押すとジャンプする
• 右端に到達したら左端からリスタートする

子どもにPCでやらせたら、Jキー押しっぱなしでワープするという裏ワザ（バグ？）を発見された。

そこまでやり込まなくてもいいのに、さすがである。

「setInterval」を使ってるのでiOSだと動作しないかもしれません　→動いたみたいです^^v

CSS

キャンバスを広げるためにデザインCSSに以下のコードを埋め込んでおきます。

#gamecanvas {
	position: absolute;
	z-index: 1;
}

JavaScriptのコード

<canvas id="gamecanvas" width="660" height="360"></canvas>

<script>
var canvas, g;
var characterPosX, characterPosY, characterImage;
var speed = 0;
var acceleration = 0;

onload = function () {
  // 描画コンテキストの取得
  canvas = document.getElementById("gamecanvas");
  g = canvas.getContext("2d");
  // 初期化
  init();
  // 入力処理の指定
  document.onkeydown = keydown;
  document.onmousedown = mousedown;
  // ゲームループの設定 60FPS
  setInterval("gameloop()", 16);
};

function init() {
	characterPosX = 0; // スタート位置
	characterPosY = 300;
	characterImage = new Image();
	characterImage.src = "https://cdn-ak.f.st-hatena.com/images/fotolife/y/you_key69/20220211/20220211130115.png";
}

function keydown(e) {
	if (e.keyCode == 74) { // [J]押下時
		speed = -20; // Y軸の移動スピード
		acceleration = 1.5; // 加速度（重力）
	}
}
function mousedown() {
	speed = -20; // Y軸の移動スピード
	acceleration = 1.5; // 加速度（重力）
}

function gameloop() {
	update(); // キャラクターの移動
	draw(); // キャラクターの描画
}

function update() {
	speed = speed + acceleration;
	characterPosY = characterPosY + speed;
	characterPosX = characterPosX + 2; // 1フレーム毎に2ドット移動
	if (characterPosY > 300) {
		characterPosY = 300; // 着地
		speed = 0;
		acceleration = 0;
	}
	if (characterPosX > 720) {
		init(); // 右端まで行ったら戻る
	}
}

function draw() {
	// 背景描画
	g.fillStyle = "rgb(153,204,51)";
	g.fillRect(0, 0, 660, 360);
	
	// キャラクタ描画
	g.drawImage(
		characterImage,
		characterPosX - characterImage.width / 2,
		characterPosY - characterImage.height / 2
	);
}
</script>

本日の教材

教材はこれ↑

本日の学び

フレームレート（FPS）という考え方を学べたのが大きい。

FPSとは「Frame Per Second」、1秒に何コマ動くかである。

今回のアニメーションは16FPS、つまり1秒に約60コマが無限ループしている状態となっています。

その中で、

• 1コマで2ピクセルずつx軸方向に動く
• キー押下でY軸方向に20ピクセル動く
• 地平線についてたらY軸移動をやめる

など、指示すると上記のような動きになる。

基本的にはこの概念の中で完結できそうだ。

今後の展望

まだ「走る」動作になっていないので、ちゃんと「走る」アクションを描画させたい。

あと、障害物とスコアなどなど。

まだ楽しみは尽きない。

走る、を創ろう。