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

No:10288

←

Prev Next

→

MUNEO HOUSE
Developer User4517｜Date and time 23/7/30 0:44:16
Build time 11.211 sec｜Game capacity 1.446KB｜

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 {
      text-align: center;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <h1>ゲーム</h1>
  <p>スマホの方向を操作して遊びましょう！</p>
  <canvas id="gameCanvas" width="300" height="300"></canvas>
  
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    const player = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      speed: 5
    };
    
    const keys = {};
    
    function movePlayer() {
      if (keys['ArrowUp']) {
        player.y -= player.speed;
      }
      if (keys['ArrowDown']) {
        player.y += player.speed;
      }
      if (keys['ArrowLeft']) {
        player.x -= player.speed;
      }
      if (keys['ArrowRight']) {
        player.x += player.speed;
      }
    }
    
    function drawPlayer() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      ctx.fillStyle = 'red';
      ctx.fillRect(player.x - 10, player.y - 10, 20, 20);
    }
    
    function gameLoop() {
      movePlayer();
      drawPlayer();
      
      requestAnimationFrame(gameLoop);
    }
    
    window.addEventListener('keydown', function (e) {
      keys[e.key] = true;
    });
    
    window.addEventListener('keyup', function (e) {
      keys[e.key] = false;
    });
    
    gameLoop();
  </script>
</body>
</html>