billiards With enemies and movement's game

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

No:8823

165

←

Prev Next

→

billiards With enemies and movement
Developer User4248｜Date and time 23/7/18 15:28:43
Build time 37.516 sec｜Game capacity 4.624KB｜

Script

Sure! Here's an example of a billiards game implemented as a single HTML file using JavaScript. This game assumes smartphone operation and uses pictograms for the balls. You can play the game by dragging the cue ball and trying to knock the target ball into the pocket while avoiding the enemy balls.

In this game, you can drag the cue ball (the white ball) around the green table and try to hit the target ball (symbolized by a different pictogram ball) into one of the black pockets. However, be careful not to touch the enemy balls (also represented by pictogram balls), or it will be game over. Please note that this is a simplified example, and you would need to provide the actual pictogram images ('emozi_all/pictogram.png', 'emozi_all/ball.png', 'emozi_all/ball.png') to make the game visually appealing.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Billiards Game</title>
  <style>
    #table {
      background-color: green;
      width: 400px;
      height: 800px;
      position: relative;
    }
    .ball {
      width: 50px;
      height: 50px;
      position: absolute;
    }
    #cue-ball {
      background-image: url('cue_ball.png');
      background-size: cover;
    }
    .enemy-ball {
      background-image: url('enemy_ball.png');
      background-size: cover;
    }
    #target-ball {
      background-image: url('target_ball.png');
      background-size: cover;
    }
    .pocket {
      background-color: black;
      width: 80px;
      height: 80px;
      position: absolute;
      border-radius: 50%;
    }
    #pocket-left {
      top: 10px;
      left: 10px;
    }
    #pocket-right {
      top: 10px;
      right: 10px;
    }
    #pocket-bottom {
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>
</head>
<body>
  <div id="table">
    <div id="cue-ball" class="ball"></div>
    <div id="target-ball" class="ball"></div>
    <div id="enemy-ball1" class="ball enemy-ball"></div>
    <div id="enemy-ball2" class="ball enemy-ball"></div>
    <div id="enemy-ball3" class="ball enemy-ball"></div>
    <div id="pocket-left" class="pocket"></div>
    <div id="pocket-right" class="pocket"></div>
    <div id="pocket-bottom" class="pocket"></div>
  </div>

cueBall.style.top = '400px';
    cueBall.style.left = '200px';

targetBall.style.top = '200px';
    targetBall.style.left = '300px';

enemyBalls[0].style.top = '100px';
    enemyBalls[0].style.left = '100px';

enemyBalls[1].style.top = '200px';
    enemyBalls[1].style.left = '150px';

enemyBalls[2].style.top = '300px';
    enemyBalls[2].style.left = '100px';

// Add drag functionality to the cue ball
    cueBall.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text/plain', '');

// Set the cue ball image to be transparent during dragging
      cueBall.style.opacity = '0.5';
    });

cueBall.addEventListener('dragend', () => {
      // Set the cue ball image back to normal after dragging
      cueBall.style.opacity = '1';
    });

// Add drop functionality to the table
    const table = document.getElementById('table');

table.addEventListener('dragover', (e) => {
      e.preventDefault();
    });

table.addEventListener('drop', (e) => {
      e.preventDefault();
      const posX = e.clientX - table.offsetLeft;
      const posY = e.clientY - table.offsetTop;

// Move the cue ball to the dropped position
      cueBall.style.left = `${posX - cueBall.clientWidth / 2}px`;
      cueBall.style.top = `${posY - cueBall.clientHeight / 2}px`;

// Check if the cue ball touches the target ball
      if (isCollisionDetected(cueBall, targetBall)) {
        alert('Congratulations! You win!');
      }

// Check if the cue ball touches any enemy ball
      for (let i = 0; i < enemyBalls.length; i++) {
        if (isCollisionDetected(cueBall, enemyBalls[i])) {
          alert('Game over! You lose.');
          break;
        }
      }
    });

// Function to check collision between two balls
    function isCollisionDetected(ball1, ball2) {
      const ball1Rect = ball1.getBoundingClientRect();
      const ball2Rect = ball2.getBoundingClientRect();

return !(
        ball1Rect.bottom < ball2Rect.top ||
        ball1Rect.top > ball2Rect.bottom ||
        ball1Rect.right < ball2Rect.left ||
        ball1Rect.left > ball2Rect.right
      );
    }
  </script>
</body>
</html>
```

Please note that this is a simplified example, and you would need to provide the actual pictogram images ('cue_ball.png', 'target_ball.png', 'enemy_ball.png') to make the game visually appealing.