10 balls connected to each other's game

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

No:37516

←

Prev Next

→

10 balls connected to each other
Developer User17064｜Date and time 24/1/21 4:52:30
Build time 11.187 sec｜Game capacity 3.343KB｜

Script

Sure! Here's an example of a game implemented as a single HTML file using JavaScript. This game involves moving a string of 10 balls connected to each other by drawing paths between them. The game can be played on a smartphone and uses pictograms to represent the balls.

To play the game, save the above code as an HTML file (e.g., "connected_balls_game.html"), and open it in a web browser on your smartphone. The game window will show a canvas with 10 red balls connected to each other. You can touch and drag any ball to move it around. The game will detect the touch and update the ball's position accordingly.

←

Prev　Next

→ 　

Back　

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

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

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

draw(ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
      }
    }

// Game class managing the game logic
    class Game {
      constructor(canvasId) {
        this.canvas = document.getElementById(canvasId);
        this.ctx = this.canvas.getContext('2d');
        this.balls = [];
        this.currentBallIndex = 0;

// Add initial balls
        for (let i = 0; i < 10; i++) {
          const x = 50 + i * 40;
          const y = this.canvas.height / 2;
          const radius = 20;
          const color = 'red';
          const ball = new Ball(x, y, radius, color);
          this.balls.push(ball);
        }

// Register touch event listener
        this.canvas.addEventListener('touchstart', this.handleTouchStart.bind(this));
        this.canvas.addEventListener('touchmove', this.handleTouchMove.bind(this));

// Start game loop
        this.update();
      }

update() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        
        for (let i = 0; i < this.balls.length; i++) {
          const ball = this.balls[i];
          ball.draw(this.ctx);
        }

requestAnimationFrame(this.update.bind(this));
      }

handleTouchStart(event) {
        event.preventDefault();
        const touch = event.touches[0];
        this.currentBallIndex = this.findBallIndex(touch.clientX, touch.clientY);
      }

handleTouchMove(event) {
        event.preventDefault();
        const touch = event.touches[0];

if (this.currentBallIndex !== -1) {
          const ball = this.balls[this.currentBallIndex];
          ball.x = touch.clientX;
          ball.y = touch.clientY;
        }
      }

findBallIndex(x, y) {
        for (let i = 0; i < this.balls.length; i++) {
          const ball = this.balls[i];
          const dx = x - ball.x;
          const dy = y - ball.y;
          const distance = Math.sqrt(dx * dx + dy * dy);

if (distance <= ball.radius) {
            return i;
          }
        }

return -1;
      }
    }

// Start the game
    const game = new Game('gameCanvas');
  </script>
</body>
</html>
```