CRIA UM JOGO 3D DE TIRO E NÃO PODE SER UM JOGO 2D's game

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

No:43499

←

Prev Next

→

CRIA UM JOGO 3D DE TIRO E NÃO PODE SER UM JOGO 2D
Developer User19207｜Date and time 24/2/15 21:03:10
Build time 17.694 sec｜Game capacity 4.899KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Jogo de tiro 3D</title>
  <style>
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <script>
    const canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    const context = canvas.getContext('2d');

// Configurações do jogo
    const gameSize = { width: 600, height: 400 };
    const playerSize = { width: 20, height: 20 };
    const playerSpeed = 5;
    const bulletSize = { width: 5, height: 5 };
    const bulletSpeed = 10;

// Estado do jogo
    let score = 0;
    let gameover = false;

// Movimento do jogador
    const player = {
      position: { x: gameSize.width / 2, y: gameSize.height / 2 },
      direction: { x: 0, y: 0 },
      moveLeft() { this.direction.x = -playerSpeed; },
      moveRight() { this.direction.x = playerSpeed; },
      moveUp() { this.direction.y = -playerSpeed; },
      moveDown() { this.direction.y = playerSpeed; },
      stopX() { this.direction.x = 0; },
      stopY() { this.direction.y = 0; }
    };

// Disparo de balas
    const bullets = [];
    function shoot() {
      const bullet = {
        position: { x: player.position.x - bulletSize.width / 2, y: player.position.y - bulletSize.height / 2 },
        direction: { x: player.direction.x, y: player.direction.y }
      };
      bullets.push(bullet);
    }

// Função para atualizar a lógica do jogo
    function update() {
      // Verificar se o jogo acabou
      if (gameover) {
        return; // O jogo acabou, não fazer mais nada
      }

// Atualizar a posição do jogador
      player.position.x += player.direction.x;
      player.position.y += player.direction.y;

// Verificar colisão do jogador com as paredes
      if (player.position.x < 0) player.position.x = 0;
      if (player.position.x > gameSize.width - playerSize.width) player.position.x = gameSize.width - playerSize.width;
      if (player.position.y < 0) player.position.y = 0;
      if (player.position.y > gameSize.height - playerSize.height) player.position.y = gameSize.height - playerSize.height;

// Atualizar a posição das balas e verificar colisão com o jogador
      bullets.forEach(bullet => {
        bullet.position.x += bullet.direction.x * bulletSpeed;
        bullet.position.y += bullet.direction.y * bulletSpeed;

// Verificar colisão com o jogador
        if (bullet.position.x < player.position.x + playerSize.width &&
            bullet.position.x + bulletSize.width > player.position.x &&
            bullet.position.y < player.position.y + playerSize.height &&
            bullet.position.y + bulletSize.height > player.position.y) {
          gameover = true; // O jogador foi atingido, o jogo acabou!
        }
      });

// Remover as balas que saíram da tela
      bullets.forEach((bullet, index) => {
        if (bullet.position.x < 0 || bullet.position.x > gameSize.width || bullet.position.y < 0 || bullet.position.y > gameSize.height) {
          bullets.splice(index, 1);
        }
      });
    }

// Função para renderizar o estado do jogo
    function render() {
      // Limpar o canvas
      context.clearRect(0, 0, gameSize.width, gameSize.height);

// Desenhar o jogador
      context.fillStyle = 'blue';
      context.fillRect(player.position.x, player.position.y, playerSize.width, playerSize.height);

// Desenhar as balas
      bullets.forEach(bullet => {
        context.fillStyle = 'red';
        context.fillRect(bullet.position.x, bullet.position.y, bulletSize.width, bulletSize.height);
      });

// Exibir a pontuação
      context.fillStyle = 'black';
      context.font = '24px Arial';
      context.fillText('Pontuação: ' + score, 10, 30);

// Exibir mensagem de game over
      if (gameover) {
        context.fillStyle = 'red';
        context.font = '48px Arial';
        context.fillText('Game Over', gameSize.width / 2 - 100, gameSize.height / 2);
      }
    }

// Função de loop principal do jogo
    function gameLoop() {
      update();
      render();

requestAnimationFrame(gameLoop);
    }

// Iniciar o jogo quando a página carregar
    window.addEventListener('load', () => {
      canvas.width = gameSize.width;
      canvas.height = gameSize.height;

// Configurar controles do jogador para smartphone
      window.addEventListener('deviceorientation', (event) => {
        const {
          beta,
          gamma
        } = event;
        
        const x = Math.min(Math.max(-45 + gamma, -30), 30) * (gameSize.width / 60);
        const y = Math.min(Math.max(-45 + beta, -30), 30) * (gameSize.height / 60);

player.direction.x = x;
        player.direction.y = y;
      });

// Configurar eventos de toque para disparar
      window.addEventListener('touchstart', shoot);

gameLoop();
    });
  </script>
</body>
</html>