OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Javascript - requestAnimationFrame runs only two frames and then exits prematurely

  • Thread starter Thread starter coderodde
  • Start date Start date
C

coderodde

Guest
I have this HTML file (accessible via this link):

Code:
<!DOCTYPE html>
<html>
    <head>
        <title>AI vs. AI playing Connect 4</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel='stylesheet' type="text/css" href='css/connect4.css' />
    </head>
    <body>
        <form>
            <div class="paramDivs">
            <h3>X engine parameters</h3>
            
            <table>
                <tr><td><h5>Search algorithm for X (beginning) AI:</h5></td><td></td></tr>
                <tr><td> <label for="xEngineId">Choose X engine:</label> </td> 
                    <td>
                        <select name="xEngine" id="xEngineId">
                            <option value="alpha-beta">Alpha-beta pruning</option>
                            <option value="negamax"   >Negamax</option>
                            <option value="pvs"       >PVS (Principal Variation Search)</option>
                        </select>
                    </td>
                </tr>
                
                <tr><td><h5>Search depth for X AI:</h5></td><td></td></tr>
                <tr><td> <label for="xEngineDepthId">Choose X engine depth  :</label> </td>
                    <td>
                        <select name="xEngineDepth" id="xEngineDepthId">
                            <option value="1"         >Depth 1 </option>
                            <option value="2"         >Depth 2 </option>
                            <option value="3"         >Depth 3 </option>
                            <option value="4"         >Depth 4 </option>
                            <option value="5"         >Depth 5 </option>
                            <option value="6"         >Depth 6 </option>
                            <option value="7"         >Depth 7 </option>
                            <option value="8" selected>Depth 8 </option>
                            <option value="9"         >Depth 9 </option>
                            <option value="10"        >Depth 10</option>
                        </select>
                    </td>
                </tr>
            </table>
            </div>
            
            <div class="paramDivs">
            <h3>O engine parameters</h3>
            
            <table>
                <tr><td><h5>Search algorithm for O (following) AI:</h5></td><td></td></tr>
                <tr><td> <label for="oEngineId">Choose O engine:</label> </td> 
                    <td>
                        <select name="oEngine" id="oEngineId">
                            <option value="alpha-beta">Alpha-beta pruning</option>
                            <option value="negamax"   >Negamax</option>
                            <option value="pvs"       >PVS (Principal Variation Search)</option>
                        </select>
                    </td>
                </tr>
                
                <tr><td><h5>Search depth for X AI:</h5></td><td></td></tr>
                <tr><td> <label for="oEngineDepthId">Choose O engine depth  :</label> </td>
                    <td>
                        <select name="oEngineDepth" id="oEngineDepthId">
                            <option value="1"         >Depth 1 </option>
                            <option value="2"         >Depth 2 </option>
                            <option value="3"         >Depth 3 </option>
                            <option value="4"         >Depth 4 </option>
                            <option value="5"         >Depth 5 </option>
                            <option value="6"         >Depth 6 </option>
                            <option value="7"         >Depth 7 </option>
                            <option value="8" selected>Depth 8 </option>
                            <option value="9"         >Depth 9 </option>
                            <option value="10"        >Depth 10</option>
                        </select>
                    </td>
                </tr>
            </table>
            </div>
            
            <div class="paramDivs">
                <button onclick="runMatch();">RUN MATCH!</button>
            </div>
        </form>
        
        <!--<div id="runButton"><button onclick="runMatch();">RUN MATCH!</button></div>-->
        
        <pre id='output-text-div'></pre>
        <script src='js/connect4ai.js'></script>
        <script>
            
            const heuristicFunction            = new ConnectFourHeuristicFunction();
            const alphaBetaPruningSearchEngine = new ConnectFourAlphaBetaPruningSearchEngine(heuristicFunction);
            const negamaxSearchEngine          = new ConnectFourNegamaxSearchEngine(heuristicFunction);
            const pvsSearchEngine              = new ConnectFourPrincipalVariationSearchEngine(heuristicFunction);
            
            let xEngine;
            let oEngine;
            let xDepth;
            let yDepth;
            
            function nameToEngine(name) {
                switch (name) {
                    case "alpha-beta":
                        return alphaBetaPruningSearchEngine;
                        
                    case "negamax":
                        return negamaxSearchEngine;
                        
                    case "pvs":
                        return pvsSearchEngine;
                        
                    default:
                        throw "Should not get here.";
                }
            }
            
            function getXEngine() {
                const selection = document.getElementById("xEngineId");
                return nameToEngine(selection.value);
            }
            
            function getOEngine() {
                const selection = document.getElementById("oEngineId");
                return nameToEngine(selection.value);
            }
            
            function depthNameToInteger(name) {
                return Number(name);
            }
            
            function getXDepth() {
                const selection = document.getElementById("xEngineDepthId");
                return Number(selection.value);
            }
            
            function getODepth() {
                const selection = document.getElementById("oEngineDepthId");
                return Number(selection.value);
            }
            
            function runMatch() {
                xEngine = getXEngine();
                oEngine = getOEngine();
                xDepth = getXDepth();
                oDepth = getODepth();
                engine = xEngine;
                depth = xDepth;
                window.requestAnimationFrame(gameLoop);
//                gameLoop();
            }

            function flipTurn(playerTurn) {
                switch (playerTurn) {
                    case X:
                        return O;
                        
                    case O:
                        return X;
                        
                    default:
                        throw "Should not get here.";
                }
            }
            
            function flipDepth(depth) {
                if (depth === xDepth) {
                    return oDepth;
                }
                
                if (depth === oDepth) {
                    return xDepth;
                }
                
                throw "Should not get here.";
            }

            const output = document.getElementById('output-text-div');
            
            let turnNumber = 1;
            
            function getTurnNumberString() {
                if (turnNumber % 10 === 1) {
                    return turnNumber + "st";
                }
                
                if (turnNumber % 10 === 2) {
                    return turnNumber + "nd";
                }
                
                if (turnNumber % 10 === 3) {
                    return turnNumber + "rd";
                }
                
                return turnNumber + "th";
            }

            let state = new ConnectFourBoard();
            output.innerHTML += state.toString() + "<br/>";

            function millis() {
                return new Date().valueOf();
            }
            
            let totalDurationX = 0;
            let totalDurationO = 0;
            
            let turn = X;
            
            function getEngineName(engine) {
                let str = "";
                
                switch (engine) {
                    case alphaBetaPruningSearchEngine:
                        str += "Alpha-beta pruning engine";
                        break;
                        
                    case negamaxSearchEngine:
                        str += "Negamax engine";
                        break;
                        
                    case pvsSearchEngine:
                        str += "PVS engine";
                        break;
                        
                    default:
                        throw "Should not get here.";
                }
                
                if (engine === xEngine) {
                    return str + " (X)";
                } else if (engine === oEngine) {
                    return str + " (O)";
                } else {
                    throw "Should not get here.";
                }
            }
            
            function gameLoop() {
                
                let ta = millis();
                state = engine.search(state, depth, turn);
                let tb = millis();

                if (turn === X) {
                    totalDurationX += tb - ta;
                } else {
                    totalDurationO += tb - ta;
                }

                output.innerHTML += state.toString();
                output.innerHTML += "<br/>";
                output.innerHTML += 
                        turn === X ? 
                            getEngineName(engine)
                                    + " made the "
                                    + getTurnNumberString()
                                    + " turn, duration: " 
                                    + (tb - ta) 
                                    + " milliseconds.<br/>"
                            :
                            getEngineName(engine) 
                                    + " made the "
                                    + getTurnNumberString()
                                    + " turn, duration: " 
                                    + (tb - ta) 
                                    + " milliseconds.<br/>";

                turnNumber++;

                if (state.isTie()) {
                    output.innerHTML += "RESULT: It's a tie.<br/>";
                    return;
                }

                if (turn === X) {
                    if (state.isWinningFor(X)) {
                        output.innerHTML += "RESULT: X won.<br/>";
                        output.innerHTML += "X AI total duration: " + totalDurationX + " milliseconds.<br/>";
                        output.innerHTML += "O AI total duration: " + totalDurationO + " milliseconds.<br/>";
                        window.scrollTo(0, document.body.scrollHeight);
                        return;
                    }
                } else {
                    if (state.isWinningFor(O)) {
                        output.innerHTML += "RESULT: O won.<br/>";
                        output.innerHTML += "X AI total duration: " + totalDurationX + " milliseconds.<br/>";
                        output.innerHTML += "O AI total duration: " + totalDurationO + " milliseconds.<br/>";
                        window.scrollTo(0, document.body.scrollHeight);
                        return;
                    }
                }

                function flipEngine(engine) {
                    if (engine === xEngine) {
                        return oEngine;
                    }

                    if (engine === oEngine) {
                        return xEngine;
                    }

                    throw "Should not get here.";
                }

                turn   = flipTurn(turn);
                depth  = flipDepth(depth);
                engine = flipEngine(engine);

                if (!state.isTerminal()) {
                    // Run the next frame:
                    window.scrollTo(0, document.body.scrollHeight);
                    window.requestAnimationFrame(gameLoop);
                } else {
                    return;
                }
            }
        </script>
    </body>
</html>

The above HTML page is supposed to run a game of Connect Four between two distinct search engines and with specified depths. However, when I press the RUN MATCH button, it makes only 3 (?) plies when up to 42 should be the case. The problem seems to be related to the window.requestAnimationFrame, yet I don't know where is the bug, and -- thus -- how to fix it.

Any advice?

PS​


The CSS css/connect4.css is here and js/connect4ai.js is here.

<p>I have this HTML file (accessible via <a href="https://coderodde.github.io/connect...neDepth=10&oEngine=alpha-beta&oEngineDepth=10" rel="nofollow noreferrer">this link</a>):</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>AI vs. AI playing Connect 4</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' type="text/css" href='css/connect4.css' />
</head>
<body>
<form>
<div class="paramDivs">
<h3>X engine parameters</h3>

<table>
<tr><td><h5>Search algorithm for X (beginning) AI:</h5></td><td></td></tr>
<tr><td> <label for="xEngineId">Choose X engine:</label> </td>
<td>
<select name="xEngine" id="xEngineId">
<option value="alpha-beta">Alpha-beta pruning</option>
<option value="negamax" >Negamax</option>
<option value="pvs" >PVS (Principal Variation Search)</option>
</select>
</td>
</tr>

<tr><td><h5>Search depth for X AI:</h5></td><td></td></tr>
<tr><td> <label for="xEngineDepthId">Choose X engine depth :</label> </td>
<td>
<select name="xEngineDepth" id="xEngineDepthId">
<option value="1" >Depth 1 </option>
<option value="2" >Depth 2 </option>
<option value="3" >Depth 3 </option>
<option value="4" >Depth 4 </option>
<option value="5" >Depth 5 </option>
<option value="6" >Depth 6 </option>
<option value="7" >Depth 7 </option>
<option value="8" selected>Depth 8 </option>
<option value="9" >Depth 9 </option>
<option value="10" >Depth 10</option>
</select>
</td>
</tr>
</table>
</div>

<div class="paramDivs">
<h3>O engine parameters</h3>

<table>
<tr><td><h5>Search algorithm for O (following) AI:</h5></td><td></td></tr>
<tr><td> <label for="oEngineId">Choose O engine:</label> </td>
<td>
<select name="oEngine" id="oEngineId">
<option value="alpha-beta">Alpha-beta pruning</option>
<option value="negamax" >Negamax</option>
<option value="pvs" >PVS (Principal Variation Search)</option>
</select>
</td>
</tr>

<tr><td><h5>Search depth for X AI:</h5></td><td></td></tr>
<tr><td> <label for="oEngineDepthId">Choose O engine depth :</label> </td>
<td>
<select name="oEngineDepth" id="oEngineDepthId">
<option value="1" >Depth 1 </option>
<option value="2" >Depth 2 </option>
<option value="3" >Depth 3 </option>
<option value="4" >Depth 4 </option>
<option value="5" >Depth 5 </option>
<option value="6" >Depth 6 </option>
<option value="7" >Depth 7 </option>
<option value="8" selected>Depth 8 </option>
<option value="9" >Depth 9 </option>
<option value="10" >Depth 10</option>
</select>
</td>
</tr>
</table>
</div>

<div class="paramDivs">
<button onclick="runMatch();">RUN MATCH!</button>
</div>
</form>

<!--<div id="runButton"><button onclick="runMatch();">RUN MATCH!</button></div>-->

<pre id='output-text-div'></pre>
<script src='js/connect4ai.js'></script>
<script>

const heuristicFunction = new ConnectFourHeuristicFunction();
const alphaBetaPruningSearchEngine = new ConnectFourAlphaBetaPruningSearchEngine(heuristicFunction);
const negamaxSearchEngine = new ConnectFourNegamaxSearchEngine(heuristicFunction);
const pvsSearchEngine = new ConnectFourPrincipalVariationSearchEngine(heuristicFunction);

let xEngine;
let oEngine;
let xDepth;
let yDepth;

function nameToEngine(name) {
switch (name) {
case "alpha-beta":
return alphaBetaPruningSearchEngine;

case "negamax":
return negamaxSearchEngine;

case "pvs":
return pvsSearchEngine;

default:
throw "Should not get here.";
}
}

function getXEngine() {
const selection = document.getElementById("xEngineId");
return nameToEngine(selection.value);
}

function getOEngine() {
const selection = document.getElementById("oEngineId");
return nameToEngine(selection.value);
}

function depthNameToInteger(name) {
return Number(name);
}

function getXDepth() {
const selection = document.getElementById("xEngineDepthId");
return Number(selection.value);
}

function getODepth() {
const selection = document.getElementById("oEngineDepthId");
return Number(selection.value);
}

function runMatch() {
xEngine = getXEngine();
oEngine = getOEngine();
xDepth = getXDepth();
oDepth = getODepth();
engine = xEngine;
depth = xDepth;
window.requestAnimationFrame(gameLoop);
// gameLoop();
}

function flipTurn(playerTurn) {
switch (playerTurn) {
case X:
return O;

case O:
return X;

default:
throw "Should not get here.";
}
}

function flipDepth(depth) {
if (depth === xDepth) {
return oDepth;
}

if (depth === oDepth) {
return xDepth;
}

throw "Should not get here.";
}

const output = document.getElementById('output-text-div');

let turnNumber = 1;

function getTurnNumberString() {
if (turnNumber % 10 === 1) {
return turnNumber + "st";
}

if (turnNumber % 10 === 2) {
return turnNumber + "nd";
}

if (turnNumber % 10 === 3) {
return turnNumber + "rd";
}

return turnNumber + "th";
}

let state = new ConnectFourBoard();
output.innerHTML += state.toString() + "<br/>";

function millis() {
return new Date().valueOf();
}

let totalDurationX = 0;
let totalDurationO = 0;

let turn = X;

function getEngineName(engine) {
let str = "";

switch (engine) {
case alphaBetaPruningSearchEngine:
str += "Alpha-beta pruning engine";
break;

case negamaxSearchEngine:
str += "Negamax engine";
break;

case pvsSearchEngine:
str += "PVS engine";
break;

default:
throw "Should not get here.";
}

if (engine === xEngine) {
return str + " (X)";
} else if (engine === oEngine) {
return str + " (O)";
} else {
throw "Should not get here.";
}
}

function gameLoop() {

let ta = millis();
state = engine.search(state, depth, turn);
let tb = millis();

if (turn === X) {
totalDurationX += tb - ta;
} else {
totalDurationO += tb - ta;
}

output.innerHTML += state.toString();
output.innerHTML += "<br/>";
output.innerHTML +=
turn === X ?
getEngineName(engine)
+ " made the "
+ getTurnNumberString()
+ " turn, duration: "
+ (tb - ta)
+ " milliseconds.<br/>"
:
getEngineName(engine)
+ " made the "
+ getTurnNumberString()
+ " turn, duration: "
+ (tb - ta)
+ " milliseconds.<br/>";

turnNumber++;

if (state.isTie()) {
output.innerHTML += "RESULT: It's a tie.<br/>";
return;
}

if (turn === X) {
if (state.isWinningFor(X)) {
output.innerHTML += "RESULT: X won.<br/>";
output.innerHTML += "X AI total duration: " + totalDurationX + " milliseconds.<br/>";
output.innerHTML += "O AI total duration: " + totalDurationO + " milliseconds.<br/>";
window.scrollTo(0, document.body.scrollHeight);
return;
}
} else {
if (state.isWinningFor(O)) {
output.innerHTML += "RESULT: O won.<br/>";
output.innerHTML += "X AI total duration: " + totalDurationX + " milliseconds.<br/>";
output.innerHTML += "O AI total duration: " + totalDurationO + " milliseconds.<br/>";
window.scrollTo(0, document.body.scrollHeight);
return;
}
}

function flipEngine(engine) {
if (engine === xEngine) {
return oEngine;
}

if (engine === oEngine) {
return xEngine;
}

throw "Should not get here.";
}

turn = flipTurn(turn);
depth = flipDepth(depth);
engine = flipEngine(engine);

if (!state.isTerminal()) {
// Run the next frame:
window.scrollTo(0, document.body.scrollHeight);
window.requestAnimationFrame(gameLoop);
} else {
return;
}
}
</script>
</body>
</html>
</code></pre>
<p>The above HTML page is supposed to run a game of Connect Four between two distinct search engines and with specified depths. However, when I press the <code>RUN MATCH</code> button, it makes only 3 (?) plies when up to 42 should be the case. The problem seems to be related to the <code>window.requestAnimationFrame</code>, yet I don't know where is the bug, and -- thus -- how to fix it.</p>
<p>Any advice?</p>
<h2>PS</h2>
<p>The CSS <code>css/connect4.css</code> is <a href="https://github.com/coderodde/Connect4.js/blob/main/public_html/css/connect4.css" rel="nofollow noreferrer">here</a> and <code>js/connect4ai.js</code> is <a href="https://github.com/coderodde/Connect4.js/blob/main/public_html/js/connect4ai.js" rel="nofollow noreferrer">here</a>.</p>
 

Latest posts

Top