added ground and background

Blatko1 · Mar 29, 2024 · 7f276b7 · 7f276b7
1 parent 203cf7b
commit 7f276b7
Show file tree

Hide file tree

Showing 47 changed files with 262 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -3,18 +3,34 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Jumpin' Man</title>
 </head>
 <body>
     <h1>Jumping man</h1>
-    <canvas id="canvas" width="800" height="600">
-        <img src="res/jump1.png" id="jump1">
-        <img src="res/jump2.png" id="jump2">
-        <img src="res/jump3.png" id="jump3">
-        <img src="res/jump4.png" id="jump4">
-        <img src="res/jump5.png" id="jump5">
-        <img src="res/jump6.png" id="jump6">
+    <canvas id="canvas" width="1100" height="600">
+        <img src="res/jump1.png" id="jump1" class="jumpSprite">
+        <img src="res/jump2.png" id="jump2" class="jumpSprite">
+        <img src="res/jump3.png" id="jump3" class="jumpSprite">
+        <img src="res/jump4.png" id="jump4" class="jumpSprite">
+        <img src="res/jump5.png" id="jump5" class="jumpSprite">
+        <img src="res/jump6.png" id="jump6" class="jumpSprite">
+
+        <img src="res/summer1/Summer1.png" id="background1" class="background">
+        <img src="res/summer2/Summer2.png" id="background2" class="background">
+        <img src="res/summer3/Summer3.png" id="background3" class="background">
+        <img src="res/summer4/Summer4.png" id="background4" class="background">
+        <img src="res/summer5/Summer5.png" id="background5" class="background">
+        <img src="res/summer6/Summer6.png" id="background6" class="background">
+        <img src="res/summer7/Summer7.png" id="background7" class="background">
+        <img src="res/summer8/Summer8.png" id="background8" class="background">
+
+        <img src="res/flock-of-birds-birds.gif" id="birds">
+
+        <img src="res/ground.png" id="ground">
     </canvas>
-    <script src="index.js"></script>
+
+    <script src="js/player.js"></script>
+    <script src="js/world.js"></script>
+    <script src="js/game.js"></script>
 </body>
 </html>
diff --git a/js/game.js b/js/game.js
@@ -0,0 +1,60 @@
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+const CANVAS_WIDTH = canvas.width;
+const CANVAS_HEIGHT = canvas.height;
+const ASPECT_RATIO = CANVAS_WIDTH / CANVAS_HEIGHT
+const GRAVITY = 1;
+const GROUND_HEIGHT = CANVAS_HEIGHT * 0.7;
+
+const jumpSprites = document.getElementsByClassName("jumpSprite");
+let player = new Player({ x: 100, y: 100 }, 30, jumpSprites, null);
+
+const groundTexture = document.getElementById("ground");
+const backgrounds = document.getElementsByClassName("background");
+let world = new World(groundTexture, backgrounds, 200);
+
+let lastTime = performance.now();
+let deltaTime = 1;
+let secondTimer = performance.now();
+let avgFPSTime = 0;
+let frameCount = 0;
+let FPSText = "FPS: ";
+
+function mainLoop() {
+  requestAnimationFrame(mainLoop);
+
+  // Update
+  player.update();
+  world.update();
+
+  // Draw
+  ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+
+  world.draw();
+  player.draw();
+
+  updateFPS();
+}
+
+function updateFPS() {
+  let currentTime = performance.now();
+  deltaTime = (currentTime - lastTime) / 1000.0;
+  lastTime = currentTime;
+  avgFPSTime += deltaTime;
+  frameCount++;
+
+  if (performance.now() - secondTimer > 1000) {
+    FPSText = "FPS: " + (1.0 / (avgFPSTime / frameCount)).toFixed(2);
+    secondTimer = performance.now();
+    frameCount = 0;
+    avgFPSTime = 0;
+  }
+  ctx.fillText(FPSText, 10, 10);
+}
+
+function changeBackground() {
+  world.alternateBackground()
+}
+
+mainLoop();
+setInterval(changeBackground, Math.random() * 5000 + 5000)
diff --git a/js/player.js b/js/player.js
@@ -0,0 +1,72 @@
+let pressed_space = false;
+
+class Player {
+  constructor(pos, speed, jumpingSprites, walkingSprites) {
+    this.pos = pos;
+    this.speed = speed;
+    this.velocity_y = 0;
+    this.is_in_air = true;
+    this.jump_height = 20;
+    this.scale = 0.7;
+    this.current_sprite = jumpingSprites[0];
+    this.jumpingSprites = jumpingSprites;
+    this.walkingSprites = walkingSprites;
+  }
+
+  draw() {
+    ctx.drawImage(
+      this.current_sprite,
+      this.pos.x - (this.current_sprite.width / 2) * this.scale,
+      this.pos.y - this.current_sprite.height * this.scale,
+      this.current_sprite.width * this.scale,
+      this.current_sprite.height * this.scale
+    );
+  }
+
+  update() {
+    this.process_input();
+    this.pos.y -= this.velocity_y * deltaTime * this.speed;
+    this.velocity_y -= GRAVITY * deltaTime * this.speed;
+    if (this.pos.y >= GROUND_HEIGHT) {
+      this.pos.y = GROUND_HEIGHT;
+      this.is_in_air = false;
+      this.velocity_y = 0;
+    }
+
+    if (this.velocity_y == 0) {
+      this.current_sprite = this.jumpingSprites[0];
+    } else if (Math.abs(this.velocity_y) < 9) {
+      this.current_sprite = this.jumpingSprites[3];
+    } else if (Math.abs(this.velocity_y) < 16) {
+      this.current_sprite = this.jumpingSprites[2];
+    } else {
+      this.current_sprite = this.jumpingSprites[1];
+    }
+  }
+
+  process_input() {
+    if (pressed_space) {
+      if (!this.is_in_air) {
+        player.is_in_air = true;
+        player.velocity_y += this.jump_height;
+      }
+    }
+  }
+}
+
+document.body.addEventListener("keydown", keyDown);
+document.body.addEventListener("keyup", keyUp);
+
+function keyDown(event) {
+  let key = event.key.toLowerCase();
+  if (key == " ") {
+    pressed_space = true;
+  }
+}
+
+function keyUp(event) {
+  let key = event.key.toLowerCase();
+  if (key == " ") {
+    pressed_space = false;
+  }
+}
diff --git a/js/world.js b/js/world.js
@@ -0,0 +1,105 @@
+class Tile {
+  constructor(x1, x2) {
+    this.x1 = x1;
+    this.x2 = x2;
+  }
+}
+
+class World {
+  constructor(groundTexture, backgrounds, groundScrollSpeed) {
+    this.tiles = [];
+    this.minWidthFactor = 0.7;
+    this.randWidthFactor = 1.0 - this.minWidthFactor;
+    this.holeWidth = 100;
+    this.groundOffset = 30;
+    this.groundScrollSpeed = groundScrollSpeed;
+    this.groundTex = groundTexture;
+    this.currentBgIndex = 0
+    this.lastBgIndex = null
+    this.bgAlpha = 1.0
+    this.transitionSpeed = 0.3
+    this.backgrounds = backgrounds;
+    //this.groundTex.onload = function () {
+    //  th
+    //}
+  }
+
+  update() {
+    // Generate or delete ground tiles
+    this.randWidthFactor = 1.0 - this.minWidthFactor;
+    if (this.tiles.length != 0) {
+      if (this.tiles[0].x2 < 0) this.tiles.shift();
+    }
+    while (this.tiles.length < 7) {
+      let last_tile_x = null;
+      if (this.tiles.length == 0) {
+        last_tile_x = -this.holeWidth;
+      } else {
+        last_tile_x = this.tiles[this.tiles.length - 1].x2;
+      }
+      let new_tile_x1 = last_tile_x + this.holeWidth;
+      let new_tile_x2 =
+        new_tile_x1 +
+        Math.min(
+          this.minWidthFactor * this.groundTex.width +
+            Math.random() * this.groundTex.width * this.randWidthFactor,
+          this.groundTex.width
+        );
+      let new_tile = new Tile(new_tile_x1, new_tile_x2);
+      this.tiles.push(new_tile);
+    }
+
+    // Move the ground tiles
+    for (let i = 0; i < this.tiles.length; i++) {
+      this.tiles[i].x1 -= deltaTime * this.groundScrollSpeed;
+      this.tiles[i].x2 -= deltaTime * this.groundScrollSpeed;
+    }
+
+    if (this.lastBgIndex != null) {
+        this.bgAlpha = Math.min(1.0, this.bgAlpha + deltaTime * this.transitionSpeed)
+        if (this.bgAlpha == 1.0) {
+            this.lastBgIndex = null
+        }
+    }
+  }
+
+  draw() {
+    if (this.lastBgIndex != null) {
+        let currentBg = this.backgrounds[this.currentBgIndex];
+        let lastBg = this.backgrounds[this.lastBgIndex];
+        ctx.globalAlpha = 1.0 - this.bgAlpha
+        ctx.drawImage(lastBg, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)
+        ctx.globalAlpha = this.bgAlpha
+        ctx.drawImage(currentBg, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)
+        ctx.globalAlpha = 1.0
+    } else {
+        let bg = this.backgrounds[this.currentBgIndex];
+        ctx.drawImage(bg, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)
+    }
+
+    for (let i = 0; i < this.tiles.length; i++) {
+      let tile = this.tiles[i];
+      let texWidth = tile.x2 - tile.x1;
+      let texHeight = this.groundTex.height;
+      ctx.drawImage(
+        this.groundTex,
+        0,
+        0,
+        texWidth,
+        texHeight,
+        tile.x1,
+        GROUND_HEIGHT - this.groundOffset,
+        texWidth,
+        texHeight
+      );
+    }
+  }
+
+  alternateBackground() {
+    if (this.lastBgIndex == null) {
+      this.bgAlpha = 0.0
+      this.lastBgIndex = this.currentBgIndex
+      this.currentBgIndex = Math.floor(Math.random() * this.backgrounds.length)
+    }
+  }
+}
diff --git a/res/flock-of-birds-birds.gif b/res/flock-of-birds-birds.gif
diff --git a/res/ground_unfiltered.jpg b/res/ground_unfiltered.jpg
diff --git a/res/sprites.webp b/res/sprites.webp
diff --git a/res/summer1/1.png b/res/summer1/1.png
diff --git a/res/summer1/2.png b/res/summer1/2.png
diff --git a/res/summer1/3.png b/res/summer1/3.png
diff --git a/res/summer1/4.png b/res/summer1/4.png
diff --git a/res/summer1/Summer1.png b/res/summer1/Summer1.png
diff --git a/res/summer2/1.png b/res/summer2/1.png
diff --git a/res/summer2/2.png b/res/summer2/2.png
diff --git a/res/summer2/3.png b/res/summer2/3.png
diff --git a/res/summer2/4.png b/res/summer2/4.png
diff --git a/res/summer2/Summer2.png b/res/summer2/Summer2.png
diff --git a/res/summer3/1.png b/res/summer3/1.png
diff --git a/res/summer3/2.png b/res/summer3/2.png
diff --git a/res/summer3/3.png b/res/summer3/3.png
diff --git a/res/summer3/4.png b/res/summer3/4.png
diff --git a/res/summer3/Summer3.png b/res/summer3/Summer3.png
diff --git a/res/summer4/1.png b/res/summer4/1.png
diff --git a/res/summer4/2.png b/res/summer4/2.png
diff --git a/res/summer4/3.png b/res/summer4/3.png
diff --git a/res/summer4/Summer4.png b/res/summer4/Summer4.png
diff --git a/res/summer5/1.png b/res/summer5/1.png
diff --git a/res/summer5/2.png b/res/summer5/2.png
diff --git a/res/summer5/3.png b/res/summer5/3.png
diff --git a/res/summer5/4.png b/res/summer5/4.png
diff --git a/res/summer5/Summer5.png b/res/summer5/Summer5.png
diff --git a/res/summer6/1.png b/res/summer6/1.png
diff --git a/res/summer6/2.png b/res/summer6/2.png
diff --git a/res/summer6/3.png b/res/summer6/3.png
diff --git a/res/summer6/4.png b/res/summer6/4.png
diff --git a/res/summer6/5.png b/res/summer6/5.png
diff --git a/res/summer6/Summer6.png b/res/summer6/Summer6.png
diff --git a/res/summer7/1.png b/res/summer7/1.png
diff --git a/res/summer7/2.png b/res/summer7/2.png
diff --git a/res/summer7/3.png b/res/summer7/3.png
diff --git a/res/summer7/4.png b/res/summer7/4.png
diff --git a/res/summer7/Summer7.png b/res/summer7/Summer7.png
diff --git a/res/summer8/1.png b/res/summer8/1.png
diff --git a/res/summer8/2.png b/res/summer8/2.png
diff --git a/res/summer8/3.png b/res/summer8/3.png
diff --git a/res/summer8/4.png b/res/summer8/4.png
diff --git a/res/summer8/Summer8.png b/res/summer8/Summer8.png