Games like Metroidvania's game

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

No:2482

113

←

Prev Next

→

Games like Metroidvania
Developer User3567｜Date and time 23/6/21 17:11:34
Build time 31.652 sec｜Game capacity 3.044KB｜

Script

を作ります。プレイヤーはステージを進みながら、敵を倒してアイテムを集めて強くなっていきます。最後のボスを倒せばゲームクリアです。スマホのタッチ操作に対応し、絵文字演出を多用して楽しく遊べるようにします。以下が実際のプログラムの一例です。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>メトロイドヴァニア風ゲーム</title>
</head>
<body>
  <canvas id="canvas" width="320" height="240"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    let player = {
      x: 50,
      y: 50,
      width: 32,
      height: 32,
      speedX: 0,
      speedY: 0,
      jumping: false,
      grounded: false
    };
    let enemies = [
      {x: 100, y: 100, width: 32, height: 32},
      {x: 200, y: 50, width: 32, height: 32}
    ];
    let jumpSound = new Audio('jump.mp3');
    let hitSound = new Audio('hit.mp3');
    let spriteSheet = new Image();
    spriteSheet.src = 'sprites.png';

document.addEventListener('keyup', event => {
      if (event.keyCode === 37 || event.keyCode === 39) {
        player.speedX = 0;
      }
    });

function update() {
      // update player position
      player.x += player.speedX;
      player.y += player.speedY;
      player.speedY += 0.5;
      if (player.y + player.height > canvas.height - 20) {
        player.y = canvas.height - 20 - player.height;
        player.speedY = 0;
        player.jumping = false;
        player.grounded = true;
      } else {
        player.grounded = false;
      }

// collision detection with enemies
      for (let enemy of enemies) {
        if (player.x < enemy.x + enemy.width &&
            player.x + player.width > enemy.x &&
            player.y < enemy.y + enemy.height &&
            player.y + player.height > enemy.y) {
          player.speedX = -player.speedX;
          hitSound.play();
        }
      }
    }

function draw() {
      // clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// draw player
      ctx.drawImage(spriteSheet, 0, 0, 32, 32, player.x, player.y, player.width, player.height);

// draw enemies
      for (let enemy of enemies) {
        ctx.drawImage(spriteSheet, 32, 0, 32, 32, enemy.x, enemy.y, enemy.width, enemy.height);
      }

// draw text
      ctx.font = '24px Arial';
      ctx.fillStyle = 'white';
      ctx.fillText('Score: 0', 10, 30);
    }

function loop() {
      update();
      draw();
      requestAnimationFrame(loop);
    }

loop();
  </script>
</body>
</html>