I make Othello with javascript.
When the user clicks the p-tag, the location of the clicked board is passed to run().
I prepared NPCs that players type randomly after typing, but I wanted to visually pause each process, so I wrote the following description at the beginning of runNpc().
let start=new Date();
while(new Date()-start<400);
However, after 0.4 seconds without displaying the board surface after the player hits it, it becomes the board surface after the NPC hits it.
The display on the board is called in reverse() when the player or NPC hits, so the display on the board after the player hits should be before runNpc(), but I can't find the reason why this happens.
I would appreciate it if someone could let me know.
Below is the full URL source.
https://github.com/gr9pe/jsOsero/blob/main/osero.js
function runNpc(){
let start = new Date();
while(new Date()-start<400);// Wait 0.4 seconds
let list = canPutPosList(white); // Return an array of places to place (NPC is white for back attack)
if(list.length!=0){
let index = Math.floor(Math.random()*list.length);
reverse(list [index]);
}
changeTurn();
}
function run(pos){
let inputPos = [parseInt(pos.charAt(0))), parseInt(pos.charAt(1))];
let canPutFlag=false;
for (let canPutPos of canPosList(turn)) {
if(canPutPos.toString()==inputPos.toString()){
canPutFlag = true;
break;
}
}
if(canPutFlag){
reverse(inputPos);
if(isFinish()){
printResult();
document.getElementById("turn").textContent="";
return;
} else {
changeTurn();
if(canPutPosList(turn).length==0&&!isFinish()){
changeTurn();
document.getElementById("message").textContent="There is no place to put it";
}
if(npc&&turn==white){
runNpc();
return;
}
return;
}
} else {
document.getElementById("message").textContent="Cannot be located";
}
}
// Display the board surface
function printField() {
letf = '';
document.getElementById("fields").innerHTML=f;
for(leti=0;i<10;i++){
for (let j = 0; j <10; j++) {
document.getElementById("fields").innerHTML+='<p>'+field[i][j]+'</p>';;
}
document.getElementById("fields").innerHTML+='<br/>';
}
}
// Turn it upside down and display it
function reverse (inputPos) {
// Omit
printField();
}
When the browser invokes JavaScript code in processing the event, the browser finishes and starts processing the screen updates and next events.
Therefore, if you want to see the status immediately after the player starts, you must return from run without starting the NPC.
Now, how do you start the NPC? There is a way called setTimeout to have JavaScript code called after a specified time.
Set setTimeout(runNpc,400); instead of runNpc(); to return control to the browser and perform the NPC initiation process after the screen refreshes.
© 2024 OneMinuteCode. All rights reserved.