Игрок управляя лисой прыгает и бегает по платформам's game

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

No:30433

108

←

Prev Next

→

Игрок управляя лисой прыгает и бегает по платформа..ALL
Developer User14773｜Date and time 23/12/21 17:13:17
Build time 29.983 sec｜Game capacity 3.229KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Игра с лисой</title>
<style>
#gameCanvas {
  border: 1px solid black;
  width: 400px;
  height: 400px;
}
#fox {
  position: absolute;
  width: 50px;
  height: 50px;
  background-image: url('fox.png');
  background-size: cover;
}
.platform {
  position: absolute;
  width: 100px;
  height: 20px;
  background-color: gray;
}
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
window.onload = function() {
  let canvas = document.getElementById("gameCanvas");
  let ctx = canvas.getContext("2d");
  
  // Set canvas width and height
  canvas.width = canvas.height = 400;
  
  let score = 0;
  let gameInterval;
  let platforms = [];
  let fox = {
    x: 50,
    y: 300,
    width: 50,
    height: 50,
    velocityX: 0,
    velocityY: 0
  }
  
  // Fox image
  let foxImage = new Image();
  foxImage.src = "fox.png";
  
  // Platform class
  class Platform {
    constructor(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    }
  }
  
  // Generate platforms
  function generatePlatforms() {
    platforms.push(new Platform(50, 200, 100, 20));
    platforms.push(new Platform(200, 250, 100, 20));
    platforms.push(new Platform(100, 350, 100, 20));
  }
  
  // Check collision between fox and platforms
  function checkCollision() {
    for (let i = 0; i < platforms.length; i++) {
      if (fox.x < platforms[i].x + platforms[i].width &&
          fox.x + fox.width > platforms[i].x &&
          fox.y < platforms[i].y + platforms[i].height &&
          fox.y + fox.height > platforms[i].y) {
            fox.velocityY = 0;
            fox.y = platforms[i].y - fox.height;
            return;
          }
    }
  }
  
  // Update canvas
  function updateCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Draw fox
    ctx.drawImage(foxImage, fox.x, fox.y, fox.width, fox.height);
    
    // Draw platforms
    for (let i = 0; i < platforms.length; i++) {
      ctx.fillStyle = "gray";
      ctx.fillRect(platforms[i].x, platforms[i].y, platforms[i].width, platforms[i].height);
    }
    
    // Move fox
    fox.x += fox.velocityX;
    fox.y += fox.velocityY;
    
    // Apply gravity
    fox.velocityY += 1;
    
    // Check collision
    checkCollision();
    
    // Game over condition
    if (fox.y + fox.height > canvas.height) {
      clearInterval(gameInterval);
      alert("Игра окончена! Ваш счет: " + score);
      location.reload();
    }
  }
  
  // Keyboard controls
  document.addEventListener("keydown", function(event) {
    if (event.keyCode === 32) { // Space key
      if (fox.velocityY === 0) {
        fox.velocityY = -15;
      }
    }
    if (event.keyCode === 37) { // Left arrow key
      fox.velocityX = -5;
    }
    if (event.keyCode === 39) { // Right arrow key
      fox.velocityX = 5;
    }
  });
  
  document.addEventListener("keyup", function(event) {
    if (event.keyCode === 37 || event.keyCode === 39) {
      fox.velocityX = 0;
    }
  });
  
  // Start the game
  function startGame() {
    generatePlatforms();
    gameInterval = setInterval(updateCanvas, 20);
  }
  
  startGame();
}
</script>
</body>
</html>