私は初心者ですので、これは初めてのことです。私たちのコースでは、SQLインタラクションのためにAjaxとPHPを使用して、対戦ゲームを作成する必要があります。私たちは、例として、javascriptを使ってクライアント側のtictactoeを使用しました。しかし今、私たちは最後のコードに立ち往生しています。基本的に私たちがやったことのボックスの値を取得するために、SQLクエリを作成し、このようなjavascriptの変数にすべてのそれらを割り当てられます。php/ajaxを使ったtictactoeは失敗し続ける
var box0 = <?=$box1?>;
var box1 = <?=$box2?>;
var box2 = <?=$box3?>;
var box3 = <?=$box4?>;
var box4 = <?=$box5?>;
var box5 = <?=$box6?>;
var box6 = <?=$box7?>;
var box7 = <?=$box8?>;
var box8 = <?=$box9?>;
その後、我々は我々ができた最後のオプションとして長いjavascriptのコードを書きました(誰が勝つかを決定するために)値を追跡する2つの配列を作成し、空白が埋め込まれているかどうか(すでにブロックが埋められているのを変更しないようにする)を考えてください。 `
//Global Variables
var painted;
var content;
var winningCombinations;
//Instanciate Arrays
window.onload = function() {
painted = new Array();
content = new Array();
winningCombinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
if (box0 == " ") {
painted[0] = "false";
content[0] = "";
} else {
painted[0] = "true";
content[0] = box0;
}
if (box1 == " ") {
painted[1] = "false";
content[1] = "";
} else {
painted[1] = "true";
content[1] = box1;
}
if (box2 == " ") {
painted[2] = "false";
content[2] = "";
} else {
painted[2] = "true";
content[2] = box2;
}
if (box3 == " ") {
painted[3] = "false";
content[3] = "";
} else {
painted[3] = "true";
content[3] = box3;
}
if (box4 == " ") {
painted[4] = "false";
content[4] = "";
} else {
painted[4] = "true";
content[4] = box4;
}
if (box5 == " ") {
painted[5] = "false";
content[5] = "";
} else {
painted[5] = "true";
content[5] = box5;
}
if (box6 == " ") {
painted[6] = "false";
content[6] = "";
} else {
painted[6] = "true";
content[6] = box6;
}
if (box7 == " ") {
painted[7] = "false";
content[7] = "";
} else {
painted[7] = "true";
content[7] = box7;
}
if (box8 == " ") {
painted[8] = "false";
content[8] = "";
} else {
painted[8] = "true";
content[8] = box8;
}
}`
だから、これは我々がチェックしたいデータを含む二つの配列を作成する必要がありますJavascriptを次のようになります。しかし、onclickハンドラによって起動された次のコードを実行しようとすると、何も起こりません。我々はboxClicked(boxid)を実行することにより、まったく応答がない理由
//Game methods
function boxClicked(boxid) {
if (painted[boxid - 1] == "false") {
if (turn % 2 == 0) {
content[boxid - 1] = "X";
$.ajax({
type: "POST",
url: "add.php",
data: {
id: boxid,
weapon: "X"
}
});
} else {
content[boxid - 1] = "O";
$.ajax({
type: "POST",
url: "add.php",
data: {
id: boxid,
weapon: "O"
}
});
}
$.ajax({
type: "POST",
url: "count.php",
});
painted[boxid - 1] = "true";
checkForWinners(content[boxid - 1]);
squaresFilled++;
if (squaresFilled == 11) {
alert("THE GAME IS OVER!");
}
location.reload(true);
} else {
alert("THAT SPACE IS ALREADY FILLED");
}
}
function checkForWinners(symbol) {
for (var a = 0; a < winningCombinations.length; a++) {
if (content[winningCombinations[a][0]] == symbol && content[winningCombinations[a][1]] == symbol && content[winningCombinations[a][2]] == symbol) {
alert(symbol + " WON!");
if (symbol == "X") {
$.ajax({
type: "POST",
url: "score.php",
data: {
player: "X"
}
});
}
if (symbol == "O") {
$.ajax({
type: "POST",
url: "/score.php",
data: {
player: "O"
}
});
}
playAgain();
}
}
}
function playAgain() {
y = confirm("PLAY AGAIN?");
if (y == true) {
$.ajax({
type: "POST",
url: ".resetcount.php",
});
$.ajax({
type: "POST",
url: "delete.php",
success: function() {
location.reload(true);
}
});
} else {
alert("Thanks for playing!");
}
}
だから、基本的に、誰もが私たちに伝えることができますか?私たちはajaxを使ってadd.phpを実行し、新しい値でボードを更新することを期待しました。そして、コードは勝者、ゲームの終了、ボックスが既に埋め込まれているかどうかをチェックします。
[あなたは、ブラウザの開発ツールでAJAXリクエスト/レスポンスを見たことがありますか?プロジェクトにjQueryライブラリを含めましたか?エラーが報告されていますか?あなたはこれをWebサーバー上で実行していますか?](http://jayblanchard.net/basics_of_jquery_ajax.html) –