Piano Looks at Mia is Growing Into a Giant & Mia Calls Piano For Help & Piano Turns Mia Back To Normal With Magic Music's game

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

No:47952

102

←

Prev Next

→

Piano Looks at Mia is Growing Into a Giant & Mia C..ALL
Developer User20657｜Date and time 24/3/1 5:57:28
Build time 8.136 sec｜Game capacity 1.925KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Piano vs Mia</title>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>
  
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    let player = {
      x: 50,
      y: 50,
      width: 50,
      height: 50
    };
    
    let mia = {
      x: 700,
      y: 500,
      width: 100,
      height: 100
    };
    
    function drawPlayer() {
      ctx.fillStyle = 'blue';
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }
    
    function drawMia() {
      ctx.fillStyle = 'pink';
      ctx.fillRect(mia.x, mia.y, mia.width, mia.height);
    }
    
    function checkCollision() {
      if (player.x < mia.x + mia.width &&
          player.x + player.width > mia.x &&
          player.y < mia.y + mia.height &&
          player.y + player.height > mia.y) {
        alert('Mia is growing into a giant!');
        miaCallPianoForHelp();
      }
    }
    
    function miaCallPianoForHelp() {
      alert('Mia calls Piano for help!');
      pianoTurnsMiaBackToNormal();
    }
    
    function pianoTurnsMiaBackToNormal() {
      alert('Piano turns Mia back to normal with Magic Music!');
      mia.width = 100;
      mia.height = 100;
    }
    
    window.addEventListener('keydown', function(event) {
      switch(event.keyCode) {
        case 37: // Left arrow
          player.x -= 10;
          break;
        case 38: // Up arrow
          player.y -= 10;
          break;
        case 39: // Right arrow
          player.x += 10;
          break;
        case 40: // Down arrow
          player.y += 10;
          break;
      }
      
      checkCollision();
      drawCanvas();
    });
    
    function drawCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawPlayer();
      drawMia();
    }
    
    drawCanvas();
  </script>
</body>
</html>