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

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", sans-serif;
    text-align: center;
  }
  .stage { padding: 46px 20px 70px; }
  h1 {
    margin: 0 0 4px;
    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.04em;
    color: #FF1D8E;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .jp {
    margin: 0 0 30px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5em;
    color: #0D0D0F;
  }
  canvas {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    background: #12121A;
  }
  .hint {
    margin: 22px 0 0;
    font-size: 12px;
    letter-spacing: 0.28em;
    color: #8A8A93;
  }
  </style>
</head>
<body>

<div class="stage">
<h1>HAREAME CATCH</h1>
<p class="jp">ハレアメ・キャッチ</p>
<canvas id="canvas" width="480" height="360"></canvas>
<p class="hint">← → キーで うごかす</p>
</div>

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

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

// =========================================
//   ここから下は しくみ の ぶぶん
// =========================================
const canvas = document.getElementById("canvas");
const pen = canvas.getContext("2d");   // pen は「えんぴつ」の やくわり

let playerX = 240;      // プレイヤーの よこの ばしょ
let playerY = 320;      // プレイヤーの たての ばしょ
let score = 0;          // とれた かず
let items = [];         // おちてくる おかしの リスト
let time = 0;           // はじまってからの かぞえ
let keys = {};          // いま おされている キー
let gameover = false;   // true に すると ゲームが とまる

// キーが おされたか どうかを おぼえておく
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;
});

// 1びょうかんに 60かい よばれる「ゲームループ」
// ここが うごいているから ゲームは 動いて 見える
function loop() {
  time = time + 1;

if (gameover === false) {
    move();
    appear();
    fall();

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

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

}

draw();
  requestAnimationFrame(loop);   // つぎの 1コマを おねがいする
}

// プレイヤーを うごかす
function move() {
  if (keys["ArrowLeft"] === true) {
    playerX = playerX - playerSpeed;
  }
  if (keys["ArrowRight"] === true) {
    playerX = playerX + playerSpeed;
  }
  // がめんの そとに 出ないように する
  if (playerX < 0) {
    playerX = 0;
  }
  if (playerX > 480) {
    playerX = 480;
  }
}

// おかしを 上から 出す
function appear() {
  if (time % appearTime === 0) {
    items.push({ x: Math.random() * 480, y: 0 });
  }
}

// おかしを おとして、とれたか どうか しらべる
function fall() {
  let rest = [];
  for (let i = 0; i < items.length; i = i + 1) {
    items[i].y = items[i].y + fallSpeed;

if (isHit(items[i]) === true) {
      score = score + 1;      // とれた！

// ★★★★★★★★★★★★ パーツ置き場D ★★★★★★★★★★★★
      // おかしを とった ときの しごと
      // ↓↓↓　この下に コピー＆ペースト　↓↓↓

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

} else if (items[i].y < 400) {
      rest.push(items[i]);    // まだ おちている とちゅう
    }
  }
  items = rest;
}

// あたり判定：2つの ばしょの きょり を 算数で もとめる
// よこ×よこ ＋ たて×たて の へいほうこん ＝ きょり
function isHit(item) {
  let yoko = item.x - playerX;
  let tate = item.y - playerY;
  let kyori = Math.sqrt(yoko * yoko + tate * tate);
  return kyori < playerSize;
}

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

// おかしを かく
  pen.fillStyle = itemColor;
  for (let i = 0; i < items.length; i = i + 1) {
    circle(items[i].x, items[i].y, 10);
  }

// プレイヤーを かく
  pen.fillStyle = playerColor;
  circle(playerX, playerY, playerSize / 2);

// スコアを かく
  pen.fillStyle = "#FFFFFF";
  pen.font = "20px sans-serif";
  pen.fillText("スコア " + score, 12, 30);

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

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

}

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

loop();   // ここで ゲームが はじまる
</script>
</body>
</html>

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