Click here for free DL of the app version that can save data.

No:3390

836

←

Prev Next

→

The game to win 🏅.
Developer User3662｜Date and time 23/6/24 20:52:05
Build time 20.929 sec｜Game capacity 2.355KB｜

Script

こんにちは！優勝するゲームを作成しました！HTMLファイルには以下のようなコードを記述しました。

優勝するゲーム

このゲームは、画面内にある宝石を探すゲームです。プレイヤーは、上下左右キーを使って移動します。プレイヤーが宝石に近づくと、優勝と判定されます。優勝した場合は、ページがリロードされ、再度挑戦できます。スマートフォンでもプレイ可能です。楽しんでください！🏅

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

こんにちは！優勝するゲームを作成しました！HTMLファイルには以下のようなコードを記述しました。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>優勝するゲーム</title>
</head>
<body>
  <h1>優勝するゲーム</h1>
  <canvas id="canvas"></canvas>

// どこかにある宝石を探す
    const gemEmoji = '💎';
    const gemX = Math.random() * canvas.width;
    const gemY = Math.random() * canvas.height;

// プレイヤーを設定
    const playerSize = 50;
    const playerEmoji = '👾';
    let playerX = canvas.width / 2 - playerSize / 2;
    let playerY = canvas.height / 2 - playerSize / 2;

// ゲームループの開始
    setInterval(() => {
      // キャンバスを一旦クリア
      const context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);

// 宝石を描画
      context.font = '48px serif';
      context.fillText(gemEmoji, gemX, gemY);

// プレイヤーを描画
      context.fillText(playerEmoji, playerX, playerY);

// プレイヤーの操作
      window.addEventListener('keydown', (event) => {
        switch(event.key) {
          case 'ArrowUp':
            playerY -= 10;
            break;
          case 'ArrowDown':
            playerY += 10;
            break;
          case 'ArrowLeft':
            playerX -= 10;
            break;
          case 'ArrowRight':
            playerX += 10;
            break;
        }
      });

// 当たり判定
      const distance = Math.sqrt((gemX - playerX)**2 + (gemY - playerY)**2);
      if(distance <= playerSize) {
        alert('おめでとう！あなたは優勝しました！');
        location.reload();
      }
    }, 30);
  </script>
</body>
</html>