You can swipe the balls around and you have to get him into a ring's game

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

No:14554

←

Prev Next

→

You can swipe the balls around and you have to get..ALL
Developer User6282｜Date and time 23/9/3 3:24:27
Build time 29.962 sec｜Game capacity 4.138KB｜

Script

Sure! Here's an example of a simple game where you can swipe balls around using JavaScript and HTML. The game involves getting a ball into a ring. Please note that due to the interactive nature of the game, it would be best experienced on a desktop or laptop rather than a smartphone.

To play the game, you can save the code above in a single HTML file and open it in a web browser. The game will display a ring in the center of the page, and you can swipe the red ball around using your mouse or touch input (on touch-enabled devices). The objective is to get the ball inside the ring. Once the ball is inside the ring, an alert will be shown congratulating you.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #ring {
      width: 300px;
      height: 300px;
      border: 2px solid gray;
      border-radius: 50%;
      margin: 20px auto;
      position: relative;
    }

.ball {
      width: 50px;
      height: 50px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      top: 100px;
      left: 100px;
      cursor: pointer;
      z-index: 100;
    }
  </style>
</head>
<body>
  <div id="ring"></div>

let isDragging = false;
      let ballOffsetX = 0;
      let ballOffsetY = 0;

ball.addEventListener('mousedown', startDragging);
      ball.addEventListener('touchstart', startDragging);

function startDragging(event) {
        event.preventDefault();

isDragging = true;

if (event.type === 'touchstart') {
          const touch = event.touches[0];
          ballOffsetX = touch.clientX - ball.getBoundingClientRect().left;
          ballOffsetY = touch.clientY - ball.getBoundingClientRect().top;
        } else {
          ballOffsetX = event.clientX - ball.getBoundingClientRect().left;
          ballOffsetY = event.clientY - ball.getBoundingClientRect().top;
        }

document.addEventListener('mousemove', dragBall);
        document.addEventListener('touchmove', dragBall);
        document.addEventListener('mouseup', stopDragging);
        document.addEventListener('touchend', stopDragging);
      }

function dragBall(event) {
        event.preventDefault();

if (isDragging) {
          let x, y;

if (event.type === 'touchmove') {
            const touch = event.touches[0];
            x = touch.clientX - ballOffsetX - ring.getBoundingClientRect().left;
            y = touch.clientY - ballOffsetY - ring.getBoundingClientRect().top;
          } else {
            x = event.clientX - ballOffsetX - ring.getBoundingClientRect().left;
            y = event.clientY - ballOffsetY - ring.getBoundingClientRect().top;
          }

const maxX = ring.offsetWidth - ball.offsetWidth;
          const maxY = ring.offsetHeight - ball.offsetHeight;

x = Math.min(Math.max(x, 0), maxX);
          y = Math.min(Math.max(y, 0), maxY);

ball.style.left = x + 'px';
          ball.style.top = y + 'px';

checkIfInsideRing(x, y);
        }
      }

function stopDragging() {
        isDragging = false;

document.removeEventListener('mousemove', dragBall);
        document.removeEventListener('touchmove', dragBall);
        document.removeEventListener('mouseup', stopDragging);
        document.removeEventListener('touchend', stopDragging);
      }

function checkIfInsideRing(x, y) {
        const ringRadius = ring.offsetWidth / 2;
        const ballRadius = ball.offsetWidth / 2;
        const center = {
          x: ring.getBoundingClientRect().left + ringRadius,
          y: ring.getBoundingClientRect().top + ringRadius
        };

const distance = Math.sqrt((x + ballRadius - center.x) ** 2 + (y + ballRadius - center.y) ** 2);

if (distance <= ringRadius - ballRadius) {
          alert('Congratulations! Ball is inside the ring.');
        }
      }
    });
  </script>
</body>
</html>
```