enchant.jsでゲームを作ってスコア集計してランキングにしたい場面とかあると思うので簡単に方法をメモします。
利用するもの
・enchant.js
使用するゲームエンジン
・jQuery
enchant.jsにはajaxをサポートするものがないので別のライブラリを使うか自前でajaxを実装する必要があります。
一番楽なのでjQueryを使います。
・PHP
ファイルやDBへの書き込みを今回PHPを使って行います。
やること
「Let's Ajax!」と書かれたラベルをクリックした時に現在のスコアがtxtファイルに保存されるようにする。txtファイルに書き込まれたのを確認できたらおｋ。
実装
htmlの解説
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>ajax</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="enchant.js"></script>
<script src="testajax.js"></script>
</head>
<body>
</body>
</html>
jQueryとenchant.js本体とゲームファイルを読み込みます。(今回はtestajax.js)
ゲームファイルの解説(enchant.js + jQuery)
enchant();
window.onload = function(){
var core = new Core(320,320);
core.onload = function(){
var score = new Label();
score.text = 100;
var button = new Label();
button.text = "Lets Ajax!";
button.y = 100;
core.rootScene.addChild(score);
core.rootScene.addChild(button);
var action = function(){
//ここにajax処理
$.ajax({
type: "POST",
url: "post.php",
async: true,
data:"score="+score.text
});
score.text -= 1;
}
//ボタンを押した時にscoreの値をPHPに送り付ける
button.addEventListener("touchstart",action);
}//core.onload
core.start();
}//window.onload
var score = new Label();
score.text = 100;
ゲームのスコアに相当する部分です。この数値がファイルに書き込まれるようにします。
var button = new Label();
button.text = "Lets Ajax!";
button.y = 100;
ajax発動用のボタン(ラベル)です。これをクリックした時にスコアをPHP側にPOSTするようにします。
var action = function(){
//ここにajax処理
$.ajax({
type: "POST",
url: "post.php",
async: true,
data:"score="+score.text
});
score.text -= 1;
}
ajaxを利用してスコアをPHP側に送るイベントです。
ここでjQueryを利用しています。
scoreという変数名でscore.textの中身を送ります。
スコアの変動とクリック確認のためにクリックするたびにscore.textの中身が1づつ減算されていくようにしています。
button.addEventListener("touchstart",action);
buttonラベルがクリックされたときにactionイベントが実行されるようにします。
PHPの解説
<?PHP
/*
enchantからのscoreの値を取得しログファイルに保存する。
*/
//ajaxで取得した値
$score = $_POST["score"];
//書き込むログファイル名
$filename = "log.txt";
//書き込み
file_put_contents($filename,$score);
ゲームファイルから送られてきたscoreを変数scoreに格納しfile_put_contents関数をつかってlog.txtにスコアの書き込みを行います。
log.txtにスコアが書き込まれていれば成功です。確認用なので粗いです。
log.txtはスコアが書き込めるようにパーミッションの設定をおこなってください。
あとがき
マークダウンとか細かい解説は追々編集していきます・・・。