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
<!-- a work in progress by a total novice
All advice, improvements or comments welcome 🙏
-->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id = "backing">
<div id = "path">
<div id = "box"></div>
</div>
<div id = "arrowkeys">
<button id = "up">^</button>
<button id = "left"><</button>
<button id = "down"></button>
<button id = "right">></button>
</div>
<p id = "score">Score: 0</p>
</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
body {
position: fixed;
height: 100%;
width: 100%;
}
#backing {
position: relative;
border: 2px solid black;
height: 95%;
width: 95%;
border-radius: 30px;
}
#score {
position: fixed;
top: 90%;
left: 80%;
}
#path {
position: absolute;
top: 45%;
left: 45%;
}
#box {
position: absolute;
top: 45%;
left: 45%;
height: 30px;
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
window.onload = function() {
score = document.getElementById("score");
var scr = 0;
path = document.getElementById("path");
box = document.getElementById("box"); //our moving piece
var posY = 45; //vertical position of box
var posX = 45; //horizontal position of box
btnup = document.getElementById("up");
btnleft = document.getElementById("left");
btndown = document.getElementById("down");
btnright = document.getElementById("right");
nom = document.createElement('div'); //our target piece
nom.id = 'nom';
var X = Math.ceil(Math.random()*80 + 10); //random number between 10 and 90
var Y = Math.ceil(Math.random()*80 + 10); //random number between 10 and 90
nom.style.left = X + "%"; //horizontal position = X %;
nom.style.top = Y + "%"; //vertical position = Y %;
document.body.appendChild(nom); //append nom element to page;
function collision(elm1, elm2) { //creating a function for when two elements collide
var elm1Rect = elm1.getBoundingClientRect();
var elm2Rect = elm2.getBoundingClientRect();
return (elm1Rect.right >= elm2Rect.left && elm1Rect.left <= elm2Rect.right)
&& (elm1Rect.bottom >= elm2Rect.top && elm1Rect.top <= elm2Rect.bottom);
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run