Пытаюсь сделать простую игру, в которой объектом можно управлять с помощью клавиш со стрелками. Я хочу показать текст или предупреждение или добавить новые элементы html на странице, если объект попадает в указанное место c.
<script type="text/javascript">
//init object globally
var objImage = null;
function init() {
objImage = document.getElementById("image1");
objImage.style.position = 'relative';
objImage.style.left = '900px';
objImage.style.top = '500px';
}
function getKeyAndMove(e) {
var key_code = e.which || e.keyCode;
switch (key_code) {
case 37: //left arrow key
moveLeft();
break;
case 38: //Up arrow key
moveUp();
break;
case 39: //right arrow key
moveRight();
break;
case 40: //down arrow key
moveDown();
break;
}
}
function moveLeft() {
objImage.style.left = parseInt(objImage.style.left) - 5 + 'px';
}
function moveUp() {
objImage.style.top = parseInt(objImage.style.top) - 5 + 'px';
}
function moveRight() {
objImage.style.left = parseInt(objImage.style.left) + 5 + 'px';
objImage.style.left = parseInt(objImage.style.left) + 5 + 'px';
}
function moveDown() {
objImage.style.top = parseInt(objImage.style.top) + 5 + 'px';
}
window.onload = init;
</script>
<body onkeydown='getKeyAndMove(event)'>
<h2 style="position: fixed; left: 400px; top: 145px;">X</h2>
<img id="image1" height="55px" src="http://clipart-library.com/images_k/silhouette-pirate-ship/silhouette-pirate-ship-22.png" />
</body>
Любые предложения будут очень полезны, спасибо!