Экран, следующий за «персонажем» - PullRequest
Новая
       2

Экран, следующий за «персонажем»

0 голосов
/ 20 мая 2018

Я пытаюсь получить следующее изображение: enter image description here

Затем, когда игрок движется (он щелкает), я хочу, чтобы видимая область двигалась вместе с ним.видимая область должна отображаться на весь экран.

В настоящее время у меня есть следующий код, но я не знаю, как сделать так, чтобы видна была только видимая область;

Код 

<body>
            <div class="map">       
                <div class="screen">
                    <div class="player">
                        <img class="ship" src="https://vignette.wikia.nocookie.net/darkorbit/images/a/a9/Neuergoli.jpg/revision/latest?cb=20120819231510">
                    </div>
                </div>
            </div>
        </body>

$(function(){
    $('.map .screen').on('click', function(event){
        var clickedPosX = event.pageX,
                clickedPosY = event.pageY;

        var $player = $('.screen');
        $player.animate({left:clickedPosX, top:clickedPosY}, 1000);
    });
});

JSFiddle

1 Ответ

0 голосов
/ 21 мая 2018

попробуйте это 

$(function(){
    var $map = $(".map");
    var $player = $('.player');

    var centerPlayerX = $player.offset().left + $player.width() / 2;
    var centerPlayerY = $player.offset().top + $player.height() / 2;

    $('.map').on('click', function(event){
        var clickedPosX = event.pageX,
            clickedPosY = event.pageY;

        var currentMapPositionX = parseFloat($map.css("background-position-x"));
        var currentMapPositionY = parseFloat($map.css("background-position-y"));

        var moveMapX = currentMapPositionX - clickedPosX + centerPlayerX;
        var moveMapY = currentMapPositionY - clickedPosY + centerPlayerY;

        $map.animate({ "background-position-x": `${moveMapX}px`, "background-position-y":  `${moveMapY}px` }, 1000);
    });
});

и добавьте background-repeat: repeat; в .map css

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

Нет похожих вопросов

...