Save user data of html5 game using wordpress - php

Question

I'm writing a game in html5 and using wordpress for the rest of the site. I want users to be able to save their progress, but I'm not clear on how the architecture looks.
I would just do an ajax call to a php page that access the database, but I feel like using the existing wordpress database and API is the correct thing to do. Not only that, but using the wordpress api will give me access to things like nonce.
That said, do I write a wordpress plugin to do this? How do I properly execute the save request from the javascript that runs my game?

Answer 1

In your js file, do your ajax request like this:
jQuery.post('path/to/wp-admin/admin-ajax.php', {action:'save_progress',other_parameter:'other_value'}, function(response) {
// let your user know if his progress is saved or not
});
add this to your theme's functions.php:
function save_progress() {
global $wpdb;
// do the saving job with received parameters here
die(); // this is necessary
}
add_action('wp_ajax_save_progress', 'save_progress');

Answer 2

If you're interested in a more generalizable solution than what the wordpress API allows (for more overall understanding), below is a simple, but complete demo:
Here's the HTML:
<input id="posted_data" ></input>
<button id="saveBtn">Save</button>
Here's the JS:
$(document.body).on('click', '#saveBtn', function(){
var posted_data=$('#posted_data').val();
var url="/submit_page.php";
$.ajax({url: url, data: {posted_data:posted_data }, type: "POST",
success: function(response){
//do something with the `response` data
} //success
}); //ajax
}); //.saveEditBtn
Here's the submit_page.php:
$posted_data=$_POST['posted_data'];
$posted_data; //do something with this variable, like insert it into a database
echo "Success"; // this will be the `response` variable in the JS above.