コードオブジーニアスでは、「プログラミングを通して、アイデアをカタチにする」をテーマにプログラミング学習を進めています。

プログラミングを知っているだけではなく、プログラミングを使って何かを創り出せるような人になることを目指して日々プログラミング学習に励んでいます。

各プログラミング言語を学習したタイミングで、それぞれオリジナル作品を作ることにチャレンジしています。

ここでは、生徒が実際に作ったオリジナル作品を紹介していきます。

作品紹介

今回紹介する作品は、以下のようなゲームです。

実際の作品はこちら。

さらに作品について掘り下げて見ていきたいと思います。
このゲーム、どんなプログラムの工夫がされているのでしょうか？
ここからは、プログラムで工夫されているところについて紹介したいと思います。

プログラムの工夫

カードをめくるアニメーション

カードをめくるアニメーションがあります。
このアニメーションはプラグインを使って実現しています。プラグインは、他の人が作ったプログラムを利用することで、簡単なプログラムで複雑な動きを実現することができます。
簡単そうに見える動きも、プログラムで作ろうとしたら意外と難しいんですね。

  
// カードをめくる動きを設定
var setCard = function (scene, x, y, frontFace, backFace) {
    return scene.add.rexPerspectiveCard(x, y, {
        front: { key: frontFace },
        back : { key: backFace },
        face : 'back',

        flip: {
            frontToBack: 'right',
            backToFront: 'left',
            duration   : 1000,
            ease       : 'Cubic'
        }
    })
        .setScale(0.14)
        .setInteractive()
        .on('pointerdown', function (pointer, localX, localY) {
            if (localX <= (this.width / 2)) {
                this.flip.flipLeft();
            } else {
                this.flip.flipRight();
            }
        });
};

// ~~~~~~~~~~~~~~~~ 省略 ~~~~~~~~~~~~~~~~

        var create = function(selectNumber, studentNumber){
            //カードの作成
            //ここで、上記メソッドを呼び出し、カードをめくる動きを設定
            var card = setCard(lotteryScene, x, y, 'card' + numbers[j].number, 'card_ura');

            // カードのフリップが完了（complete）した時点で実行する
            card.flip.on('complete', function(){
                lotteryScene.scene.start('classroomScene', {
                    selectNumber  : selectNumber,
                    studentNumber : studentNumber,
                    firstSelect   : data.firstSelect
                });
            });
        };
        create(numbers[j].number, data.NUMBER);

  

机の配置

机を整列して並べます。

繰り返し処理と、剰余計算を行うことで、X座標、Y座標を揃えて表示させています。

  
    for(var i = 0; i < 36; i++){
        var a      = (i + 1);

        // 6個毎にX座標をずらす
        var row    = parseInt(i / 6);

        // X座標の初期値は100。ずらす毎に120ずつ増やす。
        var x      = 100 + row * 120;
        var y      = 0;

        // aを6で割った時のあまりの数によって、Y座標を変える。これで6個毎にY座標を揃えることができる
        if(a % 6 == 1){
            y = 85;
        }
        if(a % 6 == 2){
            y = 175;
        }
        if(a % 6 == 3){
            y = 270;
        }
        if(a % 6 == 4){
            y = 365;
        }
        if(a % 6 == 5){
            y = 460;
        }
        if(a % 6 == 0){
            y = 550;
        }

        //机の表示
        this.deskImage = this.add.image(x, y, 'desk2');
        this.deskImage.setDisplaySize(108, 72);
    }
  

ランダムに数字を配置

カードをめくった時にランダムな数字が出るように設定しています。

考え方としては、最初にすべての数をランダムにカードに配置する方法と、毎回カードをめくるたびにランダムな数を抽出する方法があります。
今回は、前者の最初にすべての数をランダムにカードに配置する方法でプログラムを作ってくれました。

  
        var numbers = [];

        // 合計36回処理を繰り返す
        for(var i = 0; i < 36; i++){
            while(true){
                // ランダムな数字を作成
                var randomnumber = Math.floor(Math.random() * 36) + 1;

                // 作成したランダムな数字がnumbersの配列の中にあるかを調べる
                var isRandomNumberToNumbersArray = numbers.some((obj) => obj.number == randomnumber);

                // 作成したランダムな数字がnumbersの配列の中になければ、ランダムな数字をnumbersに追加し、whileの繰り返し処理を停止する
                if(!isRandomNumberToNumbersArray){
                    numbers.push({id:i,number:randomnumber});
                    break;
                }
            }
        }
        this.numbers = numbers;

  

このプログラムで、カードに割り当てるランダムな数字が作成できました。

レッスンの中で学習したものを応用したり、新しいものを使ったりと自分で考えながらプログラムを作ってくれました。
試行錯誤することで、少しずつ基礎が身についてきているようでした。

気になる方は、以下から定期受講コースの詳細をご確認ください。

定期受講コースのページ

• 前の記事へ
• 一覧へ戻る
• 次の記事へ