0
Kesinlikle konumlandırılmış resimlere sahip olmaya çalışıyorum (böylece JS'deki konumlarını değiştirebilirim), bir div içinde (önyükleme yanıtı veren) bulunanlar ve görüntüleyici.Dinamik bir div içinde yer alan mutlak görüntüler dinamik değil
Şu anda tam ekran bir tarayıcıda iyi görünüyor, ancak ekranı yeniden boyutlandırdığım anda, div'ler genişlikte ölçeklenir, ancak görüntüler aynı boyutta kalır.
SO için yeni olmak, kod - jsfiddle, kod etiketleri veya canlı web sayfasını göstermenin tercih edilen yöntemi nedir?
DÜZENLEME 4 - JSFiddle Güncelleştirmesi JSFiddle'ı güncelleştirerek doğru görüntülere işaret ettim.
DÜZENLEME 3 - JSFiddle ben daha önce hiç JSFiddle kullanılan bu hakkı, yaptığını düşünüyorum. Here's the link.
DÜZENLEME 1: -Add Kodunuzu My Goal: Bunun bir mobil cihazda ve masaüstü/dizüstü, iyi ve kullanışlı bakmak istiyorum. Şu anda sadece bir masaüstü tarayıcı penceresinde güzel görünüyor.
HTML: nihayet
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Matching Game</title>
<link rel="stylesheet" href="matching/css/bootstrap.min.css">
<link rel="stylesheet" href="matching/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="matching/css/style.css">
</head>
<body>
<div class="modal" tabindex="-1" role="dialog" id="modal_instructions" data-backdrop=true>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1>GAMEPLAY INSTRUCTIONS</h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Find the face on the left game-screen that is out of place. There will always be exactly one extra face on the left than the right. Find it, and win!</p>
<h2>Example:</h2>
<img src="img/gameBoard.png" class="img-responsive img-thumbnail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container" id="gameBoard">
<div class="row">
<div class="col-xs-12 text-center">
<h1>Matching Game</h1>
</div>
</div>
<div class="row" id="instructions">
<div class="col-xs-12 text-center">
<h3>Welcome to my Matching Game, enjoy!</h3>
<p>When the game starts, smiley faces will be populated on both sides of the screen. The object is to find the object in the left side that is not in the right side.</p>
<div class="col-xs-12">
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modal_instructions">Instructions</button>
<button type="button" class="btn btn-success" id="gameStart">START GAME!</button>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-xs-12" id="playArea">
<div class="col-xs-6" id="leftSide" style="display: none">
</div>
</div>
</div>
</div>
</body>
</html>
JavaScript
<script type="text/javascript">
var leftSideImages;
var theBody = "";
var numberOfFaces = 5;
var leftSide = document.getElementById("leftSide");
var rightSide = "";
document.getElementById("gameStart").onclick = function(event) {
event.stopPropagation();
// leftSide.style.width = "500px";
theBody = document.getElementsByTagName("body")[0];
document.getElementById("gameBoard").removeChild(document.getElementById("instructions"));
document.getElementById("leftSide").style.display = "block";
generateFaces();
}
// Generate the faces on the left side first
function generateFaces() {
for (i = 0; i < numberOfFaces; i++) {
var newImage = document.createElement("img");
newImage.setAttribute("src", "img/smile.png");
newImage.className += "img-responsive";
var x = Math.floor(Math.random() * 400) + 1;
var y = Math.floor(Math.random() * 400) + 1;
newImage.style.top = y + "px";
newImage.style.left = x + "px";
leftSide.appendChild(newImage);
}
// Now let's clone the left panel to the right, and remove one smiley face
leftSideImages = leftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
leftSideImages.setAttribute("id", "rightSide");
document.getElementById("playArea").appendChild(leftSideImages);
rightSide = document.getElementById("rightSide");
// Add event handler function to the extra face
leftSide.lastChild.style.opacity = 0.25;
leftSide.lastChild.onclick = function nextLevel(event){
event.stopPropagation();
numberOfFaces += 5;
while (leftSide.lastChild) {
leftSide.removeChild(leftSide.lastChild);
}
while (rightSide.lastChild) {
rightSide.removeChild(rightSide.lastChild);
}
document.getElementById("playArea").removeChild(rightSide);
generateFaces();
}
// Event handler to handle incorrect choices
theBody.onclick = function gameOver(event) {
numberOfFaces = 5;
leftSide.lastChild.style.opacity = 1;
// Challenge: Show the user where the correct choice is with a red highlight
var newDiv = document.createElement("div");
newDiv.style.position = "absolute";
newDiv.style.height = "76px";
newDiv.style.width = "76px";
newDiv.style.top = parseInt(leftSide.lastChild.style.top)+12+"px";
newDiv.style.left = parseInt(leftSide.lastChild.style.left)+12+"px";
newDiv.style.backgroundColor = "rgba(255, 0, 0, 0.75)";
newDiv.style.borderRadius = "50px";
leftSide.appendChild(newDiv);
newDiv = "";
// Remove all faces from the rightSide
while (rightSide.lastChild) {
rightSide.removeChild(rightSide.lastChild);
}
// Dim the rightSide game screen -- 'Turn off the lights'
rightSide.style.backgroundColor = "rgba(180, 180, 180, .85)";
rightSide.style.boxShadow = "inset -132px -132px 152px rgba(0, 50, 127, 0.25), inset 132px 132px 152px rgba(0, 50, 127, 0.25), inset -12px -12px 22px #333, inset 2px 2px 32px #333, -10px 15px 25px #000, inset 2px 2px 32px rgba(0, 50, 127, 0.25)";
rightSide.style.paddingTop = "13%";
rightSide.style.textAlign = "center";
rightSide.style.boxSizing = "border-box";
rightSide.style.zIndex = 1000;
// Game Over! Screen with 'Try Again' button
leftSide.lastChild.style.border = "border: solid 1px red";
theBody.onclick = null;
leftSide.lastChild.onclick = null;
rightSide.innerHTML = "<h1>Game Over!</h1>";
rightSide.style.fontWeight = "bold";
rightSide.style.color = "#000";
var btn_tryAgain = document.createElement("button");
btn_tryAgain.className = "btn btn-info gameOver";
btn_tryAgain.textContent = "Try Again";
rightSide.appendChild(btn_tryAgain);
// Restart the game
btn_tryAgain.onclick = function(event) {
event.stopPropagation();
while (leftSide.lastChild) {
leftSide.removeChild(leftSide.lastChild);
}
document.getElementById("playArea").removeChild(rightSide);
generateFaces();
}
}
}
</script>
Ve benim CSS
img { position: absolute; max-width: 100%; height: auto; }
body { font-size: 2rem; }
.close {
position: absolute;
top: 25px;
right: 20px;
background: inherit;
font-weight: bold;
border: none;
color: lightgrey;
line-height: 1;
font-size: 1.2em;
vertical-align: middle;
}
.close:hover {
color: black;
padding-top: 0;
padding-bottom: 2px;
}
#leftSide{
height: 500px;
/* border: solid 1px black;*/
border-radius: 5%;
/* margin: 10px;*/
box-shadow: inset -132px -132px 152px rgba(0, 100, 255, 0.25), inset 132px 132px 152px rgba(0, 100, 255, 0.25), inset -12px -12px 22px #333, inset 2px 2px 32px #333, -10px 15px 25px #000, inset 2px 2px 32px rgba(0, 100, 255, 0.25);
}
#rightSide {
height: 500px;
/* border: solid 1px black;*/
border-radius: 5%;
/* margin: 10px;*/
box-shadow: inset -132px -132px 152px rgba(0, 100, 255, 0.25), inset 132px 132px 152px rgba(0, 100, 255, 0.25), inset -12px -12px 22px #333, inset 2px 2px 32px #333, -10px 15px 25px #000, inset 2px 2px 32px rgba(0, 100, 255, 0.25);
}
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
#startGame p {
font-weight: bold;
text-transform: uppercase;
color: blue;
font-family: serif, cursive;
font-size: 2em;
padding-bottom: 0;
margin-bottom: 0;
}
#startGame img {
margin: 5px;
}
.modal-header {
padding: 0;
margin: 0;
}
.modal-header h1 {
padding: 10px 0 0 0;
margin: 0;
text-align: center;
}
.modal-body img {
position: inherit;
}
DÜZENLEME 2 beni konumunu değiştirmek için en yaygın tavsiyeydi mutlak Bunu yaptıktan sonra, yüzler artık "playArea" üzerinde arzu edilen şekilde görünmez. Sanırım 'yeşil boynuz' durumumu gösteriyorum, ama ne yapmaya çalıştığımı bile yapıyorum? İşte unmodified (pozisyon: mutlak) ekranlarının ekran görüntüleri. Değiştirilmiş (konum: göreli) aşağıdaki JSFiddle olarak görülebilir. Sadece 2 aktif bağlantıya sahip olabildiğim için, değiştirilen ekrana img bağlantısını kaldırmak zorunda kaldım.
SON DÜZENLEME
mutlak Gönderiminizin kodunuzu göstermelidir ve bir jsfiddle olması yararlı olacaktır. Bu linkler zaman içinde kırılabileceğinden, yayınları ileride başkaları için işe yaramaz hale getiren bir web sayfası göstermemelisiniz. Kodunuzu o kadar çok gönderip yardım edebiliriz. – FirstLegion
İlgili kodu göstermek için gönderiyi güncelledi, geri bildirim için teşekkürler. –
Merhaba Michael, lütfen kavramı bir JSFiddle'a yükleyebilir misiniz? Sadece bu koda dayanarak neler olduğunu anlamak çok zor. – FirstLegion