A game where the main character is a red circle with arms and legs that has to defeat yellow squares with arms and legs to rescue a blue triangle with arms and legs to finish the game.'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
A game where the main character is a red circle with arms and legs that has to defeat yellow squares with arms and legs to rescue a blue triangle with arms and legs to finish the game.'s game | AI game creator

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

No:1215

228

←

Prev Next

→

A game where the main character is a red circle wi..ALL
Developer User3280｜Date and time 23/6/18 8:35:10
Build time 42.392 sec｜Game capacity 4.606KB｜

Script

Este es el código fuente para un juego llamado ”Circle Hero”. En este juego, el protagonista es un círculo rojo con brazos y piernas, y tiene que vencer a unos cuadrados amarillos con brazos y piernas para rescatar a un triángulo azul con brazos y piernas para terminar el juego. Para jugar, simplemente mueve el círculo usando las flechas del teclado. Tu objetivo es eliminar todos los cuadrados amarillos para rescatar al triángulo azul. Ten cuidado de no chocar con los cuadrados o perderás una vida. ¡Diviértete!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Circle Hero</title>
    <style>
      body {
        margin:0;
        padding:0;
      }
      canvas {
        width:100vw;
        height:100vh;
        display:block;
      }
   </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>
    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

const circle = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 20,
        dx: 5,
        dy: 5,
        color: "red"
      };

const triangle = {
        x: canvas.width - 100,
        y: canvas.height - 100,
        width: 80,
        height: 80,
        color: "blue"
      };

function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

drawCircle();
        drawSquares();
        drawTriangle();

moveCircle();
        moveSquares();

requestAnimationFrame(draw);
      }

circle.x += circle.dx;
        circle.y += circle.dy;
      }

function moveSquares() {
        for (let i = 0; i < squares.length; i++) {
          const square = squares[i];

if (square.x + square.width > canvas.width) {
            square.dx = -square.dx;
          } else if (square.x < 0) {
            square.dx = -square.dx;
          }
          if (square.y + square.height > canvas.height) {
            square.dy = -square.dy;
          } else if (square.y < 0) {
            square.dy = -square.dy;
          }

// check collision with circle
          if (circle.x - circle.radius < square.x + square.width &&
              circle.x + circle.radius > square.x &&
              circle.y - circle.radius < square.y + square.height &&
              circle.y + circle.radius > square.y) {
            squares.splice(i, 1);
          }

square.x += square.dx;
          square.y += square.dy;
        }
      }

function drawCircle() {
        ctx.beginPath();
        ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
        ctx.fillStyle = circle.color;
        ctx.fill();
        ctx.closePath();
      }

function drawSquares() {
        for (let i = 0; i < squares.length; i++) {
          const square = squares[i];

ctx.beginPath();
          ctx.rect(square.x, square.y, square.width, square.height);
          ctx.fillStyle = square.color;
          ctx.fill();
          ctx.closePath();
        }
      }

function drawTriangle() {
        ctx.beginPath();
        ctx.moveTo(triangle.x, triangle.y);
        ctx.lineTo(triangle.x, triangle.y + triangle.height);
        ctx.lineTo(triangle.x + triangle.width, triangle.y + triangle.height / 2);
        ctx.closePath();
        ctx.fillStyle = triangle.color;
        ctx.fill();
      }

draw();

</script>
  </body>
</html>

Este es el código fuente para un juego llamado "Circle Hero". En este juego, el protagonista es un círculo rojo con brazos y piernas, y tiene que vencer a unos cuadrados amarillos con brazos y piernas para rescatar a un triángulo azul con brazos y piernas para terminar el juego.

Para jugar, simplemente mueve el círculo usando las flechas del teclado. Tu objetivo es eliminar todos los cuadrados amarillos para rescatar al triángulo azul. Ten cuidado de no chocar con los cuadrados o perderás una vida. ¡Diviértete!