Simple HTML Game: Control the Red Square with Arrow Keys
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Game: Control the Red Square</title>
<style>
div {
width: 300px;
height: 300px;
background-color: #ccc;
position: relative;
margin: auto;
}
#red {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 0;
left: 0;
transition: all 0.5s;
}
</style>
</head>
<body>
<div>
<div id='red'></div>
</div>
<script>
document.onkeydown = checkKey;
<p>function checkKey(e) {
e = e || window.event;</p>
<pre><code>if (e.keyCode == '37') {
// left arrow
updatePosition(-50, 0);
}
else if (e.keyCode == '39') {
// right arrow
updatePosition(50, 0);
}
else if (e.keyCode == '38') {
// up arrow
updatePosition(0, -50);
}
else if (e.keyCode == '40') {
// down arrow
updatePosition(0, 50);
}
</code></pre>
<p>}</p>
<p>function updatePosition(x, y) {</p>
<pre><code>var element = document.getElementById('red');
var currentTop = element.style.top;
var currentLeft = element.style.left;
if(currentTop == '') {
currentTop = '0px';
}
if(currentLeft == '') {
currentLeft = '0px';
}
currentTop = parseInt(currentTop);
currentLeft = parseInt(currentLeft);
var newTop = currentTop + y + 'px';
var newLeft = currentLeft + x + 'px';
element.style.top = newTop;
element.style.left = newLeft;
</code></pre>
<p>}
</script></p>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmti 著作权归作者所有。请勿转载和采集!