A game where you Start as a Fish and you become human by eating Movement controls's game

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

No:16932

←

Prev Next

→

A game where you Start as a Fish and you become hu..ALL
Developer User7456｜Date and time 23/9/21 21:45:17
Build time 30.698 sec｜Game capacity 3.042KB｜

Script

Sure! Here's a simple game where you start as a fish and become a human by eating. The controls allow movement in four directions: up, down, left, and right. I will be using pictograms to represent the game elements.

This HTML file contains a canvas element where the game is rendered and JavaScript code enclosed in script tags. The game starts as a fish represented by an orange circle. The player can control the fish's movement using the arrow keys on a smartphone. As the fish eats and grows, it transforms into a human represented by a blue square when reaching a size of 100. You can save this code to a file with the `.html` extension and open it in a web browser on your smartphone to play the game.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Fish to Human Transformation</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Game variables
      let playerX = canvas.width / 2; // Initial player position
      let playerY = canvas.height / 2;
      let playerSize = 20; // Initial player size
      let isTransformed = false; // Flag to check if transformed into human

// Handle keyboard events
      const keys = {};
      document.addEventListener("keydown", function(event) {
        keys[event.key] = true;
      });
      document.addEventListener("keyup", function(event) {
        keys[event.key] = false;
      });

// Update player position and size based on key inputs
      function update() {
        if(isTransformed) return; // Don't allow movement if already transformed

if (keys["ArrowUp"] && playerY > 0) {
          playerY -= 2;
        }
        if (keys["ArrowDown"] && playerY < canvas.height - playerSize) {
          playerY += 2;
        }
        if (keys["ArrowLeft"] && playerX > 0) {
          playerX -= 2;
        }
        if (keys["ArrowRight"] && playerX < canvas.width - playerSize) {
          playerX += 2;
        }

// Check if player has reached the transformation size
        if (playerSize >= 100) {
          isTransformed = true;
        }
      }

// Render the game
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the fish or human based on transformation state
        if (isTransformed) {
          ctx.fillStyle = "blue";
          ctx.fillRect(playerX, playerY, playerSize, playerSize);
        } else {
          ctx.fillStyle = "orange";
          ctx.beginPath();
          ctx.arc(playerX + playerSize / 2, playerY + playerSize / 2, playerSize / 2, 0, Math.PI * 2);
          ctx.fill();
        }
      }
      
      // Game loop
      function gameLoop() {
        update();
        draw();
        requestAnimationFrame(gameLoop);
      }

// Start the game loop
      gameLoop();
    })(); // End of enclosing function
  </script>
</body>
</html>
```

You can save this code to a file with the `.html` extension and open it in a web browser on your smartphone to play the game.