html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Lava Apocalypse</title>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
<div id = "camera">
<div id = "rep" onclick = "replay()">Replay</div>
<div id = "container">
<div id = "avatar"></div>
</div>
</div>
<div id = "eyesight"></div>
<div id = "movements">
<i class='fas fa-arrow-alt-circle-up' onclick = "move(0, -1)"></i>
<i class='fas fa-arrow-alt-circle-right' onclick = "move(1, 0)"></i>
<i class='fas fa-arrow-alt-circle-down' onclick = "move(0, 1)"></i>
<i class='fas fa-arrow-alt-circle-left' onclick = "move(-1, 0)"></i>
<div id = "rightClick" class = "cl" onclick = "move(1, 0)"></div>
<div id = "leftClick" class = "cl" onclick = "move(-1, 0)"></div>
<div id = "topClick" class = "cl" onclick = "move(0, -1)"></div>
<div id = "downClick" class = "cl" onclick = "move(0, 1)"></div>
</div>
<div id = "winBox">
<p>Congratulations, you survived!</p>
<div onclick = "replay()" id = "repButton">Next Level</div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#avatar{
position:absolute;
width:12vmin; height:17vmin;
left:0; top:0;
background:url("https://imgur.com/jnydmUU.jpg");
background-size:80%, 100%;
background-position:center;
background-repeat:no-repeat;
z-index:3;
transition:transform 0.2s;
}
body{
margin:0;
overflow:scroll;
position:fixed;
width:100%; height:100%;
opacity:0;
transition:opacity 1s;
user-select:none;
cursor:default;
}
html::-webkit-scrollbar, body::-webkit-scrollbar, #camera::-webkit-scrollbar{
display:none;
}
#camera{
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var $ = (id) => document.getElementById(id);
var left = 20;
var topPosition = 3;
//Function for avatar movement animation
function animate(x){
$(x).style.left = document.getElementsByClassName("block")[left].offsetLeft + $(x).offsetWidth/4 + "px";
$(x).style.top = document.getElementsByClassName("block")[topPosition * 40].offsetTop + $(x).offsetHeight/4 + "px";
}
function move(dirX = 0, dirY = 0, whichPlayer = "avatar"){
//If statement for x borders collision.
if((left > 0 || dirX == 1) && (left < 39 || dirX == -1)){
if(document.getElementsByClassName("block")[topPosition * 40 + left + dirX].classList.contains("good")){
left+=dirX;
animate(whichPlayer);
if(dirX !== 0) {$(whichPlayer).style.transform = `rotateY(${90 - dirX * 90}deg)`;}
}
}
//If statement for y borders collision.
if((topPosition > 0 || dirY == 1) && (topPosition < 39 || dirY == -1)){
if(document.getElementsByClassName("block")[topPosition * 40 + left + dirX + dirY*40].classList.contains("good")){
topPosition += dirY;
animate(whichPlayer);
}
}
//Camera following the avatar.
$("camera").scrollTo($(whichPlayer).offsetLeft + $(whichPlayer).offsetWidth / 2 - innerWidth / 2, $(whichPlayer).offsetTop + $(whichPlayer).offsetHeight / 2 - innerHeight / 2);
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run