Crie um jogo runner arcade assim como o Subway Surfers's game

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

No:36530

←

Prev Next

→

Crie um jogo runner arcade assim como o Subway Sur..ALL
Developer User16820｜Date and time 24/1/17 22:33:54
Build time 16.476 sec｜Game capacity 3.47KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Runner Arcade - Subway Surfers</title>
</head>
<body>
  <script>
    // Variáveis globais
    var player;
    var obstacles = [];
    var score = 0;
    var gameSpeed = 3;

// Classe do jogador
    class Player {
      constructor(x, y, width, height, color) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.color = color;
        this.dy = 0;
        this.jumpForce = 15;
        this.originalHeight = height;
        this.grounded = false;
      }

// Atualiza a posição do jogador
      update() {
        if (this.y + this.height < canvas.height) {
          this.dy += gravity;
          this.y += this.dy;
        } else {
          this.dy = 0;
          this.y = canvas.height - this.height;
          this.grounded = true;
        }
        this.draw();
      }

// Pula quando o jogador toca na tela
      jump() {
        if (this.grounded) {
          this.dy = -this.jumpForce;
          this.grounded = false;
        }
      }

// Desenha o jogador na tela
      draw() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
    }

// Classe dos obstáculos
    class Obstacle {
      constructor(x, y, width, height, color) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.color = color;
      }

// Atualiza a posição do obstáculo
      update() {
        this.x -= gameSpeed;
        this.draw();
      }

// Desenha o obstáculo na tela
      draw() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
    }

// Cria o canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    document.body.appendChild(canvas);

// Cria o jogador
    player = new Player(20, 0, 50, 50, 'blue');

// Função principal do jogo
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

player.update();
      score++;
      gameSpeed += 0.01;

if (score % 200 === 0) {
        // Cria um obstáculo a cada 200 pontos
        const obstacleHeight = Math.random() * (canvas.height - 100) + 20;
        obstacles.push(new Obstacle(canvas.width, canvas.height - obstacleHeight, 50, obstacleHeight, 'red'));
      }

obstacles.forEach(obstacle => {
        obstacle.update();

// Verifica colisões
        if (checkCollision(player, obstacle)) {
          alert('Game Over!');
          window.location.reload();
        }
      });

// Atualiza a pontuação
      ctx.fillStyle = 'black';
      ctx.font = '20px Arial';
      ctx.fillText('Score: ' + score, 10, 30);

requestAnimationFrame(gameLoop);
    }

// Verifica colisões entre o jogador e obstáculos
    function checkCollision(player, obstacle) {
      return (
        player.x < obstacle.x + obstacle.width &&
        player.x + player.width > obstacle.x &&
        player.y < obstacle.y + obstacle.height &&
        player.y + player.height > obstacle.y
      );
    }

// Evento de clique na tela para pular
    document.addEventListener('click', function () {
      player.jump();
    });

gameLoop(); // Inicia o jogo
  </script>
</body>
</html>