I am trying to make a matching game, where left hand side and right hand side the image is positioned randomly. Even after using the random function which is working properly(checked by using console.log) my images are appearing in a line(not appearing randomly).
My javascript, css and html code snippet is written below....
var numberOfFaces=5;
var theLeftSide=document.getElementById("leftSide");
var imgHeight=80;
var imgWidth=80;
function generateFaces(){
while(numberOfFaces>0){
var smileImg=document.createElement("img");
smileImg.src="http://ift.tt/1GzZEsa";
smileImg.style.height=imgHeight + "px";
smileImg.style.width=imgWidth + "px";
var randomTop=Math.random() * 400;
randomTop=Math.floor(randomTop);
console.log(randomTop);
var randomLeft=Math.random() * 500;
randomLeft=Math.floor(randomLeft);
console.log(randomLeft);
smileImg.style.top= randomTop + "px";
smileImg.style.left=randomLeft + "px";
leftSide.appendChild(smileImg);
numberOfFaces--;
}
}
body{
margin:50px;
}
p{
text-align:center;
font-size:18px;
}
#outer{
border:0.5px solid black;
position:realtive;
height:500px;
margin:20px;
}
#rightSide,#leftSide{
width:500px;
height:500px;
position:absolute;
}
#rightSide{
left:700px;
border-left:2px solid black;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="MatchingGame.css" media="screen" />
<script type="text/javascript" src="MatchingGame.js" ></script>
<title>Matching Game</title>
</head>
<body onload="generateFaces()">
<p>Click on the extra smiling face on the left side.</p>
<div id="outer">
<div id="leftSide"></div>
<div id="rightSide"></div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire