AI game creator

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

No:35595

←

Prev Next

→

Geometry jump
Developer User16561｜Date and time 24/1/14 23:52:30
Build time 14.021 sec｜Game capacity 3.65KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Geometry Jump</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    #gameCanvas {
      background-color: #000;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    #score {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #fff;
      font-size: 20px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <div id="score">Score: 0</div>
  
  <script>
    // Game variables
    var canvas;
    var context;
    var player;
    var obstacles = [];
    var score = 0;
    var isGameOver = false;
    
    // Pictograms
    var playerImage = new Image();
    var obstacleImage = new Image();
    playerImage.src = "player.png";
    obstacleImage.src = "obstacle.png";
    
    // Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");
      player = { x: 50, y: canvas.height / 2 - 25, width: 50, height: 50, jump: 15 };
      
      // Event listeners for touch and mouse click
      canvas.addEventListener("touchstart", jump);
      canvas.addEventListener("mousedown", jump);
      
      setInterval(update, 20);
      setInterval(spawnObstacle, 2000);
    }
    
    // Update game state
    function update() {
      if (!isGameOver) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        
        for (var i = 0; i < obstacles.length; i++) {
          obstacles[i].x -= 5;
          drawObstacle(obstacles[i]);
          
          if (isCollision(player, obstacles[i])) {
            gameOver();
          }
        }
        
        drawPlayer(player);
        score++;
        document.getElementById("score").innerHTML = "Score: " + score;
      }
    }
    
    // Draw player
    function drawPlayer(player) {
      context.drawImage(playerImage, player.x, player.y, player.width, player.height);
    }
    
    // Draw obstacle
    function drawObstacle(obstacle) {
      context.drawImage(obstacleImage, obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    }
    
    // Spawn obstacle
    function spawnObstacle() {
      var obstacle = { x: canvas.width, y: canvas.height / 2 - 25, width: 50, height: 50 };
      obstacles.push(obstacle);
    }
    
    // Player jump
    function jump() {
      if (!isGameOver) {
        player.y -= player.jump;
      }
    }
    
    // Check collision between player and obstacle
    function isCollision(player, obstacle) {
      if (player.x < obstacle.x + obstacle.width &&
      player.x + player.width > obstacle.x &&
      player.y < obstacle.y + obstacle.height &&
      player.y + player.height > obstacle.y) {
        return true;
      }
      return false;
    }
    
    // Game over logic
    function gameOver() {
      isGameOver = true;
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      var gameOverText = "Game Over";
      var scoreText = "Score: " + score;
      
      context.fillStyle = "#fff";
      context.font = "bold 40px Arial, sans-serif";
      context.fillText(gameOverText, canvas.width / 2 - (context.measureText(gameOverText).width / 2), canvas.height / 2);
      
      context.font = "bold 30px Arial, sans-serif";
      context.fillText(scoreText, canvas.width / 2 - (context.measureText(scoreText).width / 2), canvas.height / 2 + 40);
    }
    
    // Start the game
    init();
  </script>
</body>
</html>