I have the following problem: I'm programing a game in javascript and I want it to be resposnive. The field of the game is a square wich contains 25 smaller squares.
Now I want that my site is responsive and the height of an square equals his width.
I tried to do this width the % property but that didn't worked.
Below you can see the class wich should have those properties.
.standart {
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
width: 5.21%;
height: 9.26%;
background: blueviolet;
border: 2px solid black;
}
And here's the html code
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Level 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
</head>
<body onload="farbgeber()" >
<p><div id="Start" onclick="myMover(); wo(); document.getElementById('Start').style.visibility = 'hidden'; document.getElementById('Links').style.visibility = 'hidden'; document.getElementById('Rechts').style.visibility = 'hidden'; document.getElementById('Hoch').style.visibility = 'hidden'; document.getElementById('Runter').style.visibility = 'hidden'; document.getElementById('Löschen').style.visibility = 'hidden'">Start</div> <div id="Restart" onclick="restart() ">Restart</div></p>
<a id="l" href="level2.html">Zum nächsten Level</a>
<!-- <p><button onclick="myMovel()">Links</button></p>
<p><button onclick="myMoved()">Runter</button></p>
<p><button onclick="myMoveu()">Hoch</button></p>
<p><button onclick="klassenwechsel(13)">Wechsel</button></p> -->
<p><div id = "winlos"></div></p>
<div id = rr>
<div id = Links onclick="richtfeld = 3"> ← </div>
<div id = "Rechts" onclick="richtfeld = 4 ">→</div>
<div id = Hoch onclick="richtfeld = 5 ">↑</div>
<div id = Runter onclick="richtfeld = 2">↓</div>
<!-- <div id = DT onclick="richtfeld = 7 ">DT</div>
<div id = Ziel onclick="richtfeld = 6">Z</div> -->
<div id = Löschen onclick="richtfeld = 1">X</div>
<div id = "anzahl"></div>
</div>
<div>
<div id ="animate"></div>
<div id = r1><div id = "1" onclick="feldersetzen(0,richtfeld)" ></div>
<div id = 2 onclick="feldersetzen(1,richtfeld)" ></div>
<div id = "3"onclick="feldersetzen(2,richtfeld)" ></div>
<div id = 4 onclick="feldersetzen(3,richtfeld)" ></div>
<div id = 5 onclick="feldersetzen(4,richtfeld)" ></div></div>
<div id = r2>
<div id = 6 onclick="feldersetzen(5,richtfeld); "></div>
<div id = 7 onclick="feldersetzen(6,richtfeld)" ></div>
<div id = 8 onclick="feldersetzen(7,richtfeld)" ></div>
<div id = 9 onclick="feldersetzen(8,richtfeld)" ></div>
<div id = 10 onclick="feldersetzen(9,richtfeld)" ></div></div>
<div id = r3>
<div id = 11 onclick="feldersetzen(10,richtfeld)" ></div>
<div id = 12 onclick="feldersetzen(11,richtfeld)" ></div>
<div id = 13 onclick="feldersetzen(12,richtfeld)" ></div>
<div id = 14 onclick="feldersetzen(13,richtfeld)" ></div>
<div id = 15 onclick="feldersetzen(14,richtfeld)" ></div></div>
<div id = r4>
<div id = 16 onclick="feldersetzen(15,richtfeld)" ></div>
<div id = 17 onclick="feldersetzen(16,richtfeld)" ></div>
<div id = 18 onclick="feldersetzen(17,richtfeld)" ></div>
<div id = 19 onclick="feldersetzen(18,richtfeld)" ></div>
<div id = 20 onclick="feldersetzen(19,richtfeld)" ></div></div>
<div id = r4>
<div id = 21 onclick="feldersetzen(20,richtfeld)" ></div>
<div id = 22 onclick="feldersetzen(21,richtfeld)" ></div>
<div id = 23 onclick="feldersetzen(22,richtfeld)" ></div>
<div id = 24 onclick="feldersetzen(23,richtfeld)" ></div>
<div id = 25 onclick="feldersetzen(24,richtfeld)" ></div></div>
</div>
<script src="code.js"></script>
</body>
</html>
Maybe someone knows how to help me.
Thanks
