今更ながら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 - wise9/enchant.js
Class Index | JsDoc Reference
https://techlog.wgc-cosmo.com/run-game3/
コメント