a Mario inspired platformer But the gravity, collision and enemies are extremely well done and the graphics good's game

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

No:2842

1214

←

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>