Game sandbox, in this game there is a stone and water, the stone has no physics but there is a collision, and also the water has physics and a collision, there are also icons, when you click the icon of the stone, the stone will spawn, and then the water button is pressed, then the water will spawn.'s game

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
Game sandbox, in this game there is a stone and water, the stone has no physics but there is a collision, and also the water has physics and a collision, there are also icons, when you click the icon of the stone, the stone will spawn, and then the water button is pressed, then the water will spawn.'s game | AI game creator

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

No:38265

←

Prev Next

→

Game sandbox, in this game there is a stone and wa..ALL
Developer User17311｜Date and time 24/1/23 22:01:28
Build time 12.573 sec｜Game capacity 2.747KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Game Sandbox</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Getting the canvas element
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");

// Defining the game objects
    var stone = {
      x: 200,
      y: 200,
      size: 50
    };

var waterDroplet = {
      x: 0,
      y: 0,
      radius: 10,
      speed: 5,
      directionX: 1,
      directionY: 1
    };

// Event listener for clicks on the stone button
    document.getElementById("stoneButton").addEventListener("click", function(){
      spawnStone();
    });

// Event listener for clicks on the water button
    document.getElementById("waterButton").addEventListener("click", function(){
      spawnWater();
    });

// Function to spawn a stone
    function spawnStone() {
      stone.x = Math.random() * (canvas.width - stone.size);
      stone.y = Math.random() * (canvas.height - stone.size);
    }

// Function to spawn water
    function spawnWater() {
      waterDroplet.x = Math.random() * (canvas.width - waterDroplet.radius);
      waterDroplet.y = Math.random() * (canvas.height - waterDroplet.radius);
    }

// Function to check collision between stone and water
    function checkCollision() {
      if (stone.x < waterDroplet.x + waterDroplet.radius &&
          stone.x + stone.size > waterDroplet.x &&
          stone.y < waterDroplet.y + waterDroplet.radius &&
          stone.y + stone.size > waterDroplet.y) {
        // Collision occurred, do something here
        console.log("Stone and water collided!");
      }
    }

// Function to update the game state
    function update() {
      // Update the positions of the water droplet
      waterDroplet.x += waterDroplet.speed * waterDroplet.directionX;
      waterDroplet.y += waterDroplet.speed * waterDroplet.directionY;
      
      // Check collision
      checkCollision();

// Clear the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the stone
      context.fillStyle = "gray";
      context.fillRect(stone.x, stone.y, stone.size, stone.size);

// Draw the water droplet
      context.fillStyle = "blue";
      context.beginPath();
      context.arc(waterDroplet.x, waterDroplet.y, waterDroplet.radius, 0, Math.PI * 2, true);
      context.closePath();
      context.fill();

// Call the update function again after a delay
      setTimeout(update, 60);
    }

// Start the game by calling the update function
    update();

</script>

<div>
    <button id="stoneButton">Add Stone</button>
    <button id="waterButton">Add Water</button>
  </div>
  
</body>
</html>