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

No:4047

4282

←

Prev Next

→

Popopo certification in the fifth dimension of dif..ALL
Developer User1006｜Date and time 23/6/27 3:26:50
Build time 41.116 sec｜Game capacity 3.906KB｜

Script

わかりました。以下はサンプルとなるJavaScriptゲームです。このゲームは、タッチ操作のみに対応しています。

ポポポ認証の五次元異空間ミョーミョンでピョマる

画面をタップしてスタート！

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

わかりました。以下はサンプルとなるJavaScriptゲームです。このゲームは、タッチ操作のみに対応しています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Javascriptゲーム</title>
    <style>
      #game-board {
        width: 100vw;
        height: 100vh;
        background: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      
      #game-board canvas {
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <div id="game-board">
      <h1>ポポポ認証の五次元異空間ミョーミョンでピョマる</h1>
      <canvas id="game-canvas" width="400" height="400"></canvas>
      <p>画面をタップしてスタート！</p>
    </div>
    <script>
      // グローバル変数
      var canvas, ctx, w, h, cat, mos, score;
      var gameStarted = false;
      var intervalId;
      
      // 矩形同士の衝突判定
      function checkCollision(r1, r2) {
        return !(r2.left > r1.right ||
                 r2.right < r1.left ||
                 r2.top > r1.bottom ||
                 r2.bottom < r1.top);
      }
      
      // 絵文字の描画
      function drawEmoji(x, y, size, emoji) {
        ctx.font = size + "px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(emoji, x, y);
      }
      
      // キャンバスの初期化
      function init() {
        canvas = document.getElementById("game-canvas");
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;
        score = 0;
        
        // 猫の初期化
        cat = {
          x: w / 2 - 50,
          y: h / 2 - 50,
          width: 100,
          height: 100,
          color: "#f00",
          speed: 5,
          
          update: function() {
            if (cat.x > w - cat.width || cat.x < 0) cat.speed = -cat.speed;
            cat.x += cat.speed;
            ctx.fillStyle = cat.color;
            ctx.fillRect(cat.x, cat.y, cat.width, cat.height);
          }
        };
        
        // ネズミの初期化
        mos = {
          x: Math.random() * w,
          y: Math.random() * h,
          size: 50,
          color: "#0f0",
          isHit: false,
          
          update: function() {
            ctx.fillStyle = mos.color;
            drawEmoji(mos.x + mos.size / 2, mos.y + mos.size / 2, mos.size, "🐭");
          }
        };
        
        // イベントリスナーの登録
        canvas.addEventListener("click", startGame);
      }
      
      // ゲーム開始処理
      function startGame() {
        if (!gameStarted) {
          gameStarted = true;
          
          // ゲームループの開始
          intervalId = setInterval(gameLoop, 1000 / 60);
          
          // イベントリスナーの削除
          canvas.removeEventListener("click", startGame);
        }
      }
      
      // ゲームループ
      function gameLoop() {
        // キャンバスをクリア
        ctx.clearRect(0, 0, w, h);
        
        // スコアの表示
        ctx.fillStyle = "#000";
        ctx.font = "24px Arial";
        ctx.textAlign = "left";
        ctx.textBaseline = "top";
        ctx.fillText("Score: " + score, 10, 10);
        
        // 猫の更新
        cat.update();
        
        // ネズミの更新
        mos.update();
        
        // ネズミと猫の衝突判定
        if (!mos.isHit && checkCollision(cat, mos)) {
          mos.isHit = true;
          score++;
        }
        
        // ネズミの再配置
        if (mos.isHit) {
          mos.x = Math.random() * w;
          mos.y = Math.random() * h;
          mos.isHit = false;
        }
      }
      
      // 初期化
      init();
    </script>
  </body>
</html>