ぷよぷよをつくる

ステージ

【HTML】index.html

<div id="stage">
        <div class="score">00000000</div>
<!--#stage--></div>

【JS】config.js

//ゲーム上で使う設定のパラメーターを定義
class Config {
  static puyoImageWidth = 40; //ぷよ画像の幅
  static puyoImageHeight = 40; //ぷよ画像の高

  static stageCols = 6; //ステージの横の個数
  static stageRows = 12; //ステージの盾の個数
  static stageBackgroundColor = '#11213b'; //ステージの背景色
}

【JS】game.js

// 起動された時に呼ばれる関数を登録する
window.addEventListener("load", () =>{
    initialize();
});

function initialize(){
    //ステージを準備する
    Stage.initialize();
}

【JS】stage.js

//ステージ
class Stage{
    static stageElement = null;
    
    static initialize(){
        Stage.stageElement = document.getElementById("stage");
        Stage.stageElement.style.width = Config.puyoImageWidth * Config.stageCols + 'px';
        Stage.stageElement.style.height = Config.puyoImageHeight * Config.stageRows + 'px';
        Stage.stageElement.style.backgroundColor = Config.stageBackgroundColor;
    }
}

用語集

static

初期設定 インスタンス化せず直せず利用する

ゲームプレイ画面サイズ

240px:480px|40px*6個 :40px*12個

イベント

「何かが起きたら反応する」しくみ。
ボタンを押したり、キャラクターがジャンプしたりする動きを作るときに使う

関数

「まとまった仕事をする命令のかたまり」のこと
「ジャンプする」「スコアを計算する」といった一連の動きを1つの生で呼べるようにする。関数を作るときは、functionというキーワードやアロー関数を使う

オブジェクト

「いくつかの情報や動きをまとめたもの」
キャラクターの名前や位置、動きなどをひとまとめにするときに使う

クラス

「オブジェクトを作るための設計図」のこと
ゲームキャラクターをたくさん作りたいときに、それぞれの特徴をクラスで決める

メソッド

「オブジェクトが持っている関数」
キャラクターの「動く」「ジャンプする」といった動きがメソッド

プロパティ

「オブジェクトが持っている情報」
キャラクターの「名前」「位置」「スピード」などが「プロパティ」だ

インスタンス

「クラスからつくられたオブジェクト」
「モンスター」クラスから作った一匹一匹のモンスターがインスタンスだ。

アロー関数

関数宣言

//アロー関数の宣言方法
window.addEventListener("load", () =>){
    initialize();
});