A circle with physics's game

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

No:7144

1322

←

Prev Next

→

A circle with physics
Developer User3943｜Date and time 23/7/5 21:08:03
Build time 15.162 sec｜Game capacity 2.361KB｜

Script

Sure, here's a sample game in which you can control a circle using physics on a smartphone using JavaScript:

To play the game, you can open the above code in a web browser and you will see a canvas with a circle. You can control the circle's movement by touching and dragging on the canvas. The circle will bounce off the boundaries of the canvas. The game continuously updates the circle's position, giving it a physics-like behavior.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a sample game in which you can control a circle using physics on a smartphone using JavaScript:

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

// Define circle properties
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var radius = 20;
    var dx = 2;
    var dy = -2;

// Function to draw the circle
    function drawCircle() {
      context.beginPath();
      context.arc(x, y, radius, 0, Math.PI * 2);
      context.fillStyle = "#0095DD";
      context.fill();
      context.closePath();
    }

// Function to update the circle position and handle collisions
    function updateCircle() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawCircle();

// Reverse the direction if the circle hits the boundaries
      if (x + dx > canvas.width - radius || x + dx < radius) {
        dx = -dx;
      }
      if (y + dy > canvas.height - radius || y + dy < radius) {
        dy = -dy;
      }

// Update circle position
      x += dx;
      y += dy;
    }

// Function to handle touch events on the canvas
    function handleTouch(event) {
      var touchX = event.changedTouches[0].pageX - canvas.offsetLeft;
      var touchY = event.changedTouches[0].pageY - canvas.offsetTop;
      
      // Update the circle's velocity based on touch position
      dx = (touchX - x) / 20;
      dy = (touchY - y) / 20;
    }

// Add touch event listener to the canvas
    canvas.addEventListener("touchstart", handleTouch, false);
    canvas.addEventListener("touchmove", handleTouch, false);
    canvas.addEventListener("touchend", handleTouch, false);

// Start the game loop
    setInterval(updateCircle, 10);
  </script>
</body>
</html>
```