Если JS управляемый клавиатурой объект приземляется в заданную c позицию, то выполнить что-то - PullRequest
0 голосов
/ 15 апреля 2020

Пытаюсь сделать простую игру, в которой объектом можно управлять с помощью клавиш со стрелками. Я хочу показать текст или предупреждение или добавить новые элементы 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>


Любые предложения будут очень полезны, спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...