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

No:26800

←

Prev Next

→

Sinuca
Developer User13247｜Date and time 23/12/2 12:59:43
Build time 102.578 sec｜Game capacity 3.872KB｜

Script

Sinuca

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    * {
      box-sizing: border-box;
    }

body {
      background-color: #f2f2f2;
      font-family: Arial, sans-serif;
      margin: 0;
    }

h1 {
      text-align: center;
      color: #333;
    }

.container {
      max-width: 500px;
      margin: 0 auto;
      padding: 20px;
    }

#canvas {
      width: 500px;
      height: 400px;
      background-color: #333;
    }
</style>
</head>
<body>
<div class="container">
  <h1>Sinuca</h1>
  <canvas id="canvas"></canvas>
</div>

const canvas = document.getElementById("canvas");
    const context = canvas.getContext("2d");

const ballRadius = 10;
    const tableWidth = 500;
    const tableHeight = 400;
    const pocketRadius = 15;

const pockets = [
      { x: pocketRadius, y: pocketRadius },
      { x: tableWidth / 2, y: pocketRadius },
      { x: tableWidth - pocketRadius, y: pocketRadius },
      { x: pocketRadius, y: tableHeight - pocketRadius },
      { x: tableWidth / 2, y: tableHeight - pocketRadius },
      { x: tableWidth - pocketRadius, y: tableHeight - pocketRadius }
    ];

const balls = [
      // Set initial positions for the balls
      { x: tableWidth / 2, y: tableHeight / 2, vx: 0, vy: 0 },
      { x: tableWidth / 2 - 50, y: tableHeight / 2, vx: 0, vy: 0 },
      { x: tableWidth / 2 - 50, y: tableHeight / 2 + 50, vx: 0, vy: 0 },
      { x: tableWidth / 2 - 50, y: tableHeight / 2 - 50, vx: 0, vy: 0 },
      { x: tableWidth / 2 - 100, y: tableHeight / 2 + 25, vx: 0, vy: 0 },
      { x: tableWidth / 2 - 100, y: tableHeight / 2 - 25, vx: 0, vy: 0 },
      { x: tableWidth / 2 - 100, y: tableHeight / 2 + 75, vx: 0, vy: 0 },
      { x: tableWidth / 2 - 100, y: tableHeight / 2 - 75, vx: 0, vy: 0 }
    ];

function drawTable() {
      // Draw table borders
      context.fillStyle = "green";
      context.fillRect(0, 0, tableWidth, tableHeight);
      context.fillStyle = "brown";
      context.fillRect(10, 10, tableWidth - 20, tableHeight - 20);

// Draw pockets
      context.fillStyle = "black";
      for (let pocket of pockets) {
        context.beginPath();
        context.arc(pocket.x, pocket.y, pocketRadius, 0, 2 * Math.PI);
        context.fill();
        context.closePath();
      }
    }

function drawBalls() {
      // Draw balls
      for (let ball of balls) {
        context.fillStyle = "white";
        context.beginPath();
        context.arc(ball.x, ball.y, ballRadius, 0, 2 * Math.PI);
        context.fill();
        context.closePath();
      }
    }

function updateGame() {
      // Update ball positions
      for (let ball of balls) {
        ball.x += ball.vx;
        ball.y += ball.vy;

// Check for collisions with table borders
        if (ball.x - ballRadius < 10 || ball.x + ballRadius > tableWidth - 10) {
          ball.vx *= -1;
        }
        if (ball.y - ballRadius < 10 || ball.y + ballRadius > tableHeight - 10) {
          ball.vy *= -1;
        }

// Check for collisions with pockets
        for (let pocket of pockets) {
          const dx = ball.x - pocket.x;
          const dy = ball.y - pocket.y;
          const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < ballRadius + pocketRadius) {
            // Remove ball from the game
            balls.splice(balls.indexOf(ball), 1);
            break;
          }
        }
      }
    }

function clearCanvas() {
      // Clear canvas
      context.clearRect(0, 0, tableWidth, tableHeight);
    }

function gameLoop() {
      clearCanvas();
      updateGame();
      drawTable();
      drawBalls();
      requestAnimationFrame(gameLoop);
    }

// Start the game loop
    gameLoop();

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