ぷよぷよをつくる

ぷよを表示する

【HTML】index.html

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

    <div style="display:none">
        <img src="img/puyo_1.png" id="puyo_1" alt="">
        <img src="img/puyo_2.png" id="puyo_2" alt="">
        <img src="img/puyo_3.png" id="puyo_3" alt="">
        <img src="img/puyo_4.png" id="puyo_4" alt="">
        <img src="img/puyo_5.png" id="puyo_5" alt="">
    </div>

【JS】config.js

class Config {
  static puyoImageWidth = 40; //ぷよ画像の幅
  static puyoImageHeight = 40; //ぷよ画像の高

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

    //初期状態のステージ
    static initialBoard = [
        [0,1,2,3,4,5],
        [1,2,3,4,5,0],
        [2,3,4,5,0,1],
        [0,0,0,0,0,0],
        [0,1,1,1,2,0],
        [0,4,5,5,2,0],
        [0,4,5,5,2,0],
        [0,4,3,3,3,0],
        [0,0,0,0,0,0],
        [1,1,0,0,2,2],
        [0,0,2,2,0,0],
        [4,4,0,0,5,5],
    ];

    static puyoColorMax = 5; //何色のぷよを使うか
}

【JS】game.js

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

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

【JS】stage.js

//ステージ
class Stage {
  static stageElement = null;
  static puyoBoard = null;
  static puyoCount = 0;

  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;

    //ぷよぷよ盤を初期化する
    Stage.puyoCount = 0;
    Stage.puyoBoard = [];
    for (let y = 0; y < Config.stageRows; y++) {
      Stage.puyoBoard[y] = [];
      for (let x = 0; x < Config.stageCols; x++) {
        Stage.puyoBoard[y][x] = null;
      }
    } /* for(let y = 0; y < Config.stageRows; y++)*/

    /*もし初期状態のステージの情報があれば、その情報を元にぷよを配置する*/
    for (let y = 0; y < Config.stageRows; y++) {
      for (let x = 0; x < Config.stageCols; x++) {
        let puyoColor = 0;
        if (Config.initialBoard && Config.initialBoard[y][x]) {
          puyoColor = Config.initialBoard[y][x];
        }
        if (puyoColor >= 1 && puyoColor <= Config.puyoColorMax) {
          Stage.createPuyo(x, y, puyoColor);
        }
      } //for(let x
    } //for(let y
  } //static initialize

  //ぷよを新しく作って、画面上とぷよぷよ盤の両方にセットする
  static createPuyo(x, y, puyoColor) {
    //画像を作成し、画面上の適切な位置に配置する
    const puyoImage = GameImage.getPuyoImage(puyoColor);
    puyoImage.style.left = x * Config.puyoImageWidth + "px";
    puyoImage.style.top = y * Config.puyoImageHeight + "px";
    Stage.stageElement.appendChild(puyoImage);

    //ぷよぷよ盤に情報を保存する
    Stage.puyoBoard[y][x] = {
      puyoColor: puyoColor,
      element: puyoImage
    }
    //ぷよの総数を追加する
    Stage.puyoCount++;
  }/*createPuyo*/
}/*class Stage*/

【JS】image.js

// ぷよ画像を管理&複製する
class GameImage{
    static puyoImageList = null;

    static initialize(){
        //ぷよ画像を準備する
        GameImage.puyoImageList = [];
        for(let i=0; i<Config.puyoColorMax; i++){
            const image = document.getElementById("puyo_" + (i+1));
            image.removeAttribute('id');
            image.width = Config.puyoImageWidth;
            image.height = Config.puyoImageHeight;
            image.style.position = "absolute";
            GameImage.puyoImageList[i] = image;
        }
    }

    //ぷよ画像を複製して返す
    static getPuyoImage(color){
        const image = GameImage.puyoImageList[color -1].cloneNode(true);
        return image;
    }
}

用語集