diff --git a/assets/FlappyLixBackground2.png b/assets/FlappyLixBackground2.png
new file mode 100644
index 0000000..cc01c17
Binary files /dev/null and b/assets/FlappyLixBackground2.png differ
diff --git a/assets/FlappyLixPipe.png b/assets/FlappyLixPipe.png
new file mode 100644
index 0000000..f729d94
Binary files /dev/null and b/assets/FlappyLixPipe.png differ
diff --git a/assets/FlappyLixPipe2.png b/assets/FlappyLixPipe2.png
new file mode 100644
index 0000000..af3d7bd
Binary files /dev/null and b/assets/FlappyLixPipe2.png differ
diff --git a/assets/lixcloud1.png b/assets/lixcloud1.png
new file mode 100644
index 0000000..f643589
Binary files /dev/null and b/assets/lixcloud1.png differ
diff --git a/game.js b/game.js
new file mode 100644
index 0000000..e2da0da
--- /dev/null
+++ 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();
+})();
diff --git a/index.html b/index.html
index 9b5cba6..2b30e08 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,10 @@
FlappyLixi
+
-
+
+