Make a universe creator game.'s game

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

No:30341

←

Prev Next

→

Make a universe creator game.
Developer User14724｜Date and time 23/12/21 7:54:51
Build time 20.991 sec｜Game capacity 3.665KB｜

Script

Sure! Here's an example of a simple universe creator game implemented as a single HTML file using JavaScript. This game allows you to create and customize your own universe by selecting different elements and arranging them on the screen.

To use this game, create an HTML file with the contents above and save it with a `.html` extension (e.g., `universe_creator.html`). Then, open the file in a web browser on your smartphone. The game allows you to select different elements (e.g., star, planet, moon, asteroid) from the menu at the top by tapping on them. Then, by tapping on the screen, you can place the selected element on the canvas to create your universe. You can also resize the screen to fit your smartphone's display. Note that this is just a basic example, and you can extend and modify it as per your requirements, adding additional features or enhancing the visuals.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Universe Creator</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="universeCanvas"></canvas>
  <script>
    // Create the canvas
    const canvas = document.getElementById('universeCanvas');
    const ctx = canvas.getContext('2d');
    
    // Set the canvas size to fit the screen
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    // Store the elements of the universe
    const universeElements = [
      { name: 'Star', image: 'star.png' },
      { name: 'Planet', image: 'planet.png' },
      { name: 'Moon', image: 'moon.png' },
      { name: 'Asteroid', image: 'asteroid.png' }
    ];
    
    // Store the selected element
    let selectedElement = universeElements[0];
    
    // Handle mouse click events
    canvas.addEventListener('click', function(event) {
      const x = event.clientX;
      const y = event.clientY;
      
      drawElement(x, y);
    });
    
    // Draw the selected element at the specified coordinates
    function drawElement(x, y) {
      const image = new Image();
      image.src = selectedElement.image;
      
      image.onload = function() {
        ctx.drawImage(image, x, y);
      };
    }
    
    // Draw the universe elements menu
    function drawMenu() {
      for (let i = 0; i < universeElements.length; i++) {
        const element = universeElements[i];
        
        const image = new Image();
        image.src = element.image;
        
        image.onload = function() {
          ctx.drawImage(image, 50 * i, 0, 50, 50);
        };
      }
    }
    
    // Select the element when clicked on the menu
    canvas.addEventListener('click', function(event) {
      const mouseX = event.clientX;
      const mouseY = event.clientY;
      
      for (let i = 0; i < universeElements.length; i++) {
        const elementX = 50 * i;
        const elementY = 0;
        
        if (mouseX >= elementX && mouseX <= elementX + 50 && mouseY >= elementY && mouseY <= elementY + 50) {
          selectedElement = universeElements[i];
          break;
        }
      }
    });
    
    // Clear the canvas and redraw everything
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawMenu();
    }
    
    // Redraw the canvas when the screen size changes
    window.addEventListener('resize', function() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      draw();
    });
    
    // Start the game loop
    function gameLoop() {
      draw();
      requestAnimationFrame(gameLoop);
    }
    
    // Start the game
    gameLoop();
  </script>
</body>
</html>
```

To use this game, create an HTML file with the contents above and save it with a `.html` extension (e.g., `universe_creator.html`). Then, open the file in a web browser on your smartphone.

The game allows you to select different elements (e.g., star, planet, moon, asteroid) from the menu at the top by tapping on them. Then, by tapping on the screen, you can place the selected element on the canvas to create your universe. You can also resize the screen to fit your smartphone's display.

Note that this is just a basic example, and you can extend and modify it as per your requirements, adding additional features or enhancing the visuals.