0
Ich versuche, Bilder, die absolut positioniert sind (so kann ich ihre Position in JS), enthalten in einem div (reagiert durch Bootstrap) und skalieren basierend auf Zuschauer.Absolute Bilder in einem dynamischen Div enthalten sind nicht dynamisch
Momentan sieht es auf einem Vollbild-Browser gut aus, aber sobald ich den Bildschirm neu skaliere, skalieren die divs in der Breite, aber die Bilder bleiben gleich groß.
Was ist die bevorzugte Methode zum Anzeigen von Code - Jsfiddle, Code-Tags oder der Live-Webseite?
BEARBEITEN 4 - JSFiddle Update Ich habe den JSFiddle so aktualisiert, dass er auf die richtigen Bilder zeigt.
EDIT 3 - JSFiddle Ich glaube, ich dieses Recht habe, JSFiddle nie zuvor. Here's the link.
EDIT 1: -Add Code- Mein Ziel: Ich will das gut aussehen, und geeignet, auf einem mobilen Gerät sowie Desktop/Laptop. Momentan sieht es nur in einem maximierten Desktop-Browser-Fenster gut aus.
HTML:
<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>
Und schließlich meine 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;
}
EDIT 2 Die häufigste Rat war für mich die Position zu ändern zu absolut. Danach erscheinen die Gesichter nicht mehr wie gewünscht auf dem "playArea". Ich denke, ich zeige meinen "grünen Horn" Status, aber was ich versuche, machbar zu machen? Hier sind Screenshots der unmodified (position: absolute) Bildschirme. Die Geändert (Position: Relativ) kann es der JSFiddle unten gesehen werden. Da ich nur 2 aktive Links haben kann, musste ich den img-Link zum modifizierten Bildschirm entfernen.
END EDIT
Sie sollten Ihren Code in Ihrem Beitrag zeigen, und es wäre hilfreich, eine jsfiddle zu haben. Sie sollten keine Live-Webseite zeigen, da diese Links mit der Zeit kaputt gehen können und den Beitrag für andere in Zukunft nutzlos machen. Schreiben Sie Ihren Code so ein Auto und wir können versuchen zu helfen. – FirstLegion
Aktualisiert den Beitrag, um den betroffenen Code anzuzeigen, danke für das Feedback. –
Hallo Michael, kannst du bitte das Konzept zu einem JSFiddle hochladen? Es ist sehr schwierig herauszufinden, was allein aufgrund dieses Codes passiert. – FirstLegion