Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как зациклить анимацию рандомных фигур в игре jquery? (https://javascript.ru/forum/jquery/68926-kak-zaciklit-animaciyu-randomnykh-figur-v-igre-jquery.html)

pershay 17.05.2017 21:02

Как зациклить анимацию рандомных фигур в игре jquery?
 
Должна получиться игра, суть которой следующая: произвольная фигура (circle, square, triangle, rhombus) движется слево направо в игровом поле 80% от ширины браузера. Когда игрок нажимает на фигуру она исчезает, очки добавляются к счету (от 0 до 100 очков, в зависимости от того, насколько далеко фигура успела сместится от левого края). Следующая произвольная фигура начинает движение. Вопросы: как зациклить анимацию? Каким образом выводить фигуры рандомно (Math.random()?).
https://jsfiddle.net/gc0jv3s8/1/

j0hnik 17.05.2017 21:30

#circle {
  animation: circ 10s infinite;
}
@keyframes circ {
	0% {left: 0%;}
	100% {left: 100%;}
}

j0hnik 17.05.2017 21:33

только ко всем фигурам надо добавить
@keyframes можно оставить один!

рони 17.05.2017 22:02

игра меткий стрелок animate jquery
 
pershay,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body {
  text-align: center;
  background: #F0EFEE;
  color: #777;
}

.count {
  position: fixed;
  display: inline-block;
  float: left;
  padding: 10px 20px;
  background: #fff;
  font: 1.5rem/1 monospace;
  border-radius: .25rem;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
  z-index:20;
  left:20px;
  top:15px;
}
.err{
  top: 65px;
  color: hsla(0, 100%, 50%, 1);
}
.total{
  top: 115px;
}

.linear {
  overflow: hidden;
  display: inline-block;
  position: relative;
  margin: 20px 16px 20px 20px;
  width: 80%;
  height: 400px;
  background:white;
}

.circle {
  position: absolute;
  width: 45px;
  height: 45px;
  left: 0;
  top: 150px;
  border-radius: 50%;
  background: #F6AC31;

}

.rhombus {
    border-style: solid;
    border-color: transparent transparent #00BFFF transparent;
    border-width: 0 15px 15px 15px;
    height: 0;
    width: 30px;
    left: 0;
    top: 150px;
    position: absolute;

}
.rhombus:after {
    content: "";
    position: absolute;
    top: 15px;
    left: -15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #00BFFF transparent transparent transparent;
    border-width: 40px 30px 0 30px;
}

.item{
  cursor: crosshair;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
var cls = ["circle", "rhombus"],
    n = 0,
    e = -1,
    total = 0,
    m = 0,
    c = "circle";

function go(a) {
    a && "click" == a.type ? ($(".ok").html(++n), $(".total").html(total += m)) : $(".err").html(++e);
    a = $(this);
    a.stop(true, false).removeClass(c).addClass(c = cls[cls.length * Math.random() | 0]);
    var b = a.width();
    a.css({
        left: -b
    }).animate({
        left: "100%"
    }, {
        duration: 7000,
        complete: go,
        step: function(a) {
            m = 100 - (a | 0)
        }
    })
}
$(".item").on("click", go);
jQuery.proxy(go, $(".item"))();
});
  </script>
</head>

<body>
<div class="count ok">0</div>
<div class="count err">0</div>
<div class="count total">0</div>
<div class="linear">
  <div class="item"></div>
</div>

</body>
</html>

j0hnik 17.05.2017 22:14

на счет рандома
вот
var fig=[];
$("i").each(function(){
  fig.push($(this).attr('id'));
});
var k = Math.random()*fig.length;
for (var i=0; i<fig.length ; i++) {
	if(k>=i && k < (i+1)){$("#"+fig[i]+"").show().animate({ left: '100%'}, 7000);}//-итд

}

pershay 17.05.2017 23:59

рони, j0hnik, спасибо большое за помощь!


Часовой пояс GMT +3, время: 09:17.