day 1

2024-03-19 21:47:20 +02:00
parent 18d5d30197
commit 6e1390d83e
7 changed files with 142 additions and 1 deletions
--- a/assets/FlappyLixBackground2.png
+++ b/assets/FlappyLixBackground2.png
--- a/assets/FlappyLixPipe.png
+++ b/assets/FlappyLixPipe.png
--- a/assets/FlappyLixPipe2.png
+++ b/assets/FlappyLixPipe2.png
--- a/assets/lixcloud1.png
+++ b/assets/lixcloud1.png
--- a/game.js
+++ b/game.js
@@ -0,0 +1,119 @@
+
+
+class ImageAsset {
+
+  image;
+  width;
+  height;
+  x = 0;
+  y = 0;
+
+  setPosition(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  load(url) {
+    return new Promise((resolve, reject) => {
+      this.image = document.createElement('img');
+      this.image.src = url;
+      this.image.onload = () => {
+        this.width = this.image.width;
+        this.height = this.image.height;
+        resolve();
+      }
+    });
+  }
+
+  scale(scale) {
+    this.width = Math.floor(this.image.width * scale);
+    this.height = Math.floor(this.image.height * scale);
+  }
+
+  setToHeight(height) {
+    const scale = height / this.image.height;
+    this.scale(scale);
+  }
+
+  setToWidth(width) {
+    const scale = width / this.image.width;
+    this.scale(scale);
+  }
+
+  draw(context) {
+    context.drawImage(this.image, this.x, this.y, this.width, this.height);
+  }
+
+}
+
+class Game {
+
+  canvas;
+  context;
+  lastTick = Date.now();
+  deltaTime;
+
+  assets = {
+    background: null,
+    pipe1: null,
+    pipe2: null,
+    character: null,
+  };
+
+  constructor() {
+    this.canvas = document.getElementById('game');
+    this.context = this.canvas.getContext('2d');
+    this.prepare();
+  }
+
+  async prepare() {
+    await this.loadAssets();
+    this.draw();
+  }
+
+  async loadAssets() {
+    return new Promise(async (resolve, reject) => {
+      this.assets.background = new ImageAsset();
+      await this.assets.background.load('./assets/FlappyLixBackground2.png');
+      this.assets.pipe1 = new ImageAsset();
+      this.assets.pipe1.setPosition(300, 0);
+      await this.assets.pipe1.load('./assets/FlappyLixPipe.png');
+      this.assets.pipe2 = new ImageAsset();
+      this.assets.pipe2.setPosition(300, 500);
+      await this.assets.pipe2.load('./assets/FlappyLixPipe2.png');
+      this.assets.character = new ImageAsset();
+      await this.assets.character.load('./assets/lixcloud1.png');
+      this.assets.character.setToHeight(100);
+      resolve();
+    });
+  }
+
+  draw() {
+    const currentTime = Date.now();
+    this.deltaTime = currentTime - this.lastTick;
+    this.lastTick = currentTime;
+
+    this.assets.pipe1.x -= this.deltaTime / 10;
+    this.assets.pipe2.x -= this.deltaTime / 10;
+    if(this.assets.pipe1.x < 0) {
+      this.assets.pipe1.x = this.assets.pipe1.width;
+    }
+    if(this.assets.pipe2.x < 0) {
+      this.assets.pipe2.x = this.assets.pipe2.width;
+    }
+
+    this.assets.background.draw(this.context);
+    this.assets.pipe1.draw(this.context);
+    this.assets.pipe2.draw(this.context);
+    this.assets.character.draw(this.context);
+
+    requestAnimationFrame(() => {
+      this.draw();
+    });
+  }
+
+}
+
+(() => {
+  new Game();
+})();
--- a/index.html
+++ b/index.html
@@ -4,8 +4,10 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FlappyLixi</title>
+    <link type="text/css" href="style.css" rel="stylesheet" />
  </head>
  <body>
-    
+    <canvas id="game" width="496" height="896"></canvas>
+    <script src="game.js"></script>
  </body>
 </html>
--- a/style.css
+++ b/style.css
@@ -0,0 +1,20 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: black;
+  overflow: hidden;
+}
+
+canvas {
+  position: fixed;
+  top: 50vh;
+  left: 50vw;
+  transform: translate(-50%, -50%);
+  height: 100vh;
+  width: auto;
+  background: pink;
+}