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

update

Browse Source
This commit is contained in:
Darius Rapalis
2024-03-17 11:53:33 +02:00
parent 0313d6abb3
commit f77246baae
4 changed files with 84 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
background-day.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

84
index.html Normal file
View File

@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FlappyLixiss</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
overflow: hidden;
}
#game {
position: fixed;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
height: 100vh;
aspect-ratio: 9/16;
background: purple;
}
</style>
</head>
<body>
<canvas id="game" width="288" height="512"></canvas>
<script>
(() => {
const canvas = document.getElementById("game");
const context = canvas.getContext("2d");
const background = document.createElement("img");
background.src = "background-day.png";
const pipeTop = document.createElement("img");
pipeTop.src = "pipe-green-top.png";
const pipeBottom = document.createElement("img");
pipeBottom.src = "pipe-green-bottom.png";
let deltaTime = 0;
let lastTick = Date.now();
// canvas.height = window.innerHeight;
// canvas.width = Math.floor((window.innerHeight / 16) * 9);
let pipeX = canvas.width;
let pipeY = canvas.height / 2;
const draw = () => {
const currentTick = Date.now();
deltaTime = currentTick - lastTick;
lastTick = currentTick;
pipeX -= deltaTime / 3;
if (pipeX < -pipeTop.width) {
pipeX = canvas.width;
pipeY = Math.floor((Math.random() - 0.5) * 200 + canvas.height / 2);
}
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(background, 0, 0, canvas.width, canvas.height);
context.drawImage(pipeTop, pipeX, pipeY - pipeTop.height - 50);
context.drawImage(pipeBottom, pipeX, pipeY + 50);
context.strokeStyle = "orange";
context.beginPath();
context.rect(
Math.floor(Math.random() * 100),
Math.floor(Math.random() * 100),
150,
100
);
context.stroke();
requestAnimationFrame(draw);
};
draw();
})();
</script>
</body>
</html>

BIN
pipe-green-bottom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
pipe-green-top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB