LoginSignup
1
2

ニコ生ゲーム制作に挑戦しよう! 上から降ってくるものを拾うゲーム【JavaScript】

Last updated at Posted at 2022-10-02

この記事のソースコードを改造して作ったゲーム

ニコ生ゲーム:シンプルな果物拾い(アツマール)

※筆者がTypeScript理解できないのとWindows10使用者なのでjavaScriptで解説します。
急に解説が雑になったりします。

もしよくわからない場合はここを見るといいかもです

Akashic Engine 逆引きリファレンス

前提知識
・新規フォルダを作成できる。(ctrl + shift + N)

今回はデスクトップにニコ生2022という名前の新規フォルダを作りました。
そのフォルダの中に「上から降ってくるものを拾うゲーム」という名前のフォルダを作りました。

コマンドプロンプト(以下cmd)でゲームフォルダに移動できる。

・コマンドプロンプトの出し方

    🔎ここに入力して検索 のところに コマンドプロンプトかcmdと入力して検索
    黒い画面が出てきたら
    cd C:\Users\ユーザー名\OneDrive\デスクトップ\ニコ生2022\上から降ってくるものを拾うゲ

    ※ユーザー名のところは自分でつけたPCの名前

みたいな感じに入力してエンターを押す。

C:\Users\ユーザー名\OneDrive\デスクトップ\ニコ生2022\上から降ってくるものを拾うゲーム>

・そのフォルダ内で

akashic init -t javascript-shin-ichiba-ranking

のコマンドを打ってテンプレートが作成できる。

必要なもの&便利なもの

・テキストエディタ(筆者が使用しているのはVisualStudioCode)

・FFmpeg

自前でoggファイルとaacファイルを用意できるならなくてもOK。
ただし、これがあると手間が省けて便利。

※Android,iOSで音声ファイルが揃ってないときに起動できない不具合があるので、
「そうならない為のファイルを作成するツール」を使用するために、必要なツール。

「そうならない為のファイルを作成するツール」=「complete-audio

・complete-audioの使い方

現在のフォルダから

cd audio

・実行例
キャプチャ.PNG
でaudioフォルダに移動する。

例えば test.mp3 を追加したとする。
その場合

complete-audio test.mp3

と打てば必要なoggファイル
とaacファイルが生成されます。

1個前に戻るときは cd.. と打ってエンター押せば戻れます。

全体のコード

main.js
    
    exports.main = void 0;
    function main(param) {
        var scene = new g.Scene({
            game: g.game,
            // このシーンで利用するアセットのIDを列挙し、シーンに通知します
            assetIds: ["player","se"]
        });
        var time = 60; // 制限時間
        if (param.sessionParameter.totalTimeLimit) {
            time = param.sessionParameter.totalTimeLimit; // セッションパラメータで制限時間が指定されたらその値を使用します
        }
        // 市場コンテンツのランキングモードでは、g.game.vars.gameState.score の値をスコアとして扱います
        g.game.vars.gameState = { score: 0 };
        scene.onLoad.add(function () {
            // ここからゲーム内容を記述します
            // 各アセットオブジェクトを取得します
            var playerImageAsset = scene.asset.getImageById("player");
            var seAudioAsset = scene.asset.getAudioById("se");
           
            //背景の作成
            let background = new g.FilledRect({
                scene: scene,
                cssColor: "skyblue",
                width: 1280,
                height: 720
            });
    
            scene.append(background);
    
            //地面の作成
    
            let jimen = new g.FilledRect({
                scene: scene,
                cssColor: "brown",
                width: 1280,
                height: 100,
                y: 650
    
            });
            scene.append(jimen);
    
            //playerの作成
            let player = new g.Sprite({
                scene: scene,
                src: playerImageAsset,
                x:g.game.width/2,
                y:600,
                touchable: true
            });
            scene.append(player);
    
            //player操作
            scene.onPointMoveCapture.add(function(ev) {
                player.x += ev.prevDelta.x;
                if(player.x > g.game.width-50 || player.x < 0){
    
                    player.x -= ev.prevDelta.x;
                    player.modified();
        
                 };
              });
    
    
            scene.setInterval(function() {
                //itemの作成
                let item = new g.FilledRect({
                    scene: scene,
                    cssColor: "black",
                    width: 50,
                    height: 50,
                    y: -50
                })
    
                scene.append(item);
    
    
                //色変更リスト
                let all_color = ["red","green","blue","purple",];
                let color_s = Math.floor(g.game.random.generate() * all_color.length);
                let random_x = Math.floor(g.game.random.generate() * 1230);
                
    
    
                item.onUpdate.add(function(){
    
                    item.csscolor = color_s;
    
                    switch (color_s){
                        case 0:
                          item.cssColor = "red";
                          break;
    
                        case 1:
                          item.cssColor = "green";
                          break;
    
                        case 2:
                          item.cssColor = "blue";
                          break;
    
                        case 3:
                          item.cssColor = "purple";
                          break;
    
                      }
                      
                    item.x = random_x;
                    scene.append(item);
                    item.y += 3;
                    let test_p = g.Collision.intersectAreas(item, player);
                    let test_i = g.Collision.intersectAreas(item, jimen);
                    if(test_p || test_i){
    
                        //地面に落ちた時の減点処理
                        if(test_i){
                            if(item.cssColor == "red" || "green" || "blue" || "purple" ){
                                g.game.vars.gameState.score -= 20;
                                scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                                scoreLabel.invalidate();
                                }
                            }
                        
                        //playerがitemを取得したときの加算処理
                        if(test_p){
                            if(item.cssColor == "red"){
                                g.game.vars.gameState.score += 100;
                                scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                                scoreLabel.invalidate();
                                seAudioAsset.play();
                            }
                            
                            if(item.cssColor == "green"){
                                g.game.vars.gameState.score += 200;
                                scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                                scoreLabel.invalidate();
                                seAudioAsset.play();
                            }
                            if(item.cssColor == "blue"){
                                g.game.vars.gameState.score += 300;
                                scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                                scoreLabel.invalidate();
                                seAudioAsset.play();
                            }
                            if(item.cssColor == "purple"){
                                g.game.vars.gameState.score += 400;
                                scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                                scoreLabel.invalidate();
                                seAudioAsset.play();
                            }
    
                        }
    
                        //itemの色が黒だったら加算
                        
    
                        item.destroy();
                        return;
                    }
                    
                    item.modified()
                });
    
    
    
            }, 1000);
    
    
            //敵生成 + 処理
    
            scene.setInterval(function() {
                
            let enemy_x = Math.floor(g.game.random.generate() * 1230);
    
            let enemy = new g.FilledRect({
                scene: scene,
                cssColor: "yellow",
                width: 150,
                height: 150,
                x: enemy_x,
                y: 0
            });
    
            scene.append(enemy);
            enemy.onUpdate.add(function(){
                enemy.y += 1;
                let enemy_p = g.Collision.intersectAreas(enemy, player);
                if(enemy_p){
                g.game.vars.gameState.score -= 1;
                scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                scoreLabel.invalidate();
                }
            });
    
            }, 5000);
    
            
           
           
            // フォントの生成
            var font = new g.DynamicFont({
                game: g.game,
                fontFamily: "sans-serif",
                size: 48
            });
            // スコア表示用のラベル
            var scoreLabel = new g.Label({
                scene: scene,
                text: "SCORE: 0",
                font: font,
                fontSize: font.size / 2,
                textColor: "black"
            });
            scene.append(scoreLabel);
            // 残り時間表示用ラベル
            var timeLabel = new g.Label({
                scene: scene,
                text: "TIME: 0",
                font: font,
                fontSize: font.size / 2,
                textColor: "black",
                x: 0.65 * g.game.width
            });
            scene.append(timeLabel);
    
            var updateHandler = function () {
                if (time <= 0) {
                    // ゲームアツマール環境であればランキングを表示します
                    if (param.isAtsumaru) {
                        var boardId_1 = 1;
                        window.RPGAtsumaru.experimental.scoreboards.setRecord(boardId_1, g.game.vars.gameState.score).then(function () {
                            window.RPGAtsumaru.experimental.scoreboards.display(boardId_1);
                        });
                    }
                    scene.onUpdate.remove(updateHandler); // カウントダウンを止めるためにこのイベントハンドラを削除します
                }
                // カウントダウン処理
                time -= 1 / g.game.fps;
                timeLabel.text = "TIME: " + Math.ceil(time);
                timeLabel.invalidate();
            };
            scene.onUpdate.add(updateHandler);
            // ここまでゲーム内容を記述します
        });
        g.game.pushScene(scene);
    }
    exports.main = main;

第1段階。 不要なコードを削る。

テンプレートを作成したらmain.jsをテキストエディタで開く。

main.js
    exports.main = void 0;
    function main(param) {
        var scene = new g.Scene({
            game: g.game,
            // このシーンで利用するアセットのIDを列挙し、シーンに通知します
            assetIds: ["se"]
        });
        var time = 60; // 制限時間
        if (param.sessionParameter.totalTimeLimit) {
            time = param.sessionParameter.totalTimeLimit; // セッションパラメータで制限時間が指定されたらその値を使用します
        }
        // 市場コンテンツのランキングモードでは、g.game.vars.gameState.score の値をスコアとして扱います
        g.game.vars.gameState = { score: 0 };
        scene.onLoad.add(function () {
            // ここからゲーム内容を記述します
            // 各アセットオブジェクトを取得します
            var seAudioAsset = scene.asset.getAudioById("se");

             //ここから処理を書いていく


             //ここまで処理を書いていく
           
           
            // フォントの生成
            var font = new g.DynamicFont({
                game: g.game,
                fontFamily: "sans-serif",
                size: 48
            });
            // スコア表示用のラベル
            var scoreLabel = new g.Label({
                scene: scene,
                text: "SCORE: 0",
                font: font,
                fontSize: font.size / 2,
                textColor: "black"
            });
            scene.append(scoreLabel);
            // 残り時間表示用ラベル
            var timeLabel = new g.Label({
                scene: scene,
                text: "TIME: 0",
                font: font,
                fontSize: font.size / 2,
                textColor: "black",
                x: 0.65 * g.game.width
            });
            scene.append(timeLabel);
            scene.onPointDownCapture.add(function () {
                // 制限時間以内であればタッチ1回ごとにSCOREに+1します
                if (time > 0) {
                    g.game.vars.gameState.score++;
                    scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                    scoreLabel.invalidate();
                }
            });
            var updateHandler = function () {
                if (time <= 0) {
                    // ゲームアツマール環境であればランキングを表示します
                    if (param.isAtsumaru) {
                        var boardId_1 = 1;
                        window.RPGAtsumaru.experimental.scoreboards.setRecord(boardId_1, g.game.vars.gameState.score).then(function () {
                            window.RPGAtsumaru.experimental.scoreboards.display(boardId_1);
                        });
                    }
                    scene.onUpdate.remove(updateHandler); // カウントダウンを止めるためにこのイベントハンドラを削除します
                }
                // カウントダウン処理
                time -= 1 / g.game.fps;
                timeLabel.text = "TIME: " + Math.ceil(time);
                timeLabel.invalidate();
            };
            scene.onUpdate.add(updateHandler);
            // ここまでゲーム内容を記述します
        });
        g.game.pushScene(scene);
    }
    exports.main = main;

これを全コピペで張り付けてOK。

var seAudioAsset = scene.asset.getAudioById("se");

を残しているのは後で使いまわす用。

     //ここから処理を書いていく


     //ここまで処理を書いていく

の間に新しい変数を追加したりしていきます。

現時点ではクリックしたらスコアが1増えて、60秒の制限時間があるはず。

第2段階 背景 + 地面 + プレイヤーを配置する。

  //背景の作成
    let background = new g.FilledRect({
        scene: scene,
        cssColor: "skyblue",
        width: 1280,
        height: 720
    });

簡単に説明すると背景の情報 g.game.vars.gameState.score++;
scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
scoreLabel.invalidate();
}
});
var updateHandler = function () {
if (time <= 0) {
// ゲームアツマール環境であればランキングを表示します
if (param.isAtsumaru) {
var boardId_1 = 1;
window.RPGAtsumaru.experimental.scoreboards.setRecord(boardId_1, g.game.vars.gameState.score).then(function () {
window.RPGAtsumaru.experimental.scoreboards.display(boardId_1);
});
}
scene.onUpdate.remove(updateHandler); // カウントダウンを止めるためにこのイベントハンドラを削除します
}
// カウントダウン処理
time -= 1 / g.game.fps;
timeLabel.text = "TIME: " + Math.ceil(time);
timeLabel.invalidate();
};
scene.onUpdate.add(updateHandler);
// ここまでゲーム内容を記述します
});
g.game.pushScene(scene);
}
exports.main = main;

これを全コピペで張り付けてOK。

var seAudioAsset = scene.asset.getAudioById("se");

を残しているのは後で使いまわす用。

     //ここから処理を書いていく


     //ここまで処理を書いていく

の間に新しい変数を追加したりしていきます。

現時点ではクリックしたらスコアが1増えて、60秒の制限時間があるはず。

第2段階 背景 + 地面 + プレイヤーを配置する。

  //背景の作成
    let background = new g.FilledRect({
        scene: scene,
        cssColor: "skyblue",
        width: 1280,
        height: 720
    });

簡単に説明すると背景の情報ですよ~って意味です。

let backgroundの backgroundは自分のわかりやすい名前でOK。

大丈夫な例: let haikei = ~
ダメな例:    let 背景   = ~

みたいな感じ。

ここでは背景の色を skyblue,
横の大きさ1280,縦の大きさ720に設定して画面全体を塗りつぶしています。
現在の画面の縦横サイズは g.game.widthやg.game.heightでも取得できます。

縦サイズ

g.game.height

横サイズ

g.game.width

こんな感じです。

    scene.append(background);

これはゲームに表示させる処理です。
これを書くことで、背景が塗りつぶされます。

    //地面の作成
    let jimen = new g.FilledRect({
        scene: scene,
        cssColor: "brown",
        width: 1280,
        height: 100,
        y: 650
    });
    scene.append(jimen);

配置するときのxy座標を決めることができて、
これは地面のサイズを縦100,横1280で生成して、
y座標の650の位置に配置してね、という意味です。

AkashicEngineの原点は左上になるのでそこからの計算です。

    //playerの作成
    let player = new g.Sprite({
        scene: scene,
        src: playerImageAsset,
        x:g.game.width/2,
        y:600,
        touchable: true
    });
    scene.append(player);

プレイヤーはデフォルトで入っている画像を使ってみました。
imageフォルダに自分の描いた絵などを入れれば、その画像を使うこともできます。
詳しくは→AkashiEngineでの画像の扱い方

touchableというのはこのプレイヤーがクリック、
またはドラッグやスワイプされたときの処理をかけるようにするものです。
trueが有効状態、falseが無効状態

例:クリックされたら消える、ドラッグやスワイプされたら任意の方向に動かす、など。

第3段階 プレイヤーを動かせるようにする。

//player操作
    scene.onPointMoveCapture.add(function(ev) {
        player.x += ev.prevDelta.x;
        if(player.x > g.game.width-50 || player.x < 0){
            player.x -= ev.prevDelta.x;
            player.modified();
         };
      });

この

if(player.x > g.game.width-50 || player.x < 0)

で書かれている条件文はプレイヤーが画面外に出ないようにする処理です。
もっと上手な書き方があるかもしれません。

第4段階 上から降ってくる物体を作ろう

 scene.setInterval(function() {
        //itemの作成
        let item = new g.FilledRect({
            scene: scene,
            cssColor: "black",
            width: 50,
            height: 50,
            y: -50
        })
        scene.append(item);

        //色変更リスト
        let all_color = ["red","green","blue","purple",];
        let color_s = Math.floor(g.game.random.generate() * all_color.length);
        let random_x = Math.floor(g.game.random.generate() * 1230);
        
        item.onUpdate.add(function(){
            item.csscolor = color_s;
            switch (color_s){
                case 0:
                  item.cssColor = "red";
                  break;

                case 1:
                  item.cssColor = "green";
                  break;

                case 2:
                  item.cssColor = "blue";
                  break;

                case 3:
                  item.cssColor = "purple";
                  break;

              }
              
            item.x = random_x;
            scene.append(item);
            item.y += 3;
            let test_p = g.Collision.intersectAreas(item, player);
            let test_i = g.Collision.intersectAreas(item, jimen);
            if(test_p || test_i){

                //地面に落ちた時の減点処理
                if(test_i){
                    if(item.cssColor == "red" || "green" || "blue" || "purple" ){
                        g.game.vars.gameState.score -= 20;
                        scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                        scoreLabel.invalidate();
                        }
                    }
                
                //playerがitemを取得したときの加算処理
                if(test_p){
                    if(item.cssColor == "red"){
                        g.game.vars.gameState.score += 100;
                        scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                        scoreLabel.invalidate();
                        seAudioAsset.play();
                    }
                    
                    if(item.cssColor == "green"){
                        g.game.vars.gameState.score += 200;
                        scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                        scoreLabel.invalidate();
                        seAudioAsset.play();
                    }
                    if(item.cssColor == "blue"){
                        g.game.vars.gameState.score += 300;
                        scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                        scoreLabel.invalidate();
                        seAudioAsset.play();
                    }
                    if(item.cssColor == "purple"){
                        g.game.vars.gameState.score += 400;
                        scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                        scoreLabel.invalidate();
                        seAudioAsset.play();
                    }
                }
                item.destroy();
                return;
            }
            item.modified()
        });
    }, 1000);

1番上の

scene.setInterval(function() {

 }, 1000);

で囲むことによって1秒毎にこの処理を起こすという書き方になります。

500   → 0.5秒
1000   → 1秒
10000  → 10秒

なので

scene.setInterval(function() {

の下に書いていきます。

 //itemの作成
    let item = new g.FilledRect({
        scene: scene,
        cssColor: "black",
        width: 50,
        height: 50,
        y: -50
    })
    scene.append(item);

これは降ってくる物体の情報です。
画面外から降ってくる演出にしたいので、y座標を-50しています。

  //色変更リスト
    let all_color = ["red","green","blue","purple",];

赤、緑、青、紫が入っている箱です。

    let color_s = Math.floor(g.game.random.generate() * all_color.length);

たくさんの色が入った箱からランダムで1つを取り出します。
0が取り出された場合、"red"が取り出されています。

    let random_x = Math.floor(g.game.random.generate() * 1230);

x座標 0~1230 の間でランダムな数値を取り出します。

        item.onUpdate.add(function(){
            item.csscolor = color_s;
                switch (color_s){
                    case 0:
                      item.cssColor = "red";
                      break;

                    case 1:
                      item.cssColor = "green";
                      break;

                    case 2:
                      item.cssColor = "blue";
                      break;

                    case 3:
                      item.cssColor = "purple";
                      break;

                  }

item.cssColor = color_s;
で物体の色を決められた箱の中からランダムで選んで決定します。

ここでのcase 0:というのは
0が取り出されたら赤色にしてね、という意味です。

            item.x = random_x;
            scene.append(item);

x座標を範囲内でランダムに選ばれたx座標にして反映させます。

            item.y += 3;

1000で設定しているので1秒毎に物体がyの下方向に3ずつずれる処理です。

第6段階 当たり判定をつくろう

            //アイテムとプレイヤーがぶつかった場合
            let test_p = g.Collision.intersectAreas(item, player);
            //アイテムと地面がぶつかった場合
            let test_i = g.Collision.intersectAreas(item, jimen);
                

            //アイテムがプレイヤーとぶつかる、もしくは地面に落ちた場合
            if(test_p || test_i){

                //地面に落ちた時の減点処理
                if(test_i){
                //地面に落ちたら-20点
                        g.game.vars.gameState.score -= 20;
                        scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                        scoreLabel.invalidate();
                        }
                    }
                
                //playerがitemを取得したときの加算処理
                if(test_p){
                   //赤色なら+100
                    if(item.cssColor == "red"){
                        g.game.vars.gameState.score += 100;
                        scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                        scoreLabel.invalidate();
                        seAudioAsset.play();
                    }
                    //緑色なら+200
                    if(item.cssColor == "green"){
                        g.game.vars.gameState.score += 200;
                        scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                        scoreLabel.invalidate();
                        seAudioAsset.play();
                    }
                    //青色なら+300
                    if(item.cssColor == "blue"){
                        g.game.vars.gameState.score += 300;
                        scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                        scoreLabel.invalidate();
                        seAudioAsset.play();
                    }
                    if(item.cssColor == "purple"){
                    //紫色なら+400
                        g.game.vars.gameState.score += 400;
                        scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                        scoreLabel.invalidate();
                        seAudioAsset.play();
                    }
                }

                //地面もしくはプレイヤーにぶつかったら物体が消える
                item.destroy();
                return;
            }
            //ここまでの処理を反映させる
            item.modified()
        });

seAudioAsset.play();はプレイヤーと物体が衝突したときにSEを鳴らす処理です。

第7段階 敵を生成してぶつかると減点させる処理

 scene.setInterval(function() {
            
        let enemy_x = Math.floor(g.game.random.generate() * 1230);

        let enemy = new g.FilledRect({
            scene: scene,
            cssColor: "yellow",
            width: 150,
            height: 150,
            x: enemy_x,
            y: 0
        });
        scene.append(enemy);

敵は大きめに設定しています。

        enemy.onUpdate.add(function(){
            enemy.y += 1;

            //敵とプレイヤーがぶつかってる間の処理
            let enemy_p = g.Collision.intersectAreas(enemy, player);
            if(enemy_p){
            g.game.vars.gameState.score -= 1;
            scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
            scoreLabel.invalidate();
            }
        });

        }, 5000);

5秒ごとに敵が生成され、ぶつかっている間スコアが-1されます。

完成したコード

exports.main = void 0;
function main(param) {
    var scene = new g.Scene({
        game: g.game,
        // このシーンで利用するアセットのIDを列挙し、シーンに通知します
        assetIds: ["player","se"]
    });
    var time = 60; // 制限時間
    if (param.sessionParameter.totalTimeLimit) {
        time = param.sessionParameter.totalTimeLimit; // セッションパラメータで制限時間が指定されたらその値を使用します
    }
    // 市場コンテンツのランキングモードでは、g.game.vars.gameState.score の値をスコアとして扱います
    g.game.vars.gameState = { score: 0 };
    scene.onLoad.add(function () {
        // ここからゲーム内容を記述します
        // 各アセットオブジェクトを取得します
        var playerImageAsset = scene.asset.getImageById("player");
        var seAudioAsset = scene.asset.getAudioById("se");

        //背景の作成
        let background = new g.FilledRect({
            scene: scene,
            cssColor: "skyblue",
            width: 1280,
            height: 720
        });    
        scene.append(background);

        //地面の作成    
        let jimen = new g.FilledRect({
            scene: scene,
            cssColor: "brown",
            width: 1280,
            height: 100,
            y: 650    
        });
        scene.append(jimen);

        //playerの作成
        let player = new g.Sprite({
            scene: scene,
            src: playerImageAsset,
            x:g.game.width/2,
            y:600,
            touchable: true
        });
        scene.append(player);

        //player操作
        scene.onPointMoveCapture.add(function(ev) {
            player.x += ev.prevDelta.x;
            if(player.x > g.game.width-50 || player.x < 0){    
                player.x -= ev.prevDelta.x;
                player.modified();       
             };
          });


        scene.setInterval(function() {
            //itemの作成
            let item = new g.FilledRect({
                scene: scene,
                cssColor: "black",
                width: 50,
                height: 50,
                y: -50
            });
            scene.append(item);

            //色変更リスト
            let all_color = ["red","green","blue","purple",];
            let color_s = Math.floor(g.game.random.generate() * all_color.length);
            let random_x = Math.floor(g.game.random.generate() * 1230);

            item.onUpdate.add(function(){    
                item.csscolor = color_s;  
                switch (color_s){
                    case 0:
                      item.cssColor = "red";
                      break;   
                    case 1:
                      item.cssColor = "green";
                      break;    
                    case 2:
                      item.cssColor = "blue";
                      break;   
                    case 3:
                      item.cssColor = "purple";
                      break;    
                  }
                  
                item.x = random_x;
                scene.append(item);
                item.y += 3;
                let test_p = g.Collision.intersectAreas(item, player);
                let test_i = g.Collision.intersectAreas(item, jimen);
                if(test_p || test_i){

                    //地面に落ちた時の減点処理
                    if(test_i){
                            g.game.vars.gameState.score -= 20;
                            scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                            scoreLabel.invalidate();
                        }
                    
                    //playerがitemを取得したときの加算処理
                    if(test_p){
                        if(item.cssColor == "red"){
                            g.game.vars.gameState.score += 100;
                            scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                            scoreLabel.invalidate();
                            seAudioAsset.play();
                        }
                        
                        if(item.cssColor == "green"){
                            g.game.vars.gameState.score += 200;
                            scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                            scoreLabel.invalidate();
                            seAudioAsset.play();
                        }
                        if(item.cssColor == "blue"){
                            g.game.vars.gameState.score += 300;
                            scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                            scoreLabel.invalidate();
                            seAudioAsset.play();
                        }
                        if(item.cssColor == "purple"){
                            g.game.vars.gameState.score += 400;
                            scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
                            scoreLabel.invalidate();
                            seAudioAsset.play();
                        }    
                    }

                    //itemの色が黒だったら加算                            
                    item.destroy();
                    return;
                }                   
                item.modified()
            });
        }, 1000);

        //敵生成 + 処理
        scene.setInterval(function() {             
        let enemy_x = Math.floor(g.game.random.generate() * 1230);    
        let enemy = new g.FilledRect({
            scene: scene,
            cssColor: "yellow",
            width: 150,
            height: 150,
            x: enemy_x,
            y: 0
        });

        scene.append(enemy);
        enemy.onUpdate.add(function(){
            enemy.y += 1;
            let enemy_p = g.Collision.intersectAreas(enemy, player);
            if(enemy_p){
            g.game.vars.gameState.score -= 1;
            scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
            scoreLabel.invalidate();
            }
         });
        }, 5000);

        // フォントの生成
        var font = new g.DynamicFont({
            game: g.game,
            fontFamily: "sans-serif",
            size: 48
        });
        // スコア表示用のラベル
        var scoreLabel = new g.Label({
            scene: scene,
            text: "SCORE: 0",
            font: font,
            fontSize: font.size / 2,
            textColor: "black"
        });
        scene.append(scoreLabel);
        // 残り時間表示用ラベル
        var timeLabel = new g.Label({
            scene: scene,
            text: "TIME: 0",
            font: font,
            fontSize: font.size / 2,
            textColor: "black",
            x: 0.65 * g.game.width
        });
        scene.append(timeLabel);    
     
        var updateHandler = function () {
            if (time <= 0) {
                // ゲームアツマール環境であればランキングを表示します
                if (param.isAtsumaru) {
                    var boardId_1 = 1;
                    window.RPGAtsumaru.experimental.scoreboards.setRecord(boardId_1, g.game.vars.gameState.score).then(function () {
                        window.RPGAtsumaru.experimental.scoreboards.display(boardId_1);
                    });
                }
                scene.onUpdate.remove(updateHandler); // カウントダウンを止めるためにこのイベントハンドラを削除します
            }
            // カウントダウン処理
            time -= 1 / g.game.fps;
            timeLabel.text = "TIME: " + Math.ceil(time);
            timeLabel.invalidate();
        };
        scene.onUpdate.add(updateHandler);
        // ここまでゲーム内容を記述します
    });
    g.game.pushScene(scene);
}
exports.main = main;

たぶんこれ全コピペで動くと思うので、自由に改造して使ってください!

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2