时间戳

首页 > 解决方案 > 使用列和行的 Javascript/html 游戏

javascript - 使用列和行的 Javascript/html 游戏

问题描述

所以我已经为此工作了几天。这是游戏应该做的：

使用 HTML、CSS、JavaScript、jQuery 或 Angular 代码创建一个 10 X 10 的矩阵，其中列/通道使用数字，行使用字母来标识单元格。将有两辆车随机选择网格上的一个单元格进行放置。将球目标（要获取的）随机放置在网格上的某个位置。让车辆检查每个列车道以寻找目标。一旦在该通道中检查了所有单元格，就让它们移动到另一个尚未检查的新通道。保持计时器运行以显示获取目标的时间。

到目前为止，我能够编写网格和计时器。所以，我需要帮助的是，将一个目标/球放在静止的网格上，然后将两个探测器/车辆随机放置在网格上。从左到右，他们逐步进入下一列，直到其中一辆车与球在同一列。有一个计时器可以查看一辆车降落在与球相同的列中需要多长时间。 

<!DOCTYPE html>
<html>
	<head>
		<title>Soccer Ball Game</title>
	<style>
	button {
	font-size:40px;
	height:50px;
	width:50px;
	}

	.cars{
		background-color: green;
	}
	</style>
	</head>
		<body onload="createButtons(row, col)">
		<div id="buttonArea">
		</div>
		<input type="button" id="btnNewGame" onClick="findBall()" value="ResetButtons"/></input>
		<script>
		

			var col = 10;
			var row = 10;
			var dCheck = true;
			function createButtons(row,col){
				var counter = 1;
				var element = document.getElementById("buttonArea");

					for(countR = 1; countR <= row; countR++){

						for(countC = 1; countC <= col; countC++){
							var newButton = document.createElement("button");
							newButton.setAttribute("id", "btn" + counter);
							newButton.setAttribute("type", "button");

							newButton.setAttribute("class", "noclass");
							element.appendChild(newButton);
							counter++;
						}
						var breakLine = document.createElement("br");
						element.appendChild(breakLine);
					}

			}
			
			
	
			
			function resetButtons(){
				var buttons = document.getElementsByTagName("button");
				for(var i = 0; i < (buttons.length); i++){
					buttons[i].innerHTML = "";
					buttons[i].disabled = false;
					buttons[i].setAttribute("class", "noclass");
				}

			}


		</script>
		</body>	
</html>

这是一个计时器代码：

let timer={};
timer.counter=0;
timer.start=()=&gt;{
 timer.ticker=setInterval(()=&gt;{ timer.counter++; },1000);
};
timer.stop=()=&gt;{
  clearInterval(timer.ticker);
};
let checker=(callback)={
 timer.start();
 //check each row in column
 //if hit timer.stop();
callback(timer.counter);
};
checker((count)=&gt;{
 console.log('it took '+count+' second to hit target');
});

标签： javascripthtml

解决方案

有很多方法可以用来在网格按钮上放置一个目标/球，例如，你可以使用这样的 CSS 类技巧：

.ball{
 background: URL(ball.png);
}

然后将其随机添加到您的按钮之一。对于汽车，您可以使用相同的技巧。我希望这会对您有所帮助，但如果您有其他问题，请纠正我。

推荐阅读