AI game creator

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

No:36621

←

Prev Next

→

Basketball game
Developer User16850｜Date and time 24/1/18 4:03:40
Build time 14.095 sec｜Game capacity 3.382KB｜

Script

Sure! Here's an example of a single HTML file that implements a simple basketball game using JavaScript:

This HTML file creates a canvas element where the basketball game is drawn. The player can move left and right using the arrow keys and needs to catch the ball to earn points. The score is displayed on the screen. The game loop updates the game state, checks for collisions, and redraws the canvas at a regular interval (every 20 milliseconds in this case).

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's an example of a single HTML file that implements a simple basketball game using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Basketball Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="300" height="500"></canvas>

// Function to initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");

player = {
        x: canvas.width / 2 - 25,
        y: canvas.height - 50,
        width: 50,
        height: 50,
        color: "blue",
        speed: 5,
      };

ball = {
        x: canvas.width / 2 - 10,
        y: canvas.height / 2 - 10,
        width: 20,
        height: 20,
        color: "orange",
        speedX: 2,
        speedY: -2,
      };

score = 0;

// Register event listeners for player movement
      document.addEventListener("keydown", movePlayer);

// Start game loop
      setInterval(updateGame, 20);
    }

// Function to update game state and redraw canvas
    function updateGame() {
      moveBall();
      drawCanvas();
      checkCollision();
      updateScore();
    }

// Function to handle player movement
    function movePlayer(event) {
      if (event.key === "ArrowLeft" && player.x > 0) {
        player.x -= player.speed;
      } else if (event.key === "ArrowRight" && player.x + player.width < canvas.width) {
        player.x += player.speed;
      }
    }

// Function to move the ball
    function moveBall() {
      ball.x += ball.speedX;
      ball.y += ball.speedY;

if (ball.x + ball.width > canvas.width || ball.x < 0) {
        ball.speedX *= -1;
      }

if (ball.y + ball.height > canvas.height || ball.y < 0) {
        ball.speedY *= -1;
      }
    }

// Function to check collision between ball and player
    function checkCollision() {
      if (
        ball.x < player.x + player.width &&
        ball.x + ball.width > player.x &&
        ball.y < player.y + player.height &&
        ball.y + ball.height > player.y
      ) {
        score++;
        resetBall();
      }
    }

// Function to reset the ball position
    function resetBall() {
      ball.x = canvas.width / 2 - 10;
      ball.y = canvas.height / 2 - 10;
    }

// Function to update score
    function updateScore() {
      document.getElementById("score").innerText = "Score: " + score;
    }

// Function to redraw the canvas
    function drawCanvas() {
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
      context.fillStyle = player.color;
      context.fillRect(player.x, player.y, player.width, player.height);

// Draw ball
      context.fillStyle = ball.color;
      context.fillRect(ball.x, ball.y, ball.width, ball.height);
    }

// Initialize the game
    init();
  </script>
</body>
</html>
```