嘿，我做了一个游戏，里面有一个可以四处移动的盒子。当我按下 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 使框位于创建的框之上而不是在它们后面，所以你总能看到原来的盒子
关于Javascript 框复制自身，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42782220/