使用wordpress保存html5游戏的用户数据

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.