a Mario inspired platformer But the gravity, collision and enemies are extremely well done and the graphics good'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 Mario inspired platformer But the gravity, collision and enemies are extremely well done and the graphics good's game | AI game creator

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

No:2842

1901

←

Prev Next

→

a Mario inspired platformer But the gravity, colli..ALL
Developer User3628｜Date and time 23/6/22 21:46:14
Build time 58.381 sec｜Game capacity 5.89KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Jogo de Plataforma</title>
  <style>
    canvas {
      background-color: #008080;
      border: 5px solid #FFF;
    }
  </style>
</head>
<body>
  <canvas width="480" height="320" id="gameCanvas"></canvas>

// carrega os recursos necessários
    var imgPlayer = new Image();
    imgPlayer.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/person-running_1f3c3.png";
    var imgPlatform = new Image();
    imgPlatform.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/school-satchel_1f392.png";
    var imgEnemy = new Image();
    imgEnemy.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/ghost_1f47b.png";

// classe do jogador
    class Player {
      constructor() {
        this.x = 50;
        this.y = 0;
        this.width = 50;
        this.height = 50;
        this.velocityY = 0;
        this.jumping = false;
      }

jump() {
        if (!this.jumping) {
          this.jumping = true;
          this.velocityY = jumpForce;
        }
      }

move() {
        // atualiza posição vertical do jogador de acordo com a gravidade
        this.y += this.velocityY;
        this.velocityY += gravity;
        this.jumping = true;

// não deixa o jogador sair da tela
        if (this.y > canvas.height - this.height) {
          this.y = canvas.height - this.height;
          this.jumping = false;
        }
      }

draw() {
        ctx.drawImage(imgPlayer, this.x, this.y, this.width, this.height);
      }    
    }

// classe das plataformas
    class Platform {
      constructor(x, y, width, height) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
      }

draw() {
        ctx.drawImage(imgPlatform, this.x, this.y, this.width, this.height);
      }
    }

// classe dos inimigos
    class Enemy {
      constructor(x, y, width, height, velocityX) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.velocityX = velocityX;
      }

move() {
        // atualiza posição horizontal do inimigo
        this.x += this.velocityX;

// inverte a direção do inimigo quando ele sai da tela
        if (this.x < 0 || this.x > canvas.width - this.width) {
          this.velocityX = -this.velocityX;
        }
      }

draw() {
        ctx.drawImage(imgEnemy, this.x, this.y, this.width, this.height);
      }    
    }

// cria as plataformas e os inimigos
    function createPlatforms() {
      for (var i = 0; i < numPlatforms; i++) {
        var x = Math.random() * canvas.width;
        var y = i * canvas.height / numPlatforms;
        var width = 80;
        var height = 20;
        var platform = new Platform(x, y, width, height);
        platforms.push(platform);

var velocityX = (Math.random() * 10) - 5;
        var enemy = new Enemy(x, y - 40, 40, 40, velocityX);
        enemies.push(enemy);
      }
    }

// verifica se houve colisão entre objetos retangulares
    function collisionRect(obj1, obj2) {
      var distX = Math.abs(obj1.x + obj1.width / 2 - obj2.x - obj2.width / 2);
      var distY = Math.abs(obj1.y + obj1.height / 2 - obj2.y - obj2.height / 2);
      if (distX < obj1.width / 2 + obj2.width / 2 && distY < obj1.height / 2 + obj2.height / 2) {
        return true;
      }
      return false;
    }

// atualiza a posição dos objetos e desenha tudo na tela
    function update() {
      player.move();

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

for (var i = 0; i < platforms.length; i++) {
        platforms[i].draw();

// verifica se houve colisão entre jogador e plataforma
        if (collisionRect(player, platforms[i])) {
          if (player.velocityY > 0 && player.y + player.height < platforms[i].y + player.velocityY) {
            player.y = platforms[i].y - player.height;
            player.velocityY = 0;
            player.jumping = false;
          }
        }

enemies[i].move();
        enemies[i].draw();

// verifica se houve colisão entre jogador e inimigo
        if (collisionRect(player, enemies[i])) {
          alert("Game Over!\nScore: " + score);
          location.reload();
        }

// atualiza a pontuação quando jogador passa por uma plataforma
        if (player.y + player.height > platforms[i].y && player.y + player.height < platforms[i].y + player.velocityY && player.velocityY > 0) {
          score++;
        }
      }

// exibe a pontuação
      ctx.fillStyle = "#FFF";
      ctx.font = "20px Arial";
      ctx.fillText("Score: " + score, 10, 30);

// verifica se o jogador chegou ao final do jogo
      if (player.y + player.height < 0) {
        alert("Congratulations!\nScore: " + score);
        location.reload();
      }

// atualiza o jogo em cada frame
      requestAnimationFrame(update);
    }

// inicializa o jogo quando a página é carregada
    window.onload = function() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

player = new Player();
      createPlatforms();
      update();

// define controles do jogo
      document.addEventListener("keydown", function(event) {
        if (event.keyCode == 32) {
          player.jump();
        }
      });
      canvas.addEventListener("touchstart", function(event) {
        event.preventDefault();
        player.jump();
      });
    };
  </script>
</body>
</html>