AI game creator

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

No:22669

←

Prev Next

→

Billiards
Developer User10166｜Date and time 23/10/23 23:46:09
Build time 101.405 sec｜Game capacity 4.637KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Jogo de Sinuca</title>
<style>
canvas {
  background: #000;
  display: block;
  margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="400"></canvas>

let ballX = 50;
let ballY = 50;
let ballSpeedX = 10;
let ballSpeedY = 4;

const PADDLE_HEIGHT = 100;
const PADDLE_THICKNESS = 10;
let paddle1Y = 250;
let paddle2Y = 250;

let player1Score = 0;
let player2Score = 0;
const WINNING_SCORE = 5;

let showingWinScreen = false;

// Função para calcular o mouse x e y no canvas
function calculateMousePos(evt) {
  const rect = canvas.getBoundingClientRect();
  const root = document.documentElement;
  const mouseX = evt.clientX - rect.left - root.scrollLeft;
  const mouseY = evt.clientY - rect.top - root.scrollTop;
  return {
    x: mouseX,
    y: mouseY
  };
}

// Função para reiniciar o jogo
function handleMouseClick(evt) {
  if (showingWinScreen) {
    player1Score = 0;
    player2Score = 0;
    showingWinScreen = false;
  }
}

// Função para inicializar o jogo
function gameStart() {
  canvas = document.getElementById('gameCanvas');
  canvasContext = canvas.getContext('2d');

const framesPerSecond = 30;
  setInterval(updateGame, 1000 / framesPerSecond);

canvas.addEventListener('mousedown', handleMouseClick);

// Movimento do paddle do lado esquerdo controlado pelo mouse
  canvas.addEventListener('mousemove', (evt) => {
    const mousePos = calculateMousePos(evt);
    paddle1Y = mousePos.y - PADDLE_HEIGHT / 2;
  });
}

// Função para resetar a bola para o centro
function ballReset() {
  if (player1Score >= WINNING_SCORE || player2Score >= WINNING_SCORE) {
    showingWinScreen = true;
  }

ballSpeedX = -ballSpeedX;
  ballX = canvas.width / 2;
  ballY = canvas.height / 2;
}

// Função para movimentar a bola e os paddles
function moveEverything() {
  if (showingWinScreen) {
    return;
  }
  
  // Movimenta a bola
  ballX += ballSpeedX;
  ballY += ballSpeedY;

// Lógica de colisão das paredes verticais
  if (ballX < 0) {
    if (ballY > paddle1Y && ballY < paddle1Y + PADDLE_HEIGHT) {
      ballSpeedX = -ballSpeedX;

// Cálculo do ângulo de rebatida na bola
      const deltaY = ballY - (paddle1Y + PADDLE_HEIGHT / 2);
      ballSpeedY = deltaY * 0.35;
    } else {
      player2Score++;
      ballReset();
    }
  }
  if (ballX > canvas.width) {
    if (ballY > paddle2Y && ballY < paddle2Y + PADDLE_HEIGHT) {
      ballSpeedX = -ballSpeedX;

// Cálculo do ângulo de rebatida na bola
      const deltaY = ballY - (paddle2Y + PADDLE_HEIGHT / 2);
      ballSpeedY = deltaY * 0.35;
    } else {
      player1Score++;
      ballReset();
    }
  }

// Lógica de colisão das paredes horizontais
  if (ballY < 0 || ballY > canvas.height) {
    ballSpeedY = -ballSpeedY;
  }

// Movimenta o paddle do lado direito
  const paddle2YCenter = paddle2Y + (PADDLE_HEIGHT / 2);
  if (paddle2YCenter < ballY - 35) {
    paddle2Y += 6;
  } else if (paddle2YCenter > ballY + 35) {
    paddle2Y -= 6;
  }
}

// Função para desenhar o fundo do jogo
function drawGameCanvas() {
  // Desenha o fundo
  canvasContext.fillStyle = '#000';
  canvasContext.fillRect(0, 0, canvas.width, canvas.height);

if (showingWinScreen) {
    // Exibe a tela de vitória
    canvasContext.fillStyle = '#fff';
    if (player1Score >= WINNING_SCORE) {
      canvasContext.fillText('Jogador 1 Venceu!', 350, 200);
    } else if (player2Score >= WINNING_SCORE) {
      canvasContext.fillText('Jogador 2 Venceu!', 350, 200);
    }
    canvasContext.fillText('Clique para reiniciar', 350, 500);
    return;
  }

// Desenha a rede
  for (let i = 0; i < canvas.height; i += 40) {
    canvasContext.fillStyle = '#fff';
    canvasContext.fillRect(canvas.width / 2 - 1, i, 2, 20);
  }

// Desenha o paddle do lado esquerdo
  canvasContext.fillStyle = '#fff';
  canvasContext.fillRect(0, paddle1Y, PADDLE_THICKNESS, PADDLE_HEIGHT);

// Desenha o paddle do lado direito
  canvasContext.fillStyle = '#fff';
  canvasContext.fillRect(canvas.width - PADDLE_THICKNESS, paddle2Y, PADDLE_THICKNESS, PADDLE_HEIGHT);

// Desenha a bola
  canvasContext.fillStyle = '#fff';
  canvasContext.beginPath();
  canvasContext.arc(ballX, ballY, 10, 0, Math.PI * 2, true);
  canvasContext.fill();

// Exibe a pontuação
  canvasContext.fillText(player1Score, 100, 100);
  canvasContext.fillText(player2Score, canvas.width - 100, 100);
}

// Função de atualização do jogo
function updateGame() {
  moveEverything();
  drawGameCanvas();
}

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