Make a game based off the boardgame hungry hungry hippo's game | AI game creator

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

No:22267

88

Make a game based off the boardgame hungry hungry ..ALL
Developer User10287｜Date and time 23/10/21 23:33:43
Build time 90.966 sec｜Game capacity 4.997KB｜

Sure, here's a simple implementation of the Hungry Hungry Hippos game using JavaScript in a single HTML file. The game will be designed for smartphone operation and will use pictograms. Please note that while the following code provides a basic game structure, it does not have full functionality or graphics. You can customize and enhance it further according to your needs.

To use this code, create a new HTML file and copy the above code into it. Save the file with an appropriate name (e.g., `hungry_hungry_hippos.html`). You will also need to provide image files for the hippo and food graphics (replace `"emozi_rabbit.png"` and `"emozi_apple.png"` in the code with your image filenames). When you open the HTML file in a web browser on your smartphone, you should see the game screen with a hippo controlled by arrow key inputs. Move the hippo to catch food and accumulate score. Feel free to enhance the graphics, add more gameplay elements, or customize the game further to suit your preferences.

→ 　

0　

0　

　
　
　
　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

Sure, here's a simple implementation of the Hungry Hungry Hippos game using JavaScript in a single HTML file. The game will be designed for smartphone operation and will use pictograms.

Please note that while the following code provides a basic game structure, it does not have full functionality or graphics. You can customize and enhance it further according to your needs.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hungry Hungry Hippos</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      font-family: Arial, sans-serif;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
<canvas id="gameCanvas"></canvas>

<script>
  // Game Variables
  var canvas, context;
  var hippo1, hippo2, hippo3, hippo4;
  var score = 0;

// Hippo Object
  function Hippo(x, y) {
    this.x = x;
    this.y = y;
    this.width = 80;
    this.height = 80;
    this.speedX = 0;
    this.speedY = 0;
  }

Hippo.prototype.update = function() {
    this.x += this.speedX;
    this.y += this.speedY;

// Prevent hippo from moving off the screen
    if (this.x < 0) {
      this.x = 0;
    }
    if (this.x + this.width > canvas.width) {
      this.x = canvas.width - this.width;
    }
    if (this.y < 0) {
      this.y = 0;
    }
    if (this.y + this.height > canvas.height) {
      this.y = canvas.height - this.height;
    }

// Check for collision with food
    if (
      this.x < food.x + food.width &&
      this.x + this.width > food.x &&
      this.y < food.y + food.height &&
      this.y + this.height > food.y
    ) {
      score++;
      food.reset();
    }
  };

Hippo.prototype.render = function() {
    var img = new Image();
    img.src = "hippo.png";
    context.drawImage(img, this.x, this.y, this.width, this.height);
  };

// Food Object
  function Food() {
    this.width = 60;
    this.height = 60;
    this.reset();
  }

Food.prototype.reset = function() {
    this.x = Math.random() * (canvas.width - this.width);
    this.y = Math.random() * (canvas.height - this.height);
  };

Food.prototype.render = function() {
    var img = new Image();
    img.src = "food.png";
    context.drawImage(img, this.x, this.y, this.width, this.height);
  };

// Game Initialization
  function init() {
    canvas = document.getElementById("gameCanvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    context = canvas.getContext("2d");

// Create hippos and food
    hippo1 = new Hippo(50, 50);
    hippo2 = new Hippo(50, canvas.height - 130);
    hippo3 = new Hippo(canvas.width - 130, 50);
    hippo4 = new Hippo(canvas.width - 130, canvas.height - 130);
    food = new Food();

// Event Listeners for controlling hippos
    document.addEventListener("keydown", handleKeyDown);
    document.addEventListener("keyup", handleKeyUp);

// Start game loop
    requestAnimationFrame(gameLoop);
  }

// Handle key down events
  function handleKeyDown(event) {
    event.preventDefault();
    if (event.key === "ArrowUp") {
      hippo1.speedY = -3;
    } else if (event.key === "ArrowDown") {
      hippo1.speedY = 3;
    } else if (event.key === "ArrowLeft") {
      hippo1.speedX = -3;
    } else if (event.key === "ArrowRight") {
      hippo1.speedX = 3;
    }
  }

// Handle key up events
  function handleKeyUp(event) {
    event.preventDefault();
    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
      hippo1.speedY = 0;
    } else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
      hippo1.speedX = 0;
    }
  }

// Game Loop
  function gameLoop() {
    context.clearRect(0, 0, canvas.width, canvas.height);

// Update and render hippos
    hippo1.update();
    hippo1.render();
    hippo2.render();
    hippo3.render();
    hippo4.render();

// Render food
    food.render();

// Display score
    context.fillStyle = "#000";
    context.font = "24px Arial";
    context.fillText("Score: " + score, 10, 30);

// Continue game loop
    requestAnimationFrame(gameLoop);
  }

// Initialize the game when the page loads
  window.onload = init;
</script>
</body>
</html>
```

To use this code, create a new HTML file and copy the above code into it. Save the file with an appropriate name (e.g., `hungry_hungry_hippos.html`). You will also need to provide image files for the hippo and food graphics (replace `"hippo.png"` and `"food.png"` in the code with your image filenames).

When you open the HTML file in a web browser on your smartphone, you should see the game screen with a hippo controlled by arrow key inputs. Move the hippo to catch food and accumulate score.

Feel free to enhance the graphics, add more gameplay elements, or customize the game further to suit your preferences.