Creating a custom turn-based game in Javascript
I have created a whiteboard web application where there are many registered users, login and start drawing on html5 canvas. I have developed a "multiplayer" aspect of the game via python web interfaces and login is done with php, currently there is "session_start ()" in the canvas page; so I can add a function to see who is currently using the app, and I feel like it might come in the "step by step" aspect as well.
Now I try to prevent users from drawing on the canvas at the same time, if possible I would like each user to have a fair rotation when drawing on the canvas. I'm not sure how I would go about doing this, but I feel like Javascript will definitely be the logic behind this.
Any advice or suggestions on how I would go about achieving this feature?
EDIT Ok, since no one has any answers or suggestions, I'll try to provide you with what I've tried so far, I think it might be in the right direction, even if it doesn't work:
var player = document.getElementById("inputnameid").value;
var currentPlayer = player; // player class
//array of player objs.
var array1 = [player]; // list that OnCurrentPlayerEndTurn cycles through to choose user
// call this at the start of the app
function OnStartTurn()
{
currentPlayer.OnBeginTurn();
var inputs=document.getElementById('inputty');
for(i=0;i<inputs.length;i++){
inputs[i].disabled=false;
}
//This function will activate the GUI so the user can now act
}
// call this function when setTimeout is 10 seconds
function OnCurrentPlayerEndTurn()
{
setTimeout('OnCurrentPlayerEndTurn();', 10*1000);
change currentPlayer variable to the next player in line
OnStartTurn(); // will cause the next player to begin his turn
}
source to share
Your question seems to focus on front-end code, which, while important, is not the critical part of this problem. As you already noted, the core of turn-based play is the circular passage of active players. You probably want this to be done on the server side: it is much easier to coordinate different players from there.
You will maintain a list of players in a given game on the server. Before starting the game, each client is registered with the server, and the user's identification identifier is stored there. Then, in each round, the server allows each player to turn. Of course, the pivot order depends on the game, but the general idea is the same whether the pivot order is fixed or fluid.
As each player turns, the server sends a ticket to that player's client. It's essentially a one-off concept (OTP): generate a random token that's hard to guess (so don't just use an incrementing integer, but some cheap hash function or the like instead). The client then sends that ticket along with a request for the move they would like to make, and the server confirms that the ticket matches the currently active player before taking any action.
Depending on the rules and requirements of the game, the server can immediately cancel the ticket (for example, chess), it can wait until the "end of turn" moves, or it can cancel the ticket after some time. The server then generates a new ticket for the next player.
The client code naturally follows from this architecture. All entrances can be disabled by default and are only available if the customer has a valid ticket. If the ticket is timed out, you probably need a server query method to determine if it is actually valid. If the user is always responsible for stopping their turn (either explicitly or implicitly), you can do without it.
source to share