You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.4 KiB
52 lines
1.4 KiB
12 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Conway's Game of Life</title>
|
||
|
|
<link type="text/css" rel="stylesheet" href="/static/normalize.css" />
|
||
|
|
<script type="text/javascript" src="/static/jquery.min.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
curState = {};
|
||
|
|
curImg = "";
|
||
|
|
|
||
|
|
function populateInitialState() {
|
||
|
|
$.getJSON('/state', {}, onPopulateResponse);
|
||
|
|
}
|
||
|
|
|
||
|
|
function goToNextState(state) {
|
||
|
|
$.post('/state', JSON.stringify({s: state}, null, 2), onPopulateResponse, 'json');
|
||
|
|
}
|
||
|
|
|
||
|
|
function playGame() {
|
||
|
|
goToNextState(curState);
|
||
|
|
setTimeout(playGame, 500);
|
||
|
|
}
|
||
|
|
|
||
|
|
function onPopulateResponse(data, textStatus, jqXHR) {
|
||
|
|
$.extend(curState, data.s);
|
||
|
|
curImg = data.i;
|
||
|
|
var $stateImg = $('#state_img');
|
||
|
|
if ($stateImg.length < 1) {
|
||
|
|
$stateImg = $('<img id="state_img" />').appendTo($('#state_container'));
|
||
|
|
}
|
||
|
|
$stateImg.attr('src', 'data:image/png;base64,' + encodeURI(data.i));
|
||
|
|
}
|
||
|
|
|
||
|
|
$(function() {
|
||
|
|
populateInitialState();
|
||
|
|
$('#step').click(function() { goToNextState(curState); });
|
||
|
|
$('#play').click(playGame);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Conway's Game of Life</h1>
|
||
|
|
<div id="controls">
|
||
|
|
<button id="step">Step</button>
|
||
|
|
<button id="play">Play</button>
|
||
|
|
</div>
|
||
|
|
<hr />
|
||
|
|
<div id="state_container">
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|