0

Здравствуйте! Я написал что-то вроде кликера. При старте игры шар начинает менять своё положение рандомно (используя функцию getRandom(min, max)). Я получил значения ширины и высоты: x = window.innerWidth и y = window.innerHeigh. Далее положение шара меняется путем получения рандомного значения getRandom (1, x - 100) для перемещения по горизонтали и getRandom (1, x - 100) для перемещения по вертикали. Но шар почему-то уходит за границы экрана, хотя я от innerWidth и innerHeight отнимаю 100. По сути, innerWidth и innerHeight - это высота и ширина рабочей области браузера, а я вдобавок еще и отнимаю 100 от этих значений, так почему же шар все равно уходит за границы рабочей области? Заранее благодарен.

window.onload = function () {
    var start = document.getElementById("start"), // Меню
        setgs = document.getElementById("setgs"),
        back = document.getElementById("back"),
        exit = document.getElementById("exit");
    var divSizePlus = document.getElementById("divSizePlus"), // Настройки
        divSizeMinus = document.getElementById("divSizeMinus"),
        divSpeedPlus = document.getElementById("divSpeedPlus"),
        divSpeedMinus = document.getElementById("divSpeedMinus");
    var sizePlus = document.getElementById("sizePlus"), // Кнопки в настройках
        sizeMinus = document.getElementById("sizeMinus"),
        speedPlus = document.getElementById("speedPlus"),
        speedMinus = document.getElementById("speedMinus");
    var timer; // Таймер для интервала в настройках
    var timer1; // Таймер для интервала при старте игры
    var circle = document.getElementById("circle"); // Шар
    var score = document.getElementById("score"), // Очки
        points = document.getElementById("points"); 
    var size = document.getElementById("size"); // Отображение текущего размера
    var speed = document.getElementById("speed"); // Отображение текущей скорости
    var con = 0; // Используется в функции в настройках для изменения положения шара
    var changeSpeed = 800; // Значение, указывающие с каким интервалом вызывать функцию
    
    setgs.onclick = function () { // Запуск функции при нажатии на Settings
        back.style.margin = "90px 0 0 500px";
        divSizePlus.style.display = "block";
        divSizeMinus.style.display = "block";
        divSpeedPlus.style.display = "block";
        divSpeedMinus.style.display = "block";
        back.style.display = "block";
        circle.style.display = "block";
        circle.style.display = "block";
        size.style.display = "block";
        speed.style.display = "block";
        start.style.display = "none";
        setgs.style.display = "none";
        
        var plusSize = 80,
            minusSize = 80,
            defSize = 80,
            sumPlus = 0,
            sumMinus = 0,
            radius = 50,
            counter = 5;
        
        sizePlus.onclick = function () { // Увеличить размер
            if (defSize === 125) {
                plusSize.style.cursor = "none";   
            }
            plusSize = defSize;
            sumPlus = plusSize + counter;
            circle.style.borderRadius = radius + "px";
            circle.style.width = sumPlus + "px";
            circle.style.height = sumPlus + "px";
            plusSize = sumPlus;
            defSize = plusSize; 
            radius = radius + counter;
            size.innerHTML = "(" + defSize + ")";
        };
        
        sizeMinus.onclick = function () { // Уменьшить размер
            if (defSize === 15) {
                minusSize.style.cursor = "none";
            }
            minusSize = defSize;
            sumMinus = minusSize - counter;
            circle.style.width = sumMinus + "px";
            circle.style.height = sumMinus + "px";
            minusSize = sumMinus;
            defSize = minusSize;
            size.innerHTML = "(" + defSize + ")";
        };
        
        speedPlus.onclick = function () { // Увеличить скорость
            if (changeSpeed === 350) {
                changeSpeed.style.cursor = "none";   
            }
            changeSpeed = changeSpeed - 50;
            clearInterval(timer1);
            speed.innerHTML = "(" + changeSpeed + ")";
            timer1 = setInterval(setgsOfSpeed, changeSpeed);
        }; 
        
        speedMinus.onclick = function () { // Уменьшить скорость
            if (changeSpeed === 3000) {
                changeSpeed.style.cursor = "none";   
            }
            changeSpeed = changeSpeed + 50;
            clearInterval(timer1);
            speed.innerHTML = "(" + changeSpeed + ")";
            timer1 = setInterval(setgsOfSpeed, changeSpeed);
        };
        
        function setgsOfSpeed () { // Функция изменения положения шара в настройках
            con++;
            if ( (con%2) === 1 ) {
                circle.style.left = -330 + "px";
            }
            else if ( (con%2) === 0 ) {
                circle.style.left = -160 + "px";    
            }
        }
        timer1 = setInterval(setgsOfSpeed, changeSpeed);
    }
    
    back.onclick = function () { // Выход из настроек
        clearInterval(timer1);
        divSizePlus.style.display = "none";
        divSizeMinus.style.display = "none";
        divSpeedPlus.style.display = "none";
        divSpeedMinus.style.display = "none";
        circle.style.display = "none";
        back.style.display = "none";
        size.style.display = "none";
        speed.style.display = "none";
        start.style.display = "block";
        setgs.style.display = "block";
    }
    
    start.onclick = function () { // Начало игры
        circle.style.margin = "-5px 0 0 165px";
        start.style.display = "none";
        setgs.style.display = "none";
        circle.style.display = "block";
        exit.style.display = "block";
        score.style.display = "block";
        points.style.display = "block";
        var count = 0; // Очки
        
        function position () { // Функция изменения положения шара во время игры
            var x = window.innerWidth, 
                y = window.innerHeight;
                circle.style.left = getRandom(1,x-100) + "px";
                circle.style.top = getRandom(1,y-100) + "px";
        };
        timer = setInterval(position, changeSpeed);
        
        circle.onclick = function () { // Подсчет очков
            circle.style.backgroundColor = "hsl(" + getRandom(0,360)+",75%,50%)"; 
            count++;
            score.innerHTML = count; 
        };
        
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }; 
    }
    
    exit.onclick = function () { // Завершение игры
        clearInterval(timer);
        score.innerHTML = ""; //Обнуление счетчика
        circle.style.left = -150 + "px";
        circle.style.top = 43 + "px";
        circle.style.backgroundColor = "aqua";
        circle.style.display = "none";
        exit.style.display = "none";
        points.style.display = "none";
        score.style.display = "none";
        start.style.display = "block";
        setgs.style.display = "block";
    }  
}
div {
    position: absolute;
    margin: 230px 0 0 600px; 
    cursor: pointer;
}

/* Текст в меню */
span { 
    position: absolute;
    left: 35px;
    top: 4px;
    cursor: default;
}

body {
    background-image: url(images/fon.jpg);
    font-family: Arial Black;
    color: bisque;
    font-size: 25px;
}

#circle {
    position: absolute;
    left: -160px;
    top: 53px;
    width: 80px;
    height: 80px;
    background-color: aqua;
    border-radius: 50px;
    display: none;
    cursor: default;
}

/* меню */
#start {
    top: 10px; 
}

#setgs {
    top: 30px;
    margin-top: 260px; 
}

#back {
    top: 280px;
    left: 108px;
    display: none;
}

#exit {
    display: none;
    top: -218px;
    left: 696px;
}

#points {
    left: 8px;
    top: 10px;
    display: none;
} 

#score {
    margin-top: 35px;
    display: none;
}

/* блоки с кнопками настроек */
#divSizePlus {
    top: 50px;
    left: 70px;
    display: none;
}

#divSizeMinus {
    top: 50px;
    display: none;
}

#divSpeedPlus {
    left: 70px;
    top: 90px;
    display: none;
}

#divSpeedMinus {
    top: 90px;
    display: none;
} 

/* кнопки + - */
input {
    background-color: burlywood;
    border: 1px solid burlywood;
    width: 26px;
    height: 25px;
    cursor: pointer;
}

#size {
    position: absolute;
    top: 61px;
    left: 195px;
    font-size: 16px;
    display: none;
}

#speed {
    position: absolute;
    top: 100px;
    left: 195px;
    font-size: 16px;
    display: none;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Clicker</title>
    <link href="Test.css" rel="stylesheet" type="text/css" />
</head>
<body>

    
   
    <div id="start">Start</div>
    <div id="setgs">Settings</div>
    <div id="back">Back</div>
    <div id="divSizePlus"><input type="button" value="+" id="sizePlus"><span>Size</span></div>
    <div id="divSizeMinus"><input type="button" value="-" id="sizeMinus"></div>
    <div id="divSpeedPlus"><input type="button" value="+" id="speedPlus"><span>Speed</span></div>
    <div id="divSpeedMinus"><input type="button" value="-" id="speedMinus"></div> 
    <div id="circle"></div>
    <div id="exit">Exit</div>
    <span id="points">Point: </span> <p id="score"></p>    
    <div id="size"></div>
    <div id="speed"></div>
  <!--  <embed src="Savant - Rise Up.mp3" width="70" height="45" align="left" hidden="True" autostart="True" loop="True" id="music"> -->
    
<script src="Test.js"></script>
</body>
</html>

1 ответ 1

0

У меня получилось словить вот такие цифры: Left 1617px , Top:732 и при размерах экрана 1760 на 838... Кажись дело все в вашем марджине у элемента circle. Потому что 165 px марджина смещает круг вправо. Вот такое значение у элемента, который с айдишником circle при работе программы: -5px 0px 0px 165px. Надо просто убрать левый маржин 165 и все будет ок.

1
  • Спасибо, помогло! У меня еще один вопрос. У меня в настройках у шара начальные значения left: -160px и значение top: 53px. Если начать игру, а потом завершить и зайти в настройки, то я хотел бы, чтобы шар был на этой же начальной позиции. Как это можно реализовать? 25 авг 2017 в 13:08

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.