rdarius/FlappyLixi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

day 1

Browse Source
This commit is contained in:
Darius Rapalis
2024-03-19 21:47:20 +02:00
parent 18d5d30197
commit 6e1390d83e
7 changed files with 142 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/FlappyLixBackground2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 414 KiB

BIN
assets/FlappyLixPipe.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/FlappyLixPipe2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/lixcloud1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 346 KiB

119
game.js Normal file
View File

@@ -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();
})();

4
index.html
View File

@@ -4,8 +4,10 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FlappyLixi</title> <title>FlappyLixi</title>
<link type="text/css" href="style.css" rel="stylesheet" />
</head> </head>
<body> <body>
<canvas id="game" width="496" height="896"></canvas>
<script src="game.js"></script>
</body> </body>
</html> </html>

20
style.css Normal file
View File

@@ -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;
}