AI game creator

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

No:26260

←

Prev Next

→

battle game 3d
Developer User12960｜Date and time 23/11/28 10:01:11
Build time 70.648 sec｜Game capacity 3.248KB｜

Script

Sure! Here is a simple 3D battle game implemented as a single HTML file using JavaScript and enclosed in script tags. The game can be played on a smartphone and utilizes pictograms. Note that this is a basic implementation and can be further expanded upon.

To play the game, simply save the above code into an HTML file (e.g., `battle_game.html`) and open it in a web browser that supports JavaScript. The game takes place on a canvas element where you control a blue square player using the arrow keys. The red square enemy will move towards your position, and if they collide, a "Game Over!" alert will be displayed.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #gameCanvas {
      width: 100%;
      height: 300px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  
  <script>
    // Game settings
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const playerSize = 40;
    const enemySize = 30;
    const playerSpeed = 5;
    const enemySpeed = 3;
    
    // Player object
    const player = {
      x: canvas.width / 2 - playerSize / 2,
      y: canvas.height / 2 - playerSize / 2,
      width: playerSize,
      height: playerSize,
      color: 'blue',
      draw: function() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
    };
    
    // Enemy object
    const enemy = {
      x: Math.random() * (canvas.width - enemySize),
      y: Math.random() * (canvas.height - enemySize),
      width: enemySize,
      height: enemySize,
      color: 'red',
      draw: function() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
    };
    
    // Game loop
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Move player
      document.addEventListener('keydown', function(event) {
        const key = event.keyCode;
        
        if (key === 37 && player.x > 0)
          player.x -= playerSpeed;
        else if (key === 38 && player.y > 0)
          player.y -= playerSpeed;
        else if (key === 39 && player.x < canvas.width - playerSize)
          player.x += playerSpeed;
        else if (key === 40 && player.y < canvas.height - playerSize)
          player.y += playerSpeed;
      });
      
      // Move enemy towards the player
      if (enemy.x < player.x)
        enemy.x += enemySpeed;
      else if (enemy.x > player.x)
        enemy.x -= enemySpeed;
      
      if (enemy.y < player.y)
        enemy.y += enemySpeed;
      else if (enemy.y > player.y)
        enemy.y -= enemySpeed;
      
      // Check 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) {
        // Collision occurred
        alert('Game Over!');
      }
      
      // Draw player and enemy
      player.draw();
      enemy.draw();
      
      // Request next frame
      window.requestAnimationFrame(gameLoop);
    }
    
    // Start the game loop
    gameLoop();
  </script>
</body>
</html>
```