时间戳

首页 > 解决方案 > 设计游戏时的奇怪行为，猫消失了，游戏并没有停止

javascript - 设计游戏时的奇怪行为，猫消失了，游戏并没有停止

问题描述

所以，我一直在尝试用我在隔离期间获得的所有 JS、HTML、CSS 技能开发一个迷你游戏。
所以，让我简单解释一下这个游戏，我们有cat一个4 x 5迷宫，有一个rat在这个迷宫的不同单元格中不断改变它的位置。现在，目标是cat将rat. 如果我们成功放下它，那么cat替换它rat并且游戏结束。
游戏几乎 80% 的时间都运行良好，但有一个我无法弄清楚的奇怪故障，这正在破坏游戏。故障是在很短的一段时间内，如果您接管cat光标rat正在更改的位置NOT ALLOWED并且如果此时cat放下cat消失和游戏doesn't stop。您将不得不尝试玩游戏几次，才能观察到这一点。此外，我不是 100% 确定这是否是THE问题，因此可能还有其他原因导致cat消失。

我知道这不是一个容易解决的问题，但自从过去 48 小时以来我一直在尝试解决这个问题，现在我没有任何线索，所以我请求任何人提供帮助，如果有人在这里指导我，我将非常感激.

我试图用连拍来捕捉光标变为 的那一刻，NOT ALLOWED为了更清晰，我附上了一张图像，但请注意，图像不是那么好。另外，我在下面附上了整个 JS、CSS、HTML 代码，这样你就可以run在这里看到结果。

在此处输入图像描述

let cells = document.querySelectorAll('.cells');

let catImage = '<img src="https://img.icons8.com/ios-filled/32/000000/black-cat.png"/>'
let isCatPicked = false;

let ratImage = '<img src="https://img.icons8.com/windows/32/000000/rat-silhuette.png"/>'

let randomRatMovement = setInterval(moveRat, 1000);

document.body.addEventListener('dragover', (e) => {
    e.preventDefault();
});

document.body.addEventListener('drop', (e) => {

        let flag = false;
        for (let i=0; i<cells.length; i++)
        	if (cells[i].innerHTML.includes("black-cat")){
        		flag = true;
        		break;
        	}
        if (!flag)
        	cells[catPos].innerHTML = catImage;
    });
//The Body Event Listener has been attached so that if the "cat" is dropped outside the maze, it is brought back to from where the dragging started.

for (let i=0; i<cells.length; i++){

	cells[i].addEventListener('dragover', (e) => {
        e.preventDefault();
    });

    cells[i].addEventListener('drop', (e) => {
    	if (isCatPicked){
    		if (cells[i].innerHTML.includes("rat")){
    			clearInterval(randomRatMovement);
    			cells[i].innerHTML = catImage;
    			// alert("Caught!")
    		}
    		else
	        	cells[i].innerHTML = catImage;
	        isCatPicked = false;
    	}
    });
    
    cells[i].addEventListener("dragstart", function(){

		if (cells[i].innerHTML.includes("black-cat")) {
			catPos = i; //To keep track of the cell from where dragging started, will be used if "cat" is dropped outside the maze.
			isCatPicked = true;
			setTimeout(() => {
		        for (let i=0; i<cells.length; i++)
		        	if (cells[i].innerHTML.includes("black-cat"))
						cells[i].innerHTML = "";
		    }, 0);
		}
	});
	
}


function moveRat(){
	let cellNum;
	//This while true block prevents from generating the "rat" over the "cat".
	while (true){
		cellNum = Math.floor(Math.random()*(20));
		if (!(cells[cellNum].innerHTML.includes("black-cat")))
			break;
	}
	
	for (let i=0; i<cells.length; i++)
		if (cells[i].innerHTML.includes("rat"))
			cells[i].innerHTML = "";
	cells[cellNum].innerHTML = ratImage;
}
body{
	margin: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.rows{
	display: flex;
}

.cells{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	background-color: yellow;
	border: 1px solid black;
}

.mouse{
	cursor: not-allowed;
}
<!DOCTYPE html>
<html>
<head>
	<title>Drag And Drop</title>
	<link rel="stylesheet" type="text/css" href="dragAndDrop.css">
</head>
<body>
	<div class="rows">
		<div class="cells"> 
			<img id="something" src="https://img.icons8.com/ios-filled/32/000000/black-cat.png"/>
		</div>
		<div class="cells"> </div>
		<div class="cells"> </div>
		<div class="cells"> </div>
		<div class="cells"> </div>
	</div>
	<div class="rows">
		<div class="cells"> </div>
		<div class="cells"> </div>
		<div class="cells"> </div>
		<div class="cells"> </div>
		<div class="cells"> </div>
	</div>
	<div class="rows">
		<div class="cells"> </div>
		<div class="cells"> </div>
		<div class="cells"> </div>
		<div class="cells"> </div>
		<div class="cells"> </div>
	</div>
	<div class="rows">
		<div class="cells"> </div>
		<div class="cells"> </div>
		<div class="cells"> </div>
		<div class="cells"> </div>
		<div class="cells"> 
			<img src="https://img.icons8.com/windows/32/000000/rat-silhuette.png"/>
		</div>
	</div>
	<script type="text/javascript" src="catchTheMouse.js"></script>
</body>
</html>

标签： javascripthtmlcssflexbox

解决方案

推荐阅读