げぇむのページ

無限漂流の零

詳細は原作の部屋を見てください。原作の部屋

無限漂流の零

主人公は、わけもわからずに異世界に放り出される。
前世界の記憶はある場合もあるし、ない場合もある。
一人称は俺。
その世界によって種族は変わる。獣人、獣、魚、ロボット、その他色々。
名前も世界によって変わる。
セーブポイントはいつも似たシンボル。
対存在たる敵役がいる。
敵役も記憶は受け継いでいるが、主人公と共有しているわけではないので辻褄が合わないことがある。
別の世界の記憶の欠片のようなもので、別の世界の後日談的なものが見られる。

死んでしまった場合は、時間を引き継ぎリスポーンされる場合と、時間が戻る場合がある。
目標を達成すると次の世界に移行する。
その世界の目標は不明だが、何をしていても最終的に方向性がそっちの方に向かう。
次の世界に持ち越せるものは、服など簡単なものだけ。最強装備は没収または無力化。

推奨ジャンル
どんなジャンルでも柔軟に対応可能。

無限漂流の零

致命の一撃が魔王に炸裂した。

魔王「ぐぉおおおお！」
魔王「私を倒しても無駄だ！私はいつか蘇る」
魔王「その頃に貴様は生きていまい。フフフフ、グフッ・・・」

俺「よく聞くセリフだな・・・」
俺「このセリフも何回目だろう」

俺「３６万回だったか・・・いや、１万４千回か」
俺「まあ、どうでもいいか」

目的を達成した実感がある。
いつも通りなら、徐々に体が透明になって次の世界に行くはずだ。

完全に透明になる時間は、ある程度コントロールはできる。

今回は仲間もいないから気楽だな。

回想
仲間A「おい！お、お前、体が透けてるぞ」
俺「ああ。俺、目標達成すると体が透明になって違う世界に行っちゃう体質なんだ」

仲間B「ちょ、あれ冗談じゃなかったのか？」
仲間C「行っちゃやだよ～」

俺「悪いな。どうしようもないんだ」

回想終わり。

毎回説明するのは、すごく面倒だ。

俺「最強装備を城の宝箱にでも入れといてやるか」

次の世界に持って行ってもどうせ使えないだろうし。

俺「折角だから、赤い箱を選ぶぜ」
俺「これでよし」

宴を早々に抜け出して、宝箱に装備を入れた。
城では賑やかな祝宴が夜遅くまで行われていた。

俺「さて、行くか」

俺は精神を集中し、透明になる時間を一気に早めた。
体が完全に透明になると同時に、光のトンネルのような風景が見える。

万華鏡みたいというか、タイムトンネルみたいというか、そんな風景だ。

いつから、この生活をしているのか自分でもわからない。
今度は、どんなことをさせられるのだろうか。

毎回違う目標。
毎回違う世界。

魔王を倒す目標もあれば、ランダム生成ダンジョンの１００回に到達するとか。

なぜこうなったのかは知らない。
単に忘れているだけかも知れないが。

そして出口が見えた。

辺りは一面、白かった。

俺「雪国？」
いや、白い砂浜だ。

俺「とりあえず、街を探すか」

続く？

シナリオ　設定　小説　原作

ゲーム5

つづきはこちら

円を描く【HTML5 JavaScript ゲーム作成講座】5

Lesson4でキーボード入力で操作できるようにした。今回は円で敵弾を表示する。

今日の流れ
1.Lesson4をフォルダごとコピー後名前の変更をしてLesson5とする。
2.canvas.jsを変更する。
3.index.htmlを開く

1.いつもどおりコピー

2.canvas.jsを変更する。
内容

var context;
var width = 300;//画面幅
var height = 300;//画面高
var keys = new Array();//キーの状態
var char_posx;//自キャラのx座標
var char_posy;//自キャラのy座標
var char_x;//自キャラの幅
var char_y;//自キャラの高

var enemy_shot_posx;//敵弾位置
var enemy_shot_posy;//敵弾位置

window.onload = function()
{
    var canvas1 = document.getElementById('CV1');//指定したidの要素を取得

    canvas1.height = 300;//画面の高さ
    canvas1.width = 300;//画面の幅

    context = canvas1.getContext('2d');//描画メソッドを使用するための準備

    context.strokeStyle = "rgb(0, 0, 0)";
    context.strokeRect(0,0,height,width);//枠を描画

    char_x = 30;
    char_y = 30;

    char_posx = 135;//自キャラの初期位置
    char_posy = 270;

    enemy_shot_posx = 135;//敵弾の初期位置
    enemy_shot_posy = -10;

    draw();
}

function draw()
{
    if(keys[0] == true)
    {
        char_posx -= 5;
    }

    if(keys[1] == true)
    {
        char_posy -= 5;
    }

    if(keys[2] == true)
    {
        char_posx += 5;
    }

    if(keys[3] == true)
    {
        char_posy += 5;
    }

    //画面からキャラを出さない
    if(char_posx < 0)
    {
        char_posx = 0;
    }
    else if(char_posx > width - char_y)
    {
        char_posx = width - char_y;
    }

    if(char_posy < 0)
    {
        char_posy = 0;
    }
    else if(char_posy > height - char_y)
    {
        char_posy = height - char_y;
    }

    context.fillStyle = "rgb(255, 255, 255)";//色指定
    context.fillRect(0,0,300,300);//古い表示を消去するために上書きする:

    context.strokeStyle = "rgb(0, 0, 0)";
    context.strokeRect(0,0,300,300);//枠を描画

    context.fillStyle = "rgb(0, 0, 0)";

    enemy_shot_posy += 5;//敵弾を動かす

    if(enemy_shot_posy > height + 10)//敵弾が画面を超えたら初期位置に戻す
    {
        enemy_shot_posy = -10;
    }

     context.beginPath();//描画準備
     context.arc(enemy_shot_posx, enemy_shot_posy, 10, 0, 360 * Math.PI / 180, true);//円を描画
    context.fill();

    context.fillRect(char_posx,char_posy,char_x,char_y);//四角を描画:

    setTimeout(draw, 20);//指定時間毎に呼び出す
}

document.onkeypress = function(e)
{
    e.preventDefault();
}

document.onkeydown = function(e)
{

         switch(e.keyCode)
        {
            case 37:
            keys[0] = true;
            break;

            case 38:
            keys[1] = true;
            break;

            case 39:
            keys[2] = true;
            break;

            case 40:
            keys[3] = true;
            break;

        }
}

document.onkeyup = function(e)
{

         switch(e.keyCode)
        {
            case 37:
            keys[0] = false;
            break;

            case 38:
            keys[1] = false;
            break;

            case 39:
            keys[2] = false;
            break;

            case 40:
            keys[3] = false;
            break;
        }

}

3.index.htmlを開く

成功していればこのようになっているはず。
画面からキャラが出ると都合が悪いので、画面端に行ったらそれ以上は動かないように調整した。
敵弾を追加。
まだ当たり判定などはない。
四角を描画するときは必要はなかったが、円を描く時などは
beginPath()というのが必要になるので注意。

ダークソウル２ネットワークテスト４回目

2013年11月10日に行われたダークソウル２ネットワークテスト４回目の感想。

白サインが拾えるようになった。
侵入されるようになった。
前回のボスとは他に、もう一体ボスが出た。

後は基本的に前回のテストと変わらない。相変わらず、テストではレベルが上げられない。

ソウルは溜まる。
商人の売っているものは、必要なものは買ったので買うものがない。

バックスタブが入りにくくなっているような気がするのだけど、気のせいかな。
バックスタブ中、無敵ってなんとかならないかな。
無敵っていうのも変な気がする。

途中で出てくる、デカブツの攻撃力がおかしい。
強靭が高いのかなかなか怯まないし。

狭い道では、白さんが邪魔。後ろ下がれない。
バックダッシュとかで下がれたりするのだろうか？

何が出てくるかわからない、ワクワク感は楽しい。
しかし、ああいう鬱陶しいのは要らない。

ボスは何とか倒した。骨だらけ・・・。
なんだかんだ言って全体的に楽しめた。

ゲーム4

つづきはこちら

キー操作【HTML5 JavaScript ゲーム作成講座】4

Lesson3で自キャラを表示させた。今回はキーボード入力で操作できるようにする。

今日の流れ
1.Lesson3をフォルダごとコピー後名前の変更をしてLesson4とする。
2.canvas.jsを変更する。
3.index.htmlを開く

1.いつもどおりコピー

2.canvas.jsを変更する。
内容

var context;
var keys = new Array();//キーの状態
var char_posx;//自キャラのx座標
var char_posy;//自キャラのy座標
var char_x;//自キャラの幅
var char_y;//自キャラの高さ

window.onload = function()
{
    var canvas1 = document.getElementById('CV1');//指定したidの要素を取得

    canvas1.height = 300;//画面の高さ
    canvas1.width = 300;//画面の幅

    context = canvas1.getContext('2d');//描画メソッドを使用するための準備

    context.strokeStyle = "rgb(0, 0, 0)";
    context.strokeRect(0,0,300,300);//枠を描画

    char_x = 30;
    char_y = 30;

    char_posx = 135;//自キャラの初期位置
    char_posy = 270;//自キャラの初期位置

    draw();
}

function draw()
{
    if(keys[0] == true)
    {
        char_posx -= 5;
    }

    if(keys[1] == true)
    {
        char_posy -= 5;
    }

    if(keys[2] == true)
    {
        char_posx += 5;
    }

    if(keys[3] == true)
    {
        char_posy += 5;
    }

    context.fillStyle = "rgb(255, 255, 255)";
    context.fillRect(0,0,300,300);//古い表示を消去するために上書きする:

    context.strokeStyle = "rgb(0, 0, 0)";
    context.strokeRect(0,0,300,300);//枠を描画

    context.fillStyle = "rgb(0, 0, 0)";

    context.fillRect(char_posx,char_posy,char_x,char_y);//四角を描画:

    setTimeout(draw, 20);//指定時間毎に呼び出す
}

document.onkeydown = function(e)
{

         switch(e.keyCode)
        {
            case 37:
            keys[0] = true;
            break;

            case 38:
            keys[1] = true;
            break;

            case 39:
            keys[2] = true;
            break;

            case 40:
            keys[3] = true;
            break;

        }
}

document.onkeyup = function(e)
{

         switch(e.keyCode)
        {
            case 37:
            keys[0] = false;
            break;

            case 38:
            keys[1] = false;
            break;

            case 39:
            keys[2] = false;
            break;

            case 40:
            keys[3] = false;
            break;
        }

}

3.index.htmlを開く

成功していればこのようになっているはず。

変数は関数の外で宣言することで他の関数でも使用することができる。
その関数の中で宣言した変数は、基本的にその関数の中でしか使用できない。
あまり多用すると不具合の元なので最少限がいいと思う。

drawという関数を作成し、そちらで描画などの操作をするように変更。
また、setTimeoutという関数で、指定した時間ごとにdrawが呼び出される。

document.onkeydown = function(e)はキーを押した時に呼び出され、eという変数を渡す。

switchはその変数の内容によって処理を分けたい時に使う。
case 37: とはe.keyCodeが37の時に以下の処理を行うという意味である。
この時に使うのはコロンであり、セミコロンではないので注意。
キーコードはブラウザによって違うので注意。

var keys = new Array();は変数 keysは配列であることを示す。
配列とは変数の集まりのようなものである。
keys[0] = 19;
keys[1] = 7;
のように扱う。

true;は論理式に使う。真ならtrue、偽ならfalseである。onとoffのような意味。

break;はcaseの処理を終了してswitchの外に出すことを意味する。

document.onkeyup = function(e) はキーを離した時に呼び出される。

なぜキー押した時と離した時の処理が必要かというと、基本的にキーは一個ずつしか処理できないからだ。しかし、ゲームには同時押しという処理が必要になるので、何らかの処理をしなければならない。
今回の処理は、キーを押したら、trueを入れ、キーを離せば、falseが入るようにしている。
そしてdraw()が呼び出される毎に、trueと判定されたキーのみ処理するようにしている。

→と←を同時に押して見れば分かるが、停止しているように見える。しかし内部的にはｘ座標がマイナスされた後にプラスされ、移動量は差し引き０になっている。

ゲーム3

つづきはこちら

枠と塗りつぶし【HTML5 JavaScript ゲーム作成講座】3

Lesson2で画面サイズの変更方法を示した。しかし、実はfillRectは塗りつぶすものであるため、後に用いると既に描画したものを上書きしてしまう。
というわけで、枠だけ描画する方法と自キャラらしきものを作る。

今日の流れ
1.Lesson2をフォルダごとコピー後名前の変更をしてLesson3とする。
2.canvas.jsを変更する。
3.index.htmlを開く

1.いつもどおりコピー

2.canvas.jsを変更する。
内容

window.onload = function()
{
    var canvas1 = document.getElementById('CV1');//指定したidの要素を取得

    canvas1.height = 300;//画面の高さ
    canvas1.width = 300;//画面の幅

    var context = canvas1.getContext('2d');//描画メソッドを使用するための準備

    context.strokeStyle = "rgb(0, 0, 0)";//枠の色を指定する
    context.strokeRect(0,0,300,300);//枠を描画

    var char_x = 30;//自キャラ幅
    var char_y = 30;//自キャラ高さ

    context.fillStyle = "rgb(0, 0, 0)";//四角の色を指定する
    context.fillRect(135,270,char_x,char_y);//自キャラを描画:
}

3.index.htmlを開く
成功していればのゲーム3ように黒枠に黒の自キャラが表示されているはず。
自キャラと言っても、ただの四角だが。
strokeRectは枠を描画する
fillRectは塗りつぶした四角を描画する
という違いがある。

キー操作【HTML5 JavaScript ゲーム作成講座】4

ゲーム2

つづきはこちら

ゲーム1

つづきはこちら

げぇむのページ

無限漂流の零

ゲーム5

円を描く【HTML5 JavaScript ゲーム作成 講座】5

ダークソウル２ ネットワークテスト４回目

ゲーム4

キー操作【HTML5 JavaScript ゲーム作成 講座】4

ゲーム3

枠と塗りつぶし【HTML5 JavaScript ゲーム作成 講座】3

ゲーム2

ゲーム1

円を描く【HTML5 JavaScript ゲーム作成講座】5

ダークソウル２ネットワークテスト４回目

キー操作【HTML5 JavaScript ゲーム作成講座】4

枠と塗りつぶし【HTML5 JavaScript ゲーム作成講座】3