AI game creator

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

No:10568

104

←

Prev Next

→

Three js circle
Developer Micah｜Date and time 23/8/1 2:21:26
Build time 20.837 sec｜Game capacity 2.472KB｜

Script

Sure! Here's an example of a simple game using Three.js to create a circle that can move around on a canvas:

This code creates a simple game where you can control the movement of a circle using touch or mouse input. The circle follows the position of your touch/mouse, smoothly moving towards it. The game uses Three.js to render the circle on a canvas and handle the necessary animation. The code is enclosed in script tags and can be saved as a single HTML file to be loaded and played on a smartphone.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple game using Three.js to create a circle that can move around on a canvas:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Circle Game</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
  <script>
    // Create a scene and camera
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// Create a renderer
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

// Create a circle geometry
    var geometry = new THREE.CircleGeometry(1, 32);
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// Create a circle mesh
    var circle = new THREE.Mesh(geometry, material);
    circle.position.z = -5;
    scene.add(circle);

// Set initial position
    circle.position.x = -2;
    circle.position.y = 2;

// Handle touch/mouse movement
    var touchX = 0;
    var touchY = 0;

function handleMove(event) {
      event.preventDefault();
      touchX = (event.touches && event.touches.length > 0) ? event.touches[0].clientX : event.clientX;
      touchY = (event.touches && event.touches.length > 0) ? event.touches[0].clientY : event.clientY;
    }

document.addEventListener('mousemove', handleMove, false);
    document.addEventListener('touchmove', handleMove, false);

// Render loop
    function animate() {
      requestAnimationFrame(animate);

// Move the circle based on touch/mouse position
      var targetX = (touchX / window.innerWidth) * 8 - 4;
      var targetY = (touchY / window.innerHeight) * -6 + 3;
      circle.position.x += (targetX - circle.position.x) * 0.05;
      circle.position.y += (targetY - circle.position.y) * 0.05;

renderer.render(scene, camera);
    }

// Start the game
    animate();
  </script>
</body>
</html>
```

This code creates a simple game where you can control the movement of a circle using touch or mouse input. The circle follows the position of your touch/mouse, smoothly moving towards it. The game uses Three.js to render the circle on a canvas and handle the necessary animation. The code is enclosed in script tags and can be saved as a single HTML file to be loaded and played on a smartphone.