ハレアメ・コードラボ｜じぶんエディタ

CODE　ここを書きかえる　（Ctrl + Enter でじっこう）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><title>ハレアメ・ブロックくずし</title><style>
  body {
    margin: 0; background: #FFFFFF; color: #0D0D0F;
    font-family: "Helvetica Neue", Helvetica, "Hiragino Sans", "Yu Gothic UI", "BIZ UDPGothic", "Meiryo", sans-serif;
    display: flex; flex-direction: column; align-items: center;
  }
  .stage { margin: 26px auto 40px; text-align: left; }
  h1 {
    margin: 0 0 2px;
    font-family: "Arial Black", "Helvetica Neue", "Hiragino Sans", sans-serif;
    font-weight: 900; font-size: clamp(30px, 7.6vw, 96px);
    line-height: 0.9; letter-spacing: -0.03em; color: #FF1D8E; text-transform: uppercase;
  }
  .jp { margin: 6px 0 14px; font-size: 13px; font-weight: bold; letter-spacing: 0.3em; }
  canvas { display: block; border: 3px solid #0D0D0F; background: #12121A; }
  .hint { margin: 12px 0 0; font-size: 13px; color: #5E6875; letter-spacing: 0.05em; }
</style>
</head>
<body><div class="stage"><h1>HAREAME BREAK</h1><p class="jp">ハレアメ・ブロックくずし</p><canvas id="canvas" width="480" height="400"></canvas>
<p class="hint">← → キーで パドルを うごかす。ボールを おとさず、ブロックを ぜんぶ こわそう</p></div>
<script>
// =========================================
//   ★ここの数字を 変えてみよう★
// =========================================
let paddleSpeed = 7;            // パドル（ラケット）が うごく はやさ
let paddleWidth = 80;           // パドルの よこの ながさ
let ballSpeed = 3;              // ボールの はやさ
let brickRows = 4;              // ブロックの だんすう（ふやすと むずかしい）
let paddleColor = "#FF1D8E";    // パドルの 色
let ballColor = "#FFFFFF";      // ボールの 色
let bgColor = "#12121A";        // はいけいの 色

// ★★★★★★★★★★★★ パーツ置き場A ★★★★★★★★★★★★
// あたらしい へんすう を ふやす ところ（データ）
// ↓↓↓　この下に コピー＆ペースト　↓↓↓

// ★★★★★★★ パーツ置き場A　ここまで ★★★★★★★

// =========================================
//   ここから下は しくみ の ぶぶん
// =========================================
let canvas = document.getElementById("canvas");
let pen = canvas.getContext("2d");

// パドルと ボールの ばしょ。ボールは むき（DX, DY）を もっている
let paddleX = 200;
let ballX = 240;
let ballY = 280;
let ballDX = ballSpeed;         // よこの むき。プラスなら 右へ
let ballDY = -ballSpeed;        // たての むき。マイナスなら 上へ
let score = 0;
let miss = 0;
let time = 0;
let gameover = false;

// ブロックを ならべて つくる（8こ × brickRows だん）
let bricks = [];
for (let dan = 0; dan < brickRows; dan = dan + 1) {
  for (let retsu = 0; retsu < 8; retsu = retsu + 1) {
    bricks.push({ x: retsu * 60 + 4, y: dan * 24 + 40 });
  }
}

// キーが おされたか どうかを おぼえておく
let keys = {};
document.addEventListener("keydown", function (e) {
  keys[e.key] = true;
  if (e.key.indexOf("Arrow") === 0) {
    e.preventDefault();         // やじるしキーで がめんが うごかないように する
  }
});
document.addEventListener("keyup", function (e) {
  keys[e.key] = false;
});

// パドルを うごかす
function move() {
  if (keys["ArrowLeft"] === true) {
    paddleX = paddleX - paddleSpeed;
  }
  if (keys["ArrowRight"] === true) {
    paddleX = paddleX + paddleSpeed;
  }
  // がめんの そとに 出ないように する
  if (paddleX < 0) {
    paddleX = 0;
  }
  if (paddleX > 480 - paddleWidth) {
    paddleX = 480 - paddleWidth;
  }
}

// ボールを うごかして、はねかえす
function moveBall() {
  ballX = ballX + ballDX;       // いまの ばしょに むきを たすと すすむ
  ballY = ballY + ballDY;

// 左右の かべ：よこの むきを ぎゃくに する
  if (ballX < 6 || ballX > 474) {
    ballDX = -ballDX;
  }
  // 上の かべ：たての むきを ぎゃくに する
  if (ballY < 6) {
    ballDY = -ballDY;
  }
  // パドルに あたったら 上へ はねかえす
  if (ballY > 376 && ballY < 392 && ballDY > 0) {
    if (ballX > paddleX && ballX < paddleX + paddleWidth) {
      ballDY = -ballDY;
    }
  }
  // 下に おちたら ミス。ボールを まんなかに もどす
  if (ballY > 400) {
    miss = miss + 1;
    ballX = 240;
    ballY = 280;
    ballDY = -Math.abs(ballDY);
  }
}

// ブロックに あたったか しらべる（はこ の あたり判定）
function isHit(b) {
  if (ballX > b.x - 6 && ballX < b.x + 52 + 6) {
    if (ballY > b.y - 6 && ballY < b.y + 20 + 6) {
      return true;
    }
  }
  return false;
}

// あたった ブロックを けして、のこりだけ もちこす
function checkBricks() {
  let rest = [];
  for (let i = 0; i < bricks.length; i = i + 1) {
    if (isHit(bricks[i]) === true) {
      score = score + 1;        // こわした！
      ballDY = -ballDY;         // ボールは はねかえる

// ★★★★★★★★★★★★ パーツ置き場D ★★★★★★★★★★★★
      // ブロックを こわした ときの しごと（出来事）
      // ↓↓↓　この下に コピー＆ペースト　↓↓↓

// ★★★★★★★ パーツ置き場D　ここまで ★★★★★★★

} else {
      rest.push(bricks[i]);     // まだ のこっている ブロック
    }
  }
  bricks = rest;
  if (bricks.length === 0) {
    gameover = true;            // ぜんぶ こわしたら クリア！
  }
}

// がめんに かく
function draw() {
  // まいかい ぜんぶ ぬりつぶして、はじめから かきなおしている
  pen.fillStyle = bgColor;
  pen.fillRect(0, 0, 480, 400);

// ブロックを かく
  pen.fillStyle = "#E8564A";
  for (let i = 0; i < bricks.length; i = i + 1) {
    pen.fillRect(bricks[i].x, bricks[i].y, 52, 20);
  }

// パドルを かく
  pen.fillStyle = paddleColor;
  pen.fillRect(paddleX, 380, paddleWidth, 10);

// ボールを かく
  pen.fillStyle = ballColor;
  circle(ballX, ballY, 6);

// スコアと ミスを かく
  pen.fillStyle = "#FFFFFF";
  pen.font = "20px sans-serif";
  pen.fillText("こわした " + score, 20, 26);
  pen.fillText("ミス " + miss, 380, 26);

// ★★★★★★★★★★★★ パーツ置き場C ★★★★★★★★★★★★
  // がめんに かく しごと（描画）
  // ↓↓↓　この下に コピー＆ペースト　↓↓↓

// ★★★★★★★ パーツ置き場C　ここまで ★★★★★★★

if (gameover === true) {
    pen.fillStyle = "#FF1D8E";
    pen.font = "bold 48px sans-serif";
    pen.fillText("CLEAR!", 160, 210);
  }
}

// まるを かく どうぐ
function circle(x, y, hankei) {
  pen.beginPath();
  pen.arc(x, y, hankei, 0, Math.PI * 2);
  pen.fill();
}

// 1びょうかんに 60回 よばれる 本体
function loop() {
  if (gameover === false) {
    time = time + 1;
    move();
    moveBall();
    checkBricks();

// ★★★★★★★★★★★★ パーツ置き場B ★★★★★★★★★★★★
    // まいかい する しごと（毎フレーム）
    // ↓↓↓　この下に コピー＆ペースト　↓↓↓

// ★★★★★★★ パーツ置き場B　ここまで ★★★★★★★

}
  draw();
  requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>

PREVIEW　1回クリックしてから ← → をおす