Open world dragon Ball z's game | AI game creator

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

No:26237

116

Open world dragon Ball z
Developer User12900｜Date and time 23/11/27 22:43:30
Build time 52.539 sec｜Game capacity 4.175KB｜

Explanation: This HTML file implements an open world Dragon Ball Z game. It starts by initializing the canvas and creating the player object, dragonBalls array, score, and game state variables. The game loop runs continuously and handles the update of the game state, including player movement, dragon ball spawning, collision detection, score display, and game over condition. The game is controlled by touch events on a smartphone screen. The player is represented by a blue rectangle, and the dragon balls are represented by pictogram images. The player collects the dragon balls on collision, increasing the score. The game ends when all dragon balls are collected. The game is written in JavaScript and enclosed between the `
` tags in the HTML file. The necessary event listeners and game initialization are also included. The game loop is started using `requestAnimationFrame()`. You can save the above code in a single HTML file and open it in a web browser to play the game. Please note that a `emozi_all/play.png` image file needs to be placed in the same directory as the HTML file for the dragon ball pictogram to be displayed.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Dragon Ball Z: Open World Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

<script>
    // Game Initialization
    const canvas = document.getElementById('gameCanvas');
    const context = canvas.getContext('2d');

const player = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      width: 50,
      height: 50,
      speed: 5
    };

const dragonBalls = [];

let score = 0;
    let gameRunning = true;
    let gameOver = false;

const dragonBallImage = new Image();
    dragonBallImage.src = 'dragonball.png';

// Functions
    function handlePlayerMovement(e) {
      // Handle smartphone controls
      const touch = e.touches[0];
      if (touch.pageX < canvas.width / 2) {
        player.x -= player.speed;
      } else {
        player.x += player.speed;
      }

if (touch.pageY < canvas.height / 2) {
        player.y -= player.speed;
      } else {
        player.y += player.speed;
      }
    }

function spawnDragonBall() {
      const dragonBall = {
        x: Math.floor(Math.random() * (canvas.width - 50)),
        y: Math.floor(Math.random() * (canvas.height - 50)),
        width: 30,
        height: 30
      };

dragonBalls.push(dragonBall);
    }

function update() {
      if (gameRunning) {
        context.clearRect(0, 0, canvas.width, canvas.height);

// Draw Player
        context.fillStyle = 'blue';
        context.fillRect(player.x, player.y, player.width, player.height);

// Draw Dragon Balls
        for (const ball of dragonBalls) {
          context.drawImage(dragonBallImage, ball.x, ball.y, ball.width, ball.height);
        }

// Collision detection
        for (const ball of dragonBalls) {
          if (
            player.x < ball.x + ball.width &&
            player.x + player.width > ball.x &&
            player.y < ball.y + ball.height &&
            player.y + player.height > ball.y
          ) {
            // Player collected a Dragon Ball
            score++;
            dragonBalls.splice(dragonBalls.indexOf(ball), 1);
            break;
          }
        }

// Display Score
        context.fillStyle = 'white';
        context.font = '20px Arial';
        context.fillText('Score: ' + score, 20, 40);

// Game Over
        if (dragonBalls.length === 0) {
          gameRunning = false;
          gameOver = true;
          context.fillText('Game Over!', 330, 300);
        }
      }
    }

function gameLoop() {
      update();
      if (!gameOver) {
        requestAnimationFrame(gameLoop);
      }
    }

// Event Listeners
    document.addEventListener('touchstart', handlePlayerMovement);

// Initial State
    for (let i = 0; i < 10; i++) {
      spawnDragonBall();
    }

// Start the game loop
    gameLoop();
  </script>
</body>
</html>
```

Explanation:
This HTML file implements an open world Dragon Ball Z game. It starts by initializing the canvas and creating the player object, dragonBalls array, score, and game state variables.

The game loop runs continuously and handles the update of the game state, including player movement, dragon ball spawning, collision detection, score display, and game over condition.

The game is controlled by touch events on a smartphone screen. The player is represented by a blue rectangle, and the dragon balls are represented by pictogram images. The player collects the dragon balls on collision, increasing the score. The game ends when all dragon balls are collected.

The game is written in JavaScript and enclosed between the `<script>` tags in the HTML file. The necessary event listeners and game initialization are also included. The game loop is started using `requestAnimationFrame()`.

You can save the above code in a single HTML file and open it in a web browser to play the game. Please note that a `dragonball.png` image file needs to be placed in the same directory as the HTML file for the dragon ball pictogram to be displayed.