个人中心
gpt4 book ai didi

javascript - 如何在 div 的网格容器中移动 div？

转载 作者：行者123 更新时间：2023-11-28 13:57:57 24 4
gpt4 key购买 nike

所以——我正在尝试创建一个游戏，您可以在其中将 Angular 色移动到网格中。我有一个主网格容器 div，然后在该容器中加载形成网格的单独 div(使用网格布局 css)。 

<div id="grid-container">
        <div id='player'></div>
        <div id='a'>
            <h3>Start</h3>
        </div>
        <div id='b'></div>
        <div id='c'></div>
        <div id='d'></div>
        <div id='e'></div>
        <div id='f'></div>
        <div id='g'></div>
        <div id='h'></div>
        <div id='i'></div>
        <div id='j'></div>
        <div id='k'></div>
        <div id='l'></div>
        <div id='m'></div>
        <div id='n'></div>
        <div id='o'>
            <h3>Finish</h3>
        </div>
    </div>

然后我为我的 Angular 色创建了一个 div，并将其放置在网格上。我最初是使用这样的定位来移动 Angular 色 - 

document.addEventListener('keyup', event => {
    switch (event.keyCode){
        case 37:
            if (leftDistance > 0) {
                player.style.left = --leftDistance + '%';
            }
            break;
        case 38:
            if (topDistance > 0) {
                player.style.top = --topDistance + '%';
            }
            break;

然后我想创建逻辑来表示“当 Angular 色处于这样的位置时，用这个提醒用户并将 Angular 色放回起始位置”。有人告诉我，这对于编号定位来说会很复杂，并且通过使用网格，我可以在用户按下箭头键时将 Angular 色从一个 div 移动到另一个 div。我似乎无法找出解决此问题的最佳方法。我试图用数字命名我的 div，这样当 Angular 色移动时，我基本上可以在他们的位置 ID 中添加一个数字，这样他们就会出现在随后的 div 中，但我似乎无法用数字命名我的 div？也许我把事情复杂化了，但任何见解都会有所帮助!

最佳答案

首先，我建议进行全面检修。你在那里的游戏，命名所有这些 id 是不可扩展或实用的。它违反了 DRY 原则(查找)。

而不是使用 id 的 div播放器，只允许 .grid-square div 承担 .contains-player 的类(class).这样，您就不会在每次播放器移动时都改变布局。

您想要一个包含所有 div 的数组，然后使用类似这样的逻辑来确定在朝某个方向移动时应该发生什么。这就是我会做的，请适应您的口味和需求。

window.onload = function() {
	const gameHeight = 10;
	const gameWidth = 10;

	const container = document.getElementById("grid-container");

	for(let i = 0; i < gameWidth * gameHeight; i++) {
	    container.innerHTML += `<div class="grid-square"></div>`;
	}

	const gridSquares = document.querySelectorAll(".grid-square");

	gridSquares[0].classList.add("contains-player");

	let playerX = 0,
	    playerY = 0;

	function move(direction) {
	    const playerDiv = document.querySelector(".grid-square.contains-player");
	    playerDiv.classList.remove("contains-player");

	    let newPlayerDiv;

	    switch(direction) {
	        case "left": playerX--; break;
	        case "up": playerY--; break;
	        case "right": playerX++; break;
	       	case "down": playerY++; break;
	        // ...
	    }

	    newPlayerDiv = gridSquares[(playerY * gameWidth) + playerX]
	    newPlayerDiv = gridSquares[(playerY * gameWidth) + playerX];

	    // Add some logic in here to make sure player isn't offscreen;

	    newPlayerDiv.classList.add("contains-player");
	}

	function toBeExecutedOnKeyDown(event) {
	    let direction;

	    switch(event.which) {
	        case 37: direction = "left"; break;
	        case 38: direction = "up"; break;
	        case 39: direction = "right"; break;
	       	case 40: direction = "down"; break;
	    }

	    if(direction) {
	    	event.preventDefault(); // Prevent screen from moving around
	    	// More readable
	    	move(direction);
	    }
	}

	window.onkeydown = toBeExecutedOnKeyDown;
}
:root {
	--game-size: 10;
	--game-scale: 10px;

	--game-actual-size: calc(var(--game-size) * var(--game-scale));
}

#grid-container {
	width: var(--game-actual-size);
	height: var(--game-actual-size);

	clear: both;
}

#grid-container .grid-square {
	width: var(--game-scale);
	height: var(--game-scale);
	
	float: left;

	background-color: grey;
}

.grid-square.contains-player {
	background-color: red !important;
}
<!DOCTYPE html>
<html>
	<head>
		<title>Game</title>
		<script src="./script.js"></script>
		<link rel="stylesheet" href="./style.css"/>
	</head>
	<body>
		<div id="grid-container">
			<!-- 
				This will be filled with divs like the following when the JS loads 

				<div class="grid-square"></div>

				The div containing the player will look like this

				<div class="grid-square contains-player"></div>
			-->
		</div>
	</body>
</html>

关于javascript - 如何在 div 的网格容器中移动 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58196846/

24 4 0
文章推荐： javascript - 如何使用 javascript 更改 URL，以便我可以链接到该 URL
文章推荐： javascript - 当我切换到移动 View 时我的按钮发生了什么？
文章推荐： javascript - innerHTML 属性替换的文本实际上是由浏览器读取的吗？
文章推荐： html - 垂直调整图像以适应文本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com