1
Example of finished DPADこのように見えるようにCSSだけを使って "D-PAD"コントローラをスタイルする方法は？
body {
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
}
div#controller {
display: none;
}
div#instructions {
font-size: 20px;
color: white;
position: static;
text-align: center;
}
@media only screen and (max-width: 480px) {
div#instructions {
display: none;
}
div#controller {
display: flex;
position: relative;
background-color: grey;
opacity: 0.6;
height: 33%;
width: 80%;
}
div#controller.dpad {
width: 60%;
}
}
@media only screen and (max-width: 768px) {
div#instructions {
display: none;
}
div#controller {
display: flex;
position: relative;
top: 300px;
background-color: grey;
opacity: 0.6;
height: 50%;
width: 80%;
}
div#controller.dpad {
width: 33%;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- The CSS is missing! Your mission is to re-create it -->
<link rel="stylesheet" href="env3d.css" />
<script src="http://css.operatoroverload.com/exercise/bundle.js"></script>
<script src="http://css.operatoroverload.com/exercise/game.js"></script>
<script type="text/javascript">
function playGame() {
console.log("playGame");
var game = new Game();
game.setup();
var env;
if (game.env) {
env = game.env;
} else {
env = new env3d.Env();
}
env.loop = game.loop.bind(game);
env.start();
}
window.addEventListener('load', function() {
playGame();
});
document.addEventListener("contextmenu", function(e) {
e.preventDefault();
});
</script>
</head>
<body>
<div id="controller">
<div class="dpad">
<button env3d-key="KEY_UP">UP</button>
<button env3d-key="KEY_LEFT">LEFT</button>
<button env3d-key="KEY_RIGHT">RIGHT</button>
<button env3d-key="KEY_DOWN">DOWN</button>
</div>
<button env3d-key="KEY_A">A</button>
<button env3d-key="KEY_Z">Z</button>
</div>
<div id="instructions">Use arrow keys to change camera angle, A to zoom in, Z to zoom out.</div>
<div id="env3d"></div>
</body>
</html>私が完了するために、この小さな小さなプロジェクトを持っています。しかし、私は完全にCSSだけを使用してモバイルコントローラをコーディングする方法に固執しています。私はそれを絵のように見えるようにスタイルすることはできません。
誰でも正しい方向に向けることができますか？
ありがとうございます！あなたの助けが大いに評価されるでしょう！ :)