Jump to content

How to store levels passed in a wordpress site


Recommended Posts


I'm writting a platform game in phaser, and i want it to have 30 levels. 

I wanna post them in a wordpress page and i really don't know how can i storage the data: levels passed, lifes left, etc... so i can use it in the wordpress site to show some "leves/icons" as completed and in my phaser game to get this informacion further than the cache data i can pass throught States.

My programmer skills are few so i don't even know how to start.

Anyone can tel me where to start looking?

Many thanks!!


Link to comment
Share on other sites

  • 3 weeks later...

Hi o0Corps0o,

Thanks for your answer!

I was looking at it, and i think that i can make it work.

But, i,m not sure how to pass the data.

Inside my wordpress post i have a <div> tag and inside it runs my phaser game. So i need to pass the variables from a javascript file (where my variables are stored) to a php file (my wordpress post) or to pass it from a javascript direct to my sql database. As far as i found i can't do it directly.

Do i need ajax to make it work? or i am missing something?

Many thanks for your time!

Link to comment
Share on other sites

I'm guessing your game's users don't have login accounts and you want to keep things simple. If that's the case then I would simply store lives, levels, and other user data in localStorage from within the game. Then you just need to include some JavaScript code with the DIV in your WordPress post to display that data. For example:

<div id="game-stats"></div>
    (function () {
        var statsDiv = document.getElementById('game-stats');

        statsDiv.innerHTML = 'Lives remaining: ' + localStorage.getItem('livesRemaining') + 
                        '<br/>Current level: ' + localStorage.getItem('currLevel');


Some users may complain they don't see their stats and it will probably be because they have cookies disabled, they're in private browsing mode, or they cleared their browser history. I hope that helps.

Link to comment
Share on other sites

Hi BobF,

Actually i want to have a login access so i can store each user data for using it and displaying it in each case.

But maybe i can take it litlle by little and try to make work first what you told me, i'm still blocked in the same place, i don't know how to pass my data from my main.js where my phaser game is, to my localStorage, so i can keep it and store it in the browser cache, as you are telling me.

I understand i can take data from within my wordpress post by using document.getElementById to display it in this same post,  but i don't know how to take data from within the main.js wich contains my game and has my level and lives variables.

many thanks!

Link to comment
Share on other sites

The browser provides your website's domain with a dedicated chunk of local storage that is shared by all of the pages on your site, including the Phaser game and the WordPress post (assuming they are in the same domain). So, somewhere in your game code you would have lines that look something like the following:

localStorage.setItem('livesRemaining', player.livesRemaining);
localStorage.setItem('currLevel', player.currLevel);

Once that code has run within the game then the values will be shown in the game stats of your WordPress post (see my previous post) the next time the user loads that post in the browser.

Note that some browsers may throw an exception when invoking setItem if private browsing mode is enabled or if cookies are disabled, so handle that situation. Also, browsers cap the amount of local storage available per domain, so stay under 5MB (2.5M characters) of data.

Link to comment
Share on other sites

The localStorage works perfecty! Thanks! 

I'm now able to connect to my sql through php get the información of a user in the new column for my levels and change it.

But i'm stuck in i where hope is the last step. I wanna keep mataining my local Storage for the ones that aren't logged and if they are logged get the information from the sql data base. But i can't reach the conditional code for:  if(isLogged){checkSql}else{checkLocalStorage}.

I'm using the Ultimate Member plugin i was looking in the docs and i can't find the code for this. Any ideas? Maybe i'm looking at it from the wrong side...

Many thanks again!!

Link to comment
Share on other sites

The plug-in probably creates a special session cookie when the user is logged in, so you can probably check for that. If you don't see info about that in their docs then you will probably need to contact their Support, or maybe they have a user forum and you can ask there.

Link to comment
Share on other sites

Finally i found the conditional code, but now i can't update my sql as i want, these is my  code:

	//Store data in browser cache
	var lastLevelEnabled;
	function dataInLocalStorage(){
			lastLevelEnabled =1;localStorage.lastLevelEnabled = lastLevelEnabled;

    //check if the user is logged with wp code
		echo "<script> console.log( 'there is a user logged' );</script>"; 

        //This is how wp gets the user data
		$current_user = wp_get_current_user(); 
		echo $current_user->user_email;

		//Connect to sql dataBase
		$conn = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
		if ($conn->connect_error) {
    			die("Connection failed: " . $conn->connect_error);
		echo "Connected successfully".'<br/>'; 
		//Select LastLevel in DataBase
		$result = mysqli_query($conn,"SELECT gnomeWishLastLevel FROM wp_users
		WHERE user_login=('$current_user->user_email')");

        //Fetch result and show it 
		$resultFetch = mysqli_fetch_array($result);
		echo $resultFetch[0].'<br/>';
        //Here is where i'm trying to store somehow the localStorage in js code in php so i can compare it and store it (i'm doing this in a desperate way, cause if i update here my sql data base i will need to reload the page each time user pass a level)
		$localStorage =<script>localStorage.lastLevelEnabled</script>;
// and here i get an error when trying to update the DataBase
			mysqli_query($conn,"UPDATE wp_users set gnomeWishLastLevel = localStorage.lastLevelEnabled WHERE user_login=('$current_user->user_email')");



	function storeNewData(){
		//This function is called from SelectLevelState.js, so every time i pass a level is stored in localStorage
		localStorage.lastLevelEnabled = lastLevelEnabled;
		document.getElementById("lastLevelEnabled").innerHTML = "lastLevelEnabled  " +localStorage.lastLevelEnabled;
		//Now i need to store it in mySQL too. i've tried calling a php method but aparently i need ajax for this.

While searching, all i found is that i can't do what i'm trying and that if i want to connect with sql once the page is loaded or call a php method from my js code, i need to do it through ajax.

i hope i explained my self clearly, if not ask me, please.

Any ideas?? Thanks!

Link to comment
Share on other sites

17 hours ago, barbara said:

$localStorage =<script>localStorage.lastLevelEnabled</script>;

You can't do anything like that because the JavaScript has to run in the browser, and the page hasn't even been delivered to the browser yet.

The information you found stating ajax is necessary is correct (note that you could use jQuery's ajax since WordPress loads jQuery). Basically, you could write a simple PHP script that resides on your server and whose only job is to increment the game level value in the SQL database for a specified user. You would then add a bit of ajax code to your "storeNewData" function to call that PHP script. Note that you probably don't need ajax to read the game level from the database because the current game level value can be encoded directly into the page itself by your WordPress PHP code. You just need your JavaScript to write the game level to the database during game play, and you're on the right track in attempting to do that from storeNewData.

Note that when using ajax to increment the game level, a clever user may dig through your JavaScript code and find the PHP URL used to do that. Without a deterrence, the user could conceivably use that URL to directly increment his game level without actually playing the game to do so. Just something to think about.

Link to comment
Share on other sites

  • 2 weeks later...

Did it!

Finally i need to use ajax to load a php page with the conexion to the SQL DataBase and pass the variables in javascript throught the get method. In case anyone has the same problem...

Many thanks for your Help! Couldn't do it without you!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...