html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="container">
<div class="object"></div>
</div>
<div id="control">
<div class="title">Controls</div>
<button class="btn up" onclick="up()">Up</button>
<button class="btn down" onclick="down()">Down</button>
<button class="btn left" onclick="left()">Left</button>
<button class="btn right" onclick="right()">Right</button>
</div>
</body>
</html>
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 {
margin: 0;
}
#container {
width: 96%;
height: 300px;
border: 4px solid orange;
margin: 10px auto;
position: relative;
overflow: hidden;
background-color: beige;
}
.object {
width: 50px;
height: 50px;
background-color: darkgreen;
position: absolute;
left: 100px;
top: 100px;
transition: all .5s;
border-radius: 50%;
box-shadow: 1px 2px 5px gray;
}
#control {
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 obj, posX=100, posY=100;
window.onload = function() {
obj = document.querySelector("#container .object");
// posX = obj.style.left;
// posY = obj.style.top;
document.addEventListener("keydown", function(event) {
var key = event.which || event.keyCode;
// Left: 37 Up: 38 Right: 39 Down: 40
if(key==37) left();
else if(key==38) up();
else if(key==39) right();
else if(key==40) down();
});
}
function left() {
posX -= 50;
obj.style.left = posX + "px";
}
function right() {
posX += 50;
obj.style.left = posX + "px";
}
function up() {
posY -= 50;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run