Здравствуйте! Я написал что-то вроде кликера. При старте игры шар начинает менять своё положение рандомно (используя функцию 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>