New stuff & examples
This commit is contained in:
@@ -0,0 +1,4 @@
|
|||||||
|
Lores examples
|
||||||
|
==============
|
||||||
|
|
||||||
|
To get them working, put the jQuery file and latest lores.js in the same folder, and open with browser.
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
/* XPM */
|
||||||
|
static char * floor_xpm[] = {
|
||||||
|
"16 16 7 1",
|
||||||
|
" c #171717",
|
||||||
|
". c #181818",
|
||||||
|
"+ c #191919",
|
||||||
|
"@ c #1A1A1A",
|
||||||
|
"# c #1B1B1B",
|
||||||
|
"$ c #1C1C1C",
|
||||||
|
"% c #1D1D1D",
|
||||||
|
"#$#. @$#@+. .",
|
||||||
|
"$$#+. +$$##$#. .",
|
||||||
|
"@##@++##@+@$@. +",
|
||||||
|
"#@@@@###++#$#++#",
|
||||||
|
"$#@#@#$$##$%$#$$",
|
||||||
|
"@++#@@$$#$%%$$$$",
|
||||||
|
"+.+@@@#$$$$%$$$#",
|
||||||
|
"++@+++@#$$$$$$$$",
|
||||||
|
"@###+.+#$$$#+.@#",
|
||||||
|
"@@#$+.+$$$$@. @",
|
||||||
|
"++##+.+#$$$$#. @",
|
||||||
|
"@##@++@#$$$$@..#",
|
||||||
|
"#$@+@#@#$$$$#@#$",
|
||||||
|
"##@+@##$$$$$$$$$",
|
||||||
|
"@###@##$$$$$$$##",
|
||||||
|
"@###@@#$$$$###@@"};
|
||||||
@@ -0,0 +1,230 @@
|
|||||||
|
<!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>
|
||||||
Vendored
+6
File diff suppressed because one or more lines are too long
Vendored
+2
File diff suppressed because one or more lines are too long
@@ -0,0 +1,261 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Lores: Maze Generator - 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: 640px;
|
||||||
|
height: 640px;
|
||||||
|
box-shadow: 0px 0px 5px 4px cyan;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
margin: 20px auto;
|
||||||
|
width: 1020px;
|
||||||
|
color: cyan;
|
||||||
|
font-family: monospace;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#legend a {
|
||||||
|
color: cyan;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var disp;
|
||||||
|
var keys;
|
||||||
|
|
||||||
|
var anim;
|
||||||
|
|
||||||
|
var abortNextClick = false;
|
||||||
|
|
||||||
|
var dispmap;
|
||||||
|
|
||||||
|
var ROWS = 128;
|
||||||
|
var COLS = 128;
|
||||||
|
|
||||||
|
var FPS = 10;
|
||||||
|
|
||||||
|
var liveCells = [];
|
||||||
|
|
||||||
|
$(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();
|
||||||
|
liveCells.length = 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
keys.setDownHandler( [LKey.SPACE, LKey.R], function() {
|
||||||
|
anim.toggle();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
keys.setDownHandler( [LKey.ENTER, LKey.S], function() {
|
||||||
|
genStep();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
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.setClickHandler(function(pos, display) {
|
||||||
|
|
||||||
|
if(abortNextClick) {
|
||||||
|
abortNextClick = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var p = dispmap.getPixel(pos.x,pos.y);
|
||||||
|
|
||||||
|
if(p==0) {
|
||||||
|
dispmap.setPixel(pos.x, pos.y, 1);
|
||||||
|
liveCells.push([pos.x, pos.y]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
anim = new LoresAnimator({
|
||||||
|
frame: genStep,
|
||||||
|
fps: FPS,
|
||||||
|
});
|
||||||
|
|
||||||
|
anim.start();
|
||||||
|
anim.pause();
|
||||||
|
}
|
||||||
|
|
||||||
|
var sides = [
|
||||||
|
[-1,-1],
|
||||||
|
[0,-1],
|
||||||
|
[1,-1],
|
||||||
|
[-1,0],
|
||||||
|
[1,0],
|
||||||
|
[-1,1],
|
||||||
|
[0,1],
|
||||||
|
[1,1],
|
||||||
|
];
|
||||||
|
|
||||||
|
var sidesDirect = [
|
||||||
|
[-1,-1],
|
||||||
|
[-1,1],
|
||||||
|
[1,-1],
|
||||||
|
[1,1],
|
||||||
|
];
|
||||||
|
|
||||||
|
function genStep() {
|
||||||
|
|
||||||
|
var w = dispmap.getWidth();
|
||||||
|
var h = dispmap.getHeight();
|
||||||
|
|
||||||
|
Lores.shuffleArray(liveCells);
|
||||||
|
|
||||||
|
for(var i = Math.floor( (0.3+Math.random()*0.7)*(liveCells.length-1) ); i>=0; i--) {
|
||||||
|
|
||||||
|
if(Math.floor(Math.random()*10)==0) {
|
||||||
|
//liveCells.splice(i, 1);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
var cell = liveCells[i];
|
||||||
|
|
||||||
|
var x = cell[0];
|
||||||
|
var y = cell[1];
|
||||||
|
|
||||||
|
Lores.shuffleArray(sides);
|
||||||
|
|
||||||
|
for(var q=0; q<sides.length; q++) {
|
||||||
|
var dx = sides[q][0];
|
||||||
|
var dy = sides[q][1];
|
||||||
|
|
||||||
|
if(dx == 0 && dy == 0) continue; // skip itself
|
||||||
|
if(dx != 0 && dy != 0) continue;
|
||||||
|
|
||||||
|
var xx = x+dx;
|
||||||
|
var yy = y+dy;
|
||||||
|
|
||||||
|
if(xx==-1 || xx==w) continue;
|
||||||
|
if(yy==-1 || yy==h) continue;
|
||||||
|
|
||||||
|
if( dispmap.map[yy][xx] == 1 ) continue;
|
||||||
|
|
||||||
|
var badNeighbors = 0;
|
||||||
|
for(var ex = -1; ex <= 1; ex++) {
|
||||||
|
for(var ey = -1; ey <= 1; ey++) {
|
||||||
|
if(ex == 0 && ey == 0) continue; // skip itself
|
||||||
|
|
||||||
|
var exx = x+dx+ex;
|
||||||
|
var eyy = y+dy+ey;
|
||||||
|
|
||||||
|
if(exx==-1 || exx==w) continue;
|
||||||
|
if(eyy==-1 || eyy==h) continue;
|
||||||
|
|
||||||
|
if( dispmap.map[eyy][exx] == 1 ) {
|
||||||
|
//decide if it's a problem
|
||||||
|
|
||||||
|
if(dx == -1 && ex == 1) continue; // ok
|
||||||
|
if(dx == 1 && ex == -1) continue; // ok
|
||||||
|
if(dy == -1 && ey == 1) continue; // ok
|
||||||
|
if(dy == 1 && ey == -1) continue; // ok
|
||||||
|
|
||||||
|
badNeighbors++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(badNeighbors==0) {
|
||||||
|
liveCells.push([xx,yy]);
|
||||||
|
dispmap.setPixel(xx, yy, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
liveCells.splice(i, 1);
|
||||||
|
if(Math.floor(Math.random()*10)==0) {
|
||||||
|
|
||||||
|
var ok = false;
|
||||||
|
for(var r=0; r<sidesDirect.length; r++) {
|
||||||
|
var rx = x+sidesDirect[r][0];
|
||||||
|
var ry = y+sidesDirect[r][1];
|
||||||
|
if(rx==-1 || rx==w) continue;
|
||||||
|
if(ry==-1 || ry==h) continue;
|
||||||
|
|
||||||
|
if( dispmap.map[ry][rx] == 1 ) {
|
||||||
|
ok = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(ok) dispmap.setPixel(x, y, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="legend">
|
||||||
|
Click to set maze start point(s). Press SPACE to run. Adjust speed with number keys.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="display">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="legend">
|
||||||
|
Erase with ESC | Run one step with ENTER | <a href="/">→ Ondrovo.com</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,116 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Lores: Maze Generator - 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: 640px;
|
||||||
|
height: 640px;
|
||||||
|
box-shadow: 0px 0px 5px 4px cyan;
|
||||||
|
position: relative;
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#legend {
|
||||||
|
margin: 20px auto;
|
||||||
|
width: 1020px;
|
||||||
|
color: cyan;
|
||||||
|
font-family: monospace;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#legend a {
|
||||||
|
color: cyan;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var disp;
|
||||||
|
var keys;
|
||||||
|
|
||||||
|
var anim;
|
||||||
|
|
||||||
|
var dispmap;
|
||||||
|
|
||||||
|
var ROWS = 128;
|
||||||
|
var COLS = 128;
|
||||||
|
|
||||||
|
var FPS = 1;
|
||||||
|
|
||||||
|
var liveCells = [];
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
buildDisplay();
|
||||||
|
});
|
||||||
|
|
||||||
|
function buildDisplay() {
|
||||||
|
|
||||||
|
//LoresUtils.buildCheckerBackground('#display', COLS, ROWS, "#000", "#111");
|
||||||
|
|
||||||
|
disp = new LoresDisplay(
|
||||||
|
$('#display'),
|
||||||
|
{
|
||||||
|
cols: COLS,
|
||||||
|
rows: ROWS,
|
||||||
|
colors: {
|
||||||
|
0: "#000",
|
||||||
|
1: "#0f0",
|
||||||
|
},
|
||||||
|
bg: -1,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
disp.fill(1);
|
||||||
|
|
||||||
|
disp.addColorRule(0,-1);
|
||||||
|
|
||||||
|
anim = new LoresAnimator({
|
||||||
|
frame: genStep,
|
||||||
|
fps: FPS,
|
||||||
|
});
|
||||||
|
|
||||||
|
anim.start();
|
||||||
|
}
|
||||||
|
|
||||||
|
var size = COLS/2;
|
||||||
|
|
||||||
|
function genStep() {
|
||||||
|
for(var y=0; y<COLS; y+=size*2) {
|
||||||
|
for(var x=0; x<COLS; x+=size*2) {
|
||||||
|
|
||||||
|
disp.fillRect(x,y,size,size,0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(size);
|
||||||
|
|
||||||
|
if(size == 1) anim.stop();
|
||||||
|
size /= 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="display" class="display-wrap">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="legend">
|
||||||
|
Triangle gen, non-interactive. | <a href="/">→ Ondrovo.com</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,155 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Lores Test</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: #eee;}
|
||||||
|
|
||||||
|
#display {
|
||||||
|
margin: 10px auto;
|
||||||
|
width: 512px;
|
||||||
|
height: 512px;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#display div {
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var disp;
|
||||||
|
var anim;
|
||||||
|
var keys;
|
||||||
|
|
||||||
|
var spriteMap;
|
||||||
|
var spritePool;
|
||||||
|
|
||||||
|
var spriteAlien;
|
||||||
|
var spriteFlower;
|
||||||
|
|
||||||
|
var ROWS = 32;
|
||||||
|
var COLS = 32;
|
||||||
|
var FPS = 40;
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
rebuildDisplay();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function rebuildDisplay() {
|
||||||
|
|
||||||
|
disp = new LoresDisplay(
|
||||||
|
'#scene',
|
||||||
|
{
|
||||||
|
cols: COLS,
|
||||||
|
rows: ROWS,
|
||||||
|
colors: {
|
||||||
|
1: "lime",
|
||||||
|
2: "red",
|
||||||
|
3: "white",
|
||||||
|
4: "yellow",
|
||||||
|
},
|
||||||
|
bg: 'black',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
anim = new LoresAnimator({
|
||||||
|
init: animInit,
|
||||||
|
frame: animFrame,
|
||||||
|
fps: FPS,
|
||||||
|
});
|
||||||
|
|
||||||
|
keys = new LoresKeyboard();
|
||||||
|
|
||||||
|
anim.start();
|
||||||
|
|
||||||
|
|
||||||
|
spriteMap = disp.getMap();
|
||||||
|
spriteMap.autoFlush(false);
|
||||||
|
|
||||||
|
var alienPm = LoresPixmap.fromString(
|
||||||
|
" # # ," +
|
||||||
|
" ##### ," +
|
||||||
|
" # # # ," +
|
||||||
|
" ####### ," +
|
||||||
|
"## # # ##,",
|
||||||
|
|
||||||
|
{'#': 1, 'x': 2}
|
||||||
|
);
|
||||||
|
|
||||||
|
var flowerPm = LoresPixmap.fromString(
|
||||||
|
" oo ," +
|
||||||
|
"oCCo," +
|
||||||
|
"oCCo," +
|
||||||
|
" oo ,",
|
||||||
|
|
||||||
|
{'o': 4, 'C': 3}
|
||||||
|
);
|
||||||
|
|
||||||
|
spritePool = new LoresSpritePool(spriteMap);
|
||||||
|
|
||||||
|
spriteAlien = new LoresSprite({ map: alienPm, x: 10, y: 10, z: 0 });
|
||||||
|
spriteFlower = new LoresSprite({ map: flowerPm, x: 18, y: 15, z: 1 });
|
||||||
|
|
||||||
|
spritePool.addSprite(spriteAlien);
|
||||||
|
spritePool.addSprite(spriteFlower);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function animInit() {
|
||||||
|
|
||||||
|
keys.setDownHandler(function(key) {
|
||||||
|
switch(key) {
|
||||||
|
case LKey.LEFT: spriteAlien.scheduleMove(-1, 0); break;
|
||||||
|
case LKey.RIGHT: spriteAlien.scheduleMove(1, 0); break;
|
||||||
|
case LKey.UP: spriteAlien.scheduleMove(0, -1); break;
|
||||||
|
case LKey.DOWN: spriteAlien.scheduleMove(0, 1); break;
|
||||||
|
case LKey.SPACE:
|
||||||
|
console.log(
|
||||||
|
"-- collision check --\n" +
|
||||||
|
" * RECT: " + (spriteAlien.collidesWith(spriteFlower)?"true":"false") + "\n" +
|
||||||
|
" * PIXELS: " + (spriteAlien.collidesWith(spriteFlower, true)?"true":"false") + "\n"
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function animFrame(time) {
|
||||||
|
spritePool.eraseOnMap(true);
|
||||||
|
spritePool.moveSprites();
|
||||||
|
spritePool.drawOnMap(true);
|
||||||
|
spriteMap.flush();
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="display">
|
||||||
|
<div id="scene"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,128 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<!-- requires the xpm files -->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Lores: Tiles - 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: 256px;
|
||||||
|
height: 256px;
|
||||||
|
box-shadow: 0px 0px 5px 4px cyan;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#legend {
|
||||||
|
margin: 20px auto;
|
||||||
|
width: 1020px;
|
||||||
|
color: cyan;
|
||||||
|
font-family: monospace;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#legend a {
|
||||||
|
color: cyan;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var disp;
|
||||||
|
var keys;
|
||||||
|
|
||||||
|
var anim;
|
||||||
|
|
||||||
|
var dispmap;
|
||||||
|
|
||||||
|
var ROWS = 128;
|
||||||
|
var COLS = 128;
|
||||||
|
|
||||||
|
var TILES_X = 16;
|
||||||
|
var TILES_Y = 16;
|
||||||
|
|
||||||
|
var TILE_SIZE = 16;
|
||||||
|
|
||||||
|
var FPS = 10;
|
||||||
|
|
||||||
|
var liveCells = [];
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
buildDisplay();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function buildDisplay() {
|
||||||
|
|
||||||
|
var BG = -1;
|
||||||
|
|
||||||
|
var helper = Lores.buildHelperCanvas('#display', COLS, ROWS, {}, BG);
|
||||||
|
|
||||||
|
var tiles = new LoresTileset(helper, 16, 16);
|
||||||
|
|
||||||
|
|
||||||
|
disp = new LoresDisplay(
|
||||||
|
$('#display'),
|
||||||
|
{
|
||||||
|
cols: COLS,
|
||||||
|
rows: ROWS,
|
||||||
|
colors: {
|
||||||
|
0: "#000",
|
||||||
|
1: "#fff",
|
||||||
|
},
|
||||||
|
bg: -1,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
var dlMgr = new LoresDownloader();
|
||||||
|
|
||||||
|
dlMgr.getXpm("wall.xpm", function(pm) {
|
||||||
|
tiles.addTile("wall", pm);
|
||||||
|
});
|
||||||
|
|
||||||
|
dlMgr.getXpm("floor.xpm", function(pm) {
|
||||||
|
tiles.addTile("floor", pm);
|
||||||
|
});
|
||||||
|
|
||||||
|
dlMgr.run(function() {
|
||||||
|
|
||||||
|
for(var y=0; y<=7; y++) {
|
||||||
|
for(var x=0; x<=7; x++) {
|
||||||
|
if(x==0||x==7||y==0||y==7) {
|
||||||
|
tiles.renderTile(disp, "wall", x, y);
|
||||||
|
} else {
|
||||||
|
tiles.renderTile(disp, "floor", x, y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="display" class="display-wrap">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="legend">
|
||||||
|
Tiles | <a href="/">→ Ondrovo.com</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
/* XPM */
|
||||||
|
static char * wall_xpm[] = {
|
||||||
|
"16 16 9 1",
|
||||||
|
" c None",
|
||||||
|
". c #60625F",
|
||||||
|
"+ c #757774",
|
||||||
|
"@ c #7D7E7B",
|
||||||
|
"# c #848583",
|
||||||
|
"$ c #898B88",
|
||||||
|
"% c #A5A09F",
|
||||||
|
"& c #AEA9A8",
|
||||||
|
"* c #BDB8B6",
|
||||||
|
"%%%%%&&&****&&&.",
|
||||||
|
"%+@@@@@##$$$$$#.",
|
||||||
|
"%+++@@@@##$$##$.",
|
||||||
|
"&++@@@@@@#$$$#$.",
|
||||||
|
"&@+@+@@@#######.",
|
||||||
|
"&@#@@++@@@#####.",
|
||||||
|
"&###@@+@@@#@###.",
|
||||||
|
".++.............",
|
||||||
|
"***&%%%.%&%%%&&&",
|
||||||
|
"$##++++.%@####@#",
|
||||||
|
"#@@++++.%@####@#",
|
||||||
|
"@@@@@++.%@#$#@@#",
|
||||||
|
"@@@@@@+.%@#$#@@@",
|
||||||
|
"@#@@@@+.%####@+#",
|
||||||
|
"@@@@@##.%@###@+@",
|
||||||
|
"......+........."};
|
||||||
@@ -1,119 +0,0 @@
|
|||||||
// Lores.js - animator module
|
|
||||||
// (c) Ondrej Hruska 2013
|
|
||||||
// www.ondrovo.com
|
|
||||||
|
|
||||||
// MIT license
|
|
||||||
|
|
||||||
|
|
||||||
/* Animation manager */
|
|
||||||
function LoresAnimator(opts) {
|
|
||||||
this.initAnim = opts.init || function(){};
|
|
||||||
this.animFrame = opts.frame || function(){};
|
|
||||||
this.fps = opts.fps || 40;
|
|
||||||
|
|
||||||
this.started = false;
|
|
||||||
this.paused = false;
|
|
||||||
this.halted = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresAnimator.prototype.start = function() {
|
|
||||||
this.initAnim();
|
|
||||||
|
|
||||||
this.started = true;
|
|
||||||
this.paused = false;
|
|
||||||
this.halted = false;
|
|
||||||
|
|
||||||
this._requestFrame();
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresAnimator.prototype.stop = function() {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
this.started = false;
|
|
||||||
this.halted = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresAnimator.prototype.isPaused = function() {
|
|
||||||
return this.started && this.paused && !this.halted;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresAnimator.prototype.isRunning = function() {
|
|
||||||
return this.started && !this.paused && !this.halted;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresAnimator.prototype.toggle = function() {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
if(!this.started || this.halted) {
|
|
||||||
throw "Invalid state for toggle()";
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.paused) {
|
|
||||||
this.resume();
|
|
||||||
} else {
|
|
||||||
this.pause();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresAnimator.prototype.pause = function() {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
if(!this.started || this.halted) {
|
|
||||||
throw "Invalid state for pause()";
|
|
||||||
}
|
|
||||||
|
|
||||||
this.paused = true;
|
|
||||||
this.halted = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresAnimator.prototype.setFps = function(fps) {
|
|
||||||
|
|
||||||
this.fps = fps;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresAnimator.prototype.resume = function() {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
if(!this.started || !this.paused || this.halted) {
|
|
||||||
throw "Invalid state for resume()";
|
|
||||||
}
|
|
||||||
|
|
||||||
this.paused = false;
|
|
||||||
this.halted = false;
|
|
||||||
|
|
||||||
this._requestFrame();
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresAnimator.prototype.step = function(timestamp) {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
if(!this.started) {
|
|
||||||
throw "Invalid state for step()";
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.halted || this.paused) return;
|
|
||||||
|
|
||||||
setTimeout(function() {
|
|
||||||
self._requestFrame();
|
|
||||||
self.animFrame(timestamp);
|
|
||||||
}, 1000 / self.fps);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresAnimator.prototype._requestFrame = function() {
|
|
||||||
|
|
||||||
if(this.halted || this.paused) return;
|
|
||||||
|
|
||||||
var self = this;
|
|
||||||
window.requestAnimationFrame(function(time){self.step(time)});
|
|
||||||
};
|
|
||||||
|
|
||||||
@@ -1,847 +0,0 @@
|
|||||||
// Lores.js - base module
|
|
||||||
// (c) Ondrej Hruska 2013
|
|
||||||
// www.ondrovo.com
|
|
||||||
|
|
||||||
// MIT license
|
|
||||||
|
|
||||||
|
|
||||||
/* Display module with mouse input */
|
|
||||||
function LoresDisplay(element, options) {
|
|
||||||
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
this.wrapper = $(element);
|
|
||||||
options = options || {};
|
|
||||||
options.width = options.width || $(element).width();
|
|
||||||
options.height = options.height || $(element).height();
|
|
||||||
options.cols = options.cols || 16;
|
|
||||||
options.rows = options.rows || 16;
|
|
||||||
options.bg = options.bg || 0;
|
|
||||||
options.fg = options.fg || 1;
|
|
||||||
|
|
||||||
options.colors = new LoresPalette(options.colors) || new LoresPalette();
|
|
||||||
|
|
||||||
options.filter = options.filter || new LoresColorFilter();
|
|
||||||
|
|
||||||
this.colors = options.colors;
|
|
||||||
this.filter = options.filter;
|
|
||||||
|
|
||||||
this.width = options.width;
|
|
||||||
this.height = options.height;
|
|
||||||
|
|
||||||
this.rows = options.rows;
|
|
||||||
this.cols = options.cols;
|
|
||||||
|
|
||||||
this.pixelWidth = (this.width/this.cols);
|
|
||||||
this.pixelHeight = (this.height/this.rows);
|
|
||||||
|
|
||||||
this.bg = options.bg;
|
|
||||||
this.fg = options.fg;
|
|
||||||
|
|
||||||
|
|
||||||
// build a canvas
|
|
||||||
//this.wrapper.empty();
|
|
||||||
|
|
||||||
this.canvas = $('<canvas/>')
|
|
||||||
.css({position: "absolute", left: 0, top: 0})
|
|
||||||
.attr({"width": this.width, "height": this.height})
|
|
||||||
.appendTo(this.wrapper);
|
|
||||||
|
|
||||||
this.context = this.canvas[0].getContext('2d');
|
|
||||||
|
|
||||||
this.erase(true);
|
|
||||||
|
|
||||||
|
|
||||||
// mouse input
|
|
||||||
|
|
||||||
// undefined if none
|
|
||||||
this.moveHandler = options.moveHandler;
|
|
||||||
this.rawMoveHandler = options.rawMoveHandler;
|
|
||||||
|
|
||||||
this.clickHandler = options.clickHandler;
|
|
||||||
this.rawClickHandler = options.rawClickHandler;
|
|
||||||
|
|
||||||
this.mouseDown = false;
|
|
||||||
|
|
||||||
this.lastMousePos = {x:-1,y:-1,outside:true};
|
|
||||||
this.lastMousePosRaw = {x:-1,y:-1,outside:true};
|
|
||||||
|
|
||||||
|
|
||||||
// add click handler
|
|
||||||
$(this.canvas).on('click', function(evt) {
|
|
||||||
var pos = self._getMousePos(self.canvas, evt);
|
|
||||||
|
|
||||||
if(self.rawClickHandler) {
|
|
||||||
var pixel = {
|
|
||||||
x: pos.x,
|
|
||||||
y: pos.y,
|
|
||||||
outside: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
self.rawClickHandler(pixel, self);
|
|
||||||
}
|
|
||||||
|
|
||||||
if(self.clickHandler) {
|
|
||||||
|
|
||||||
var pixel = {
|
|
||||||
x: Math.floor(pos.x / self.pixelWidth),
|
|
||||||
y: Math.floor(pos.y / self.pixelHeight),
|
|
||||||
};
|
|
||||||
|
|
||||||
self.clickHandler(pixel, self);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// add move handler
|
|
||||||
$(window).on('mousemove', function(evt) {
|
|
||||||
var pos = self._getMousePos(self.canvas, evt);
|
|
||||||
|
|
||||||
|
|
||||||
if(self.rawMoveHandler) {
|
|
||||||
var pixel = {
|
|
||||||
x: pos.x,
|
|
||||||
y: pos.y,
|
|
||||||
outside: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
if(pixel.x < 0 || pixel.x >= self.width || pixel.y < 0 || pixel.y >= self.height) {
|
|
||||||
pixel.outside = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
self.rawMoveHandler(pixel, self);
|
|
||||||
self.lastMousePosRaw = pixel;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(self.moveHandler) {
|
|
||||||
var pixel = {
|
|
||||||
x: Math.floor(pos.x / self.pixelWidth),
|
|
||||||
y: Math.floor(pos.y / self.pixelHeight),
|
|
||||||
outside: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
if(pixel.x < 0 || pixel.x >= self.cols || pixel.y < 0 || pixel.y >= self.rows) {
|
|
||||||
pixel.outside = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(self.lastMousePos.x != pixel.x || self.lastMousePos.y != pixel.y) {
|
|
||||||
self.moveHandler(pixel, self.lastMousePos, self);
|
|
||||||
self.lastMousePos = pixel;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
$(window).on('mousedown', function(evt) {
|
|
||||||
self.mouseDown = true;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
$(window).on('mouseup', function(evt) {
|
|
||||||
self.mouseDown = false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.erase = function(fillWithBg) {
|
|
||||||
|
|
||||||
if(fillWithBg) {
|
|
||||||
this.fill(this.bg);
|
|
||||||
} else {
|
|
||||||
this.context.clearRect(0,0,this.width,this.height);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.fill = function(color) {
|
|
||||||
|
|
||||||
color = this.resolveColor(color);
|
|
||||||
|
|
||||||
if(color == -1) {
|
|
||||||
color = this.resolveColor(this.bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
if(color == -1) {
|
|
||||||
this.erase(false);
|
|
||||||
} else {
|
|
||||||
this.context.fillStyle = color;
|
|
||||||
this.context.fillRect(0,0,this.width,this.height);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.getCanvas = function() {
|
|
||||||
return this.canvas;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.getContext = function() {
|
|
||||||
return this.context;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.getPalette = function() {
|
|
||||||
return this.colors;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.setPalette = function(newPalette) {
|
|
||||||
this.colors = newPalette;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.getColorFilter = function() {
|
|
||||||
return this.filter;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.setColorFilter = function(newFilter) {
|
|
||||||
this.filter = newFilter;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.addFilter = function(from, to) {
|
|
||||||
this.filter.addFilter(from, to);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.removeFilter = function(color) {
|
|
||||||
this.filter.removeFilter(color);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.getPixelSize = function() {
|
|
||||||
return {
|
|
||||||
x: this.pixelWidth,
|
|
||||||
w: this.pixelWidth,
|
|
||||||
y: this.pixelHeight,
|
|
||||||
h: this.pixelHeight,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.resolveColor = function(color) {
|
|
||||||
|
|
||||||
if(color === undefined || color === null || color === "") {
|
|
||||||
throw "Null color";
|
|
||||||
} else if(typeof color == "boolean") {
|
|
||||||
color = color ? this.fg : this.bg;
|
|
||||||
} else if(color == "transparent") {
|
|
||||||
color = -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
color = this.filter.process(color);
|
|
||||||
|
|
||||||
|
|
||||||
if(typeof color == "number") {
|
|
||||||
|
|
||||||
if(color == -1) return -1; // alpha = bg
|
|
||||||
|
|
||||||
var color = this.getColor(color);
|
|
||||||
|
|
||||||
if(color === undefined) {
|
|
||||||
throw "Undefined color id '" + JSON.stringify(color) + "'";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return color;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
// alias
|
|
||||||
LoresDisplay.prototype.setColor = function(index, color) {
|
|
||||||
this.colors.add(index, color);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.addColor = function(index, color) {
|
|
||||||
this.colors.add(index, color);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.removeColor = function(index) {
|
|
||||||
this.colors.remove(index, color);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.hasColor = function(index) {
|
|
||||||
return index == -1 || this.colors.has(index);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.getColor = function(index) {
|
|
||||||
return this.colors.get(index);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.setBg = function(color) {
|
|
||||||
this.bg = color;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.erasePixel = function(x, y) {
|
|
||||||
this.setPixel(x, y, -1);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.setPixel = function(x, y, color) {
|
|
||||||
|
|
||||||
color = this.resolveColor(color);
|
|
||||||
|
|
||||||
if(color == -1) {
|
|
||||||
color = this.resolveColor(this.bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
x = Math.floor(x);
|
|
||||||
y = Math.floor(y);
|
|
||||||
|
|
||||||
var x1 = x * this.pixelWidth;
|
|
||||||
var y1 = y * this.pixelHeight;
|
|
||||||
|
|
||||||
if(color == -1) {
|
|
||||||
this.context.clearRect(x1, y1, this.pixelWidth, this.pixelHeight);
|
|
||||||
} else {
|
|
||||||
this.context.fillStyle = color;
|
|
||||||
this.context.fillRect(x1, y1, this.pixelWidth, this.pixelHeight);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/* moveHandler(display, pos, lastPos) */
|
|
||||||
LoresDisplay.prototype.setMoveHandler = function(handler) {
|
|
||||||
this.moveHandler = handler;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/* rawMoveHandler(display, pos, lastPos) */
|
|
||||||
LoresDisplay.prototype.setRawMoveHandler = function(handler) {
|
|
||||||
this.rawMoveHandler = handler;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/* clickHandler(display, pos) */
|
|
||||||
LoresDisplay.prototype.setClickHandler = function(handler) {
|
|
||||||
this.clickHandler = handler;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.isMouseDown = function() {
|
|
||||||
return this.mouseDown;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.resetMouse = function() {
|
|
||||||
this.mouseDown = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype._getMousePos = function(canvas, event) {
|
|
||||||
var rect = canvas[0].getBoundingClientRect();
|
|
||||||
return {
|
|
||||||
x: event.clientX - rect.left,
|
|
||||||
y: event.clientY - rect.top
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.getWidth = function() {
|
|
||||||
return this.cols;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.getHeight = function() {
|
|
||||||
return this.rows;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.drawMap = function(map, x, y) {
|
|
||||||
|
|
||||||
for(var yy = 0; yy<map.getHeight(); yy++) {
|
|
||||||
if(y+yy >= this.rows) break;
|
|
||||||
if(y+yy < 0) continue;
|
|
||||||
|
|
||||||
for(var xx = 0; xx<map.getWidth(); xx++) {
|
|
||||||
|
|
||||||
var color = map.getPixel(xx,yy);
|
|
||||||
|
|
||||||
if(x+xx >= this.cols) break;
|
|
||||||
if(x+xx < 0) continue;
|
|
||||||
|
|
||||||
this.setPixel(x+xx, y+yy, color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresDisplay.prototype.getMap = function() {
|
|
||||||
var map = new LoresPixmap(this.cols, this.rows, this.bg);
|
|
||||||
map.connectedDisplay = this;
|
|
||||||
return map;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Color table */
|
|
||||||
function LoresPalette(values) {
|
|
||||||
this.table = {
|
|
||||||
0: "#000000",
|
|
||||||
1: "#00ff00",
|
|
||||||
};
|
|
||||||
|
|
||||||
this.table = $.extend( this.table, values );
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
// alias
|
|
||||||
LoresPalette.prototype.set = function(index, color) {
|
|
||||||
this.add(index, color);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPalette.prototype.add = function(index, color) {
|
|
||||||
this.table[index] = color;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPalette.prototype.remove = function(index) {
|
|
||||||
delete this.table[index];
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPalette.prototype.has = function(index) {
|
|
||||||
return this.table[index] !== undefined;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPalette.prototype.get = function(index) {
|
|
||||||
return this.table[index];
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Pixel map */
|
|
||||||
function LoresPixmap(width, height, fill) {
|
|
||||||
|
|
||||||
this.doAutoFlush = true;
|
|
||||||
this.connectedDisplay = null;
|
|
||||||
if(fill == undefined) fill = -1;
|
|
||||||
this.bg = fill;
|
|
||||||
|
|
||||||
if(width === undefined || height === undefined) return;
|
|
||||||
|
|
||||||
this.width = width;
|
|
||||||
this.height = height;
|
|
||||||
|
|
||||||
this.map = [];
|
|
||||||
|
|
||||||
for(var y=0; y<height; y++) {
|
|
||||||
var row = [];
|
|
||||||
for(var x=0; x<width; x++) {
|
|
||||||
row.push(fill);
|
|
||||||
}
|
|
||||||
this.map.push(row);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.fromArray = function(array){
|
|
||||||
var pm = new LoresPixmap();
|
|
||||||
pm.setArray(array);
|
|
||||||
return pm;
|
|
||||||
};
|
|
||||||
|
|
||||||
LoresPixmap.fromString = function(string, colors, width, height){
|
|
||||||
var pm = new LoresPixmap();
|
|
||||||
|
|
||||||
var array = [];
|
|
||||||
|
|
||||||
if(height == undefined) {
|
|
||||||
height = Math.floor(string.length / width);
|
|
||||||
}
|
|
||||||
|
|
||||||
outer:
|
|
||||||
for(var y=0; y<height; y++) {
|
|
||||||
var row = [];
|
|
||||||
for(var x=0; x<width; x++) {
|
|
||||||
|
|
||||||
var char = string.charAt(y*width+x);
|
|
||||||
|
|
||||||
if(char == undefined) break outer;
|
|
||||||
|
|
||||||
var color = colors[char];
|
|
||||||
|
|
||||||
if(color === undefined) color = -1;
|
|
||||||
|
|
||||||
row.push(color);
|
|
||||||
}
|
|
||||||
array.push(row);
|
|
||||||
}
|
|
||||||
|
|
||||||
pm.setArray(array);
|
|
||||||
return pm;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.prototype.setBg = function(color) {
|
|
||||||
this.bg = color;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.prototype.erase = function() {
|
|
||||||
this.fill(this.bg);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.prototype.fill = function(color) {
|
|
||||||
for(var y=0; y<this.height; y++) {
|
|
||||||
for(var x=0; x<this.width; x++) {
|
|
||||||
this.setPixel(x,y,color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.prototype.setPixel = function(x,y,color) {
|
|
||||||
|
|
||||||
if(x >= this.width || x < 0 || y >= this.height || y < 0 ) return;
|
|
||||||
|
|
||||||
if(this.map[y][x] == color) return; // no need to overwrite it
|
|
||||||
|
|
||||||
this.map[y][x] = color;
|
|
||||||
|
|
||||||
if(color != -1 && this.doAutoFlush && this.connectedDisplay !== null) {
|
|
||||||
this.connectedDisplay.setPixel(x,y,color);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.prototype.getPixel = function(x,y) {
|
|
||||||
if(x >= this.width || x < 0 || y >= this.height || y < 0 ) return -1;
|
|
||||||
|
|
||||||
return this.map[y][x];
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.prototype.getArray = function() {
|
|
||||||
return this.map;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.prototype.setArray = function(dataArray) {
|
|
||||||
this.width = dataArray[0].length;
|
|
||||||
this.height = dataArray.length;
|
|
||||||
|
|
||||||
this.map = dataArray;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.prototype.getWidth = function() {
|
|
||||||
return this.width;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.prototype.getHeight = function() {
|
|
||||||
return this.height;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.prototype.drawMap = function(otherMap, x, y) {
|
|
||||||
|
|
||||||
for(var yy = 0; yy < otherMap.getHeight(); yy++) {
|
|
||||||
for(var xx = 0; xx < otherMap.getWidth(); xx++) {
|
|
||||||
|
|
||||||
var color = otherMap.getPixel(xx,yy);
|
|
||||||
if(color == -1) continue; // transparent = no draw
|
|
||||||
this.setPixel(x+xx, y+yy, color);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.prototype.eraseMap = function(otherMap, x, y) {
|
|
||||||
|
|
||||||
for(var yy = 0; yy < otherMap.getHeight(); yy++) {
|
|
||||||
for(var xx = 0; xx < otherMap.getWidth(); xx++) {
|
|
||||||
|
|
||||||
var color = otherMap.getPixel(xx,yy);
|
|
||||||
if(color == -1) continue; // transparent = no draw
|
|
||||||
this.setPixel(x+xx, y+yy, this.bg);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.prototype.eraseRect = function(x, y, w, h) {
|
|
||||||
|
|
||||||
for(var yy = 0; yy < h; yy++) {
|
|
||||||
for(var xx = 0; xx < w; xx++) {
|
|
||||||
|
|
||||||
this.setPixel(x+xx, y+yy, this.bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.prototype.fillRect = function(x, y, w, h, color) {
|
|
||||||
|
|
||||||
for(var yy = 0; yy < h; yy++) {
|
|
||||||
for(var xx = 0; xx < w; xx++) {
|
|
||||||
|
|
||||||
this.setPixel(x+xx, y+yy, color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.prototype.flush = function() {
|
|
||||||
if(this.connectedDisplay == null) {
|
|
||||||
throw "Cannot flush map without a connected display.";
|
|
||||||
}
|
|
||||||
|
|
||||||
this.connectedDisplay.drawMap(this, 0, 0);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresPixmap.prototype.autoFlush = function(state) {
|
|
||||||
this.doAutoFlush = state;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Color filter
|
|
||||||
*
|
|
||||||
* Used to translate color codes when
|
|
||||||
* writing from a pixmap to display
|
|
||||||
*/
|
|
||||||
function LoresColorFilter(translations) {
|
|
||||||
this.table = translations || {};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
LoresColorFilter.prototype.process = function(color) {
|
|
||||||
color = (this.table[color] !== undefined) ? this.table[color] : color;
|
|
||||||
return color;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresColorFilter.prototype.addFilter = function(from, to) {
|
|
||||||
this.table[from] = to;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresColorFilter.prototype.removeFilter = function(color) {
|
|
||||||
delete this.table[from];
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Keyboard input handler */
|
|
||||||
function LoresKeyboard() {
|
|
||||||
|
|
||||||
this.states = {};
|
|
||||||
|
|
||||||
this.pressHandlers = {};
|
|
||||||
this.downHandlers = {};
|
|
||||||
this.upHandlers = {};
|
|
||||||
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
$(window).on("keydown", function(event) {
|
|
||||||
self.states[event.which] = true;
|
|
||||||
self.downHandlers[event.which] && self.downHandlers[event.which](event.which);
|
|
||||||
});
|
|
||||||
|
|
||||||
$(window).on("keyup", function(event) {
|
|
||||||
self.states[event.which] = false;
|
|
||||||
self.upHandlers[event.which] && self.upHandlers[event.which](event.which);
|
|
||||||
});
|
|
||||||
|
|
||||||
$(window).on("keypress", function(event) {
|
|
||||||
self.pressHandlers[event.which] && self.pressHandlers[event.which](event.which);
|
|
||||||
});
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
LoresKeyboard.DELETE = 46;
|
|
||||||
LoresKeyboard.BACKSPACE = 8;
|
|
||||||
LoresKeyboard.SPACE = 32;
|
|
||||||
LoresKeyboard.ENTER = 13;
|
|
||||||
LoresKeyboard.ESC = 27;
|
|
||||||
|
|
||||||
LoresKeyboard.LEFT = 37;
|
|
||||||
LoresKeyboard.RIGHT = 39;
|
|
||||||
LoresKeyboard.UP = 38;
|
|
||||||
LoresKeyboard.DOWN = 40;
|
|
||||||
|
|
||||||
LoresKeyboard.CTRL = 17;
|
|
||||||
LoresKeyboard.SHIFT = 16;
|
|
||||||
LoresKeyboard.META = 91;
|
|
||||||
LoresKeyboard.INSERT = 45;
|
|
||||||
LoresKeyboard.PAGEUP = 33;
|
|
||||||
LoresKeyboard.PAGEDOWN = 34;
|
|
||||||
LoresKeyboard.HOME = 36;
|
|
||||||
LoresKeyboard.END = 35;
|
|
||||||
|
|
||||||
LoresKeyboard.A = 65;
|
|
||||||
LoresKeyboard.B = 66;
|
|
||||||
LoresKeyboard.C = 67;
|
|
||||||
LoresKeyboard.D = 68;
|
|
||||||
LoresKeyboard.E = 69;
|
|
||||||
LoresKeyboard.F = 70;
|
|
||||||
LoresKeyboard.G = 71;
|
|
||||||
LoresKeyboard.H = 72;
|
|
||||||
LoresKeyboard.I = 73;
|
|
||||||
LoresKeyboard.J = 74;
|
|
||||||
LoresKeyboard.K = 75;
|
|
||||||
LoresKeyboard.L = 76;
|
|
||||||
LoresKeyboard.M = 77;
|
|
||||||
LoresKeyboard.N = 78;
|
|
||||||
LoresKeyboard.O = 79;
|
|
||||||
LoresKeyboard.P = 80;
|
|
||||||
LoresKeyboard.Q = 81;
|
|
||||||
LoresKeyboard.R = 82;
|
|
||||||
LoresKeyboard.S = 83;
|
|
||||||
LoresKeyboard.T = 84;
|
|
||||||
LoresKeyboard.U = 85;
|
|
||||||
LoresKeyboard.V = 86;
|
|
||||||
LoresKeyboard.W = 87;
|
|
||||||
LoresKeyboard.X = 88;
|
|
||||||
LoresKeyboard.Y = 89;
|
|
||||||
LoresKeyboard.Z = 90;
|
|
||||||
|
|
||||||
LoresKeyboard.NUM_0 = 96;
|
|
||||||
LoresKeyboard.NUM_1 = 97;
|
|
||||||
LoresKeyboard.NUM_2 = 98;
|
|
||||||
LoresKeyboard.NUM_3 = 99;
|
|
||||||
LoresKeyboard.NUM_4 = 100;
|
|
||||||
LoresKeyboard.NUM_5 = 101;
|
|
||||||
LoresKeyboard.NUM_6 = 102;
|
|
||||||
LoresKeyboard.NUM_7 = 103;
|
|
||||||
LoresKeyboard.NUM_8 = 104;
|
|
||||||
LoresKeyboard.NUM_9 = 105;
|
|
||||||
|
|
||||||
LoresKeyboard.LETTERS = [65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90];
|
|
||||||
LoresKeyboard.ASDW = [65,83,68,87];
|
|
||||||
LoresKeyboard.ARROWS = [37,38,39,40];
|
|
||||||
LoresKeyboard.NUMBERS = [96,97,98,99,100,101,102,103,104,105];
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
LoresKeyboard.prototype.isDown = function(keycode) {
|
|
||||||
var val = this.states[keycode];
|
|
||||||
if(val == undefined) val = false;
|
|
||||||
return val;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresKeyboard.prototype.resetKeys = function() {
|
|
||||||
this.states = {};
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresKeyboard.prototype.setPressHandler = function(keycode, handler) {
|
|
||||||
|
|
||||||
if(keycode.constructor == Array) {
|
|
||||||
|
|
||||||
for(var i=0; i<keycode.length; i++) {
|
|
||||||
this.pressHandlers[ keycode[i] ] = handler;
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
this.pressHandlers[keycode] = handler;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresKeyboard.prototype.setDownHandler = function(keycode, handler) {
|
|
||||||
|
|
||||||
if(keycode.constructor == Array) {
|
|
||||||
|
|
||||||
for(var i=0; i<keycode.length; i++) {
|
|
||||||
this.downHandlers[ keycode[i] ] = handler;
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
this.downHandlers[keycode] = handler;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresKeyboard.prototype.setUpHandler = function(keycode, handler) {
|
|
||||||
|
|
||||||
if(keycode.constructor == Array) {
|
|
||||||
|
|
||||||
for(var i=0; i<keycode.length; i++) {
|
|
||||||
this.upHandlers[ keycode[i] ] = handler;
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
this.upHandlers[keycode] = handler;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresKeyboard.prototype.removePressHandler = function(keycode) {
|
|
||||||
delete this.pressHandlers[keycode];
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresKeyboard.prototype.removeDownHandler = function(keycode) {
|
|
||||||
delete this.downHandlers[keycode];
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresKeyboard.prototype.removeUpHandler = function(keycode) {
|
|
||||||
delete this.upHandlers[keycode];
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// INCLUDED SHIM FOR requestAnimationFrame
|
|
||||||
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
|
||||||
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
|
|
||||||
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
|
|
||||||
// MIT license
|
|
||||||
(function() {
|
|
||||||
var lastTime = 0;
|
|
||||||
var vendors = ['ms', 'moz', 'webkit', 'o'];
|
|
||||||
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
|
||||||
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
|
|
||||||
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|
|
||||||
|| window[vendors[x]+'CancelRequestAnimationFrame'];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!window.requestAnimationFrame)
|
|
||||||
window.requestAnimationFrame = function(callback, element) {
|
|
||||||
var currTime = new Date().getTime();
|
|
||||||
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
|
||||||
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
|
|
||||||
timeToCall);
|
|
||||||
lastTime = currTime + timeToCall;
|
|
||||||
return id;
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!window.cancelAnimationFrame)
|
|
||||||
window.cancelAnimationFrame = function(id) {
|
|
||||||
clearTimeout(id);
|
|
||||||
};
|
|
||||||
}());
|
|
||||||
@@ -1,199 +0,0 @@
|
|||||||
// Lores.js - sprites module
|
|
||||||
// (c) Ondrej Hruska 2013
|
|
||||||
// www.ondrovo.com
|
|
||||||
|
|
||||||
// MIT license
|
|
||||||
|
|
||||||
|
|
||||||
function LoresSpritePool(map) {
|
|
||||||
this.drawingMap = map || null;
|
|
||||||
this.sprites = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
LoresSpritePool.prototype.setMap = function(map) {
|
|
||||||
this.drawingMap = map;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSpritePool.prototype.addSprite = function(sprite) {
|
|
||||||
if(this.hasSprite(sprite)) return; // no work to do
|
|
||||||
this.sprites.push(sprite);
|
|
||||||
this.sortSprites(); // sort them
|
|
||||||
};
|
|
||||||
|
|
||||||
LoresSpritePool.prototype.hasSprite = function(sprite) {
|
|
||||||
for(var i in this.sprites) {
|
|
||||||
if(this.sprites[i] === sprite) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSpritePool.prototype.removeSprite = function(sprite) {
|
|
||||||
for (var i = this.sprites.length - 1; i >= 0; i--) {
|
|
||||||
if (this.sprites[i] == sprite) this.sprites.splice(i, 1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSpritePool.prototype.getSprites = function() {
|
|
||||||
return this.sprites;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSpritePool.prototype.getColliding = function(sprite, pixelPerfect) {
|
|
||||||
var results = [];
|
|
||||||
for(var i in this.sprites) {
|
|
||||||
var spr = this.sprites[i];
|
|
||||||
if(spr === sprite) continue;
|
|
||||||
if(spr.collidesWith(sprite, pixelPerfect)) {
|
|
||||||
results.push(spr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return results;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSpritePool.prototype.eraseMap = function() {
|
|
||||||
if(this.drawingMap == undefined) throw "LoresSpritePool has no map.";
|
|
||||||
|
|
||||||
this.drawingMap.erase();
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSpritePool.prototype.drawOnMap = function() {
|
|
||||||
if(this.drawingMap == undefined) throw "LoresSpritePool has no map.";
|
|
||||||
|
|
||||||
for(var i in this.sprites) {
|
|
||||||
this.sprites[i].drawOnMap(this.drawingMap);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSpritePool.prototype.eraseOnMap = function(perPixel) {
|
|
||||||
if(this.drawingMap == undefined) throw "LoresSpritePool has no map.";
|
|
||||||
|
|
||||||
for(var i in this.sprites) {
|
|
||||||
this.sprites[i].eraseOnMap(this.drawingMap, perPixel);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSpritePool.prototype.sortSprites = function() {
|
|
||||||
this.sprites.sort(function(a,b) {
|
|
||||||
return (a.z > b.z) ? -1 : ((b.z > a.z) ? 1 : 0);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSpritePool.prototype.moveSprites = function() {
|
|
||||||
for(var i in this.sprites) {
|
|
||||||
this.sprites[i].doMove();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function LoresSprite(opts) {
|
|
||||||
this.map = opts.map;
|
|
||||||
|
|
||||||
this.x = opts.x;
|
|
||||||
this.y = opts.y;
|
|
||||||
|
|
||||||
this.newx = opts.x;
|
|
||||||
this.newy = opts.y;
|
|
||||||
|
|
||||||
this.z = (opts.z === undefined ? 0 : opts.z); // z-index
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
LoresSprite.prototype.setMap = function(map) {
|
|
||||||
this.map = map;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSprite.prototype.setPosition = function(xpos, ypos) {
|
|
||||||
this.newx = xpos;
|
|
||||||
this.newy = ypos;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSprite.prototype.scheduleMove = function(xoffset, yoffset) {
|
|
||||||
this.newx = this.x + xoffset;
|
|
||||||
this.newy = this.y + yoffset;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSprite.prototype.doMove = function() {
|
|
||||||
this.x = this.newx;
|
|
||||||
this.y = this.newy;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSprite.prototype.getWidth = function() {
|
|
||||||
return this.map.getWidth();
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSprite.prototype.getHeight = function() {
|
|
||||||
return this.map.getHeight();
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSprite.prototype.collidesWith = function(other, pixelPerfect) {
|
|
||||||
var x1L = this.x;
|
|
||||||
var x1R = this.x + this.getWidth() - 1;
|
|
||||||
var y1U = this.y;
|
|
||||||
var y1D = this.y + this.getHeight() - 1;
|
|
||||||
|
|
||||||
var x2L = other.x;
|
|
||||||
var x2R = other.x + other.getWidth() - 1;
|
|
||||||
var y2U = other.y;
|
|
||||||
var y2D = other.y + other.getHeight() - 1;
|
|
||||||
|
|
||||||
var horizontal = x1L >= x2L && x1L <= x2R;
|
|
||||||
horizontal |= x1R <= x2R && x1R >= x2L;
|
|
||||||
|
|
||||||
var vertical = y1U >= y2U && y1U <= y2D;
|
|
||||||
vertical |= y1D <= y2D && y1D >= y2U;
|
|
||||||
|
|
||||||
var rectCollides = (horizontal && vertical);
|
|
||||||
|
|
||||||
if(!rectCollides) return false; // surely
|
|
||||||
|
|
||||||
if(!pixelPerfect) {
|
|
||||||
return true; // rect collision suffices
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
for(var yy = Math.max(y1U, y2U); yy <= Math.min(y1D, y2D); yy++) {
|
|
||||||
for(var xx = Math.max(x1L, x2L); xx <= Math.min(x1R, x2R); xx++) {
|
|
||||||
|
|
||||||
var c1 = this.map.getPixel( (xx - x1L), (yy - y1U) );
|
|
||||||
var c2 = other.map.getPixel( (xx - x2L), (yy - y2U) );
|
|
||||||
|
|
||||||
if(c1 != -1 && c2 != -1) return true; // collision detected
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return false; // nope
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSprite.prototype.drawOnMap = function(map) {
|
|
||||||
map.drawMap(this.map, this.x, this.y);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
LoresSprite.prototype.eraseOnMap = function(map, perPixel) {
|
|
||||||
if(perPixel) {
|
|
||||||
map.eraseMap(this.map, this.x, this.y);
|
|
||||||
} else {
|
|
||||||
map.eraseRect(this.x, this.y, this.map.getWidth(), this.map.getHeight());
|
|
||||||
}
|
|
||||||
};
|
|
||||||
+1594
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user