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

No:531

246

←

Prev Next

→

Your standing at a line and can see a basket ball ..ALL
Developer User3011｜Date and time 23/6/15 11:37:23
Build time 65.561 sec｜Game capacity 5.751KB｜

Script

Here is a possible implementation using HTML, CSS, and JavaScript:

Score: 0

Time: 15

Game Over

Your score is

To play the game, open the HTML file in a web browser that supports JavaScript (such as Google Chrome or Mozilla Firefox) and click on the ”Start Game” button. Then, use your mouse or finger to flick the ball towards the basket. Every time you make a basket before the time runs out, you will score a point. The game ends after 15 seconds, and your final score will be displayed. You can then click the ”Play Again” button to restart the game. The game is designed to work on both desktop and mobile devices, and uses an emoji-style basketball for the ball.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Here is a possible implementation using HTML, CSS, and JavaScript:

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Basketball Flick Game</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 2em;
        background-color: #333;
        color: white;
      }
      #canvas {
        width: 100%;
        height: 100%;
        background-image: url('basketball_hoop.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
      }
      #score {
        position: absolute;
        top: 10px;
        left: 10px;
      }
      #time {
        position: absolute;
        top: 10px;
        right: 10px;
      }
      #overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
      }
      #overlay h1 {
        font-size: 3em;
        margin-top: 30%;
      }
      #button {
        font-size: 2em;
        padding: 1em 2em;
        border: none;
        border-radius: 5px;
        background-color: #2196F3;
        color: white;
        text-shadow: 1px 1px 2px black;
        cursor: pointer;
      }
      #button:hover {
        background-color: #0D47A1;
      }
    </style>
  </head>
  <body>
    <div id="canvas"></div>
    <div id="score">Score: 0</div>
    <div id="time">Time: 15</div>
    <div id="overlay">
      <h1>Game Over</h1>
      <p>Your score is <span id="final-score"></span></p>
      <button id="button">Play Again</button>
    </div>
    <script>
      // Constants
      var CANVAS_WIDTH = window.innerWidth;
      var CANVAS_HEIGHT = window.innerHeight;
      var BALL_SIZE = Math.min(CANVAS_WIDTH, CANVAS_HEIGHT) / 10;
      var BALL_SPEED = BALL_SIZE * 2;
      var SCORE_PER_GOAL = 1;
      var TIME_LIMIT = 15;
      
      // Variables
      var canvas = document.getElementById('canvas');
      var scoreElement = document.getElementById('score');
      var timeElement = document.getElementById('time');
      var overlayElement = document.getElementById('overlay');
      var finalScoreElement = document.getElementById('final-score');
      var buttonElement = document.getElementById('button');
      var context = canvas.getContext('2d');
      var ball = {
        x: CANVAS_WIDTH / 2,
        y: CANVAS_HEIGHT - BALL_SIZE / 2,
        dx: 0,
        dy: 0,
        color: 'orange',
        radius: BALL_SIZE / 2
      };
      var score = 0;
      var time = TIME_LIMIT;
      var isRunning = false;
      
      // Functions
      function draw() {
        context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
        context.beginPath();
        context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        context.fillStyle = ball.color;
        context.fill();
        context.closePath();
      }
      
      function updateBall() {
        ball.x += ball.dx;
        ball.y += ball.dy;
        if (ball.x < ball.radius || ball.x > CANVAS_WIDTH - ball.radius) {
          ball.dx = -ball.dx;
        }
        if (ball.y < ball.radius || ball.y > CANVAS_HEIGHT - ball.radius) {
          ball.dy = -ball.dy;
        }
      }
      
      function checkCollision() {
        var distance = Math.sqrt(Math.pow(ball.x - CANVAS_WIDTH / 2, 2) + Math.pow(ball.y - CANVAS_HEIGHT / 2, 2));
        if (distance < BALL_SIZE / 2) {
          console.log('Goal!');
          score += SCORE_PER_GOAL;
          scoreElement.innerHTML = 'Score: ' + score;
          resetBall();
        }
      }
      
      function resetBall() {
        ball.x = CANVAS_WIDTH / 2;
        ball.y = CANVAS_HEIGHT - BALL_SIZE / 2;
        ball.dx = (Math.random() - 0.5) * BALL_SPEED;
        ball.dy = -BALL_SPEED;
      }
      
      function updateTime() {
        if (isRunning) {
          time--;
          if (time < 0) {
            time = 0;
            isRunning = false;
            gameOver();
          }
          timeElement.innerHTML = 'Time: ' + time;
        }
      }
      
      function startGame() {
        score = 0;
        scoreElement.innerHTML = 'Score: ' + score;
        time = TIME_LIMIT;
        timeElement.innerHTML = 'Time: ' + time;
        isRunning = true;
        overlayElement.style.display = 'none';
        resetBall();
      }
      
      function gameOver() {
        finalScoreElement.innerHTML = score;
        overlayElement.style.display = 'block';
      }
      
      // Event Listeners
      canvas.addEventListener('mousedown', function(event) {
        if (isRunning) {
          ball.dx = (event.clientX - ball.x) / BALL_SPEED * 2;
          ball.dy = (event.clientY - ball.y) / BALL_SPEED * 2;
        }
      });
      
      buttonElement.addEventListener('click', startGame);
      
      // Initialization
      canvas.width = CANVAS_WIDTH;
      canvas.height = CANVAS_HEIGHT;
      setInterval(function() {
        if (isRunning) {
          updateBall();
          draw();
          checkCollision();
          updateTime();
        }
      }, 1000 / 60); // 60 frames per second
    </script>
  </body>
</html>
```

To play the game, open the HTML file in a web browser that supports JavaScript (such as Google Chrome or Mozilla Firefox) and click on the "Start Game" button. Then, use your mouse or finger to flick the ball towards the basket. Every time you make a basket before the time runs out, you will score a point. The game ends after 15 seconds, and your final score will be displayed. You can then click the "Play Again" button to restart the game. The game is designed to work on both desktop and mobile devices, and uses an emoji-style basketball for the ball.