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

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

No:1215

196

←

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]現在の売れ筋Kindle本ランキング

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!