AI game creator

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

No:838

236

←

Prev Next

→

sad game
Developer User3099｜Date and time 23/6/17 20:11:47
Build time 41.22 sec｜Game capacity 4.109KB｜

Script

切ないゲーム

タップしてジャンプしてください

😢

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>切ないゲーム</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        text-align: center;
      }
      canvas {
        border: 1px solid black;
      }
      .title {
        font-size: 2em;
        margin-top: 50px;
      }
      .instruction {
        font-size: 1.5em;
        margin-top: 20px;
      }
      .emoji {
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <div class="title">切ないゲーム</div>
    <div class="instruction">タップしてジャンプしてください</div>
    <div class="emoji">😢</div>
    <script>
      // ゲームの概要：主人公が深い悲しみに包まれ、ジャンプを繰り返しながら進みます。
      // 途中で障害物にぶつかるとゲームオーバーです。
      
      // Canvasの設定
      var canvas = document.getElementById('canvas');
      canvas.width = document.body.clientWidth;
      canvas.height = document.body.clientHeight;
      var ctx = canvas.getContext('2d');
      
      // ゲームオブジェクト
      var player = {
        x: 50,
        y: canvas.height / 2,
        size: 50,
        speed: 5,
        jumpHeight: 100,
        isJumping: false,
        jumpCount: 0
      };
      var obstacles = [];
      var obstacleDistance = 200;
      var obstacleHeight = 100;
      var obstacleSpeed = 5;
      
      // ゲームループ
      var requestId;
      function loop() {
        // 背景を描く
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'lightblue';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // 障害物を描く
        for (var i = 0; i < obstacles.length; i++) {
          var obstacle = obstacles[i];
          ctx.fillStyle = 'gray';
          ctx.fillRect(obstacle.x, obstacle.y, obstacleDistance, obstacleHeight);
          
          // 衝突判定
          if (player.x + player.size > obstacle.x && player.x < obstacle.x + obstacleDistance &&
              player.y + player.size > obstacle.y && player.y < obstacle.y + obstacleHeight) {
            gameOver();
            return;
          }
          
          // 左に移動
          obstacle.x -= obstacleSpeed;
          
          // 画面外に出たら削除
          if (obstacle.x + obstacleDistance < 0) {
            obstacles.splice(i, 1);
            i--;
          }
        }
        
        // 主人公を描く
        ctx.fillStyle = 'yellow';
        ctx.fillRect(player.x, player.y, player.size, player.size);
        
        // ジャンプ処理
        if (player.isJumping) {
          player.jumpCount++;
          player.y -= player.speed;
          if (player.jumpCount >= player.jumpHeight / player.speed) {
            player.isJumping = false;
            player.jumpCount = 0;
          }
        } else {
          player.y += player.speed;
        }
        
        requestId = window.requestAnimationFrame(loop);
      }
      
      // キー操作
      window.addEventListener('keydown', function(event) {
        if (event.keyCode === 32) { // スペースキー
          if (!player.isJumping) {
            player.isJumping = true;
          }
        }
      });
      
      // タッチ操作
      canvas.addEventListener('touchstart', function(event) {
        if (!player.isJumping) {
          player.isJumping = true;
        }
      });
      
      // 障害物生成
      setInterval(function() {
        var obstacle = {
          x: canvas.width,
          y: canvas.height - obstacleHeight
        };
        obstacles.push(obstacle);
      }, 2000);
      
      // ゲームオーバー処理
      function gameOver() {
        window.cancelAnimationFrame(requestId);
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'white';
        ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2);
      }
      
      loop();
    </script>
  </body>
</html>