Crie um jogo matemático estilo Zuma's game

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

No:20312

←

Prev Next

→

Crie um jogo matemático estilo Zuma
Developer User9013｜Date and time 23/10/9 4:56:26
Build time 29.73 sec｜Game capacity 4.536KB｜

Script

Claro, vou criar um jogo matemático no estilo Zuma para você. Aqui está o código HTML que você pode copiar e colar em um arquivo HTML:

Este código cria um jogo matemático estilo Zuma, onde você deve clicar nas bolas para removê-las da tela. O objetivo é evitar que as bolas se acumulem e formem três ou mais bolas consecutivas com o mesmo valor. As bolas são representadas por pictogramas através de diferentes cores de fundo. Cada bola tem um valor de 1 a 7 associado a ela. Para remover uma bola, você deve clicar nela se houver pelo menos uma bola do mesmo valor à esquerda ou à direita. O jogo adiciona novas bolas aleatórias a cada 5 segundos e verifica se você perdeu o jogo quando três ou mais bolas consecutivas com o mesmo valor são formadas. Espero que goste do jogo!

←

Prev　Next

→ 　

Back　

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

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

Claro, vou criar um jogo matemático no estilo Zuma para você. Aqui está o código HTML que você pode copiar e colar em um arquivo HTML:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Jogo Matemático Zuma</title>
  <style>
    /* Estilos para a tela e os pictogramas */
    #canvas {
      width: 100%;
      height: 100%;
      background-color: #f7f7f7;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .ball {
      width: 50px;
      height: 50px;
      border-radius: 25px;
      margin: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      color: white;
      cursor: pointer;
    }
    .ball[data-value="1"] { background-color: #e74c3c; }
    .ball[data-value="2"] { background-color: #3498db; }
    .ball[data-value="3"] { background-color: #27ae60; }
    .ball[data-value="4"] { background-color: #f1c40f; }
    .ball[data-value="5"] { background-color: #8e44ad; }
    .ball[data-value="6"] { background-color: #d35400; }
    .ball[data-value="7"] { background-color: #2c3e50; }
  </style>
</head>
<body>
  <div id="canvas"></div>

// Função para gerar um número aleatório entre min e max (inclusive)
    function randomNumber(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

// Verifica se as bolas adjacentes têm o mesmo valor e as remove
    function checkCombos() {
      let comboFound = false;
      for (let i = 0; i < balls.length; i++) {
        if (balls[i] === balls[i + 1] && balls[i] === balls[i + 2]) {
          balls.splice(i, 3);
          comboFound = true;
          break;
        }
      }
      if (comboFound) {
        renderBalls();
        checkCombos();
      }
    }

// Preenche o canvas com as bolas
    function renderBalls() {
      canvas.innerHTML = "";
      for (let i = 0; i < balls.length; i++) {
        const ball = document.createElement("div");
        ball.classList.add("ball");
        ball.dataset.value = balls[i];
        ball.textContent = balls[i];
        ball.addEventListener("click", () => shootBall(i));
        canvas.appendChild(ball);
      }
    }

// Adiciona novas bolas ao array de bolas
    function addBalls(num) {
      for (let i = 0; i < num; i++) {
        balls.unshift(randomNumber(1, 7));
      }
      renderBalls();
    }

// Verifica se há bolas consecutivas com o mesmo valor
    function isGameOver() {
      for (let i = 0; i < balls.length - 2; i++) {
        if (balls[i] === balls[i + 1] && balls[i] === balls[i + 2]) {
          return true;
        }
      }
      return false;
    }

// Função chamada quando uma bola é clicada
    function shootBall(index) {
      if (index < 0 || index >= balls.length) return;

const selectedBall = balls[index];
      const leftBall = balls[index - 1];
      const rightBall = balls[index + 1];

if ((leftBall !== undefined && selectedBall === leftBall) ||
          (rightBall !== undefined && selectedBall === rightBall)) {
        balls.splice(index, 1);
        renderBalls();
        checkCombos();
      }
    }

const canvas = document.getElementById("canvas");
    const balls = [];

// Inicia o jogo com 5 bolas
    addBalls(5);

// Adiciona bolas aleatórias a cada 5 segundos
    setInterval(() => {
      addBalls(randomNumber(1, 3));
      if (isGameOver()) {
        alert("Fim de jogo! Você perdeu.");
        balls.length = 0;
        renderBalls();
      }
    }, 5000);

</script>
</body>
</html>
```

As bolas são representadas por pictogramas através de diferentes cores de fundo. Cada bola tem um valor de 1 a 7 associado a ela. Para remover uma bola, você deve clicar nela se houver pelo menos uma bola do mesmo valor à esquerda ou à direita.

O jogo adiciona novas bolas aleatórias a cada 5 segundos e verifica se você perdeu o jogo quando três ou mais bolas consecutivas com o mesmo valor são formadas.

Espero que goste do jogo!