さて、ぷよぷよを改造してみようかね。
とりあえず、ぷよの色を増やそう。
現状では4色。
これを10色に増やそう。
以下コード。
<!-- index.htmlより -->
<body style="margin:0;">
<!-- <div id="stage" style="position:absolute; left: 0; top: 0; overflow: hidden;"></div> -->
<!-- <div id="stage" style="position:relative; margin: 0 auto; overflow: hidden;background: url(img/puyo_4bg.png)"></div> -->
<div id="stage" style="position:relative; margin: 0 auto; overflow: hidden;"></div>
<!-- <div id="score" style="position:absolute; left: 0; top: 0; overflow: hidden; text-align: right;"></div> -->
<div id="score" style="margin: 0 auto; overflow: hidden; text-align: right;"></div>
<div style="display:none">
<!-- ここで、ぷよの画像をセットする -->
<!-- 通常はpuyo_4まで。それをpuyo_10まで増やす -->
<img src="img/puyo_1.png" id="puyo_1">
<img src="img/puyo_2.png" id="puyo_2">
<img src="img/puyo_3.png" id="puyo_3">
<img src="img/puyo_4.png" id="puyo_4">
<img src="img/puyo_5.png" id="puyo_5">
<img src="img/puyo_6.png" id="puyo_6">
<img src="img/puyo_7.png" id="puyo_7">
<img src="img/puyo_8.png" id="puyo_8">
<img src="img/puyo_9.png" id="puyo_9">
<img src="img/puyo_10.png" id="puyo_10">
<img src="img/batankyu.png" id="batankyu">
<img src="img/zenkeshi.png" id="zenkeshi">
<img src="img/0.png" id="font0">
<img src="img/1.png" id="font1">
<img src="img/2.png" id="font2">
<img src="img/3.png" id="font3">
<img src="img/4.png" id="font4">
<img src="img/5.png" id="font5">
<img src="img/6.png" id="font6">
<img src="img/7.png" id="font7">
<img src="img/8.png" id="font8">
<img src="img/9.png" id="font9">
</div>
</body>//puyoimage.jsより
static initialize() {
this.puyoImages = [];
//ぷよの個数分ループさせる
//ここでぷよのidを取得
for(let i = 0; i < 10; i++) {
const image = document.getElementById(`puyo_${i + 1}`);
image.removeAttribute('id');
image.width = Config.puyoImgWidth;
image.height = Config.puyoImgHeight;
image.style.position = 'absolute';
this.puyoImages[i] = image;
}
this.batankyuImage = document.getElementById('batankyu');
this.batankyuImage.width = Config.puyoImgWidth * 6;
this.batankyuImage.style.position = 'absolute';
}//player.jsより
//ぷよ設置確認
static createNewPuyo () {
// ぷよぷよが置けるかどうか、1番上の段の左から3つ目を確認する
if(Stage.board[0][2]) {
// 空白でない場合は新しいぷよを置けない
return false;
}
// 新しいぷよの色を決める
// Math.minの引数を4から10に変更。ここを変更しないと、選ばれず。
const puyoColors = Math.max(1, Math.min(10, Config.puyoColors));
this.centerPuyo = Math.floor(Math.random() * puyoColors) + 1;
this.movablePuyo = Math.floor(Math.random() * puyoColors) + 1;
// 新しいぷよ画像を作成する
this.centerPuyoElement = PuyoImage.getPuyo(this.centerPuyo);
this.movablePuyoElement = PuyoImage.getPuyo(this.movablePuyo);
Stage.stageElement.appendChild(this.centerPuyoElement);
Stage.stageElement.appendChild(this.movablePuyoElement);
// ぷよの初期配置を定める
this.puyoStatus = {
x: 2, // 中心ぷよの位置: 左から2列目
y: -1, // 画面上部ギリギリから出てくる
left: 2 * Config.puyoImgWidth,
top: -1 * Config.puyoImgHeight,
dx: 0, // 動くぷよの相対位置: 動くぷよは上方向にある
dy: -1,
rotation: 90 // 動くぷよの角度は90度（上向き）
};
// 接地時間はゼロ
this.groundFrame = 0;
// ぷよを描画
this.setPuyoPosition();
return true;
}//config.jsより
// 何色のぷよを使うか
//Config.puyoColors = 4;
Config.puyoColors = 10;結果がこれ。
ぷよぷよ
akasairoha.sakura.ne.jp
10個に増えているね。
もう少しややこしい事になるかと思ったけど、大したことなかった。
