AI game creator

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

No:47437

←

Prev Next

→

Devive inputs
Developer User18896｜Date and time 24/2/28 3:16:17
Build time 11.627 sec｜Game capacity 2.026KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Pictogram Game</title>
</head>
<body>
  <div id="game">
    <img src="smiley.png" id="player" alt="Player">
    <img src="banana.png" id="obstacle" alt="Obstacle">
  </div>
  
  <script>
    // Get elements
    const player = document.getElementById("player");
    const obstacle = document.getElementById("obstacle");
    
    // Set initial position
    let playerX = 50;
    let playerY = 50;
    let obstacleX = 200;
    
    player.style.left = playerX + "px";
    player.style.top = playerY + "px";
    obstacle.style.left = obstacleX + "px";
    
    // Move player function
    const movePlayer = (direction) => {
      if (direction === "up" && playerY > 0) {
        playerY -= 10;
      } else if (direction === "down" && playerY < 90) {
        playerY += 10;
      }
      
      player.style.top = playerY + "px";
    }
    
    // Check for collision function
    const checkCollision = () => {
      if (playerX + player.width >= obstacleX && playerX <= obstacleX + obstacle.width &&
          playerY + player.height >= obstacleY && playerY <= obstacleY + obstacle.height) {
        alert("Game Over!");
      }
    }
    
    // Event listener for swipe gestures
    let startX;
    let startY;
    
    document.addEventListener("touchstart", (e) => {
      startX = e.touches[0].clientX;
      startY = e.touches[0].clientY;
    });
    
    document.addEventListener("touchend", (e) => {
      const endX = e.changedTouches[0].clientX;
      const endY = e.changedTouches[0].clientY;
      
      const diffX = endX - startX;
      const diffY = endY - startY;
      
      if (Math.abs(diffX) > Math.abs(diffY)) {
        if (diffX > 0) {
          obstacleX -= 10;
        } else {
          obstacleX += 10;
        }
      } else {
        if (diffY > 0) {
          movePlayer("down");
        } else {
          movePlayer("up");
        }
      }
      
      obstacle.style.left = obstacleX + "px";
      checkCollision();
    });
  </script>
</body>
</html>