PARTS

パーツカタログ

ハレアメ・コードラボ | ハレアメ・ブロックくずし 改造用
すきな パーツを えらんで、コードの 中の「★で囲まれた パーツ置き場」に はりつけよう。 はりつけたら かならず じっこう ボタン。1つずつ ためすのが コツ。

Four slotsまず、4つの 置き場を おぼえる

コードの中では、それぞれの置き場が ★の線で囲まれた 4行 になっている。 その中の「↓↓↓ この下に コピー&ペースト ↓↓↓」の すぐ下に はりつける。 「ここまで」と 書いてある 線より 下には はみ出さないこと。
プログラムは この 4しゅるいの しごとで できている。 どの パーツも「データ」「まいかいの しごと」「かく しごと」「おきたときの しごと」の どこかに 入る。

Parts with codeパーツ(コードつき)

パーツ 1 スコアを 大きく する ★☆☆ 置き場 C

こわした数が 画面に 大きく 出る。まずは これで 貼りつけの れんしゅう。

▼ 置き場C の「↓↓↓ この下に コピー&ペースト ↓↓↓」の 下に はりつける

// スコアを 大きく 出す
pen.fillStyle = "#FF1D8E";
pen.font = "bold 64px sans-serif";
pen.fillText(score, 20, 110);
パーツ 2 音を つける ★★☆ 置き場 A + D

ブロックを こわした しゅんかんに「ピッ」と 鳴る。置き場Aで 音の どうぐを 用意して、置き場Dで ならす。660 が 音の 高さ、g.gain.value(0.08)が 音の 大きさ。

▼ 置き場A の「↓↓↓ この下に コピー&ペースト ↓↓↓」の 下に はりつける

// 音を つくる どうぐ 一式
let oto = new AudioContext();
function beep(hz) {
  oto.resume();
  let o = oto.createOscillator();
  let g = oto.createGain();
  o.frequency.value = hz;
  g.gain.value = 0.08;
  o.connect(g);
  g.connect(oto.destination);
  o.start();
  o.stop(oto.currentTime + 0.08);
}

▼ 置き場D の「↓↓↓ この下に コピー&ペースト ↓↓↓」の 下に はりつける

// こわした 音
beep(660);
パーツ 3 ミスは 3回まで ★★☆ 置き場 B + C

いまは 何回 おとしても つづく。3回で ゲームオーバーに して、のこりの 回数を 画面に 出す。3 を 変えれば 回数も 変わる(2か所とも)。

▼ 置き場B の「↓↓↓ この下に コピー&ペースト ↓↓↓」の 下に はりつける

// ミスが 3回に なったら おわり
if (miss >= 3) {
  gameover = true;
}

▼ 置き場C の「↓↓↓ この下に コピー&ペースト ↓↓↓」の 下に はりつける

// のこりの 回数を 出す
pen.fillStyle = "#FFFFFF";
pen.font = "20px sans-serif";
pen.fillText("のこり " + (3 - miss), 210, 26);
パーツ 4 こわすたび はやく なる ★★☆ 置き場 D

こわす たびに ボールが 7% はやく なる。1.07 を 1.2 に すると かなり きびしい。1 より 小さく すると…ためして みよう。

▼ 置き場D の「↓↓↓ この下に コピー&ペースト ↓↓↓」の 下に はりつける

// ボールを 7% はやく する
ballDX = ballDX * 1.07;
ballDY = ballDY * 1.07;
パーツ 5 じぶんの なまえを 出す ★☆☆ 置き場 A + C

画面の 下に つくった人の 名まえが 出る。コードの 上の ほうで 名まえの 箱を 作り、かく しごとで 出す。

▼ 置き場A の「↓↓↓ この下に コピー&ペースト ↓↓↓」の 下に はりつける

// じぶんの なまえ
let myName = "はれあめ たろう";

▼ 置き場C の「↓↓↓ この下に コピー&ペースト ↓↓↓」の 下に はりつける

// なまえを 画面に 出す
pen.fillStyle = "#8A8A93";
pen.font = "14px sans-serif";
pen.fillText(myName, 20, 368);
パーツ 6 ざんぞう(しっぽ)を つける ★★☆ 置き場 設定

ボールと パドルに しっぽが 生える。変えるのは 1か所だけ。0.25 は「25%だけ ぬる」という いみ。ぜんぶ ぬりつぶさないから、前の コマが うすく のこる。

▼ コードの 上の ほうに ある let bgColor = ... の 行を、これに 書きかえる

let bgColor = "rgba(18, 18, 26, 0.25)";

Extra missionsおかわりミッション(コードは 自分で 考える)

ぜんぶ できてしまった人へ。ここから先は コピーボタンが ない。 ヒントは 3だんかい。上から じゅんに 開けて、できるだけ 自分の 力で。
どうしても だめなら「ギブアップ」。こたえは 出るけど コピーは できない。 見ながら 自分で うちこもう。それも りっぱな 練習。できたら 先生に 見せて。

ミッション 7 いちばん上の だんを かたい ブロックに する コードは なし

いちばん上の だんだけ、2回 あてないと こわれない ブロックに する。

ヒント1 かんがえかた
かたさは 目に 見えない。だから ブロック 1つ 1つに「あと 何回で こわれるか」の メモ(hp)を もたせる。
ヒント2 さわる ばしょ
さわる 場所は 2つ。ブロックを つくる for の 中=うまれる ときに hp を きめる。checkBricks() の あたった ところ=hp を 1 へらして、0 に なったら こわす。
ヒント3 ほぼ せっけいず
① bricks.push に hp を たす。dan が 0(いちばん上)なら 2、それ以外は 1。② あたったら hp を 1 ひいて ballDY を ぎゃくに。まだ 0 より 大きければ rest に のこして continue。0 に なったら score を たして こわす。

ANSWER / うちこみ せんよう

この こたえは えらべない し、コピーも できない。1行ずつ 見て、自分で うちこむ。

① ブロックを つくる ところの bricks.push(...) の 1行を、これに 書きかえる

let hp = 1;
if (dan === 0) {
  hp = 2;                   // いちばん上の だんは かたい
}
bricks.push({ x: retsu * 60 + 4, y: dan * 24 + 40, hp: hp });

② checkBricks() の あたった ところ(score と ballDY の 2行)を、これに 書きかえる

bricks[i].hp = bricks[i].hp - 1;
ballDY = -ballDY;         // ボールは はねかえる
if (bricks[i].hp > 0) {
  rest.push(bricks[i]);   // まだ かたい。のこす
  continue;
}
score = score + 1;        // こわした!
ミッション 8 30びょう タイムアタック コードは なし

30びょう いないに どこまで こわせるか。時間が きたら おわり。のこり時間も 出せると かっこいい。

ヒント1 かんがえかた
time は 1びょうで 60 ふえる 数とり器。30びょうは 60 × 30 で いくつ? こえたら gameover を true に。
ヒント2 さわる ばしょ
書く 場所は 置き場B(まいかい しらべるから)。if (time > その数) { gameover = true; } の かたち。
ヒント3 ほぼ せっけいず
おまけ:のこり びょうは (1800 - time) ÷ 60 を Math.ceil( ) で 切り上げ。0 より 小さく なったら 0 に とめて、置き場Cで fillText。

ANSWER / うちこみ せんよう

この こたえは えらべない し、コピーも できない。1行ずつ 見て、自分で うちこむ。

① 置き場Bに はりつける

if (time > 1800) {
  gameover = true;
}

② おまけ(のこり時間)。置き場Cに はりつける

let nokori = Math.ceil((1800 - time) / 60);
if (nokori < 0) {
  nokori = 0;
}
pen.fillStyle = "#FFFFFF";
pen.font = "20px sans-serif";
pen.fillText("のこり " + nokori, 200, 50);
ミッション 9 パドルの はしで ななめに とばす コードは なし

いまは どこに あたっても 同じ はねかえり。はしに あてたら ななめに、まんなかなら まっすぐ 上に とぶように する。ほんものの ブロックくずしの うごき。

ヒント1 かんがえかた
「どこに あたったか」は、ボールの ballX と パドルの まんなかの 差で わかる。差が 大きい=はしっこ。その差を ballDX に すれば、はしほど ななめに とぶ。
ヒント2 さわる ばしょ
さわる 場所は moveBall() の パドルに あたった ところ。ballDY = -ballDY の 下に 書きたす。
ヒント3 ほぼ せっけいず
① パドルの まんなか = paddleX + paddleWidth ÷ 2。② ballDX = (ballX − まんなか) ÷ 8。8 で わるのは そのままだと とびすぎる から。数を 変えると はねかたの くせが 変わる。

ANSWER / うちこみ せんよう

この こたえは えらべない し、コピーも できない。1行ずつ 見て、自分で うちこむ。

moveBall() の パドルに あたった ところ(if の 中)を、これに 書きかえる

if (ballX > paddleX && ballX < paddleX + paddleWidth) {
  ballDY = -ballDY;
  let mannaka = paddleX + paddleWidth / 2;
  ballDX = (ballX - mannaka) / 8;
}