0>The grimace shake story's game

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

No:45340

←

Prev Next

→

0>The grimace shake story
Developer WinnerWiener1332｜Date and time 24/2/20 12:13:52
Build time 8.706 sec｜Game capacity 1.676KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>The Grimace Shake Story</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    let grimaceX = 200;
    let grimaceY = 200;
    let shakeX = Math.floor(Math.random() * 360);
    let shakeY = Math.floor(Math.random() * 360);
    
    function drawGrimace() {
      ctx.fillStyle = 'purple';
      ctx.beginPath();
      ctx.arc(grimaceX, grimaceY, 20, 0, Math.PI * 2);
      ctx.fill();
    }
    
    function drawShake() {
      ctx.fillStyle = 'brown';
      ctx.fillRect(shakeX, shakeY, 40, 40);
    }
    
    function checkCollision() {
      if (Math.abs(grimaceX - shakeX) < 30 && Math.abs(grimaceY - shakeY) < 30) {
        alert('You caught the shake! Play again?');
        shakeX = Math.floor(Math.random() * 360);
        shakeY = Math.floor(Math.random() * 360);
      }
    }
    
    function drawGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawGrimace();
      drawShake();
      checkCollision();
    }
    
    function moveGrimace(event) {
      const key = event.key;
      
      if (key === 'ArrowUp' && grimaceY > 20) {
        grimaceY -= 10;
      } else if (key === 'ArrowDown' && grimaceY < 380) {
        grimaceY += 10;
      } else if (key === 'ArrowLeft' && grimaceX > 20) {
        grimaceX -= 10;
      } else if (key === 'ArrowRight' && grimaceX < 380) {
        grimaceX += 10;
      }
      
      drawGame();
    }
    
    document.addEventListener('keydown', moveGrimace);
    
    drawGame();
  </script>
</body>
</html>