Crea un gioco dive due quadrati che si muovono di colore diverso quando si toccano generano altri quadrati's game

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

No:49521

128

←

Prev Next

→

Crea un gioco dive due quadrati che si muovono di ..ALL
Developer User19399｜Date and time 24/3/5 10:11:36
Build time 7.473 sec｜Game capacity 2.082KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Gioco dei quadrati che si muovono</title>
</head>
<body>
  <canvas id="myCanvas" width="600" height="400"></canvas>
  
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    
    let square1 = {
      x: 50,
      y: 50,
      size: 50,
      color: 'blue',
      dx: 4,
      dy: 4
    };
    
    let square2 = {
      x: 200,
      y: 200,
      size: 50,
      color: 'red',
      dx: 3,
      dy: 3
    };
    
    function drawSquare(square) {
      ctx.beginPath();
      ctx.fillStyle = square.color;
      ctx.fillRect(square.x, square.y, square.size, square.size);
    }
    
    function checkCollision() {
      if (square1.x < square2.x + square2.size &&
          square1.x + square1.size > square2.x &&
          square1.y < square2.y + square2.size &&
          square1.y + square1.size > square2.y) {
            createNewSquare();
          }
    }
    
    function createNewSquare() {
      let newSquare = {
        x: Math.random() * (canvas.width - 50),
        y: Math.random() * (canvas.height - 50),
        size: 50,
        color: 'green',
        dx: 2,
        dy: 2
      };
      
      drawSquare(newSquare);
    }
    
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      square1.x += square1.dx;
      square1.y += square1.dy;
      
      square2.x += square2.dx;
      square2.y += square2.dy;
      
      if (square1.x + square1.size > canvas.width || square1.x < 0) {
        square1.dx *= -1;
      }
      
      if (square1.y + square1.size > canvas.height || square1.y < 0) {
        square1.dy *= -1;
      }
      
      if (square2.x + square2.size > canvas.width || square2.x < 0) {
        square2.dx *= -1;
      }
      
      if (square2.y + square2.size > canvas.height || square2.y < 0) {
        square2.dy *= -1;
      }
      
      drawSquare(square1);
      drawSquare(square2);
      
      checkCollision();
    }
    
    setInterval(update, 1000/60);
    
  </script>
</body>
</html>