JavaScript/ゲームを作る/横スクロールアクション

1月 1, 2003 · Posted in JavaScript, ゲームを作る · Comment 

作るもの

マリオみたいにキャラクターが横に移動していくやつを作ってみます。
十字キーでキャラクター動かしてジャンプとかできたらいいなっと。
とりあえず、Div要素みたいなの動かせば完成なんじゃない！？

さて、どうなることやら。
はじまりです。

ページ一覧

Tags: no tags

JavaScript/ゲームを作る/横スクロールアクション/1.左右移動

1月 1, 2003 · Posted in JavaScript, その他, ゲームを作る · Comment 

ゴール

キャラクターを画面上で左右移動させること！

今回の完成コード

コードの説明

ゲームループ

ゲーム作りの定石として、「ゲームループ」というやつがあるらしい。
単純なメインループのことで、たとえば以下のような感じになる。

while(!ゲームオーバー){
マップ描画();
敵描画();
キャラクター描画();
ゲームオーバー判定();
}
なるほど、単純でいいや。

これをJavaScriptで実現するために、setIntervalメソッドを呼び出してゲームループ用関数を30ミリ秒ごとに呼んでみた。間隔の設定は適当なので、あとで考える。

id = setInterval(update, 30);
（略）
function update(){
// ここに処理を書く
}

キャラクターオブジェクト

オブジェクトというか、構造というか、連想配列というか、JavaScriptではなんと呼ぶんだろう。
キャラクターを表すやつ。

character = {
characterItem: document.getElementById("characterItem"),
// キャラクターの位置（横）
x: 0,
// キャラクターの位置（縦）
y: jimen,
// キャラクターのX方向への進行速度
vx: 0,
// 進行速度
speed: 6,

//（変数のみ抜粋。以下、略）
}
いろいろあったんだけど、試行錯誤の結果、上のようになりました。

一番最初はx, yだけしかなかったんだけど、ゲームループとの組み合わせでうまくやるには進行速度(vx)があるといいらしい。

キーイベント

右キーを押すと右にすすんで、左キーをおすと左に進む。離すと停止。単純。

// キーダウン。
// あとあと上とか他のボタンも追加されるだろうからswitchで書いた。
function onKeyDown(keyCode){
switch(keyCode){
case 37:
// 左
character.moveLeft();
break;
case 39:
// 右
character.moveRight();
break;
default:
break;
}
}

// キーアップ
function onKeyUp(keyCode){
switch(keyCode){
case 37:
// 左
character.stop();
break;
case 39:
// 右
character.stop();
break;
}
}

ゲームループ内にキャラクターの移動処理を記述

キャラクターの現在位置（x）に、進行速度（vx）を加算することで、キャラクターを移動させる。
ちなみにvxをマイナスにすると左に移動、プラスにすると右に移動する。

function update(){
character.x += character.vx;
character.drawCharacter();
}

ふたたび今回の完成コード

まとめ

完成コードはなんてことないんだけど、試行錯誤が大変だったなー。
あと、構造（クラス？配列？）の使い方はこれでいいのだろうか。
謎は深まるばかり。

補足

これに上下を加えたらRPG風な移動になるなー。

Tags:

JavaScript/ゲームを作る/横スクロールアクション/2.ジャンプ

1月 1, 2003 · Posted in JavaScript, その他, ゲームを作る · Comment 

ゴール

↑キーでキャラクターをジャンプさせる。なめらかに！

はじめに

ジャンプ処理難しかったなー。
で、ほぼギブアップ状態になりまして、検索して[[ジャンプ-Javaでゲーム作りますが何か？>http://javagame.skr.jp/index.php?%A5%B8%A5%E3%A5%F3%A5%D7]]というすばらしいものを見つけまして、最終的にコード丸写し状態になるという、かなり日和った結果になりました。
でもなめらかなジャンプが実装できてよかったなー。勉強になったなー。
というわけで、いってみよう。

今回の完成コード

↓感動のジャンプ処理。重力ってすばらしい。

コードの説明

キャラクターの属性を追加

キャラクターの属性に、重力・着地フラグ・縦方向の進行速度・ジャンプスピードを追加。
重力と着地フラグの使い方はゲームループ部分のコード（後述）を参照。

character = {
characterItem: document.getElementById("characterItem"),
x: 0,
y: jimen,
vx: 0,
vy: 0,
speed: 6,
jumpspeed:18,
onground:true,
gravity:1.0,

// 略
}

ジャンプ処理

これは左右移動と一緒。

jump:function(){
this.onground = false;
this.vy = -this.jumpspeed;
}

ゲームループ

いやー、これ考えた人すごいなぁ。

function update(){
character.x += character.vx;

// キャラクターが着地していない（＝ジャンプ中）場合、処理を行う
if(!character.onground){
// 縦方向に移動
character.y += character.vy;

// 上に進むごとに、重力が加算される！！
// つまり、だんだん上に進めなくなる。
character.vy += character.gravity;

// 地面に到達したらジャンプ終了。
if(character.y >= jimen){
character.onground = true;
character.y = jimen;
}
}

// キャラクター描画
character.drawCharacter();
}

キーダウン時の小細工

上キーを押しっぱなしにしたときの、着地した瞬間にすぐジャンプする動きがだいぶ違和感だったから、押しっぱなしでも一度しかジャンプしないことにした。

function onKeyDown(keyCode){
if(character.onground && !key39UpFlag){
switch(keyCode){
case 38:
// ↑
key39UpFlag = true;
character.jump();
break;

default:
break;
}
}
}

function onKeyUp(keyCode){
switch(keyCode){
case 38:
key39UpFlag = false;
break;
}
}
ああ、でもちょっと違うな。ジャンプ中にキー離して押したらジャンプしちゃうもんな。

という中途半端な状態だな。

ふたたび今回の完成コード

まとめ

重力の処理も、アクションゲーム作りの定石なんだろうか。

補足・疑問

-残された課題
–ジャンプ中に方向転換できてよかったんだっけ…？
–連続ジャンプの問題

Tags:

次ページへ »