run game a girl is run and the monster is come near this girl's game

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

No:39813

←

Prev Next

→

run game a girl is run and the monster is come nea..ALL
Developer User17811｜Date and time 24/1/30 11:01:41
Build time 17.642 sec｜Game capacity 4.82KB｜

Script

Sure, here's an example of a simple game where a girl is being chased by a monster. The game will be played on a smartphone and will use pictograms for visuals. The goal of the game is for the player to navigate the girl away from the chasing monster using touch or swipe gestures.

You can save the above code in a single HTML file and open it in any browser on your smartphone to play the game. The girl will be represented by a pink rectangle, and the monster will be represented by a green rectangle. Swipe left or right to move the girl horizontally, and swipe up or down to move her vertically. The goal is to avoid the monster by not getting caught by it. If the girl and the monster collide, a "Game Over" alert will be displayed. Have fun playing 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>Girl and Monster Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Enclose code in script tags
    (function() {
      // Game variables
      var canvas, ctx;
      var girl, monster;

// Event listeners for touch and swipe gestures
      var touchStartPosition = { x: 0, y: 0 };
      var touchEndPosition = { x: 0, y: 0 };
      var swipeThreshold = 50; // Minimum swipe distance to trigger movement

// Initialize the game
      function init() {
        canvas = document.getElementById("gameCanvas");
        ctx = canvas.getContext("2d");

// Create game objects
        girl = { x: 200, y: 200, width: 32, height: 32, color: "pink" };
        monster = { x: 50, y: 50, width: 32, height: 32, color: "green" };

// Add event listeners
        canvas.addEventListener("touchstart", handleTouchStart, false);
        canvas.addEventListener("touchend", handleTouchEnd, false);

// Start game loop
        gameLoop();
      }

// Main game loop
      function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update game logic
        update();

// Draw game objects
        drawGirl();
        drawMonster();

// Check for game over condition
        if (checkCollision()) {
          gameOver();
          return; // Exit game loop
        }

// Keep looping
        requestAnimationFrame(gameLoop);
      }

// Update game logic
      function update() {
        // Move the monster towards the girl
        if (monster.x < girl.x) {
          monster.x += 1;
        } else if (monster.x > girl.x) {
          monster.x -= 1;
        }

if (monster.y < girl.y) {
          monster.y += 1;
        } else if (monster.y > girl.y) {
          monster.y -= 1;
        }
      }

// Draw the girl on the canvas
      function drawGirl() {
        ctx.fillStyle = girl.color;
        ctx.fillRect(girl.x, girl.y, girl.width, girl.height);
      }

// Draw the monster on the canvas
      function drawMonster() {
        ctx.fillStyle = monster.color;
        ctx.fillRect(monster.x, monster.y, monster.width, monster.height);
      }

// Handle touch start event
      function handleTouchStart(event) {
        event.preventDefault();
        touchStartPosition.x = event.touches[0].clientX;
        touchStartPosition.y = event.touches[0].clientY;
      }

// Handle touch end event
      function handleTouchEnd(event) {
        event.preventDefault();
        touchEndPosition.x = event.changedTouches[0].clientX;
        touchEndPosition.y = event.changedTouches[0].clientY;

// Calculate swipe direction and move the girl accordingly
        var swipeDistanceX = touchEndPosition.x - touchStartPosition.x;
        var swipeDistanceY = touchEndPosition.y - touchStartPosition.y;

if (Math.abs(swipeDistanceX) > Math.abs(swipeDistanceY) && Math.abs(swipeDistanceX) > swipeThreshold) {
          // Horizontal swipe
          if (swipeDistanceX < 0) {
            girl.x -= girl.width; // Move left
          } else {
            girl.x += girl.width; // Move right
          }
        } else if (Math.abs(swipeDistanceY) > Math.abs(swipeDistanceX) && Math.abs(swipeDistanceY) > swipeThreshold) {
          // Vertical swipe
          if (swipeDistanceY < 0) {
            girl.y -= girl.height; // Move up
          } else {
            girl.y += girl.height; // Move down
          }
        }
      }

// Check for collision between the girl and monster
      function checkCollision() {
        return (
          girl.x < monster.x + monster.width &&
          girl.x + girl.width > monster.x &&
          girl.y < monster.y + monster.height &&
          girl.y + girl.height > monster.y
        );
      }

// Game over logic
      function gameOver() {
        alert("Game Over!");
      }

// Start the game
      init();
    })();
  </script>
</body>
</html>
```