0
私はAIなしでtic tac toeゲームを実装しようとしていました。何とか私のクリック機能が自動的に起動します。クリック機能が自動的にトリガーする理由を理解するのを助けてください。 HTMLコードスニペットは次のとおりです。javascript Tic tac toeゲーム待ちのユーザー入力
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tic Tac Toe Game</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container text-center bg-grey">
<div class="container-fluid text-center">
<h3 id="winner"></h3>
<div class="row">
<div class="col-md-4" id="a1"></div>
<div class="col-md-4" id="a2"></div>
<div class="col-md-4" id="a3"></div>
</div>
<div class="row">
<div class="col-md-4" id="a4"></div>
<div class="col-md-4" id="a5"></div>
<div class="col-md-4" id="a6"></div>
</div>
<div class="row">
<div class="col-md-4" id="a7"></div>
<div class="col-md-4" id="a8"></div>
<div class="col-md-4" id="a9"></div>
</div>
</div>
<div class="container-fluid">
<div class="row foot">
<div class="col-md-6">
<img onclick="users(1)" src="computer.png" alt="Computer Image">
</div>
<div class="col-md-6">
<img onclick="users(2)"
src="human.png" alt="Human Image">
</div>
</div>
</div>
</div>
<script>
var player = "human";
var game = false;
var used = new Array(10);
var mat = new Array(10);
var humansTurn = false;
var GameAvailable = false;
var totalMoves = 0;
$('#a1').click(mark("1", 5));
$('#a2').click(mark("2", 5));
$('#a3').click(mark("3", 5));
$('#a4').click(mark("4", 5));
$('#a5').click(mark("5", 5));
$('#a6').click(mark("6", 5));
$('#a7').click(mark("7", 5));
$('#a8').click(mark("8", 5));
$('#a9').click(mark("9", 5));
function users(who) // initialize everything
{
for (var i = 1; i <= 9; i++) {
used[i] = false;
mat[i] = 0;
}
GameAvailable = true;
humansTurn=false;
player = "human";
if (who == 1) {
player = "computer";
// compChoice();
}
else {
humansTurn = true;
}
playGame(player);
}
function resetAll() {
var bb = "#a";
game = false;
totalMoves = 0;
humansTurn = false;
for (var i = 1; i <= 9; i++) {
used[i] = false;
mat[i] = 0;
$(bb + i).empty();
}
$("#winner").empty();
}
// MARK USERS CHOICE
function mark(ind, abc) {
console.log(" you clicked: " + ind + " " + abc);
if (used[ind] === false && humansTurn === true) // users choice
{
totalMoves++; // increase moves
mat[ind] = abc; // mark players choice
used[ind] = true;
var id = "#a" + ind;
var imgtag;
imgtag = "<img src='ob.png'>";
$(id).prepend(imgtag);
humansTurn = false;
}
else {
alert(" It is not your turn !!!");
console.log(ind + " occuppied or not your turn " + ind);
}
}
function markComputer(ind, abc) {
console.log(" computer moved: " + ind + " " + abc);
if (used[ind] === false && humansTurn === false) // comp choice
{
totalMoves++; // increase moves
mat[ind] = abc; // mark comp choice
used[ind] = true;
var id = "#a" + ind;
var imgtag;
imgtag = "<img src='xb.png'>";
$(id).prepend(imgtag);
}
else {
alert(" It is not computers turn !!!");
}
}
function compChoice() {
if (humansTurn == false) {
var index;
while (true) {
index = Math.floor((Math.random() * 9) + 1);
if (used[index] === false) // random choice for computer
{
console.log(" computers index: " + index);
break;
}
}
markComputer(index, 1);
humansTurn = true;
}
else{
alert("Computer get crazy , extra move applied");
}
}
function playGame(player)
{
if(player=="computer")
{
compChoice(); // comp moves first
}
}
function et() {
var win = checkWinner();
// 0 for human
// 1 for computer
// 2 for draw
// 3 no winners yet
if (win === 0) // checks winner
{
$("#winner").html("You Win!");
}
else if (win === 1) {
$("#winner").html("You Lose!");
}
else if (win === 1) {
$("#winner").html("Draw!");
// resetAll();
}
}
function checkWinner() {
var lt = 15;
if (mat[1] + mat[2] + mat[3] === 15 ||
mat[1] + mat[5] + mat[9] === 15 ||
mat[1] + mat[4] + mat[7] === 15 ||
mat[7] + mat[8] + mat[9] === 15 ||
mat[3] + mat[5] + mat[7] === 15 ||
mat[3] + mat[6] + mat[9] === 15 ||
mat[4] + mat[5] + mat[6] === 15 ||
mat[2] + mat[5] + mat[8] === 15) {
return 0; // human
}
else if (mat[1] + mat[2] + mat[3] === 3 ||
mat[1] + mat[5] + mat[9] === 3 ||
mat[1] + mat[4] + mat[7] === 3 ||
mat[7] + mat[8] + mat[9] === 3 ||
mat[3] + mat[5] + mat[7] === 3 ||
mat[3] + mat[6] + mat[9] === 3 ||
mat[4] + mat[5] + mat[6] === 3 ||
mat[2] + mat[5] + mat[8] === 3) {
return 1; // for computer
}
else if (counter !== 9) { // not finished
return 3;
}
else {
return 2; // it is a draw
}
}
</script>
</body>
</html>
そしてcssスタイルシート
.container{
margin: 50px;
border: 3px solid #398439;
}
.row>.col-md-4{
text-align: center;
margin: 20px;
padding: 10px;
border: 2px solid #761c19;
height: 80px;
width: 80px;
}
.foot{
border: 3px solid #398439;
}
img{
width: 48px;
height: 48px;
}
.row{
width: 400px;
border: 3px solid #398439;
margin: 10px 30% 20px 30%;
}
あなたはあなたの問題を記述することはできますか？クリックトリガはいつですか？ボックスをクリックするとトリガしますか？ –