AI game creator

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

No:16597

←

Prev Next

→

Make Roblox
Developer User7388｜Date and time 23/9/19 18:03:59
Build time 37.902 sec｜Game capacity 4.227KB｜

Script

This implementation is a simple game where you control a player pictogram using the arrow keys on your smartphone. Your goal is to avoid collision with the enemy pictogram moving towards you from the right side of the canvas. If you collide with the enemy, the game is over. Playing the game is as simple as opening the HTML file in a browser on your smartphone and tapping the "Start Game" button.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-family: Arial, sans-serif;
      }
      #container {
        text-align: center;
      }
      #game-canvas {
        border: 2px solid black;
        width: 300px;
        height: 300px;
        background-color: white;
        display: inline-block;
      }
      .button {
        display: inline-block;
        margin: 10px;
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <canvas id="game-canvas"></canvas>
      <button class="button" onclick="startGame()">Start Game</button>
    </div>

// Game objects
      const player = {
        x: 0,
        y: 0,
        width: 50,
        height: 50,
        speed: 5,
      };
      
      const enemy = {
        x: canvas.width - 50,
        y: canvas.height - 50,
        width: 50,
        height: 50,
        speed: 2,
      };

// Game control variables
      let gameRunning = false;
      let requestId;

function drawPlayer() {
        context.drawImage(playerImage, player.x, player.y, player.width, player.height);
      }

function drawEnemy() {
        context.drawImage(enemyImage, enemy.x, enemy.y, enemy.width, enemy.height);
      }

function update() {
        // Update player position based on user input
        document.addEventListener("keydown", function (event) {
          switch (event.keyCode) {
            // Move left
            case 37:
              player.x -= player.speed;
              break;
            // Move right
            case 39:
              player.x += player.speed;
              break;
            // Move up
            case 38:
              player.y -= player.speed;
              break;
            // Move down
            case 40:
              player.y += player.speed;
              break;
          }
        });

// Update enemy position
        enemy.x -= enemy.speed;
        
        // Check for collision between player and enemy
        if (
          player.x < enemy.x + enemy.width &&
          player.x + player.width > enemy.x &&
          player.y < enemy.y + enemy.height &&
          player.y + player.height > enemy.y
        ) {
          stopGame();
          alert("Game Over! You were caught by the enemy.");
        }

// Clear canvas before drawing
        context.clearRect(0, 0, canvas.width, canvas.height);

// Draw game objects
        drawPlayer();
        drawEnemy();

// Request animation frame for continuous game updates
        requestId = requestAnimationFrame(update);
      }

function startGame() {
        if (!gameRunning) {
          gameRunning = true;
          player.x = canvas.width / 2 - player.width / 2;
          player.y = canvas.height / 2 - player.height / 2;
          requestId = requestAnimationFrame(update);
        }
      }

function stopGame() {
        if (gameRunning) {
          gameRunning = false;
          cancelAnimationFrame(requestId);
        }
      }
    </script>
  </body>
</html>
```