Tetris

Interação e Prompts para a criação do jogo no ChatGPT GPT-4.

User: Crie um jogo em HMTL, CSS e Javascript. O jogo é o Tetris. Crie pontuação e velocidade de nível a medida que atingir uma pontuação. Crie cores diferentes para os blocos. Use uma paleta de cores flat.

ChatGPT: Como um modelo de linguagem AI, eu não posso criar arquivos diretamente, mas posso te dar um esboço de como você pode criar um jogo de Tetris usando HTML, CSS e JavaScript. Vamos dividir isso em partes: HTML, CSS e JavaScript.

HTML:

Crie um arquivo chamado "index.html" e adicione o seguinte código:

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tetris</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <canvas id="gameCanvas" width="320" height="640"></canvas>
    <div class="sidebar">
      <h1>Tetris</h1>
      <p>Pontuação: <span id="score">0</span></p>
      <p>Nível: <span id="level">1</span></p>
    </div>
  </div>
  <script src="tetris.js"></script>
</body>
</html>

CSS:

Crie um arquivo chamado "styles.css" e adicione o seguinte código:

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gameCanvas {
  border: 1px solid #000;
}

.sidebar {
  margin-left: 20px;
}

h1 {
  margin: 0;
  font-size: 24px;
}

p {
  margin: 5px 0;
}

JavaScript:

Crie um arquivo chamado "tetris.js" e adicione o seguinte código básico:

// Configuração do jogo
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const blockSize = 32;
const rows = canvas.height / blockSize;
const cols = canvas.width / blockSize;
const colors = ['#1abc9c', '#3498db', '#9b59b6', '#e67e22', '#e74c3c', '#f1c40f', '#2ecc71'];

// Variáveis do jogo
let score = 0;
let level = 1;
let speed = 1000;

// Função para desenhar blocos
function drawBlock(x, y, color) {
  // Seu código para desenhar blocos aqui
}

// Função para criar peças
function createPiece() {
  // Seu código para criar peças aleatórias aqui
}

// Função para verificar colisões
function checkCollision() {
  // Seu código para verificar colisões aqui
}

// Função para mover peças
function movePiece() {
  // Seu código para mover peças aqui
}

// Função para rodar peças
function rotatePiece() {
  // Seu código para rodar peças aqui
}

// Função para atualizar o jogo
function updateGame() {
  // Seu código para atualizar o jogo aqui
}

// Função para iniciar o jogo
function startGame() {
  // Seu código para iniciar o jogo aqui
}

// Eventos do teclado
document.addEventListener

User: continue "// Eventos do teclado document.addEventListener"

ChatGPT: Continuando o código JavaScript:

// Eventos do teclado
document.addEventListener('keydown', (e) => {
  switch (e.key) {
    case 'ArrowUp':
      rotatePiece();
      break;
    case 'ArrowRight':
      movePiece(1, 0);
      break;
    case 'ArrowDown':
      movePiece(0, 1);
      break;
    case 'ArrowLeft':
      movePiece(-1, 0);
      break;
  }
});

// Iniciar o jogo
startGame();

Agora você tem um esboço básico para o jogo de Tetris. Você precisará preencher as funções drawBlock, createPiece, checkCollision, movePiece, rotatePiece, updateGame e startGame com a lógica apropriada. Além disso, você pode adicionar condições para aumentar a pontuação e a velocidade do nível à medida que os jogadores atingem determinadas pontuações. Este esboço deve servir como um ponto de partida para criar seu próprio jogo de Tetris. Lembre-se de que esta implementação é básica e pode ser expandida e aprimorada para atender às suas necessidades específicas.

User: Crie os conteúdos das funções drawBlock, createPiece, checkCollision, movePiece, rotatePiece, updateGame e startGame com a lógica apropriada.

ChatGPT: Aqui está uma implementação básica das funções mencionadas:

// Função para desenhar blocos
function drawBlock(x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
  ctx.strokeStyle = '#000';
  ctx.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
}

// Função para criar peças
const pieces = [
  [
    [1, 1, 1],
    [0, 1, 0]
  ],
  [
    [0, 1, 1],
    [1, 1, 0]
  ],
  [
    [1, 1, 0],
    [0, 1, 1]
  ],
  [
    [1, 1],
    [1, 1]
  ],
  [
    [1, 1, 0],
    [1, 1, 0],
    [0, 0, 1]
  ],
  [
    [1, 0, 0],
    [1, 1, 1]
  ],
  [
    [0, 0, 1],
    [1, 1, 1]
  ]
];

function createPiece() {
  const piece = {
    x: Math.floor(cols / 2) - 1,
    y: 0,
    shape: pieces[Math.floor(Math.random() * pieces.length)],
    color: colors[Math.floor(Math.random() * colors.length)]
  };

  return piece;
}

let currentPiece = createPiece();
let board = Array.from({ length: rows }, () => Array(cols).fill(0));

// Função para verificar colisões
function checkCollision(x, y, shape) {
  for (let r = 0; r < shape.length; r++) {
    for (let c = 0; c < shape[r].length; c++) {
      if (shape[r][c] && (board[y + r] === undefined || board[y + r][x + c] === undefined || board[y + r][x + c])) {
        return true;
      }
    }
  }
  return false;
}

// Função para mover peças
function movePiece(x, y) {
  if (!checkCollision(currentPiece.x + x, currentPiece.y + y, currentPiece.shape)) {
    currentPiece.x += x;
    currentPiece.y += y;
  } else if (y === 1) {
    addToBoard();
    currentPiece = createPiece();
    if (checkCollision(currentPiece.x, currentPiece.y, currentPiece.shape)) {
      startGame();
    }
  }
}

// Função para adicionar peça ao tabuleiro
function addToBoard() {
  for (let r = 0; r < currentPiece.shape.length; r++) {
    for (let c = 0; c < currentPiece.shape[r].length; c++) {
      if (currentPiece.shape[r][c]) {
        board[currentPiece.y + r][currentPiece.x + c] = currentPiece.color;
      }
    }
  }

  // Verificar e remover linhas completas
  for (let r = board.length - 1; r >= 0; ) {
    if (board[r].every(cell => !!cell)) {
      score += 100;
      level = Math.floor(score / 1000) + 1;
      speed = 1000 - (level - 1) * 100;
      board.splice(r, 1);
      board.unshift(Array(cols).fill(0));
    } else {
      r

User: continue " board.unshift(Array(cols).fill(0)); } else { r"

ChatGPT: Continuando o código JavaScript:

      board.unshift(Array(cols).fill(0));
    } else {
      r--;
    }
  }

  // Atualizar a pontuação e o nível
  document.getElementById('score').textContent = score;
  document.getElementById('level').textContent = level;
}

// Função para rodar peças
function rotatePiece() {
  const rotated = currentPiece.shape[0].map((_, c) => currentPiece.shape.map(row => row[c])).reverse();
  if (!checkCollision(currentPiece.x, currentPiece.y, rotated)) {
    currentPiece.shape = rotated;
  }
}

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

  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      if (board[r][c]) {
        drawBlock(c, r, board[r][c]);
      }
    }
  }

  for (let r = 0; r < currentPiece.shape.length; r++) {
    for (let c = 0; c < currentPiece.shape[r].length; c++) {
      if (currentPiece.shape[r][c]) {
        drawBlock(currentPiece.x + c, currentPiece.y + r, currentPiece.color);
      }
    }
  }
}

// Função para atualizar o jogo
function updateGame() {
  setTimeout(() => {
    movePiece(0, 1);
    drawGame();
    updateGame();
  }, speed);
}

// Função para iniciar o jogo
function startGame() {
  score = 0;
  level = 1;
  speed = 1000;
  board = Array.from({ length: rows }, () => Array(cols).fill(0));
  currentPiece = createPiece();
  updateGame();
}

// Iniciar o jogo
startGame();

Agora você tem uma implementação completa e básica do jogo Tetris usando HTML, CSS e JavaScript. Lembre-se de que esta implementação é simples e pode ser expandida e aprimorada para atender às suas necessidades específicas. Além disso, considere adicionar mais funcionalidades, como pausar o jogo, salvar a pontuação mais alta ou adicionar animações e efeitos sonoros.

User: Ajuste o código para que a pontuação seja contabilizada corretamente de acordo com o jogo Tetris e o nível avance a medida que o usuário faça a pontuação correta. Crie uma tela de game over.

ChatGPT: Aqui está uma versão atualizada do código JavaScript que contabiliza a pontuação corretamente, avança os níveis de acordo com a pontuação e adiciona uma tela de "Game Over":

// Variáveis adicionais do jogo
let gameOver = false;
const gameContainer = document.querySelector('.container');

// Função para atualizar a pontuação
function updateScore(linesCleared) {
  const scoreValues = [0, 100, 300, 500, 800];

  score += scoreValues[linesCleared] * level;
  document.getElementById('score').textContent = score;

  const newLevel = Math.floor(score / 1000) + 1;
  if (newLevel > level) {
    level = newLevel;
    speed = 1000 - (level - 1) * 100;
    document.getElementById('level').textContent = level;
  }
}

// Função para exibir a tela de "Game Over"
function showGameOver() {
  gameOver = true;
  const gameOverText = document.createElement('div');
  gameOverText.innerHTML = `
    <h2>Game Over</h2>
    <p>Pontuação: ${score}</p>
    <button id="restartButton">Reiniciar</button>
  `;
  gameOverText.style.textAlign = 'center';
  gameContainer.appendChild(gameOverText);

  document.getElementById('restartButton').addEventListener('click', () => {
    gameContainer.removeChild(gameOverText);
    gameOver = false;
    startGame();
  });
}

// Alterações na função addToBoard
function addToBoard() {
  // ... (mantenha o código existente)

  // Verificar e remover linhas completas
  let linesCleared = 0;
  for (let r = board.length - 1; r >= 0; ) {
    if (board[r].every(cell => !!cell)) {
      linesCleared++;
      board.splice(r, 1);
      board.unshift(Array(cols).fill(0));
    } else {
      r--;
    }
  }

  if (linesCleared > 0) {
    updateScore(linesCleared);
  }
}

// Alterações na função movePiece
function movePiece(x, y) {
  // ... (mantenha o código existente)

  if (y === 1) {
    addToBoard();
    currentPiece = createPiece();
    if (checkCollision(currentPiece.x, currentPiece.y, currentPiece.shape)) {
      showGameOver();
    }
  }
}

// Alterações na função startGame
function startGame() {
  if (!gameOver) {
    score = 0;
    level = 1;
    speed = 1000;
    board = Array.from({ length: rows }, () => Array(cols).fill(0));
    currentPiece = createPiece();
    document.getElementById('score').textContent = score;
    document.getElementById('level').textContent = level;
    updateGame();
  }
}

// Iniciar o jogo
startGame();

Agora, a pontuação é atualizada corretamente com base no número de linhas eliminadas e multiplicada pelo nível atual. O jogo avança de nível conforme a pontuação aumenta. Além disso, uma tela de "Game Over" é exibida quando o jogo termina, e o jogador tem a opção de reiniciar o jogo clicando no botão "Reiniciar".

User: Escreva o código javascript completo.

ChatGPT: Aqui está o código JavaScript completo, incluindo as alterações mencionadas anteriormente:

// Configuração do jogo
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const blockSize = 32;
const rows = canvas.height / blockSize;
const cols = canvas.width / blockSize;
const colors = ['#1abc9c', '#3498db', '#9b59b6', '#e67e22', '#e74c3c', '#f1c40f', '#2ecc71'];

// Variáveis do jogo
let score = 0;
let level = 1;
let speed = 1000;
let gameOver = false;
const gameContainer = document.querySelector('.container');

// Função para desenhar blocos
function drawBlock(x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
  ctx.strokeStyle = '#000';
  ctx.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
}

// Função para criar peças
const pieces = [
  [
    [1, 1, 1],
    [0, 1, 0]
  ],
  [
    [0, 1, 1],
    [1, 1, 0]
  ],
  [
    [1, 1, 0],
    [0, 1, 1]
  ],
  [
    [1, 1],
    [1, 1]
  ],
  [
    [1, 1, 0],
    [1, 1, 0],
    [0, 0, 1]
  ],
  [
    [1, 0, 0],
    [1, 1, 1]
  ],
  [
    [0, 0, 1],
    [1, 1, 1]
  ]
];

function createPiece() {
  const piece = {
    x: Math.floor(cols / 2) - 1,
    y: 0,
    shape: pieces[Math.floor(Math.random() * pieces.length)],
    color: colors[Math.floor(Math.random() * colors.length)]
  };

  return piece;
}

let currentPiece = createPiece();
let board = Array.from({ length: rows }, () => Array(cols).fill(0));

// Função para verificar colisões
function checkCollision(x, y, shape) {
  for (let r = 0; r < shape.length; r++) {
    for (let c = 0; c < shape[r].length; c++) {
      if (shape[r][c] && (board[y + r] === undefined || board[y + r][x + c] === undefined || board[y + r][x + c])) {
        return true;
      }
    }
  }
  return false;
}

// Função para mover peças
function movePiece(x, y) {
  if (!checkCollision(currentPiece.x + x, currentPiece.y + y, currentPiece.shape)) {
    currentPiece.x += x;
    currentPiece.y += y;
  } else if (y === 1) {
    addToBoard();
    currentPiece = createPiece();
    if (checkCollision(currentPiece.x, currentPiece.y, currentPiece.shape)) {
      showGameOver();
    }
  }
}

// Função para adicionar peça ao tabuleiro
function addToBoard() {
  for (let r = 0; r < currentPiece.shape.length; r++) {
    for (let c = 0; c < currentPiece.shape[r].length; c++) {
      if (current

User: continue " if (current"

ChatGPT: Continuando o código JavaScript:

      if (currentPiece.shape[r][c]) {
        board[currentPiece.y + r][currentPiece.x + c] = currentPiece.color;
      }
    }
  }

  // Verificar e remover linhas completas
  let linesCleared = 0;
  for (let r = board.length - 1; r >= 0; ) {
    if (board[r].every(cell => !!cell)) {
      linesCleared++;
      board.splice(r, 1);
      board.unshift(Array(cols).fill(0));
    } else {
      r--;
    }
  }

  if (linesCleared > 0) {
    updateScore(linesCleared);
  }
}

// Função para atualizar a pontuação
function updateScore(linesCleared) {
  const scoreValues = [0, 100, 300, 500, 800];

  score += scoreValues[linesCleared] * level;
  document.getElementById('score').textContent = score;

  const newLevel = Math.floor(score / 1000) + 1;
  if (newLevel > level) {
    level = newLevel;
    speed = 1000 - (level - 1) * 100;
    document.getElementById('level').textContent = level;
  }
}

// Função para exibir a tela de "Game Over"
function showGameOver() {
  gameOver = true;
  const gameOverText = document.createElement('div');
  gameOverText.innerHTML = `
    <h2>Game Over</h2>
    <p>Pontuação: ${score}</p>
    <button id="restartButton">Reiniciar</button>
  `;
  gameOverText.style.textAlign = 'center';
  gameContainer.appendChild(gameOverText);

  document.getElementById('restartButton').addEventListener('click', () => {
    gameContainer.removeChild(gameOverText);
    gameOver = false;
    startGame();
  });
}

// Função para rodar peças
function rotatePiece() {
  const rotated = currentPiece.shape[0].map((_, c) => currentPiece.shape.map(row => row[c])).reverse();
  if (!checkCollision(currentPiece.x, currentPiece.y, rotated)) {
    currentPiece.shape = rotated;
  }
}

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

  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      if (board[r][c]) {
        drawBlock(c, r, board[r][c]);
      }
    }
  }

  for (let r = 0; r < currentPiece.shape.length; r++) {
    for (let c = 0; c < currentPiece.shape[r].length; c++) {
      if (currentPiece.shape[r][c]) {
        drawBlock(currentPiece.x + c, currentPiece.y + r, currentPiece.color);
      }
    }
  }
}

// Função para atualizar o jogo
function updateGame() {
  setTimeout(() => {
    movePiece(0, 1);
    drawGame();
    updateGame();
  }, speed);
}

// Função para iniciar o jogo
function startGame() {
  if (!gameOver) {
    score = 0;
    level = 1;
    speed = 1000;
    board = Array.from({ length: rows }, () => Array(cols).fill(0));
    currentPiece = createPiece();
    document.getElementById('score').textContent = score;
    document.getElementById('level').textContent = level;
    update

User: continue "document.getElementById('level').textContent = level; update"

ChatGPT: Continuando o código JavaScript:

    document.getElementById('level').textContent = level;
    updateGame();
  }
}

// Eventos do teclado
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') {
    movePiece(-1, 0);
  } else if (e.key === 'ArrowRight') {
    movePiece(1, 0);
  } else if (e.key === 'ArrowDown') {
    movePiece(0, 1);
  } else if (e.key === ' ') {
    rotatePiece();
  }
  drawGame();
});

// Iniciar o jogo
startGame();

Agora você tem o código JavaScript completo para o jogo Tetris, que inclui pontuação, aumento de nível, e uma tela de "Game Over". Os eventos do teclado permitem que o jogador controle o jogo usando as setas esquerda, direita e para baixo, bem como a tecla de espaço para girar as peças.

User: Ajuste as funções de GameOver, está com um loop incorreto.

ChatGPT: Desculpe pela confusão. Vou ajustar a função updateGame para corrigir o problema de loop incorreto e evitar a chamada dessa função quando o jogo estiver em "Game Over":

// Função para atualizar o jogo
function updateGame() {
  if (!gameOver) {
    setTimeout(() => {
      movePiece(0, 1);
      drawGame();
      updateGame();
    }, speed);
  }
}

// Alterações na função startGame
function startGame() {
  if (!gameOver) {
    score = 0;
    level = 1;
    speed = 1000;
    board = Array.from({ length: rows }, () => Array(cols).fill(0));
    currentPiece = createPiece();
    document.getElementById('score').textContent = score;
    document.getElementById('level').textContent = level;
    updateGame();
  }
}

// Alterações na função showGameOver
function showGameOver() {
  gameOver = true;
  const gameOverText = document.createElement('div');
  gameOverText.innerHTML = `
    <h2>Game Over</h2>
    <p>Pontuação: ${score}</p>
    <button id="restartButton">Reiniciar</button>
  `;
  gameOverText.style.textAlign = 'center';
  gameContainer.appendChild(gameOverText);

  document.getElementById('restartButton').addEventListener('click', () => {
    gameContainer.removeChild(gameOverText);
    gameOver = false;
    startGame();
  });
}

Com essas alterações, o loop incorreto deve ser corrigido e a função updateGame não será chamada continuamente quando o jogo estiver em "Game Over".

User: Crie mais blocos de acordo com o padrão do tetris.

ChatGPT: No Tetris original, há sete peças diferentes conhecidas como Tetriminos. Estas peças já estão incluídas no código fornecido anteriormente. No entanto, se você deseja adicionar mais peças para criar uma versão personalizada do Tetris, você pode seguir o mesmo padrão e adicionar novos blocos ao array pieces. Por exemplo, aqui estão algumas novas peças adicionadas ao jogo:

const pieces = [
  // Peças originais
  [
    [1, 1, 1],
    [0, 1, 0]
  ],
  [
    [0, 1, 1],
    [1, 1, 0]
  ],
  [
    [1, 1, 0],
    [0, 1, 1]
  ],
  [
    [1, 1],
    [1, 1]
  ],
  [
    [1, 1, 0],
    [1, 1, 0],
    [0, 0, 1]
  ],
  [
    [1, 0, 0],
    [1, 1, 1]
  ],
  [
    [0, 0, 1],
    [1, 1, 1]
  ],
  
  // Novas peças personalizadas
  [
    [1, 0],
    [1, 1],
    [0, 1]
  ],
  [
    [0, 1],
    [1, 1],
    [1, 0]
  ],
  [
    [1, 1, 1, 1, 1]
  ],
  [
    [1, 0, 0, 0],
    [1, 1, 1, 1]
  ]
];

Neste exemplo, adicionei quatro novas peças personalizadas ao jogo. Certifique-se de que essas peças possam ser giradas adequadamente e não causem problemas no jogo. Lembre-se de que adicionar mais peças ao jogo pode alterar a dificuldade e a jogabilidade, então ajuste-as conforme necessário.

User: ajuste a função de nível para que o nível avance apenas quando o usuário atingir a pontuação a cada 1.000 pontos. Ao apresentar game over o jogo o nível e a pontuação será zerada.

ChatGPT: Aqui estão as funções ajustadas conforme sua solicitação:

// Função para atualizar a pontuação
function updateScore(linesCleared) {
  const scoreValues = [0, 100, 300, 500, 800];

  score += scoreValues[linesCleared] * level;
  document.getElementById('score').textContent = score;

  const newLevel = Math.floor(score / 1000) + 1;
  if (newLevel > level) {
    level = newLevel;
    speed = 1000 - (level - 1) * 100;
    document.getElementById('level').textContent = level;
  }
}

// Função para exibir a tela de "Game Over"
function showGameOver() {
  gameOver = true;
  const gameOverText = document.createElement('div');
  gameOverText.innerHTML = `
    <h2>Game Over</h2>
    <p>Pontuação: ${score}</p>
    <button id="restartButton">Reiniciar</button>
  `;
  gameOverText.style.textAlign = 'center';
  gameContainer.appendChild(gameOverText);

  document.getElementById('restartButton').addEventListener('click', () => {
    gameContainer.removeChild(gameOverText);
    gameOver = false;
    startGame();
  });
}

// Alterações na função startGame
function startGame() {
  if (!gameOver) {
    score = 0;
    level = 1;
    speed = 1000;
    board = Array.from({ length: rows }, () => Array(cols).fill(0));
    currentPiece = createPiece();
    document.getElementById('score').textContent = score;
    document.getElementById('level').textContent = level;
    updateGame();
  }
}

Com as funções ajustadas, agora o nível avançará a cada 1.000 pontos e, ao apresentar "Game Over", o nível e a pontuação serão zerados.

User: ajuste o código para que os blocos comecem a cair automaticamente.

ChatGPT: Para fazer com que os blocos comecem a cair automaticamente, você pode criar uma função de intervalo que irá mover a peça atual para baixo a cada período específico de tempo. Vou ajustar a função updateGame para incorporar esta mudança:

// Função para atualizar o jogo
function updateGame() {
  if (!gameOver) {
    setTimeout(() => {
      movePiece(0, 1);
      drawGame();
      updateGame();
    }, speed);
  }
}

// Função para iniciar o jogo
function startGame() {
  if (!gameOver) {
    score = 0;
    level = 1;
    speed = 1000;
    board = Array.from({ length: rows }, () => Array(cols).fill(0));
    currentPiece = createPiece();
    document.getElementById('score').textContent = score;
    document.getElementById('level').textContent = level;
    updateGame();
  }
}

Com as funções ajustadas, os blocos começarão a cair automaticamente quando o jogo começar. A velocidade com que os blocos caem será determinada pela variável speed, que é ajustada com base no nível atual.

User: Ajuste a função para que o teclado fique bloqueado até o usuário clicar em reeniciar.

ChatGPT: Para bloquear o teclado até que o usuário clique em "Reiniciar", você pode criar uma variável chamada keyboardEnabled e verificá-la antes de processar os eventos do teclado. Vou ajustar o código para incorporar esta mudança:

let keyboardEnabled = true;

// Eventos do teclado
document.addEventListener('keydown', (e) => {
  if (!keyboardEnabled) return;
  
  if (e.key === 'ArrowLeft') {
    movePiece(-1, 0);
  } else if (e.key === 'ArrowRight') {
    movePiece(1, 0);
  } else if (e.key === 'ArrowDown') {
    movePiece(0, 1);
  } else if (e.key === ' ') {
    rotatePiece();
  }
  drawGame();
});

// Função para exibir a tela de "Game Over"
function showGameOver() {
  gameOver = true;
  keyboardEnabled = false;
  const gameOverText = document.createElement('div');
  gameOverText.innerHTML = `
    <h2>Game Over</h2>
    <p>Pontuação: ${score}</p>
    <button id="restartButton">Reiniciar</button>
  `;
  gameOverText.style.textAlign = 'center';
  gameContainer.appendChild(gameOverText);

  document.getElementById('restartButton').addEventListener('click', () => {
    gameContainer.removeChild(gameOverText);
    gameOver = false;
    keyboardEnabled = true;
    startGame();
  });
}

// Funções startGame e updateGame permanecem as mesmas

Agora, o teclado ficará bloqueado quando o jogo estiver em "Game Over" e será reativado quando o usuário clicar no botão "Reiniciar".

User: Está aparecendo duas vezes o bloco de Game Over como corrigir isso?

ChatGPT: Desculpe pelo inconveniente. Vamos corrigir o problema adicionando uma verificação na função showGameOver para garantir que o elemento "Game Over" seja criado apenas uma vez. Para fazer isso, usaremos uma variável chamada gameOverText que será armazenada fora das funções.

let keyboardEnabled = true;
let gameOverText = null;

// Função para exibir a tela de "Game Over"
function showGameOver() {
  if (gameOverText) return;

  gameOver = true;
  keyboardEnabled = false;
  gameOverText = document.createElement('div');
  gameOverText.innerHTML = `
    <h2>Game Over</h2>
    <p>Pontuação: ${score}</p>
    <button id="restartButton">Reiniciar</button>
  `;
  gameOverText.style.textAlign = 'center';
  gameContainer.appendChild(gameOverText);

  document.getElementById('restartButton').addEventListener('click', () => {
    gameContainer.removeChild(gameOverText);
    gameOverText = null;
    gameOver = false;
    keyboardEnabled = true;
    startGame();
  });
}

// Funções startGame, updateGame e eventos de teclado permanecem as mesmas

Com essa modificação, a função showGameOver criará o elemento "Game Over" apenas uma vez, mesmo que seja chamada várias vezes. Isso deve resolver o problema com a exibição duplicada do bloco "Game Over".

User: Como criar um botão de iniciar e pausar.

ChatGPT: Você pode criar um botão de iniciar e pausar adicionando um botão HTML ao seu arquivo e, em seguida, usando JavaScript para alternar entre os estados de "Iniciar" e "Pausar". Aqui está como fazer isso:

Adicione o botão de iniciar/pausar ao seu HTML:

<button id="startPauseButton">Iniciar</button>

Crie uma variável isPaused e ajuste a função updateGame para verificar se o jogo está pausado:

let isPaused = false;

// Função para atualizar o jogo
function updateGame() {
  if (!gameOver && !isPaused) {
    setTimeout(() => {
      movePiece(0, 1);
      drawGame();
      updateGame();
    }, speed);
  }
}

Adicione um manipulador de eventos para o botão de iniciar/pausar:

document.getElementById('startPauseButton').addEventListener('click', () => {
  isPaused = !isPaused;

  if (isPaused) {
    document.getElementById('startPauseButton').textContent = 'Continuar';
  } else {
    document.getElementById('startPauseButton').textContent = 'Pausar';
    updateGame();
  }
});

Agora, ao clicar no botão, o jogo será pausado e o texto do botão mudará para "Continuar". Quando você clicar novamente no botão, o jogo continuará e o texto do botão voltará para "Pausar".

User: Ajuste o código para exibir o bloco de game over centralizado dentro do canvas e coloque um overlay .

ChatGPT: Para exibir o bloco "Game Over" centralizado dentro do canvas e adicionar um overlay, siga estas etapas:

Crie o CSS para o overlay e o bloco "Game Over" centralizado:

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.game-over-container {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

Ajuste a função showGameOver para incluir o overlay e o bloco "Game Over" centralizado:

function showGameOver() {
  if (gameOverText) return;

  gameOver = true;
  keyboardEnabled = false;

  gameOverText = document.createElement('div');
  gameOverText.className = 'overlay';

  const gameOverContainer = document.createElement('div');
  gameOverContainer.className = 'game-over-container';

  gameOverContainer.innerHTML = `
    <h2>Game Over</h2>
    <p>Pontuação: ${score}</p>
    <button id="restartButton">Reiniciar</button>
  `;

  gameOverText.appendChild(gameOverContainer);
  gameContainer.appendChild(gameOverText);

  document.getElementById('restartButton').addEventListener('click', () => {
    gameContainer.removeChild(gameOverText);
    gameOverText = null;
    gameOver = false;
    keyboardEnabled = true;
    startGame();
  });
}

Com essas alterações, o bloco "Game Over" será exibido centralizado dentro do canvas e com um overlay semi-transparente. Lembre-se de adicionar o elemento gameContainer no seu HTML, caso ainda não tenha feito. Ele deve envolver o elemento canvas:

<div id="gameContainer" style="position: relative;">
  <canvas id="gameCanvas" width="320" height="640"></canvas>
</div>

User: Crie também um botão iniciar com um overlay.

ChatGPT: Para criar um botão "Iniciar" com um overlay, siga estas etapas:

Crie o CSS para o botão "Iniciar" centralizado:

.start-container {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

Crie uma função showStartScreen para exibir o overlay e o botão "Iniciar" centralizado:

function showStartScreen() {
  if (gameOverText) return;

  keyboardEnabled = false;

  gameOverText = document.createElement('div');
  gameOverText.className = 'overlay';

  const startContainer = document.createElement('div');
  startContainer.className = 'start-container';

  startContainer.innerHTML = `
    <h2>Tetris</h2>
    <button id="startButton">Iniciar</button>
  `;

  gameOverText.appendChild(startContainer);
  gameContainer.appendChild(gameOverText);

  document.getElementById('startButton').addEventListener('click', () => {
    gameContainer.removeChild(gameOverText);
    gameOverText = null;
    keyboardEnabled = true;
    startGame();
  });
}

Chame a função showStartScreen logo após a definição da função para exibir a tela inicial assim que o jogo for carregado:

showStartScreen();

Agora, quando o jogo for carregado, será exibida uma tela inicial com um overlay e um botão "Iniciar" centralizado. Ao clicar no botão "Iniciar", o jogo começará e o overlay desaparecerá.

User: Ajuste a função de iniciar para que os blocos só iniciem a cair quando clicar no botão.

ChatGPT: Para fazer com que os blocos só comecem a cair quando o usuário clicar no botão "Iniciar", você pode criar uma variável chamada gameStarted e verificar seu valor antes de permitir que os blocos caiam. Aqui está como ajustar o código:

Adicione a variável gameStarted:

let gameStarted = false;

Ajuste a função updateGame para verificar se o jogo foi iniciado:

// Função para atualizar o jogo
function updateGame() {
  if (!gameOver && !isPaused && gameStarted) {
    setTimeout(() => {
      movePiece(0, 1);
      drawGame();
      updateGame();
    }, speed);
  }
}

Modifique a função showStartScreen para definir gameStarted como true quando o botão "Iniciar" for clicado:

function showStartScreen() {
  if (gameOverText) return;

  keyboardEnabled = false;

  gameOverText = document.createElement('div');
  gameOverText.className = 'overlay';

  const startContainer = document.createElement('div');
  startContainer.className = 'start-container';

  startContainer.innerHTML = `
    <h2>Tetris</h2>
    <button id="startButton">Iniciar</button>
  `;

  gameOverText.appendChild(startContainer);
  gameContainer.appendChild(gameOverText);

  document.getElementById('startButton').addEventListener('click', () => {
    gameContainer.removeChild(gameOverText);
    gameOverText = null;
    keyboardEnabled = true;
    gameStarted = true;
    startGame();
  });
}

Agora, os blocos só começarão a cair quando o usuário clicar no botão "Iniciar" na tela inicial.

User: Ajuste o CSS do sidebar:

Tetris

Pontuação: 0

Nível: 1

Deixe de uma modo atrativo que tenha ligação com jogo.

ChatGPT: Para ajustar o CSS da barra lateral e deixá-la mais atrativa com uma conexão visual ao jogo, você pode adicionar cores e estilos inspirados no Tetris. Aqui está um exemplo de CSS para aplicar na barra lateral:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #202020;
      margin: 0;
    }

    .sidebar {
      background-color: #303030;
      padding: 20px;
      border-radius: 5px;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      width: 200px;
      margin-left: 20px;
    }

    .sidebar h1 {
      font-size: 24px;
      margin-top: 0;
      margin-bottom: 16px;
      text-align: center;
    }

    .sidebar p {
      font-size: 18px;
      margin-bottom: 12px;
    }

    .sidebar span {
      color: #ffcc00;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <h1>Tetris</h1>
    <p>Pontuação: <span id="score">0</span></p>
    <p>Nível: <span id="level">1</span></p>
  </div>
</body>
</html>

Neste exemplo, eu usei uma cor de fundo escura para a barra lateral e para a página, com cores de texto contrastantes e inspiradas no Tetris. A fonte e o espaçamento também foram ajustados para uma aparência mais moderna e clara. Sinta-se à vontade para personalizar ainda mais o design de acordo com suas preferências.

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
README.md		README.md
tetris.html		tetris.html

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Tetris

About

Releases

Packages

Languages

italomsr/tetris-gpt

Folders and files

Latest commit

History

Repository files navigation

Tetris

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages