今天早上我开始构建一个简单的 JavaScript 游戏，我想弄清楚如何控制才能让 div“框”不能移出它的父容器？我的猜测是用一个 if 语句来控制 offsetLeft 和 offsetTop？
Javascript 在这里:
(function () {
"use strict";
var box = document.querySelector(".box");
document.addEventListener("keydown", function (event) {
var key = event.key;
var left = box.offsetLeft;
var top = box.offsetTop;
var step = 10;
switch (key) {
case "ArrowUp":
event.preventDefault();
box.style.top = top - step + "px";
break;
case "ArrowDown":
event.preventDefault();
box.style.top = top + step + "px";
break;
case "ArrowLeft":
event.preventDefault();
box.style.left = left - step + "px";
break;
case "ArrowRight":
event.preventDefault();
box.style.left = left + step + "px";
break;
}
console.log(event.key);
});
window.console.log("Sandbox is ready!");
})();
此处的 CSS:
h1 {
text-align: center;
}
h3 {
color: green;
}
.content {
border: 1px solid black;
background-color: #eee;
padding: 2em;
margin: 0 auto;
height: 500px;
width: 800px;
border-radius: 30px;
text-align: center;
}
.box {
position: absolute;
height: 100px;
width: 100px;
background-color: green;
}
下面的 HTML:
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<h1>Simple game</h1>
<div id="content" class="content">
<div class="box"></div>
</div>
<script src="js/main.js"></script>
</body>
</html>
添加了 CSS 和 HTML 编码。
在这里 fiddle : https://jsfiddle.net/uwp0s9jz/
最佳答案
请看下面的代码。
(function () {
"use strict";
var box = document.querySelector(".box");
var container = document.getElementById('content').getBoundingClientRect()
var paddingSize = 32
document.addEventListener("keydown", function (event) {
var key = event.key;
var left = box.offsetLeft;
var top = box.offsetTop;
var step = 10;
switch (key) {
case "ArrowUp":
event.preventDefault();
if (top > container.top + paddingSize) {
box.style.top = top - step + "px";
}
break;
case "ArrowDown":
event.preventDefault();
if (top < container.height - container.x - paddingSize) {
box.style.top = top + step + "px";
}
break;
case "ArrowLeft":
event.preventDefault();
if (left > container.left + paddingSize) {
box.style.left = left - step + "px";
}
break;
case "ArrowRight":
event.preventDefault();
if (left < container.width - container.y - paddingSize) {
box.style.left = left + step + "px";
}
break;
}
console.log(event.key);
});
})();
fiddle here
关于JavaScript 游戏 - 如何控制子 div 不移动到其父容器之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58823463/