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

No:29204

A scary game where you play as a ghost. You displa..ALL
Developer User14445｜Date and time 23/12/16 17:44:23
Build time 43.915 sec｜Game capacity 3.847KB｜

Script

Sure! Here's an example of a scary game where you play as a ghost and scare the people using JavaScript. The game will be displayed in a single HTML file and will use pictograms to represent the characters. Please copy and save the following code in a file with a `.html` extension, then open it in a web browser to play.

Scary Ghost Game

To play the game, simply open the HTML file on a smartphone browser. The game canvas will display a green square representing the ghost and three red squares representing the people. Swipe up, down, left, or right on the screen to move the ghost. The goal is to scare the red squares by moving the ghost closer to them. Enjoy the game!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Scary Ghost Game</title>
  <style>
    body {
      background-color: black;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      color: white;
    }
  </style>
</head>
<body>
  <h1>Scary Ghost Game</h1>

// Define the characters
    const ghost = {
      x: 200,
      y: 200,
      width: 20,
      height: 20,
      color: "limegreen",
      speed: 4
    };

const people = [
      { x: 50, y: 50, width: 20, height: 20, color: "red" },
      { x: 150, y: 150, width: 20, height: 20, color: "red" },
      { x: 300, y: 300, width: 20, height: 20, color: "red" }
    ];

// Event listeners for smartphone operation
    canvas.addEventListener("touchstart", handleTouchStart, false);
    canvas.addEventListener("touchmove", handleTouchMove, false);
    canvas.addEventListener("touchend", handleTouchEnd, false);

// Handle touch events
    let touchStartX = 0;
    let touchStartY = 0;
    let touchEndX = 0;
    let touchEndY = 0;

function handleTouchStart(event) {
      touchStartX = event.touches[0].clientX;
      touchStartY = event.touches[0].clientY;
    }

function handleTouchMove(event) {
      event.preventDefault();
      touchEndX = event.touches[0].clientX;
      touchEndY = event.touches[0].clientY;
    }

function handleTouchEnd() {
      const swipeDirection = detectSwipeDirection();
      moveGhost(swipeDirection);
    }

function detectSwipeDirection() {
      const dx = touchEndX - touchStartX;
      const dy = touchEndY - touchStartY;
      const absDX = Math.abs(dx);
      const absDY = Math.abs(dy);

if (absDX >= absDY) {
        return dx > 0 ? "right" : "left";
      } else {
        return dy > 0 ? "down" : "up";
      }
    }

function moveGhost(direction) {
      switch (direction) {
        case "up":
          ghost.y -= ghost.speed;
          break;
        case "down":
          ghost.y += ghost.speed;
          break;
        case "left":
          ghost.x -= ghost.speed;
          break;
        case "right":
          ghost.x += ghost.speed;
          break;
        default:
          break;
      }
    }

// Draw the characters on the canvas
    function draw() {
      // Clear the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the ghost
      context.fillStyle = ghost.color;
      context.fillRect(ghost.x, ghost.y, ghost.width, ghost.height);

// Draw the people
      people.forEach(person => {
        context.fillStyle = person.color;
        context.fillRect(person.x, person.y, person.width, person.height);
      });

// Request next frame
      requestAnimationFrame(draw);
    }

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