Question

所以- 我正在尝试创建一个游戏，您可以在其中跨网格移动角色。我有一个主网格容器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>

然后我将角色的div放置在网格上。我原本是使用定位来移动角色-

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;

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

Answer 1

首先，我建议您进行彻底检查。命名所有这些ID的游戏不具有可扩展性或实用性。它违反了DRY原理（查找它）。

与其让一个拥有id的玩家的div代替，不如让.grid-square的div担任.contains-player的类。这样，您就不会在播放器每次移动时都在拖曳布局。

您希望有一个所有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>

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

1 个答案: