<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Dùng phím mũi tên để di chuyển!</h1>
<div class="box">
<div id="robot">O</div>
</div>
<script src="script.js"></script>
</body>
</html>
.box {
width: 400px;
height: 400px;
background-color:#4287f5;
position: relative;
margin:150px;
border:solid 4px white;
}
body {
background-color:#275db3;
text-align:center;
height:100px;
}
#robot {
font-size:50px;
position: absolute;
top: 0;
left: 0;
transition: 0.1s;
}
let x = 0;
let y = 0;
const robot = document.getElementById('robot');
document.addEventListener('keydown', function() {
if (event.key === "ArrowRight") {
x = x + 20;
} else if (event.key === "ArrowLeft") {
x = x - 20;
} else if (event.key === "ArrowDown") {
y = y + 20;
} else if (event.key ==="ArrowUp") {
y = y - 20;
}
robot.style.left = x + "px";
robot.style.top = y + "px";
if (x<0 || x>360 || y<0 || y>360) {
alert('You LOST, GAME OVER');
x = 0;
y = 0;
robot.style.left = "0px";
robot.style.right = "0px";
}
});