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.
230 lines
4.1 KiB
230 lines
4.1 KiB
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Lores: Game Of Life - Ondrovo.com</title>
|
|
<script src="jquery-1.10.1.min.js"></script>
|
|
<script src="jquery-migrate-1.2.1.min.js"></script>
|
|
<script src="lores.js"></script>
|
|
|
|
<style>
|
|
html,body{margin: 0; padding: 0; background: #000;}
|
|
|
|
#display {
|
|
margin: 20px auto;
|
|
width: 1020px;
|
|
height: 700px;
|
|
box-shadow: 0px 0px 5px 4px cyan;
|
|
position: relative;
|
|
}
|
|
|
|
#legend {
|
|
margin: 20px auto;
|
|
width: 1020px;
|
|
color: cyan;
|
|
font-family: monospace;
|
|
}
|
|
|
|
#legend a {
|
|
color: cyan;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
|
|
var disp;
|
|
var keys;
|
|
|
|
var anim;
|
|
|
|
var abortNextClick = false;
|
|
|
|
var dispmap;
|
|
|
|
var ROWS = 70;
|
|
var COLS = 102;
|
|
|
|
var FPS = 10;
|
|
|
|
$(document).ready(function(){
|
|
buildDisplay();
|
|
});
|
|
|
|
|
|
function buildDisplay() {
|
|
|
|
Lores.buildCheckerBackground('#display', COLS, ROWS, "#000", "#111");
|
|
|
|
disp = new LoresDisplay(
|
|
$('#display'),
|
|
{
|
|
cols: COLS,
|
|
rows: ROWS,
|
|
colors: {
|
|
0: "#000",
|
|
1: "#fff",
|
|
},
|
|
bg: -1,
|
|
}
|
|
);
|
|
|
|
dispmap = disp.getMap(0); // fill with zeros
|
|
|
|
disp.addColorRule(0, -1); // draw 0 as transparency
|
|
|
|
keys = new LoresKeyboard();
|
|
|
|
keys.setDownHandler( [LKey.ESC, LKey.X], function() {
|
|
dispmap.erase(true);
|
|
anim.pause();
|
|
});
|
|
|
|
|
|
keys.setDownHandler( [LKey.SPACE, LKey.R], function() {
|
|
anim.toggle();
|
|
});
|
|
|
|
|
|
keys.setDownHandler( [LKey.SPACE, LKey.R], function() {
|
|
anim.toggle();
|
|
});
|
|
|
|
|
|
keys.setDownHandler( [LKey.ENTER, LKey.S], function() {
|
|
lifeStep();
|
|
});
|
|
|
|
|
|
keys.setDownHandler( LKey.NUMBERS, function(which) {
|
|
switch(which) {
|
|
case LKey.NUM_1: anim.setFps(1); break;
|
|
case LKey.NUM_2: anim.setFps(2); break;
|
|
case LKey.NUM_3: anim.setFps(4); break;
|
|
case LKey.NUM_4: anim.setFps(6); break;
|
|
case LKey.NUM_5: anim.setFps(8); break;
|
|
case LKey.NUM_6: anim.setFps(12); break;
|
|
case LKey.NUM_7: anim.setFps(16); break;
|
|
case LKey.NUM_8: anim.setFps(24); break;
|
|
case LKey.NUM_9: anim.setFps(32); break;
|
|
}
|
|
});
|
|
|
|
disp.setMoveHandler(function(to, from, display) {
|
|
if(!display.isMouseDown()) return;
|
|
if(from.outside || to.outside) return;
|
|
|
|
var color = 1;
|
|
|
|
if(keys.isDown(46)) color = 0;
|
|
|
|
dispmap.setPixel(from.x, from.y, color);
|
|
dispmap.setPixel(to.x, to.y, color);
|
|
|
|
abortNextClick = true;
|
|
});
|
|
|
|
disp.setClickHandler(function(pos, display) {
|
|
|
|
if(abortNextClick) {
|
|
abortNextClick = false;
|
|
return;
|
|
}
|
|
|
|
var p = dispmap.getPixel(pos.x,pos.y);
|
|
p = p & 1;
|
|
p = 1 - p;
|
|
|
|
dispmap.setPixel(pos.x, pos.y, p);
|
|
});
|
|
|
|
|
|
anim = new LoresAnimator({
|
|
frame: lifeStep,
|
|
fps: FPS,
|
|
});
|
|
|
|
anim.start();
|
|
anim.pause();
|
|
}
|
|
|
|
function lifeStep() {
|
|
|
|
var w = dispmap.getWidth();
|
|
var h = dispmap.getHeight();
|
|
|
|
dispmap.autoFlush(false);
|
|
|
|
dispmap.walk(function(x,y,self) {
|
|
var neighb = 0;
|
|
|
|
// go through neighbours
|
|
for(var dx = -1; dx <= 1; dx++) {
|
|
for(var dy = -1; dy <= 1; dy++) {
|
|
|
|
if(dx == 0 && dy == 0) continue; // skip itself
|
|
|
|
var xx = x+dx;
|
|
var yy = y+dy;
|
|
|
|
// wrap
|
|
if(xx==-1) {
|
|
xx = w-1;
|
|
} else if(xx==w) {
|
|
xx = 0;
|
|
}
|
|
|
|
if(yy==-1) {
|
|
yy=h-1;
|
|
} else if(yy==h) {
|
|
yy=0;
|
|
}
|
|
|
|
if( (self.map[yy][xx] & 0xF) != 0 ) neighb++;
|
|
}
|
|
}
|
|
|
|
var cc = self.map[y][x];
|
|
|
|
var on = (cc & 0x0F) != 0;
|
|
|
|
if(on) {
|
|
if(neighb > 3 || neighb < 2) {
|
|
dispmap.setPixel(x, y, cc & 0x0F); //die
|
|
} else {
|
|
dispmap.setPixel(x, y, cc | 0x10); //live
|
|
}
|
|
}
|
|
|
|
if(!on && (neighb == 3)) {
|
|
dispmap.setPixel(x, y, cc | 0x10); //live
|
|
}
|
|
});
|
|
|
|
dispmap.autoFlush(true);
|
|
|
|
// convert numbers to 0's and 1's, flush
|
|
dispmap.walk(function(x,y,self) {
|
|
var on = ( (self.map[y][x] & 0xF0) != 0 );
|
|
dispmap.setPixel( x, y, on ? 1 : 0 );
|
|
});
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="display" class="display-wrap">
|
|
</div>
|
|
|
|
<div id="legend">
|
|
Erase: ESC or X | Run: SPACE or R | Step: ENTER or S | Speed: keys 1-9 | Draw cells with mouse. Hold DELETE to erase cells. | <a href="/">→ Ondrovo.com</a>
|
|
</div>
|
|
|
|
<body>
|
|
|
|
</html> |