jquery - .CSS jquery 随机

Question

当我 console.log(newX/Y) 时，我能够得到数字，但这一行似乎不起作用:

$robo.css('left', newX + 'px') & $robo.css('top', newY + 'px')

有什么方法可以随机生成图像吗？随着图像继续系统地出现

setInterval(function () {
      var goodOrBad = Math.floor(Math.random() * 10 + 1)
      var $robo = $('<img>')
      var newX = ($container.width()) * Math.random()
      var newY = ($container.height()) * Math.random()
      // console.log(goodOrBad)
          if (goodOrBad >= 3) {
            $robo.attr('src', 'assets/img/Pepsi.gif')
            $robo.addClass('Decepticons')
            setTimeout(function() { $robo.remove() }, timeoutCount)
            $robo.on('click', function () {
              $(this).remove()
              score++
              $score.text('score : ' + score)
            $robo.css('left', newX + 'px')
            $robo.css('top', newY + 'px')
            })
          } else {
            $robo.attr('src', 'assets/img/bumble.gif-c200')
            $robo.addClass('AutoBots')
            setTimeout(function() { $robo.remove() }, timeoutCount)
            $robo.on('click', function () {
              $(this).remove()
              live--
              $live.text('live : ' + live)
              if (live === 0) {
                alert('Game Over !')
              }
            })
          }
      $robo.appendTo($container)
    }, intervalTime)

.Decepticons {
  position: absolute;
  display: flex;
  position: relative;
  max-width: 100px;
  min-height: 100px;
}

.AutoBots {
  position: absolute;
  display: flex;
  position: relative;
  max-width: 100px;
  min-height: 100px;
}

Answer 1

好吧，不完美，但我得去 sleep 了。

intervalTime = 1500;
timeoutCount = 1000;
$container = $("div");

score = 0;
$score = $("score")

live = 5;
$live = $("life")

setInterval(function () {
      var goodOrBad = Math.floor(Math.random() * 10 + 1)
      var $robo = $('<img>')
      var newX = Math.floor(Math.random() * $container.width() + 1) //Here how to get a random number between 1 to the initial width of the container;
      var newY = Math.floor(Math.random() * $container.height() + 1) //Here how to get a random number between 1 to the initial height of the container;
      console.log (newX, newY);
      $("start").remove(); //Had to start with something or the random numbers would be "width of screen" x "1"
      
          if (goodOrBad >= 3) {
            $robo.attr('src', 'http://vignette1.wikia.nocookie.net/transformersprime/images/7/75/Decepticon_Logo.png/revision/latest?cb=20120711013840')
            $robo.addClass('Decepticons')
            setTimeout(function() { $robo.remove() }, timeoutCount)
            $robo.on('click', function () {
              $(this).remove()
              score++
              $score.text('score : ' + score)
            $container.css('left', newX + 'px').css('top', newY + 'px') //Added it to $container instead because constantly remove the image
            })
          } else {
            $robo.attr('src', 'http://tfwiki.net/mediawiki/images2/thumb/6/6b/Autobot_symbol.png/250px-Autobot_symbol.png')
            $robo.addClass('AutoBots')
            setTimeout(function() { $robo.remove() }, timeoutCount)
            $robo.on('click', function () {
              $(this).remove()
              live--
              $live.text('live: ' + live)
              if (live === 0) {
                alert('Game Over !')
              }
            })
          }
      $robo.appendTo($container)
    }, intervalTime)

div {
  position: absolute;
}

.Decepticons {
  position: absolute;
  display: flex;
  position: relative;
  max-width: 100px;
  min-height: 100px;
}

.AutoBots {
  position: absolute;
  display: flex;
  position: relative;
  max-width: 100px;
  min-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<score>score: 0</score>
<life>life: 5</life>
<div><img class="start" scr="'http://vignette1.wikia.nocookie.net/transformersprime/images/7/75/Decepticon_Logo.png/revision/latest?cb=20120711013840" /></div>