Моя программа здесь - простая игра в крестики-нолики, и мои победители не отображаются должным образом, единственными 4 правильными являются две диагонали, а строчные выигрывают и колонка выигрывает. HTML / Javascript это не проблема, это просто PHP.
<?php
//Players
$X = "Dalton";
$O = "Joe";
$winner = false;
//game board positoins
$r1c1 = !empty($_POST['r1c1'] ) ? $_POST['r1c1'] : '';
$r1c2 = !empty($_POST['r1c2'] ) ? $_POST['r1c2'] : '';
$r1c3 = !empty($_POST['r1c3'] ) ? $_POST['r1c3'] : '';
$r2c1 = !empty($_POST['r2c1'] ) ? $_POST['r2c1'] : '';
$r2c2 = !empty($_POST['r2c2'] ) ? $_POST['r2c2'] : '';
$r2c3 = !empty($_POST['r2c3'] ) ? $_POST['r2c3'] : '';
$r3c1 = !empty($_POST['r3c1'] ) ? $_POST['r3c1'] : '';
$r3c2 = !empty($_POST['r3c2'] ) ? $_POST['r3c2'] : '';
$r3c3 = !empty($_POST['r3c3'] ) ? $_POST['r3c3'] : '';
if($r1c1 == $r1c2 && $r1c2 == $r1c3 ) {
$winner = $r1c1;
} elseif($r2c1 == $r2c2 && $r2c2 == $r2c3 ) {
$winner = $r2c1;
} elseif($r3c1 == $r3c2 && $r3c2 == $r3c3 ) {
$winner = $r3c1;
} elseif($r1c1 == $r2c1 && $r2c1 == $r3c1 ) {
$winner = $r1c1;
} elseif($r1c2 == $r2c2 && $r2c2 == $r3c2 ) {
$winner = $r1c2;
} elseif($r1c3 == $r2c3 && $r2c3 == $r3c3 ) {
$winner = $r1c3;
} elseif($r1c1 == $r2c2 && $r2c2 == $r3c3 ) {
$winner = $r1c1;
} elseif($r1c3 == $r2c2 && $r2c2 == $r3c1 ) {
$winner = $r1c3;
} else {
$winner = 'Draw';
}
?>
<html>
<head>
<title>Tic-Tac-Toe</title>
<!--
The Javascript code below requires access to the internet to run. If you are
running this page on a computer with no Internet access, it will cause errors.
You may delete these lines or modify them if you wish.
The 1st block in the code below is helping you by not allowing any character
except an uppercase 'X' or uppercase 'O'. This is unnessisary, but makes it easier
for you to process on the PHP side.
The 2nd block of code is helping you by making any field that already has has
'X' or 'O' readonly when the page loads. Extra points will be giving to any student
how can replicate this part of the Javascript using only PHP. Simply delete the lines
below if you wish to attempt.
-->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
// This block of code prevents you from entering anything but X or O
$('input').bind('keyup',function() {
if( $(this).hasClass('button') == false ){
this.value = this.value.toUpperCase();
if(this.value != 'X' && this.value != 'O') {
this.value = '';
}
}
});
// This block of code makes the used spots on the grid readonly once used
$('input').each(function(i){
this.value = this.value.toUpperCase();
if(this.value == 'X' || this.value == 'O') {
$(this).addClass('disabled').attr('readonly', true);
//this.readOnly = true;
}
});
});
</script>
<!-- You may do as you please with this CSS code -->
<style>
body * { padding:0; margin:0; }
.disabled { background: #eeeeee; }
.button { display: block; width:180px; margin: 10px 0; }
#gameboard { border-collapse:collapse; padding:0; margin:0; }
#gameboard tr:nth-child(even) {
border-top:2px solid black;
border-bottom:2px solid black;
}
#gameboard tr td:first-child { border-right:2px solid black; }
#gameboard tr td:last-child { border-left:2px solid black; }
#gameboard input {
font-size:50px;
width:60px;
padding:3px;
text-transform:uppercase;
text-align:center;
}
</style>
</head>
<body>
<!--
Notice that the default values for each box below is set to '', and empty string.
You will have to set them using data from the $_POST, if you don't the game will
reset after every move. Something like this for every box maybe ...
if( !empty($_POST['r1c0']) ) {
$r1c0 = $_POST['r1c0'];
} else {
$r1c0 = '';
}
-->
<form action="" name='game' method='POST'>
<table cellpadding='0' cellspacing='0' id='gameboard'>
<tr>
<td><input type='text' maxlength='1' name='r1c1' value='<?php echo $r1c1; ?>' /></td>
<td><input type='text' maxlength='1' name='r1c2' value='<?php echo $r1c2; ?>' /></td>
<td><input type='text' maxlength='1' name='r1c3' value='<?php echo $r1c3; ?>' /></td>
</tr>
<tr>
<td><input type='text' maxlength='1' name='r2c1' value='<?php echo $r2c1; ?>' /></td>
<td><input type='text' maxlength='1' name='r2c2' value='<?php echo $r2c2; ?>' /></td>
<td><input type='text' maxlength='1' name='r2c3' value='<?php echo $r2c3; ?>' /></td>
</tr>
<tr>
<td><input type='text' maxlength='1' name='r3c1' value='<?php echo $r3c1; ?>' /></td>
<td><input type='text' maxlength='1' name='r3c2' value='<?php echo $r3c2; ?>' /></td>
<td><input type='text' maxlength='1' name='r3c3' value='<?php echo $r3c3; ?>' /></td>
</tr>
</table>
<?php if($winner != '') { ?>
<h3><?php echo "The winner is ".$winner; ?></h3>
<?php } else { ?>
<input class='button' type='submit' value='Finish Move' />
<input class='button' type="reset" value="Reset Game" />
<?php } ?>
</form>
</body>
</html>