guzsarchives/learn-to-code
Archived
1
0
Fork 0
Code Activity

initial commit

Browse Source
This commit is contained in:
Guz
2024-10-26 23:20:13 -03:00
commit 96001fa1c6
3 changed files with 107 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
index.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first website!</title>
<link rel="stylesheet" href="style.css">
<script type="module" src="script.js"></script>
</head>
<body>
<main>
<h1>Hello, world!</h1>
<p>This is my first website! I hope you like it ;)</p>
<ul>
<p>Here are my socials:</p>
<li><a href="https://tumblr.com/guz013">Tumblr</a></li>
<li><a href="https://instagram.com/guz013_">Instagram</a></li>
<li><a href="https://bsky.app/profile/guz.one">BlueSky</a></li>
</ul>
<p>You can find my projects <a href="https://forge.capytal.company/guz013">here!</a></p>
</main>
<div id="background"></div>
<div
id="player"
style="width:5rem; height:5rem; position:absolute; left:45%; bottom:20%; z-index:3;"
>
<img
src="https://opengameart.org/sites/default/files/Stalkette%20%281%29.gif"
style="width:100%; height:100%;"
/>
</div>
</body>
</html>

32
script.js Normal file
View File

@@ -0,0 +1,32 @@
let player = document.querySelector("#player")
player.setAttribute("data-coordinates", JSON.stringify({
x: 45,
y: 20,
}))
player.setAttribute("style", `left:${45}%; bottom:${20}%; width:5rem; height:5rem; position:absolute; z-index: 3;`)
function onKeyDown(event) {
let coordinates = JSON.parse(player.getAttribute("data-coordinates"))
if (event.key == "d") {
coordinates.x = coordinates.x + 1
}
if (event.key == "a") {
coordinates.x = coordinates.x - 1
}
if (event.key == "w") {
coordinates.y = coordinates.y + 1
}
if (event.key == "s") {
coordinates.y = coordinates.y - 1
}
player.setAttribute("style", `left:${coordinates.x}%; bottom:${coordinates.y}%; width:5rem; height:5rem; position:absolute; z-index: 3;`)
player.setAttribute("data-coordinates", JSON.stringify(coordinates))
}
document.addEventListener("keydown", onKeyDown)

42
style.css Normal file
View File

@@ -0,0 +1,42 @@
#background {
width: 100vw;
height: 100vh;
background-color: black;
background-image: url(https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-repeat: no-repeat;
background-size: cover;
opacity: 0.2;
filter: blur(5px);
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
body {
display: flex;
background-color: black;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow-y: hidden;
}
main {
color: white;
font-family: sans-serif;
z-index: 2;
}
a {
color: aqua;
}