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

No:1218

A game where the main character is a red circle wi..ALL
Developer User3280｜Date and time 23/6/18 8:39:38
Build time 57.953 sec｜Game capacity 6.802KB｜

Script

dependiendo de si el triángulo azul es rescatado o no.

¡Rescata al Triángulo Azul!

Usa las flechas del teclado para mover al círculo rojo.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

dependiendo de si el triángulo azul es rescatado o no.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>¡Rescata al Triángulo Azul!</title>
    <style>
      body {
        font-family: sans-serif;
        background-color: #c7ecee;
      }
      canvas {
        border: 3px solid black;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <h1>¡Rescata al Triángulo Azul!</h1>
    <canvas id="canvas" width="500" height="500"></canvas>
    <p>Usa las flechas del teclado para mover al círculo rojo.</p>
    <script>
      // Variables
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var circleX = 50;
      var circleY = 50;
      var circleRadius = 20;
      var circleSpeed = 5;
      var sword = {
        width: 30,
        height: 5,
        visible: false
      }
      var square1 = {
        x: 250,
        y: 250,
        width: 50,
        height: 50,
        visible: true
      }
      var square2 = {
        x: 400,
        y: 400,
        width: 50,
        height: 50,
        visible: true
      }
      var triangle = {
        x: 450,
        y: 450,
        width: 50,
        height: 50,
        visible: true,
        rescued: false
      }
      var keys = [];
      var gameEnded = false;
      
      // Functions
      function drawCircle() {
        ctx.beginPath();
        ctx.arc(circleX, circleY, circleRadius, 0, 2*Math.PI);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
        ctx.beginPath();
        ctx.moveTo(circleX-circleRadius/2, circleY);
        ctx.lineTo(circleX+circleRadius/2, circleY);
        ctx.stroke();
        ctx.moveTo(circleX, circleY-circleRadius/2);
        ctx.lineTo(circleX, circleY+circleRadius/2);
        ctx.stroke();
        ctx.closePath();
        if (sword.visible) {
          ctx.beginPath();
          ctx.rect(circleX+circleRadius/2, circleY-sword.height/2, sword.width, sword.height);
          ctx.fillStyle = "gray";
          ctx.fill();
          ctx.closePath();
        }
      }
      
      function drawSquare1() {
        if (square1.visible) {
          ctx.beginPath();
          ctx.rect(square1.x, square1.y, square1.width, square1.height);
          ctx.fillStyle = "yellow";
          ctx.fill();
          ctx.closePath();
          ctx.beginPath();
          ctx.moveTo(square1.x+square1.width/2, square1.y);
          ctx.lineTo(square1.x+square1.width/2, square1.y+square1.height);
          ctx.stroke();
          ctx.moveTo(square1.x, square1.y+square1.height/2);
          ctx.lineTo(square1.x+square1.width, square1.y+square1.height/2);
          ctx.stroke();
          ctx.closePath();
        }
      }
      
      function drawSquare2() {
        if (square2.visible) {
          ctx.beginPath();
          ctx.rect(square2.x, square2.y, square2.width, square2.height);
          ctx.fillStyle = "yellow";
          ctx.fill();
          ctx.closePath();
          ctx.beginPath();
          ctx.moveTo(square2.x+square2.width/2, square2.y);
          ctx.lineTo(square2.x+square2.width/2, square2.y+square2.height);
          ctx.stroke();
          ctx.moveTo(square2.x, square2.y+square2.height/2);
          ctx.lineTo(square2.x+square2.width, square2.y+square2.height/2);
          ctx.stroke();
          ctx.closePath();
        }
      }
      
      function drawTriangle() {
        if (triangle.visible) {
          ctx.beginPath();
          ctx.moveTo(triangle.x+triangle.width/2, triangle.y);
          ctx.lineTo(triangle.x+triangle.width, triangle.y+triangle.height);
          ctx.lineTo(triangle.x, triangle.y+triangle.height);
          ctx.fillStyle = "blue";
          ctx.fill();
          ctx.closePath();
          ctx.beginPath();
          ctx.moveTo(triangle.x+triangle.width/2, triangle.y);
          ctx.lineTo(triangle.x+triangle.width/2, triangle.y+triangle.height);
          ctx.stroke();
          ctx.closePath();
        }
      }
      
      function update() {
        if (!gameEnded) {
          // Move circle
          if (keys[37]) {
            circleX -= circleSpeed;
          }
          if (keys[38]) {
            circleY -= circleSpeed;
          }
          if (keys[39]) {
            circleX += circleSpeed;
          }
          if (keys[40]) {
            circleY += circleSpeed;
          }
          // Check collisions
          if (collision(circleX, circleY, circleRadius, square1.x, square1.y, square1.width, square1.height)) {
            if (sword.visible) {
              square1.visible = false;
            } else {
              endGame(false);
            }
          }
          if (collision(circleX, circleY, circleRadius, square2.x, square2.y, square2.width, square2.height)) {
            if (sword.visible) {
              square2.visible = false;
            } else {
              endGame(false);
            }
          }
          if (collision(circleX, circleY, circleRadius, triangle.x, triangle.y, triangle.width, triangle.height)) {
            triangle.rescued = true;
            endGame(true);
          }
          // Move sword
          if (keys[32]) {
            sword.visible = true;
          } else {
            sword.visible = false;
          }
          // Draw objects
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          drawSquare1();
          drawSquare2();
          drawTriangle();
          drawCircle();
          // Repeat every frame
          requestAnimationFrame(update);
        }
      }
      
      function collision(circleX, circleY, circleRadius, rectX, rectY, rectWidth, rectHeight) {
        var distX = Math.abs(circleX - rectX-rectWidth/2);
        var distY = Math.abs(circleY - rectY-rectHeight/2);

if (distX > (rectWidth/2 + circleRadius)) { return false; }
        if (distY > (rectHeight/2 + circleRadius)) { return false; }

if (distX <= (rectWidth/2)) { return true; } 
        if (distY <= (rectHeight/2)) { return true; }