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

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 SHOOTER</h1><p class="jp">ハレアメ・シューター</p><canvas id="canvas" width="480" height="400"></canvas>
<p class="hint">← → で うごく。スペースキーで 弾を うつ。てきを 下まで のがさない ように！</p></div>
<script>
// =========================================
//   ★ここの数字を 変えてみよう★
// =========================================
let playerSpeed = 6;            // じぶんの きたいが うごく はやさ
let bulletSpeed = 8;            // 弾（たま）の はやさ
let enemySpeed = 2;             // てきが おりてくる はやさ
let appearTime = 50;            // てきが 出てくる 間かく（小さいほど たくさん）
let playerColor = "#FF1D8E";    // じぶんの 色
let bulletColor = "#FFFFFF";    // 弾の 色
let bgColor = "#12121A";        // はいけいの 色

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

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

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

let playerX = 240;              // じぶんの よこの ばしょ（たては 370 で きまり）
let bullets = [];               // とんでいる 弾の リスト
let enemies = [];               // いまいる てきの リスト
let score = 0;
let miss = 0;                   // 下まで のがした かず
let time = 0;
let gameover = false;

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

// じぶんを うごかす
function move() {
  if (keys["ArrowLeft"] === true) {
    playerX = playerX - playerSpeed;
  }
  if (keys["ArrowRight"] === true) {
    playerX = playerX + playerSpeed;
  }
  // がめんの そとに 出ないように する
  if (playerX < 14) {
    playerX = 14;
  }
  if (playerX > 466) {
    playerX = 466;
  }
}

// スペースキーで 弾を うつ（10コマに 1回まで。れんしゃ しすぎない ように）
function shoot() {
  if (keys[" "] === true && time % 10 === 0) {
    bullets.push({ x: playerX, y: 356 });
  }
}

// 弾を うごかして、がめんの そとの 弾は すてる
function moveBullets() {
  let rest = [];
  for (let i = 0; i < bullets.length; i = i + 1) {
    bullets[i].y = bullets[i].y - bulletSpeed;   // 上へ すすむ
    if (bullets[i].y > -10) {
      rest.push(bullets[i]);    // まだ がめんの 中
    }
  }
  bullets = rest;
}

// ときどき てきが 上から 出てくる
function appear() {
  if (time % appearTime === 0) {
    enemies.push({ x: Math.random() * 440 + 20, y: -10 });
  }
}

// 弾が てきに あたったか しらべる（きょりの あたり判定）
function isHit(e) {
  for (let i = 0; i < bullets.length; i = i + 1) {
    let dx = bullets[i].x - e.x;
    let dy = bullets[i].y - e.y;
    let kyori = Math.sqrt(dx * dx + dy * dy);
    if (kyori < 18) {
      bullets[i].y = -100;      // つかった 弾は がめんの そとへ
      return true;
    }
  }
  return false;
}

// てきを うごかして、たおれた てきと のがした てきを すてる
function moveEnemies() {
  let rest = [];
  for (let i = 0; i < enemies.length; i = i + 1) {
    enemies[i].y = enemies[i].y + enemySpeed;    // 下へ おりてくる
    if (isHit(enemies[i]) === true) {
      score = score + 1;        // たおした！

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

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

} else if (enemies[i].y > 400) {
      miss = miss + 1;          // のがした…
    } else {
      rest.push(enemies[i]);    // まだ がめんの 中
    }
  }
  enemies = rest;
}

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

// じぶんの きたいを かく（三角形）
  pen.fillStyle = playerColor;
  pen.beginPath();
  pen.moveTo(playerX, 356);
  pen.lineTo(playerX - 14, 384);
  pen.lineTo(playerX + 14, 384);
  pen.fill();

// 弾を かく
  pen.fillStyle = bulletColor;
  for (let i = 0; i < bullets.length; i = i + 1) {
    pen.fillRect(bullets[i].x - 2, bullets[i].y - 8, 4, 10);
  }

// てきを かく
  pen.fillStyle = "#E8564A";
  for (let i = 0; i < enemies.length; i = i + 1) {
    circle(enemies[i].x, enemies[i].y, 12);
  }

// スコアと のがした かずを かく
  pen.fillStyle = "#FFFFFF";
  pen.font = "20px sans-serif";
  pen.fillText("たおした " + score, 20, 26);
  pen.fillText("のがした " + miss, 360, 26);

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

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

if (gameover === true) {
    pen.fillStyle = "#FF1D8E";
    pen.font = "bold 44px sans-serif";
    pen.fillText("GAME OVER", 120, 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();
    shoot();
    moveBullets();
    appear();
    moveEnemies();

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

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

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

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