AI game creator

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

No:42632

←

Prev Next

→

Cube dash
Developer User18853｜Date and time 24/2/12 11:27:43
Build time 11.599 sec｜Game capacity 3.288KB｜

Script

Pontuação: 0

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    #canvas {
      display: block;
      margin: 0 auto;
      background-color: #222222;
    }
    
    #score {
      position: absolute;
      top: 10px;
      left: 10px;
      color: #FFFFFF;
      font-family: Arial, sans-serif;
      font-size: 20px;
    }
    
    #gameover {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #FFFFFF;
      font-family: Arial, sans-serif;
      font-size: 40px;
      text-align: center;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="600"></canvas>
  <div id="score">Pontuação: 0</div>
  <div id="gameover"></div>

// Variáveis do jogo
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    let score = 0;
    let gameover = false;

// Objeto do jogador
    const player = {
      x: canvas.width / 2 - 25,
      y: canvas.height - 100,
      width: 50,
      height: 50,
      speed: 5,
    };

// Objeto do obstáculo
    const obstacle = {
      x: Math.random() * (canvas.width - 50),
      y: -50,
      width: 50,
      height: 50,
      speed: 2,
    };

// Função para desenhar os objetos
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.drawImage(playerImg, player.x, player.y, player.width, player.height);
      ctx.drawImage(obstacleImg, obstacle.x, obstacle.y, obstacle.width, obstacle.height);

ctx.fillStyle = "#FFFFFF";
      ctx.font = "20px Arial";
      ctx.fillText("Pontuação: " + score, 10, 30);
    }

// Função para atualizar a posição dos objetos
    function update() {
      if (!gameover) {
        obstacle.y += obstacle.speed;

if (obstacle.y > canvas.height) {
          obstacle.x = Math.random() * (canvas.width - 50);
          obstacle.y = -50;
          score++;
        }

if (
          player.x < obstacle.x + obstacle.width &&
          player.x + player.width > obstacle.x &&
          player.y < obstacle.y + obstacle.height &&
          player.y + player.height > obstacle.y
        ) {
          gameover = true;
          document.getElementById("gameover").innerText = "Fim de Jogo";
        }
      }
    }

// Função para controlar o jogador
    function movePlayer(event) {
      if (!gameover) {
        switch (event.keyCode) {
          case 37: // Seta esquerda
            if (player.x > 0) player.x -= player.speed;
            break;
          case 39: // Seta direita
            if (player.x < canvas.width - player.width) player.x += player.speed;
            break;
        }
      }
    }

// Função para iniciar o jogo
    function startGame() {
      document.addEventListener("keydown", movePlayer);

const gameLoop = setInterval(() => {
        draw();
        update();

if (gameover) clearInterval(gameLoop);
      }, 10);
    }

// Iniciar o jogo quando a página carregar
    window.onload = startGame;
  </script>
</body>
</html>