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
<!-- idea by dynk -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="con" class="container">
<div id="sqr" class="sqr"></div>
</div>
<br>
<p class="pos">xpos: <span id="locX">0</span><br>
ypos: <span id="locY">0</span></p>
<br>
<div class="nav">
<button onclick="movR()">Go R</button>
<button onclick="movL()">Go L</button>
<button onclick="stopH()">Stop H</button>
<button onclick="movU()">Go U</button>
<button onclick="movD()">Go D</button>
<button onclick="stopV()">Stop V</button>
<button onclick="stopA()">Stop A</button>
</div>
<script>
const dt = 50; //bigger value slower speed
const conP = con.getBoundingClientRect();
//values must be rounded for > < == to work
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
*{
box-sizing:border-box;
padding:0;
margin:0;
}
body{
width:100vw;
display:flex;
flex-direction:column;
}
.container{
margin:100px auto auto auto;
margin-top:100px;
/*position:absolute;*/
width:200px;
height:200px;
border: 1px solid #333;
}
.pos{
margin:auto;
display:inline-block;
}
.nav{
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run