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对移动控制器进行编码。我不能把它看起来像照片。
任何人都可以请我指出正确的方向去哪里？
谢谢！对你的帮助表示感谢！ :)