|
-
Aug 11th, 2017, 03:05 PM
#1
[HTML5, CSS3, JavaScript] Tic-Tac-Toe
I've decided to make a simple web-based tic-tac-toe game. The AI is incredibly simple, it just gets a random available ID.
Code:
<!DOCTPYE html>
<html>
<head>
<style>
label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
background: #fff;
border: 1px solid #888;
border-radius: 20px;
margin: 0px;
padding: 0px;
height: 140px;
width: 140px;
}
/* default and unchecked */
label input[type="checkbox"], label input[type="checkbox"] ~ svg {
display: none;
}
/* hover and checked */
label:hover input[type="checkbox"]:not([disabled]) + svg.hoverX,
label input[type="checkbox"]:disabled:not(:indeterminate) ~ svg.checkedX,
label input[type="checkbox"]:indeterminate ~ svg.checkedO {
display: inline-block;
}
</style>
<script>
// store all of the input id's in a row/column format
var ids = ['00', '01', '02', '10', '11', '12', '20', '21', '22'];
window.onload=function() {
// bind the onchange event for each id
for (i = 0; i < ids.length; i++) {
document.getElementById(ids[i]).onchange=checkbox_change;
}
}
function checkbox_change() {
// disable the checkbox
this.disabled = true;
// remove the id from the array
ids.splice(ids.indexOf(this.id), 1)
// check for player winning
if (isWinner()) {
alert('You won!');
} else {
// ai portion (just select a random available id)
var id = ids[Math.floor(Math.random()*ids.length)];
// disable the checkbox
var cb = document.getElementById(id);
cb.disabled = true;
cb.checked = true;
cb.indeterminate = true;
// check for a cpu win
if (isWinner()) {
alert('The CPU won.');
}
}
}
function isWinner() {
var row0column0 = document.getElementById('00');
var row0column1 = document.getElementById('01');
var row0column2 = document.getElementById('02');
var row1column0 = document.getElementById('10');
var row1column1 = document.getElementById('11');
var row1column2 = document.getElementById('12');
var row2column0 = document.getElementById('20');
var row2column1 = document.getElementById('21');
var row2column2 = document.getElementById('22');
var horizontalPlayer = (row0column0.disabled && !(row0column0.indeterminate) && row0column1.disabled && !(row0column1.indeterminate) && row0column2.disabled && !(row0column2.indeterminate)) || (row1column0.disabled && !(row1column0.indeterminate) && row1column1.disabled && !(row1column1.indeterminate) && row1column2.disabled && !(row1column2.indeterminate)) || (row2column0.disabled && !(row2column0.indeterminate) && row2column1.disabled && !(row2column1.indeterminate) && row2column2.disabled && !(row2column2.indeterminate));
var verticalPlayer = (row0column0.disabled && !(row0column0.indeterminate) && row1column0.disabled && !(row1column0.indeterminate) && row2column0.disabled && !(row2column0.indeterminate)) || (row0column1.disabled && !(row0column1.indeterminate) && row1column1.disabled && !(row1column1.indeterminate) && row2column1.disabled && !(row2column1.indeterminate)) || (row0column2.disabled && !(row0column2.indeterminate) && row1column2.disabled && !(row1column2.indeterminate) && row2column2.disabled && !(!row2column2.indeterminate));
var diagonalPlayer = (row0column0.disabled && !(row0column0.indeterminate) && row1column1.disabled && !(row1column1.indeterminate) && row2column2.disabled && !(row2column2.indeterminate)) || (row0column2.disabled && !(row0column2.indeterminate) && row1column1.disabled && !(row1column1.indeterminate) && row2column0.disabled && !(row2column0.indeterminate));
var horizontalCpu = (row0column0.disabled && row0column0.indeterminate && row0column1.disabled && row0column1.indeterminate && row0column2.disabled && row0column2.indeterminate) || (row1column0.disabled && row1column0.indeterminate && row1column1.disabled && row1column1.indeterminate && row1column2.disabled && row1column2.indeterminate) || (row2column0.disabled && row2column0.indeterminate && row2column1.disabled && row2column1.indeterminate && row2column2.disabled && row2column2.indeterminate);
var verticalCpu = (row0column0.disabled && row0column0.indeterminate && row1column0.disabled && row1column0.indeterminate && row2column0.disabled && row2column0.indeterminate) || (row0column1.disabled && row0column1.indeterminate && row1column1.disabled && row1column1.indeterminate && row2column1.disabled && row2column1.indeterminate) || (row0column2.disabled && row0column2.indeterminate && row1column2.disabled && row1column2.indeterminate && row2column2.disabled && !row2column2.indeterminate);
var diagonalCpu = (row0column0.disabled && row0column0.indeterminate && row1column1.disabled && row1column1.indeterminate && row2column2.disabled && row2column2.indeterminate) || (row0column2.disabled && row0column2.indeterminate && row1column1.disabled && row1column1.indeterminate && row2column0.disabled && row2column0.indeterminate);
return (horizontalPlayer || verticalPlayer || diagonalPlayer || horizontalCpu || verticalCpu || diagonalCpu);
}
</script>
<title>Tic-Tac-Toe</title>
</head>
<body>
<section>
<label>
<input id="00" type="checkbox" />
<!-- hover -->
<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
</svg>
<!-- checked -->
<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
</svg>
<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
</svg>
</label>
<label>
<input id="01" type="checkbox" />
<!-- hover -->
<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
</svg>
<!-- checked -->
<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
</svg>
<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
</svg>
</label>
<label>
<input id="02" type="checkbox" />
<!-- hover -->
<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
</svg>
<!-- checked -->
<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
</svg>
<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
</svg>
</label>
</section>
<section>
<label>
<input id="10" type="checkbox" />
<!-- hover -->
<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
</svg>
<!-- checked -->
<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
</svg>
<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
</svg>
</label>
<label>
<input id="11" type="checkbox" />
<!-- hover -->
<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
</svg>
<!-- checked -->
<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
</svg>
<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
</svg>
</label>
<label>
<input id="12" type="checkbox" />
<!-- hover -->
<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
</svg>
<!-- checked -->
<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
</svg>
<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
</svg>
</label>
</section>
<section>
<label>
<input id="20" type="checkbox" />
<!-- hover -->
<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
</svg>
<!-- checked -->
<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
</svg>
<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
</svg>
</label>
<label>
<input id="21" type="checkbox" />
<!-- hover -->
<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
</svg>
<!-- checked -->
<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
</svg>
<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
</svg>
</label>
<label>
<input id="22" type="checkbox" />
<!-- hover -->
<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
</svg>
<!-- checked -->
<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
</svg>
<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
</svg>
</label>
</section>
</body>
</html>
Fiddle: https://codepen.io/anon/pen/MvveYN
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote