Как я могу случайным образом установить положение изображения в javascript

Я пытаюсь сделать изображение smile.png появляться в случайной позиции в пределах определенного <div>.Как я могу случайным образом установить положение изображения в javascript

Что я сделал, это установить variable.style.top= top_position+'px' & variable.style.left = left_position+"px".

Однако, до сих пор я получаю изображения, которые горизонтально выровнены и не расположены в случайном порядке. Как я могу это сделать?

var theLeftSide = document.getElementById("leftSide"); 
 
var randomY = Math.round(Math.random()) + 'px'; 
 
var randomX = Math.round(Math.random()) + 'px'; 
 

 
function generateFaces() { 
 
    for (numberOfFaces = 0; numberOfFaces < 5; numberOfFaces++) { 
 
    createElement(numberOfFaces); 
 
    } 
 
} 
 

 
number = 0; 
 

 
function createElement() { 
 
    number++; 
 
    //creating the image on the leftside 
 
    var smiley = document.createElement('img'); 
 
    smiley.src = "smile.png"; 
 
    smiley.style.position = "absolute"; 
 
    smiley.style.left = randomX; 
 
    smiley.style.top = randomY; 
 
    theLeftSide.appendChild(smiley); 
 
}

#leftSide { 
 
    position: absolute; 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 
#rightSide { 
 
    position: absolute; 
 
    width: 500px; 
 
    height: 500px; 
 
    left: 500px; 
 
    border-left: 1px solid black; 
 
}

<body id="smileyGuessingGame" onload="generateFaces()"> 
 
    <h1>Matching Game</h1> 
 
    <p>Click on the extra smiling face on the left</p> 
 
    <div id="leftSide"> 
 
    </div> 
 
    <div id="rightSide"> 
 
    </div> 
 

 

 
</body>

источник

2015-12-17 Luke

Есть некоторые синтаксические ошибки в коде. Попробуйте следующее: https://jsfiddle.net/ptv2c6jd/ – Rayon

@RayonDabre отредактировал – Luke

Попробуйте следующее: https://jsfiddle.net/ptv2c6jd/1/ 'toFixed' вернет строку,' parseInt' следует использовать .. – Rayon

Есть несколько синтаксических ошибок в коде. Вы можете сравнить свой код с приведенным ниже кодом.

Также примечание toFixed возвращает Строковое представление numObj, которое не использует экспоненциальную нотацию и имеет точно цифры цифр после запятой.

Попробуйте это:

var theLeftSide = document.getElementById("leftSide"), 
 
    top_position = parseInt(Math.random() * ($(document).width() - 500)), 
 
    left_position = parseInt(Math.random() * ($(document).width() - 500)); 
 

 
function generateFaces() { 
 
    for (var numberOfFaces = 0; numberOfFaces < 5; numberOfFaces++) { 
 
    createElement(numberOfFaces); 
 
    } 
 
} 
 

 
var number = 0; 
 

 
function createElement() { 
 
    number++; 
 
    //creating the image on the leftside 
 
    var smiley = document.createElement('img'); 
 
    smiley.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Smiley_head_happy.svg/2000px-Smiley_head_happy.svg.png"; 
 
    smiley.style.position = 'absolute'; 
 
    smiley.style.top = top_position + "px"; 
 
    smiley.style.left = left_position + "px"; 
 
    theLeftSide.appendChild(smiley); 
 
    top_position += 20; 
 
    left_position += 20; 
 
}

#leftSide { 
 
    position: absolute; 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 
#rightSide { 
 
    position: absolute; 
 
    width: 500px; 
 
    height: 500px; 
 
    left: 500px; 
 
    border-left: 1px solid black; 
 
} 
 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<body id="smileyGuessingGame" onload="generateFaces()"> 
 
    <h1>Matching Game</h1> 
 
    <p>Click on the extra smiling face on the left</p> 
 
    <div id="leftSide"> 
 
    </div> 
 
    <div id="rightSide"> 
 
    </div> 
 
</body>

Fiddle here

источник

2015-12-17 04:30:01 Rayon

нормально, мне просто нужно спросить, хочу ли я просто использовать javascript: что будет: document.onload()? – Luke

Нет, просто поставьте js перед закрытием ''. Если вы используете внешний файл js, тогда включите его там ... – Rayon

Может быть что-то подобное может работать:

function generateRandom(min, max) { 
     var num = Math.random() * (max - min) + min; 
     return Math.floor(num); 
    } 

    var width, 
     height, 
     img; 
    width = $('#leftSide').width(); 
    height = $('#leftSide').height(); 
    img = $('<img id="smiley">'); 
    img.attr('src', 'http://vignette2.wikia.nocookie.net/robocraft/images/2/26/Smile.png'); 
    img.css('top',generateRandom(0,height)); 
    img.css('left',generateRandom(0,width)); 
    img.appendTo('#leftSide');

демо: http://codepen.io/anon/pen/PZZrzz

источник

2015-12-17 04:29:11 salc2

я закодировать это с помощью JQuery и lodash. Вот jsfiddle:

https://jsfiddle.net/mckinleymedia/3z6wsnyf/2/

HTML-:

<h1>Matching Game</h1> 
<p>Find the unique image</p> 
<div class="game"></div>

И код:

var game = function(options) { 
    var panes = 2, 
    game = $('.game'), 
    height = 500, 
    width = game.width()/panes - 20, 
    itemSize = 50, 
    faces = 5, 
    guesses = 5, 
    setupBoard = function() { 
     game 
     .empty(); 
     _.times(panes, function(p) { 
     game 
      .append(
      $('<div>') 
      .addClass('pane pane' + p) 
      .css('height', height + 'px') 
      .css('width', width + 'px') 
     ); 
     }) 
    }, 
    startGame = function() { 
     _.times(faces, function(i) { 
     _.times(panes, function(p) { 
      $('.pane' + p) 
      .append(
       $('<img>') 
       .attr('src', 'http://lorempixel.com/200/20' + i) 
       .addClass('img-' + i) 
       .css('top', _.random(height - itemSize) + 'px') 
       .css('left', _.random(width - itemSize) + 'px') 
      ); 
     }) 
     }); 
     $('.game img').click(function() { 
     guesses--; 
     alert('Nope! You\'ve got ' + guesses + ' guesses remaining.'); 
     }); 
     $('.pane' + _.random(panes - 1)) 
     .append(
      $('<img>') 
      .attr('src', 'http://lorempixel.com/200/20'+ (faces + 1)) 
      .addClass('img-t') 
      .css('top', _.random(height - itemSize) + 'px') 
      .css('left', _.random(width - itemSize) + 'px') 
      .click(function() { 
      alert('You got it! Good job! You just cleared ' + faces + ' images! You\'ve got ' + guesses + ' guesses remaining.'); 
      faces++; 
      setupBoard(); 
      startGame(); 
      }) 
     ); 
     $('.game img') 
     .css('height', itemSize + 'px') 
     .css('width', itemSize + 'px') 
     .css('-moz-border-radius', itemSize/2 + 'px') 
     .css('-webkit-border-radius', itemSize/2 + 'px') 
     .css('border-radius', itemSize/2 + 'px') 
     .css('-khtml-border-radius', itemSize/2 + 'px') 

    }; 
    setupBoard(); 
    startGame(); 
}; 
game();

источник

2015-12-17 07:02:47

Как я могу случайным образом установить положение изображения в javascript

ответ

Смежные вопросы