万引少年 JavaScriptでアスキーアートを使ったレトロなゲームをつくる(1)

前回はC#でレトロなゲーム万引少年を作ったので今回はJavaScriptで作成してみることにします。JavaScriptであればページにアクセスするだけ動作確認をすることができます。動作確認はこちらからお願いします。 ⇒ 動作確認はこちら

Contents

1 いきなり挫折？
2 HTML部分

いきなり挫折？

で、早速問題発生。■がうまく表示されないのです。

HTML

<div>
■■■■■■<br>
■■■■■■<br>
■■■■■■<br>
</div>

<p>行間が空いてしまうという問題はline-height:1emでクリア</p>

<div style = "line-height:1em">
■■■■■■<br>
■■■■■■<br>
■■■■■■<br>
</div>

<div>

■■■■■■<br>

</div>

<p>行間が空いてしまうという問題はline-height:1emでクリア</p>

■■■■■■<br>

</div>

この部分は画像で処理するしかないのかと困っていたところ、尊敬するプログラミング実況配信系YouTuberのひとりであるT Umezawaさんが「HTML, CSS, JavaScript, C# 初心者さんの質問にお答えします」と言っていたので質問をしてみました。質問は10分10秒あたりからはじまります。

結局20分くらい相談してもらった結果、preタグを使えばよいということがわかりました。

掲載の都合上、＜と＞が全角文字になっていますが半角にしてください
＜pre style = "line-height:1em"＞
■■■■■■
■■■■■■
■■■■■■
＜/pre＞

掲載の都合上、＜と＞が全角文字になっていますが半角にしてください

＜pre style = "line-height:1em"＞

■■■■■■

＜/pre＞

ということでめでたしめでたし。

HTML部分

問題が解決したので最初にHTMLの部分だけ先に示します。

C#で作成したときは別クラスをつくらずにForm1クラスのなかにそのまま書いてしまいましたが、今回はシーンごとに別にクラスを作成します。オープニングならOpeningクラス、店内であればStoreクラスというように・・・。あとはインターバルが500ミリ秒のタイマーと150ミリ秒のタイマーをつくってGameStatusごとに切り分けて処理をします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レトロなゲーム　万引き少年</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
    body {
        background-color: #000;
    }
    #field {
        margin-top: 50px;
        margin-left: 50px;
}
</style>
</head>

<body>

    <div id = "field"></div>

<script>
    const GAME_STATUS_OPENING = 0; // オープニング
    const GAME_STATUS_STEAL = 1; // 店内で万引き中
    const GAME_STATUS_CATCH = 2; // 店内で警備員に見つかる
    const GAME_STATUS_CLEARED = 3; // ステージクリア後
    const GAME_STATUS_GAMEOVER = 4; // 捕まって警察署へ

    let GameStatus = GAME_STATUS_OPENING;

</script>

<script type='text/javascript' src='./opening.js'></script>
<script type='text/javascript' src='./store.js'></script>
<script type='text/javascript' src='./gameover.js'></script>
<script type='text/javascript' src='./stage-clear.js'></script>

<script>

let fieldElement = document.getElementById('field');
let pre = document.createElement('pre');
pre.style.lineHeight = '1em';
pre.style.color = 'aqua';
fieldElement.appendChild(pre);

let store = new Store(pre);
let gameOver = new GameOver(pre);
let stageClear = new StageClear(pre);
let opening = new Opening(pre);

document.onkeyup = function(e){
    store.OnKeyUp(e);
}

document.onkeydown = function(e){
    store.OnKeyDown(e);

    // e.keyCode == 83は「S」キー
    // GameStatusがオープニングであれば万引き作戦開始、
    // ゲームオーバー後一定時間経過後は再挑戦
    // それ以外はなにもしない
    if(e.keyCode == 83){
        if(GameStatus == GAME_STATUS_OPENING){
            GameStatus = GAME_STATUS_STEAL;
            store.InitStore();
        }
        else if(GameStatus == GAME_STATUS_GAMEOVER && gameOver.EnableRestart){
            GameStatus = GAME_STATUS_OPENING;
            gameOver.EnableRestart = false;
            gameOver.UpdateCount = 0;
            store.InitGame();
        }
    }
}

// 万引き中はこれで警備員を動かす
setInterval(() => {
    if(GameStatus == GAME_STATUS_STEAL)
        store.Timer500ms();
}, 500);

// それ以外のときはこれで描画処理をおこなう
setInterval(() => {
    if(GameStatus == GAME_STATUS_OPENING)
        opening.Show();
    else if(GameStatus == GAME_STATUS_CATCH)
        store.Timer150ms();
    else if(GameStatus == GAME_STATUS_CLEARED) {
        stageClear.Show();
        if(stageClear.End){
            GameStatus = GAME_STATUS_OPENING;
            stageClear.End = false;
        }
    }
    else if(GameStatus == GAME_STATUS_GAMEOVER) {
        gameOver.Show(store.Score);
    }
}, 150);

</script>

</body>
</html>

100

101

102

103

104

105

<!DOCTYPE html>

<head>

<title>レトロなゲーム　万引き少年</title>

<style>

body {

background-color: #000;

}

#field {

margin-top: 50px;

margin-left: 50px;

}

</style>

</head>

<body>

const GAME_STATUS_OPENING = 0; // オープニング

const GAME_STATUS_STEAL = 1; // 店内で万引き中

const GAME_STATUS_CATCH = 2; // 店内で警備員に見つかる

const GAME_STATUS_CLEARED = 3; // ステージクリア後

const GAME_STATUS_GAMEOVER = 4; // 捕まって警察署へ

let GameStatus = GAME_STATUS_OPENING;

</script>

let fieldElement = document.getElementById('field');

let pre = document.createElement('pre');

pre.style.lineHeight = '1em';

pre.style.color = 'aqua';

fieldElement.appendChild(pre);

let store = new Store(pre);

let gameOver = new GameOver(pre);

let stageClear = new StageClear(pre);

let opening = new Opening(pre);

document.onkeyup = function(e){

store.OnKeyUp(e);

}

document.onkeydown = function(e){

store.OnKeyDown(e);

// e.keyCode == 83は「S」キー

// GameStatusがオープニングであれば万引き作戦開始、

// ゲームオーバー後一定時間経過後は再挑戦

// それ以外はなにもしない

if(e.keyCode == 83){

if(GameStatus == GAME_STATUS_OPENING){

GameStatus = GAME_STATUS_STEAL;

store.InitStore();

}

else if(GameStatus == GAME_STATUS_GAMEOVER && gameOver.EnableRestart){

GameStatus = GAME_STATUS_OPENING;

gameOver.EnableRestart = false;

gameOver.UpdateCount = 0;

store.InitGame();

}

// 万引き中はこれで警備員を動かす

setInterval(() => {

if(GameStatus == GAME_STATUS_STEAL)

store.Timer500ms();

}, 500);

// それ以外のときはこれで描画処理をおこなう

setInterval(() => {

if(GameStatus == GAME_STATUS_OPENING)

opening.Show();

else if(GameStatus == GAME_STATUS_CATCH)

store.Timer150ms();

else if(GameStatus == GAME_STATUS_CLEARED) {

stageClear.Show();

if(stageClear.End){

GameStatus = GAME_STATUS_OPENING;

stageClear.End = false;

}

else if(GameStatus == GAME_STATUS_GAMEOVER) {

gameOver.Show(store.Score);

}

}, 150);

</script>

</body>

</html>

次回からJavaScriptで万引き少年を動作させるために必要なクラスを作成します。

万引少年 JavaScriptでアスキーアートを使ったレトロなゲームをつくる(1)

いきなり挫折？

HTML部分

関連記事

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

コメントをどうぞ