AI game creator

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

No:26684

←

Prev Next

→

Billiards
Developer User13222｜Date and time 23/12/2 3:51:57
Build time 50.631 sec｜Game capacity 2.247KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Billiards Game</title>
  <style>
    canvas {
      background-color: #303030;
    }
  </style>
</head>
<body>
  <canvas id="billiardsCanvas" width="500" height="600"></canvas>

// Pictogram images (ball, cue, pocket)
    var ballImg = new Image();
    ballImg.src = "ball.png";

var cueImg = new Image();
    cueImg.src = "cue.png";

var pocketImg = new Image();
    pocketImg.src = "pocket.png";

// Game variables
    var cueX = 200; // Initial cue position
    var cueY = 500;
    var ballX = 250; // Initial ball position
    var ballY = 300;

// Function to draw game elements
    function drawGame() {
      // Clearing canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Drawing ball
      context.drawImage(ballImg, ballX, ballY, 50, 50);

// Drawing cue
      context.drawImage(cueImg, cueX, cueY, 300, 25);

// Drawing pockets
      context.drawImage(pocketImg, 0, 0, 100, 100);
      context.drawImage(pocketImg, 400, 0, 100, 100);
      context.drawImage(pocketImg, 0, 500, 100, 100);
      context.drawImage(pocketImg, 400, 500, 100, 100);
    }

// Function to handle touch events (for smartphone operation)
    function handleTouch(event) {
      // Updating cue position based on touch event
      cueX = event.touches[0].pageX - 150; // Adjusting for cue's width
    }

// Adding event listener for touch events
    canvas.addEventListener("touchmove", handleTouch, false);

// Function to handle game logic
    function gameLoop() {
      // Updating ball position (example - ball moves to the right)
      ballX += 1;

// Checking if ball collides with the canvas boundaries
      if (ballX + 50 > canvas.width || ballX < 0) {
        ballX -= 1; // Reverting ball's movement to avoid going beyond boundaries
      }

// Drawing game elements
      drawGame();

// Calling gameLoop function again after a small delay (to create animation effect)
      setTimeout(gameLoop, 10);
    }

// Starting the game
    gameLoop();
  </script>
</body>
</html>