parent
26a62c0cff
commit
8304665067
@ -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> |
||||
File diff suppressed because one or more lines are too long
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()); |
||||
} |
||||
}; |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue