Не могу разобраться в проекте Игра в напёрстки

@BB-8 · Регистрация: 21.12.2015

Author24 — интернет-сервис помощи студентам

Уважаемые форумчане, помогите, пожалуйста, написать код "javascript" или "jquery" в этой простейшей игре в напёрстки.
HTML и СSS я написал и расположил ниже, а вот с написанием "javascript" возникла проблема:
при нажатии кнопки "Start!", "шарик" .ball должен перемешаться по по массиву "var myArray ["70px", "270px", "470px"] (это расстояние от левой стороны .ball, высчитанное, чтобы каждый раз мячик оказывался прямо под любым из 3х стаканчиков), а после нажатия кнопки Choose your cup! юзер нажимал на стаканчик, он приподнимается, и если нет мячика - выводится оповещение в браузер" You loose!", ну и если есть мячик - "You win!"... Я имею представление о функциях, "for loops", "if ... else loops", а так же о движке "jquery" но что-то реально не догоняю что с чем первее сложить.... Заранее благодарю!

HTML5

   
<body>
        <h1>Test your luck!</h1>
 
        <button onclick="startGame()">Start!</button>
 
        <div class="ball"></div>
        <div class="trapezium cup"></div>
        <div class="trapezium cup"></div>
        <div class="trapezium cup"></div>
 
        <button onclick="endGame()">Choose your cup!</button>
    </body>

CSS

* { 
    box-sizing: border-box; 
    position: relative; 
}
 
html, body {
    height: 100%;
}
 
body {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    background-color: gray;
}
 
.ball {
    width: 60px;
    height: 60px;
    background-color: black;
    border-radius: 50px;
    left: 70px;
    top: 300px;
}
 
.trapezium {
    width: 200px;
    border-bottom: 300px solid #B8860B;
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
}
 
.cup {
    float: left;
}
 
.cup:active {
    bottom: 60px;
 
}

mixenik · 21.12.2015, 22:36

Визуально перемещение шарика должно отображаться?

@BB-8 · 21.12.2015, 22:57 **[ТС]**

визуально шарик не должен перемещаться

mixenik · 21.12.2015, 23:04

тогда зачем вам цикл? Достаточно при нажатии на кнопку генерировать случайное число от 0 до 2 включительно, брать значение из массива и отрисовывать шарик на необходимой позиции

@BB-8 · 22.12.2015, 00:12 **[ТС]**

у вас случайно не найдётся примерного решения?

mixenik · 22.12.2015, 21:08

Необходимо подключить jQuery

Javascript

function startGame(){
  $(".ball").hide();
}
 
function endGame(){
  var VALUES = ["70px", "270px", "470px"];
  var endValue = Math.round(Math.random()*2);
  $(".ball").css("left", VALUES[endValue]);
}

не тестировал, написано на коленке

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	21.12.2015, 22:36	2
	Визуально перемещение шарика должно отображаться? 0

@BB-8 0 / 0 / 0 Регистрация: 21.12.2015 Сообщений: 9
	21.12.2015, 22:57 [ТС]	3
	визуально шарик не должен перемещаться 0

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	21.12.2015, 23:04	4
	тогда зачем вам цикл? Достаточно при нажатии на кнопку генерировать случайное число от 0 до 2 включительно, брать значение из массива и отрисовывать шарик на необходимой позиции 0

@BB-8 0 / 0 / 0 Регистрация: 21.12.2015 Сообщений: 9
	22.12.2015, 00:12 [ТС]	5
	у вас случайно не найдётся примерного решения? 0

	22.12.2015, 21:08