JavaScript大数组挂起
[英]Javascript large array hangs
问题描述
I've been working on a project for my class and I've completed it theoretically but it has some problems where it does not execute as fast as I'd like. 
我一直在为我的课程设计一个项目，并且从理论上讲我已经完成了它，但是它存在一些问题，即它的执行速度没有我想要的快。 The task is as follows: You have a 10x10 board to make moves on. 任务如下：您有一块10x10的木板继续前进。 You go up, down, left or right randomly. 您可以随意向上，向下，向左或向右移动。 If a move takes you off the board skip it. 如果此举使您脱离了董事会，请跳过它。 Do this until 1,000,000 steps are taken or you reach the top right of the board. 这样做直到执行1,000,000步，或者您到达板子的右上方。 We are also supposed to count the max number of steps that a single tile received and the same with the minimum. 我们还应该计算单个图块接收的最大步数，而最小步数相同。 I have done this using a 2D array and it counts sometimes and will output however it takes multiple button clicks to get an output. 我已经使用2D数组完成此操作，它有时会计数并且会输出，但是它需要多次单击才能获得输出。 I'm not sure if this is a memory allocation error related to how I am accessing the 2D array to keep track of number of steps or not. 我不确定这是否是与我访问2D数组以跟踪步数有关的内存分配错误。 I am relatively new to javascript so I don't know if my way was all that efficient. 我对javascript比较陌生，所以我不知道我的方式是否这么高效。
Code 码
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Path Game</h1>
<!-- Starts Game -->
<button onclick="doGame()">Click Here to start Game</button>
<p id="MaxSteps"></p>
<p id="MinSteps"></p>
<p id="totalSteps"></p>
<p id="reachedSteps"></p>
<p id="reachedSquare"></p>
<p id="reachedBoth"></p>
<!-- JS -->
<script>
function doGame()
{
var gameBoard = [0,0];
var stepCount = 0;
//10x10 array to hold step counts (may be a better way. check back later)
//Cell counter
var cells = [
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0]
];
while(true)
{
var oneMove = Math.floor(1+(Math.random()*4));
//Conditional checks
//Check if both square and step counts are satisfied
if(gameBoard[0] == 9 && gameBoard[1] == 9 && stepCount == 1000000)
{
document.getElementById("reachedBoth").innerHTML = "Reached 1,000,000 steps and top square";
break;
}
//Reached Top right before 1,000,000 steps
else if(gameBoard[0] == 9 && gameBoard[1] == 9)
{
document.getElementById("reachedSquare").innerHTML = "Reached Top right square";
break;
}
//Reached 1,000,000 steps before top right
else if(stepCount == 1000000)
{
document.getElementById("reachedSteps").innerHTML = "Reached 1,000,000 steps";
break;
}
//Movement on the board
var x = gameBoard[0];
var y = gameBoard[1];
cells[x][y] += 1;
//Move left
if(oneMove == 1)
{
//Initialized at 1 so less than is suitable
if(gameBoard[0] < 0)
{
gameBoard[0] = 0; //Reset
}
else{
gameBoard[0]--;//Goes left
}
}
//Move right
else if(oneMove == 2)
{
//If its at the edge, keep it there or keeps from going over
if(gameBoard[0] >= 9)
{
gameBoard[0] = 9; //Reset
}
else{
gameBoard[0]++;//Goes right
}
}
//Move up
else if(oneMove == 3)
{
//If its at the edge, keep it there or keeps from going over
if(gameBoard[1] >= 9)
{
gameBoard[1] = 9; //Reset
}
else{
gameBoard[1]++;//Goes up
}
}
//Move down
else if(oneMove == 4)
{
//Initialized at 1 so less than is suitable
if(gameBoard[1] < 0)
{
gameBoard[1] = 0; //Reset
}
else{
gameBoard[1]--;//Goes down
}
}
stepCount++; //Count the steps
}
var max = 0;
var min = Infinity;
//Find max
for(var i = 0; i < cells.length;i++)
{
for(var j = 0; j < cells[i].length; j++)
{
if(max < cells[i][j])
{
max = cells[i][j];
}
}
}
//Find min
for(var i = 0; i < cells.length;i++)
{
for(var j = 0; j < cells[i].length; j++)
{
if(min > cells[i][j])
{
min = cells[i][j];
}
}
}
//Total Steps print
document.getElementById("MaxSteps").innerHTML = "Max steps were: " + max;
document.getElementById("MinSteps").innerHTML = "Min steps were: " + min;
document.getElementById("totalSteps").innerHTML = "Total steps were: " + stepCount;
}
</script>
</body>
</html>
1 个解决方案
解决方案1
1 2016-08-24 00:42:40
This block is the one that strikes me as particularly inefficient: 这是令我感到特别低效的障碍：
if(oneMove == 1)
{
//Initialized at 1 so less than is suitable
if(gameBoard[0] < 1)
{
gameBoard[0] = 1; //Reset
}
else{
gameBoard[0]--;//Goes left
}
}
//Move right
else if(oneMove == 2)
{
//If its at the edge, keep it there or keeps from going over
if(gameBoard[0] >= 10)
{
gameBoard[0] = 10; //Reset
}
else{
gameBoard[0]++;//Goes right
}
}
//Move up
else if(oneMove == 3)
{
//If its at the edge, keep it there or keeps from going over
if(gameBoard[1] >= 10)
{
gameBoard[1] = 10; //Reset
}
else{
gameBoard[1]++;//Goes up
}
}
//Move down
else if(oneMove == 4)
{
//Initialized at 1 so less than is suitable
if(gameBoard[1] < 1)
{
gameBoard[1] = 1; //Reset
}
else{
gameBoard[1]--;//Goes down
}
}
This is for a class, so I won't offer you an answer directly, but can you think of a solution that instead of incrementing or decrementing your gameboard counters directly using the random value that was generated? 这是针对一个班级的，因此我不会直接为您提供答案，但是您能想到一种解决方案，而不是使用生成的随机值直接增加或减少游戏机计数器吗？
For example, if I had a simple 1-dimension gameboard like so: 例如，如果我有一个简单的一维游戏板，例如：
var gameboard = [0,0,0];
var position = 0,
direction = 0;
function move() {
direction = Math.round(Math.random()) * 2 - 1;
position += direction;
}
The only thing that is missing is to account for the possibility that I have moved off the gameboard. 唯一缺少的是要考虑我离开游戏板的可能性。 If the requirement were to start your marker on the other side of the board (think PacMan), this could also be accomplished using the modulo operator, which in JS is %: 如果要求在板子的另一端开始标记（想想PacMan），也可以使用取模运算符来完成，在JS中为％：
function move() {
direction = Math.round(Math.random()) * 2 - 1;
position += direction;
position = (position + 3) % 3;
}
Unfortunately, given your requirements, I don't see a way around if conditions to stay on the board: 不幸的是，鉴于您的要求，如果条件仍然存在，我看不到解决方法：
position = position < 0 ? 0 : position;
position = position > 2 ? 2 : position;
Hopefully this should get you going in the right direction. 希望这可以使您朝正确的方向前进。 The above three lines of code could actually be combined into one line, though I prefer to make them a bit more readable. 上面的三行代码实际上可以合并为一行，尽管我希望使它们更具可读性。
A few more notes: 一些注意事项：
- Storing your x and y positions in a two-element array called gameBoard is just confusing. 将x和y位置存储在一个名为gameBoard的两个元素的数组中只会造成混淆。 Just call them x and y (as you do at the end of your code). 只需将它们称为x和y（就像在代码末尾那样）。
- Though the requirements don't call for it, try generating the game board and performing all math so that instead of 10 elements, the game could be changed to n elements by changing only one value in your code. 尽管要求不是必需的，但请尝试生成游戏板并执行所有数学运算，以便可以通过仅更改代码中的一个值来将游戏（而不是10个元素）更改为n个元素。 It's good to have the smallest set of controls as possible. 最好有尽可能少的控件集。
Good luck with your class! 祝您上课好运！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.