パーツカタログ
ハレアメ・コードラボ ｜ ハレアメ・キャッチ 改造用
すきな パーツを えらんで、コードの 中の「★で囲まれた パーツ置き場」に はりつけよう。
はりつけたら かならず じっこう ボタン。1つずつ ためすのが コツ。
コードの中では、それぞれの置き場が ★の線で囲まれた ４行 になっている。
その中の「↓↓↓ この下に コピー＆ペースト ↓↓↓」の すぐ下に はりつける。
「ここまで」と 書いてある 線より 下には はみ出さないこと。
プログラムは この 4しゅるいの しごとで できている。
どの パーツも「データ」「まいかいの しごと」「かく しごと」「おきたときの しごと」の
どこかに 入る。
スコアが 画面の 左上に 大きく 出る。まずは これで 貼りつけの れんしゅう。
▼ 置き場C の「↓↓↓ この下に コピー＆ペースト ↓↓↓」の 下に はりつける
// スコアを 大きく 出す pen.fillStyle = "#FF1D8E"; pen.font = "bold 64px sans-serif"; pen.fillText(score, 20, 110);
おかしを とるたびに ポンと 音が なる。音の ファイルは いらない。コンピュータが その場で 音を つくっている。
▼ 置き場A の「↓↓↓ この下に コピー＆ペースト ↓↓↓」の 下に はりつける
// 音を つくる どうぐ
let oto = new AudioContext();
function beep(hz) {
oto.resume();
let o = oto.createOscillator();
let g = oto.createGain();
o.frequency.value = hz; // hz が 大きいほど 高い音
g.gain.value = 0.08; // 音の 大きさ
o.connect(g);
g.connect(oto.destination);
o.start();
o.stop(oto.currentTime + 0.08);
}
▼ 置き場D の「↓↓↓ この下に コピー＆ペースト ↓↓↓」の 下に はりつける
beep(880); // 数字を 変えると 音の 高さが かわる
赤い ばくだんが おちてくる。当たると ライフが 1へる。0に なると ゲームオーバー。いちばん 長い パーツ。あわてず 上から じゅんばんに。
▼ 置き場A の「↓↓↓ この下に コピー＆ペースト ↓↓↓」の 下に はりつける
// ばくだんと ライフ let bombs = []; let life = 3;
▼ 置き場B の「↓↓↓ この下に コピー＆ペースト ↓↓↓」の 下に はりつける
// ばくだんを 出す
if (time % 90 === 0) {
bombs.push({ x: Math.random() * 480, y: 0 });
}
// ばくだんを おとす／当たったか しらべる
let restBombs = [];
for (let i = 0; i < bombs.length; i = i + 1) {
bombs[i].y = bombs[i].y + fallSpeed;
if (isHit(bombs[i]) === true) {
life = life - 1;
if (life <= 0) {
gameover = true;
}
} else if (bombs[i].y < 400) {
restBombs.push(bombs[i]);
}
}
bombs = restBombs;
▼ 置き場C の「↓↓↓ この下に コピー＆ペースト ↓↓↓」の 下に はりつける
// ばくだんを かく
pen.fillStyle = "#E8564A";
for (let i = 0; i < bombs.length; i = i + 1) {
circle(bombs[i].x, bombs[i].y, 12);
}
// ライフを かく
pen.fillStyle = "#FFFFFF";
pen.font = "20px sans-serif";
pen.fillText("ライフ " + life, 370, 30);
// ゲームオーバーの 文字
if (gameover === true) {
pen.fillStyle = "#E8564A";
pen.font = "bold 36px sans-serif";
pen.fillText("ゲームオーバー", 80, 195);
}
5びょう ごとに おかしが はやく なる。time は 1びょうで 60 ふえるので、300 で 5びょう。
▼ 置き場B の「↓↓↓ この下に コピー＆ペースト ↓↓↓」の 下に はりつける
// 5びょう ごとに 1ずつ はやくする
if (time % 300 === 0) {
fallSpeed = fallSpeed + 1;
}
画面の 下に つくった人の 名まえが 出る。コードの 上の ほうに ある <h1> と <title> も 書きかえて みよう。
▼ 置き場C の「↓↓↓ この下に コピー＆ペースト ↓↓↓」の 下に はりつける
// つくった人の 名まえ
pen.fillStyle = "#FF1D8E";
pen.font = "16px sans-serif";
pen.fillText("つくった人：かいなん たろう", 12, 348);
おかしに しっぽが 生える。ふしぎなことに、変えるのは 1か所だけ。0.25 は「25%だけ ぬる」という いみ。ぜんぶ ぬりつぶさないから、前の コマが うすく のこる。ゲームループの ひみつが 目で 見える パーツ。
▼ コードの 上の ほうに ある let bgColor = ... の 行を、これに 書きかえる
let bgColor = "rgba(18, 18, 26, 0.25)";
ぜんぶ できてしまった人へ。ここから先は コピーボタンが ない。
ヒントは 3だんかい。上から じゅんに 開けて、できるだけ 自分の 力で。
どうしても だめなら「ギブアップ」。こたえは 出るけど コピーは できない。
見ながら 自分で うちこもう。それも りっぱな 練習。できたら 先生に 見せて。
ふつうの おかしは 1点、金色の おかしは 5点。
ANSWER / うちこみ せんよう
この こたえは えらべない し、コピーも できない。1行ずつ 見て、自分で うちこむ。
① appear() の items.push(...) の 1行を、これに 書きかえる
let kind = "futsu";
if (Math.random() < 0.2) {
kind = "kin";
}
items.push({ x: Math.random() * 480, y: 0, kind: kind });② fall() の score = score + 1; の 1行を、これに 書きかえる
if (items[i].kind === "kin") {
score = score + 5; // 金色は 5点！
} else {
score = score + 1; // ふつうは 1点
}③ draw() の「おかしを かく」の 2行（pen.fillStyle と for）を、これに 書きかえる
for (let i = 0; i < items.length; i = i + 1) {
if (items[i].kind === "kin") {
pen.fillStyle = "#F2B21C";
} else {
pen.fillStyle = itemColor;
}
circle(items[i].x, items[i].y, 10);
}30びょう たったら ゲームオーバー。何点 とれるか きそう。
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, 30);上下にも 動けるようにして、自分から おかしを とりに行く。
ANSWER / うちこみ せんよう
この こたえは えらべない し、コピーも できない。1行ずつ 見て、自分で うちこむ。
move() の 中、if (playerX > 480) { ... } の とじかっこの 下に、これを 書きたす
if (keys["ArrowUp"] === true) {
playerY = playerY - playerSpeed;
}
if (keys["ArrowDown"] === true) {
playerY = playerY + playerSpeed;
}
if (playerY < 0) {
playerY = 0;
}
if (playerY > 360) {
playerY = 360;
}{ } と ( ) と " の かずを かぞえる。