A game where you move using was and you have to avoid falling flowers yet get to the flag pole's game | AI game creator

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

No:19473

64

A game where you move using was and you have to av..ALL
Developer User8566｜Date and time 23/10/4 6:54:22
Build time 26.285 sec｜Game capacity 5.562KB｜

Sure! Here's a simple game implemented as a single HTML file using JavaScript, enclosed in script tags. The game is designed for smartphone operation and uses pictograms. The objective is to move the player character using W/A/S/D keys and avoid falling flowers to reach the flag pole. You can play the game by opening the HTML file in a web browser or by copying the code into an HTML file on your smartphone.

When you open this HTML file on your smartphone, you will see a blue player character at the bottom-left corner, and flowers falling down from the top of the screen. The objective is to use the "W/A/S/D" keys to move the player character and avoid collision with the falling flowers. The green flag pole is the goal, and if you reach it without colliding with any flowers, you win the game. The score is shown at the top-left corner. If you collide with a flower, the game ends and the final score is displayed in a Game Over screen. Feel free to modify the code and add more features to enhance the game experience!

→ 　

0　

0　

　

　
　
　

[PR]現在の売れ筋Kindle本ランキング

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

(C)2023 HisashiApp

Sure! Here's a simple game implemented as a single HTML file using JavaScript, enclosed in script tags. The game is designed for smartphone operation and uses pictograms. The objective is to move the player character using W/A/S/D keys and avoid falling flowers to reach the flag pole. You can play the game by opening the HTML file in a web browser or by copying the code into an HTML file on your smartphone.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flower Avoidance Game</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="game-canvas"></canvas>

<script>
    // Game Variables
    const canvas = document.getElementById('game-canvas');
    const ctx = canvas.getContext('2d');
    const player = {
      x: 50,
      y: 50,
      width: 30,
      height: 50,
      speed: 5
    };
    const flowers = [];
    let flagPole = null;
    let score = 0;
    let gameOver = false;

// Key Event Listeners
    document.addEventListener('keydown', handleKeyPress);
    document.addEventListener('keyup', handleKeyRelease);

// Game Loop
    function gameLoop() {
      if (gameOver) return;

ctx.clearRect(0, 0, canvas.width, canvas.height);

updatePlayer();
      updateFlowers();
      drawPlayer();
      drawFlowers();
      drawFlagPole();
      drawScore();

if (checkCollision()) {
        endGame();
      }

requestAnimationFrame(gameLoop);
    }

// Player Movement
    let keysPressed = {};

function handleKeyPress(event) {
      keysPressed[event.key] = true;
    }

function handleKeyRelease(event) {
      keysPressed[event.key] = false;
    }

function updatePlayer() {
      if (keysPressed['w']) player.y -= player.speed;
      if (keysPressed['a']) player.x -= player.speed;
      if (keysPressed['s']) player.y += player.speed;
      if (keysPressed['d']) player.x += player.speed;

// Prevent player from moving outside the canvas
      player.x = Math.max(0, player.x);
      player.x = Math.min(canvas.width - player.width, player.x);
      player.y = Math.max(0, player.y);
      player.y = Math.min(canvas.height - player.height, player.y);
    }

// Flower Mechanics
    function createFlower() {
      const flower = {
        x: Math.random() * (canvas.width - 30),
        y: 0,
        width: 30,
        height: 30,
        speed: Math.random() * 5 + 1
      };

flowers.push(flower);
    }

function updateFlowers() {
      for (let i = flowers.length - 1; i >= 0; i--) {
        const flower = flowers[i];
        flower.y += flower.speed;

if (flower.y > canvas.height) {
          flowers.splice(i, 1);
          score++;
        }
      }

if (flowers.length < 3 && Math.random() < 0.02) {
        createFlower();
      }
    }

// Collision Detection
    function checkCollision() {
      for (const flower of flowers) {
        if (
          player.x < flower.x + flower.width &&
          player.x + player.width > flower.x &&
          player.y < flower.y + flower.height &&
          player.y + player.height > flower.y
        ) {
          return true;
        }
      }

if (
        player.x < flagPole.x + flagPole.width &&
        player.x + player.width > flagPole.x &&
        player.y < flagPole.y + flagPole.height &&
        player.y + player.height > flagPole.y
      ) {
        return true;
      }

return false;
    }

// Game Over
    function endGame() {
      gameOver = true;
      ctx.fillStyle = 'black';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.font = '40px Arial';
      ctx.fillStyle = 'red';
      ctx.fillText('Game Over!', canvas.width / 2 - 100, canvas.height / 2);
      ctx.font = '30px Arial';
      ctx.fillStyle = 'white';
      ctx.fillText('Final Score: ' + score, canvas.width / 2 - 80, canvas.height / 2 + 40);
    }

// Drawing Functions
    function drawPlayer() {
      ctx.fillStyle = 'blue';
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }

function drawFlowers() {
      for (const flower of flowers) {
        ctx.fillStyle = 'purple';
        ctx.fillRect(flower.x, flower.y, flower.width, flower.height);
      }
    }

function drawFlagPole() {
      if (!flagPole) {
        flagPole = {
          x: canvas.width - 50,
          y: canvas.height - 200,
          width: 30,
          height: 200
        };
      }

ctx.fillStyle = 'green';
      ctx.fillRect(flagPole.x, flagPole.y, flagPole.width, flagPole.height);
    }

function drawScore() {
      ctx.font = '20px Arial';
      ctx.fillStyle = 'white';
      ctx.fillText('Score: ' + score, 10, 30);
    }

// Start the Game
    gameLoop();
  </script>
</body>
</html>
```

When you open this HTML file on your smartphone, you will see a blue player character at the bottom-left corner, and flowers falling down from the top of the screen. The objective is to use the "W/A/S/D" keys to move the player character and avoid collision with the falling flowers. The green flag pole is the goal, and if you reach it without colliding with any flowers, you win the game. The score is shown at the top-left corner. If you collide with a flower, the game ends and the final score is displayed in a Game Over screen.

Feel free to modify the code and add more features to enhance the game experience!