Adiciona uma bola, a bola presica comer todos os quadradinhos, botões de movimento: cima, direita, baixo e esquerda, botões: Pular, resetar e Correr's game

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

No:29152

←

Prev Next

→

Adiciona uma bola, a bola presica comer todos os q..ALL
Developer User14419｜Date and time 23/12/16 8:43:06
Build time 38.991 sec｜Game capacity 4.342KB｜

Script

Aqui está um exemplo de um jogo simples que atende aos requisitos que você mencionou. O jogo tem uma bola que precisa comer todos os quadradinhos na tela. Os botões de movimento permitem que você mova a bola nas direções cima, direita, baixo e esquerda. Também há botões para pular, resetar e correr.

Este é apenas um exemplo simples para lhe dar uma ideia de como começar. Você pode modificar e estilizar o jogo da maneira que desejar. Adicione imagens de pictogramas ou personalize-o conforme necessário.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Jogo da Bola</title>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    // Obtendo referência para o elemento canvas
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

// Variáveis do jogo
    let ballX = 200; // Posição inicial da bola
    let ballY = 200;
    let squares = [
      { x: 50, y: 50, eaten: false },
      { x: 150, y: 50, eaten: false },
      { x: 250, y: 50, eaten: false },
      { x: 50, y: 150, eaten: false },
      { x: 150, y: 150, eaten: false },
      { x: 250, y: 150, eaten: false },
      { x: 50, y: 250, eaten: false },
      { x: 150, y: 250, eaten: false },
      { x: 250, y: 250, eaten: false }
    ];

// Função para desenhar o jogo na tela
    function draw() {
      // Limpar o canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Desenhar a bola
      context.beginPath();
      context.arc(ballX, ballY, 10, 0, 2 * Math.PI);
      context.fillStyle = 'green';
      context.fill();
      context.closePath();

// Desenhar os quadradinhos não comidos
      squares.forEach(square => {
        if (!square.eaten) {
          context.fillStyle = 'black';
          context.fillRect(square.x, square.y, 30, 30);
        }
      });
    }

// Função para verificar colisão entre a bola e os quadradinhos
    function checkCollision() {
      squares.forEach(square => {
        if (!square.eaten && ballX >= square.x && ballX <= square.x + 30 && ballY >= square.y && ballY <= square.y + 30) {
          square.eaten = true;
        }
      });
    }

// Funções para movimentar a bola
    function moveUp() {
      ballY -= 10;
      checkCollision();
    }

function moveRight() {
      ballX += 10;
      checkCollision();
    }

function moveDown() {
      ballY += 10;
      checkCollision();
    }

function moveLeft() {
      ballX -= 10;
      checkCollision();
    }

// Funções dos botões
    function jump() {
      ballY -= 50;
      checkCollision();
    }

function reset() {
      ballX = 200;
      ballY = 200;
      squares.forEach(square => square.eaten = false);
    }

function run() {
      ballX += 20;
      checkCollision();
    }

// Mapeando os eventos de toque nos botões
    document.getElementById('up-button').addEventListener('click', moveUp);
    document.getElementById('right-button').addEventListener('click', moveRight);
    document.getElementById('down-button').addEventListener('click', moveDown);
    document.getElementById('left-button').addEventListener('click', moveLeft);
    document.getElementById('jump-button').addEventListener('click', jump);
    document.getElementById('reset-button').addEventListener('click', reset);
    document.getElementById('run-button').addEventListener('click', run);

// Função para atualizar a tela do jogo
    function gameLoop() {
      draw();
      requestAnimationFrame(gameLoop);
    }

gameLoop();
  </script>

<div>
    <button id="up-button" style="font-size: 30px">⇧</button>
  </div>
  <div>
    <button id="left-button" style="font-size: 30px">⇦</button>
    <button id="right-button" style="font-size: 30px">⇨</button>
  </div>
  <div>
    <button id="down-button" style="font-size: 30px">⇩</button>
  </div>

<div>
    <button id="jump-button" style="font-size: 30px">Pular</button>
    <button id="reset-button" style="font-size: 30px">Resetar</button>
    <button id="run-button" style="font-size: 30px">Correr</button>
  </div>
</body>
</html>
```