65 lines
1.4 KiB
HTML
65 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>p5.js example</title>
|
|
<style>
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.column {
|
|
float: left;
|
|
}
|
|
|
|
/* Clear floats after the columns */
|
|
.row:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
</style>
|
|
<script>
|
|
function resetBoard(){
|
|
gameBoard = [
|
|
['', '', ''],
|
|
['', '', ''],
|
|
['', '', '']
|
|
];
|
|
|
|
gameOver = false;
|
|
currentPlayer = 0;
|
|
fill(220);
|
|
rect(0,0,width,height);
|
|
document.getElementById("statusLabel").innerHTML = "";
|
|
redraw();
|
|
}
|
|
|
|
function setPruning(){
|
|
usePruning = document.getElementById("usePruning").checked;
|
|
print(usePruning);
|
|
}
|
|
|
|
function update(){
|
|
humanFirst = document.getElementById("humanFirst").checked;
|
|
}
|
|
</script>
|
|
<script src="p5.min.js"></script>
|
|
<script src="sketch.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="sketch-holder" class="column"></div>
|
|
<div class="column">
|
|
<label id="statusLabel"></label></br>
|
|
<input type="checkbox" id="usePruning" onclick="setPruning()" unchecked></input><label for="usePruning">Use Pruning Alogrithm</label>
|
|
</br><input type="checkbox" id="humanFirst" onclick="update()" unchecked></input><label for="humanFirst">Human makes the first move</label>
|
|
</br><button id="resetButton" onclick="resetBoard()">Reset Board</button>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|