Basketball hoop shooting with fireballs's game

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

No:35278

←

Prev Next

→

Basketball hoop shooting with fireballs
Developer User16475｜Date and time 24/1/13 20:45:20
Build time 13.381 sec｜Game capacity 2.689KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Basketball Hoop Shooting</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>
  <script>
    // Game initialization
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

let score = 0;
    let hoopX = canvas.width / 2;
    let hoopY = canvas.height - 30;
    let ballX = canvas.width / 2;
    let ballY = canvas.height - 50;
    let ballSpeedX = 0;
    let ballSpeedY = 0;
    let isGameOver = false;

// Function to draw the game objects
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw hoop
      ctx.fillStyle = "#000";
      ctx.fillRect(hoopX - 50, hoopY - 10, 100, 20);

// Draw ball
      ctx.fillStyle = "#FF0000";
      ctx.beginPath();
      ctx.arc(ballX, ballY, 10, 0, Math.PI * 2);
      ctx.fill();

// Draw score
      ctx.fillStyle = "#000";
      ctx.font = "16px Arial";
      ctx.fillText("Score: " + score, 10, 20);

if (isGameOver) {
        ctx.fillStyle = "#000";
        ctx.font = "30px Arial";
        ctx.fillText("Game Over!", canvas.width / 2 - 80, canvas.height / 2);
      }
    }

// Function to update game logic
    function update() {
      if (isGameOver) return;

// Move ball by ballSpeed
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// Check if ball went inside the hoop
      if (ballX >= hoopX - 50 && ballX <= hoopX + 50 && ballY >= hoopY - 10 && ballY <= hoopY + 10) {
        score++;
        ballX = canvas.width / 2;
        ballY = canvas.height - 50;
        ballSpeedX = 0;
        ballSpeedY = 0;
      }

// Check if ball went outside the canvas
      if (ballX < 0 || ballX > canvas.width || ballY < 0 || ballY > canvas.height) {
        isGameOver = true;
      }
    }

// Function to handle touch events
    function handleTouch(event) {
      if (isGameOver) return;

// Calculate the distance between touch position and ball position
      let touchX = event.touches[0].clientX - canvas.offsetLeft;
      let touchY = event.touches[0].clientY - canvas.offsetTop;
      let distanceX = touchX - ballX;
      let distanceY = touchY - ballY;

// Set ball speed based on touch distance
      ballSpeedX = distanceX / 10;
      ballSpeedY = distanceY / 10;
    }

// Start the game
    setInterval(function () {
      update();
      draw();
    }, 16); // 60 FPS

// Register touch event handler
    canvas.addEventListener("touchstart", handleTouch);

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