El juego enfrenta 8 dicos de distintos colores que emulanbjugadr es de fútbol y un arquero en arco's game | AI game creator

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

No:35389

55

El juego enfrenta 8 dicos de distintos colores que..ALL
Developer User16536｜Date and time 24/1/14 10:22:20
Build time 10.847 sec｜Game capacity 2.782KB｜

→ 　

0　

0　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Juego de Fútbol</title>
  <style>
    #canvas {
      border: 1px solid black;
      width: 400px;
      height: 400px;
    }
    .disc {
      width: 50px;
      height: 50px;
      border-radius: 100%;
      position: absolute;
      animation: discMove linear infinite;
      animation-duration: 1s;
    }
    
    .goalkeeper {
      width: 70px;
      height: 120px;
      position: absolute;
      bottom: 10px;
      left: 165px;
    }
    
    @keyframes discMove {
      0% { top: -10px; }
      50% { top: 410px; }
      100% { top: -10px; }
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    
    var colors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple', 'pink', 'brown'];
    
    function getRandomColor() {
      return colors[Math.floor(Math.random() * colors.length)];
    }
    
    var Disc = function(x, y, color) {
      this.x = x;
      this.y = y;
      this.color = color;
    };
    
    Disc.prototype.draw = function() {
      ctx.beginPath();
      ctx.fillStyle = this.color;
      ctx.arc(this.x, this.y, 25, 0, Math.PI * 2);
      ctx.fill();
      ctx.closePath();
    };
    
    function createRandomDisc() {
      var x = Math.random() * (canvas.width - 50) + 25;
      var color = getRandomColor();
      
      return new Disc(x, -10, color);
    }
    
    var goalkeeper = {
      x: 165,
      y: 270
    };
    
    var goal = {
      x: 150,
      y: 400
    };
    
    function drawGoalkeeper() {
      var img = new Image();
      img.src = 'goalkeeper.png';
      ctx.drawImage(img, goalkeeper.x, goalkeeper.y, 70, 120);
    }
    
    function drawGoal() {
      ctx.beginPath();
      ctx.strokeStyle = 'black';
      ctx.lineWidth = 5;
      ctx.moveTo(goal.x, goal.y);
      ctx.lineTo(goal.x + 100, goal.y);
      ctx.stroke();
      ctx.closePath();
    }
    
    function detectCollision(disc) {
      var dx = disc.x - goalkeeper.x;
      var dy = disc.y - goalkeeper.y;
      var distance = Math.sqrt(dx * dx + dy * dy);
      
      if (distance < 55) {
        return true;
      } else {
        return false;
      }
    }
    
    var score = 0;
    
    function updateScore() {
      document.getElementById('score').innerHTML = 'Puntuación: ' + score;
    }
    
    function playGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      var disc = createRandomDisc();
      disc.draw();
      
      drawGoalkeeper();
      drawGoal();
      
      if (detectCollision(disc)) {
        score++;
        updateScore();
      }
      
      requestAnimationFrame(playGame);
    }
    
    playGame();
  </script>
</body>
</html>