enchant.js:キャラクタの左右移動とジャンプ

スポンサーリンク
JavaScript

今更ながらJavaScriptゲーム開発エンジンenchant.jsを使ってキャラクタの左右移動とジャンプを行うプログラム。

プログラム部分

main.js

/* -------------------------------------------------------------------------
	enchant.js キャラクタの左右移動とジャンプ

	参考URL: https://techlog.wgc-cosmo.com/run-game3/
	
 					created at 2021-09-01 on dianxnao.com
 ------------------------------------------------------------------------- */

window.onload = function(){
	game = new Core(320, 320);			// ゲームステージ
	game.rootScene.backgroundColor = "gray";	// シーンの背景色
	game.preload("chara.png");				//ゲームで使う画像
	game.fps = 30;							// フレームレート
	game.keybind(32, "space");				// スペースキーの入力を追加
	
	game.onload = function(){
		let player = new Player();				// プレイヤー生成
		game.rootScene.addChild(player);		// シーンに追加
	};

	game.start();								// ゲーム開始
}

Player.js

/*
 * Player.js: プレイヤークラス
 */
const PLAYER_WAIT = 0;		// 歩いていない
const PLAYER_WALK = 1;		// 歩いている
const GROUND = 160;			// 地面のY座標
const JUMP_HEIGHT = 10;		// ジャンプの高さ

let Player = Class.create(Sprite, {
	initialize: function(){
		Sprite.call(this, 32, 32);
		this.image = game.assets["chara.png"];
		this.anim = [1, 0, 1, 2];
		this.direction = 2;
		this.walkSpeed = 4;
		this.frame = 7;				// スプライトのフレーム
		this.status = PLAYER_WAIT;
		this.moveTo(0, GROUND);		// スプライトの初期位置
		this.vy = -JUMP_HEIGHT;		// ジャンプの初速(ジャンプする高さでもある)
		this.isJump = false;			// ジャンプ中か?
	},
	jump: function(){
		if(this.isJump){
			this.y += this.vy++;	// ジャンプ処理
			if(this.y > GROUND){	// 地面についた
				this.y = GROUND;
				this.isJump = false
			}
		}
	},
	onenterframe: function(){
		// 移動処理
		let input = game.input;

		if(input.left){	// 左
			this.direction = 1;
			this.x -= this.walkSpeed;
			this.status = PLAYER_WALK;
		}
		else if(input.right){	// 右
			this.direction = 2;
			this.x += this.walkSpeed;
			this.status = PLAYER_WALK;
		}
		if(input.space){		// スペース
			if(this.isJump == false){
				this.isJump = true;
				this.vy = -JUMP_HEIGHT;
			}
		}
		
		// アニメ処理
		if(this.status == PLAYER_WALK){
			this.frame = this.anim[game.frame % 4] + 3 * this.direction;	// 4:アニメパターンの配列数 3: 1方向のアニメ画像数
			this.status = PLAYER_WAIT;
		}
		else if(this.status == PLAYER_WAIT){
			this.frame = this.anim[0] + 3 * this.direction;
		}
		
		// ジャンプ関数呼び出し
		this.jump();
	},
});

Init.js

/*
 * Init.js: 初期化処理
 */
enchant();

let game = null;	// このゲーム

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>enchant.js: キャラクタの左右移動とジャンプ</title>
<script src="enchant.js"></script>
<script src="Init.js"></script>
<script src="Player.js"></script>
<script src="main.js"></script>
</head>
<body style="background: black;margin: 0; padding: 0;">
</body>
</html>

参考にしたサイト

GitHub - wise9/enchant.js: A simple JavaScript framework for creating games and apps
A simple JavaScript framework for creating games and apps - GitHub - wise9/enchant.js: A simple JavaScript framework for creating games and apps
Class Index | JsDoc Reference
ランゲーの作り方③ キャラクターをジャンプさせる【enchant.js】 | ゲーム開発試行錯誤
今回はキャラクターをジャンプさせます。画面をタッチしたらキャラクターがジャンプするようにしてみます。

コメント

タイトルとURLをコピーしました