嘿，我制作了一个带有可以移动的盒子的游戏。当我按ENTER键时，我需要帮助。我希望框重复其形状并保持在按ENTER键的位置。我也想要它，以便盒子不能移到屏幕的宽度和高度之外。
#box {
background-color: #FF002F;
height: 35px;
width: 35px;
position: absolute;
}
body {
background-color: #BDBFBF;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="game.css">
</head>
<body>
<div id="box"></div>
<script>
document.addEventListener("keydown", test);
var boxS = document.querySelector("#box");
var radius = boxS.clientWidth / 2;
console.log(radius);
var boxY = (window.innerHeight / 2) - radius;
var boxX = (window.innerWidth / 2) - radius;
boxS.style.top = boxY + "px";
boxS.style.left = boxX + "px";
function test(event) {
console.log(event.keyCode);
var keyCode = event.keyCode;
var boksSize = 35;
/*var xMin = 0;
var xMax = screenWidth - boxRadius;
var yMin = 0;
var yMax = screenHeigth - boxRadius; */
if (keyCode === 87 || keyCode === 38 && boxY > boksSize) {
boxY -= 35;
boxS.style.top = boxY + "px";
} else if (keyCode === 68 || keyCode === 39) {
boxX += 35;
boxS.style.left = boxX + "px";
} else if (keyCode === 37 || keyCode === 65) {
boxX -= 35;
boxS.style.left = boxX + "px";
} else if (keyCode === 40 || keyCode === 83) {
boxY += 35;
boxS.style.top = boxY + "px";
}
}
</script>
</body>
</html>最佳答案
干得好。
尝试试验参数。在JSFIDDLE中，我不得不在某个地方添加系数以免超出边界……因此，它更像是指导原则，但是您必须增强方法以能够自己在每个监视器上工作。
https://jsfiddle.net/12914t27/
<body>
<div id="box"></div>
<script>
var shadows =0;
document.addEventListener("keydown", test);
var boxS = document.querySelector("#box");
var radius = boxS.clientWidth / 2;
console.log(radius);
var boxY = (window.innerHeight / 2) - radius;
var boxX = (window.innerWidth / 2) - radius;
boxS.style.top = boxY + "px";
boxS.style.left = boxX + "px";
function test(event) {
console.log(event.keyCode);
var keyCode = event.keyCode;
var boksSize = 35;
/*var xMin = 0;
var xMax = screenWidth - boxRadius;
var yMin = 0;
var yMax = screenHeigth - boxRadius; */
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
if (keyCode === 87 || keyCode === 38 && boxY > boksSize) {
if (!(boxY-document.getElementById('box').clientHeight <=0)){
boxY -= 35;
boxS.style.top = boxY + "px";}
} else if (keyCode === 68 || keyCode === 39) {
if (!(boxX+document.getElementById('box').clientWidth*2 >=window.innerWidth)){
boxX += 35;
boxS.style.left = boxX + "px";}
} else if (keyCode === 37 || keyCode === 65) {
if (!(boxX-document.getElementById('box').clientWidth <=0)){
boxX -= 35;
boxS.style.left = boxX + "px";}
} else if (keyCode === 40 || keyCode === 83) {
if (!(boxY+document.getElementById('box').clientHeight*2 >=window.innerHeight)){
boxY += 35;
boxS.style.top = boxY + "px";
}
}
else if (keyCode === 13) {
// Your existing code unmodified...
var iDiv = document.createElement('div');
iDiv.id = 'shadow'+shadows;
iDiv.className = 'shadowbox';
iDiv.style.top = boxS.style.top;
iDiv.style.left = boxS.style.left;
iDiv.style.left = boxS.style.left;
document.getElementsByTagName('body')[0].appendChild(iDiv);
shadows++;
}
}
</script>
</body>
的CSS
#box {
background-color: #FF002F;
height: 35px;
width: 35px;
position: absolute;
}
.shadowbox {
background-color: #555555;
height: 35px;
width: 35px;
position: absolute;
}
body {
background-color: #BDBFBF;
}
// EDIT我忘记了一件事：为Shadowbox添加
z-index:1，为box添加z-index:2，使该框位于已创建的框上方，而不位于其后，因此您始终可以看到原始框