MightyPork
/
lores
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

New stuff & examples

Browse Source
master
Ondřej Hruška 11 years ago
parent 26a62c0cff
commit 8304665067
14 changed files with 2550 additions and 1165 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      examples/README.md
  2. 26
      examples/floor.xpm
  3. 230
      examples/game_of_life.html
  4. 6
      examples/jquery-1.10.1.min.js
  5. 2
      examples/jquery-migrate-1.2.1.min.js
  6. 261
      examples/maze_growth.html
  7. 116
      examples/serpienski.html
  8. 155
      examples/sprites.html
  9. 128
      examples/tiles.html
  10. 28
      examples/wall.xpm
  11. 119
      js/lores-animator.js
  12. 847
      js/lores-base.js
  13. 199
      js/lores-sprites.js
  14. 1594
      js/lores.js

4
examples/README.md
Unescape View File

@ -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.

26
examples/floor.xpm
Unescape View File

@ -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",
"#$#. @$#@+. .",
"$$#+. +$$##$#. .",
"@##@++##@+@$@. +",
"#@@@@###++#$#++#",
"$#@#@#$$##$%$#$$",
"@++#@@$$#$%%$$$$",
"+.+@@@#$$$$%$$$#",
"++@+++@#$$$$$$$$",
"@###+.+#$$$#+.@#",
"@@#$+.+$$$$@. @",
"++##+.+#$$$$#. @",
"@##@++@#$$$$@..#",
"#$@+@#@#$$$$#@#$",
"##@+@##$$$$$$$$$",
"@###@##$$$$$$$##",
"@###@@#$$$$###@@"};

230
examples/game_of_life.html
Unescape View File

@ -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>

6
examples/jquery-1.10.1.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
examples/jquery-migrate-1.2.1.min.js vendored
View File

File diff suppressed because one or more lines are too long

261
examples/maze_growth.html
Unescape View File

@ -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>

116
examples/serpienski.html
Unescape View File

@ -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>

155
examples/sprites.html
Unescape View File

@ -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>

128
examples/tiles.html
Unescape View File

@ -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>

28
examples/wall.xpm
Unescape View File

@ -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",
"%%%%%&&&****&&&.",
"%+@@@@@##$$$$$#.",
"%+++@@@@##$$##$.",
"&++@@@@@@#$$$#$.",
"&@+@+@@@#######.",
"&@#@@++@@@#####.",
"&###@@+@@@#@###.",
".++.............",
"***&%%%.%&%%%&&&",
"$##++++.%@####@#",
"#@@++++.%@####@#",
"@@@@@++.%@#$#@@#",
"@@@@@@+.%@#$#@@@",
"@#@@@@+.%####@+#",
"@@@@@##.%@###@+@",
"......+........."};

119
js/lores-animator.js
Unescape View File

@ -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)});
};

847
js/lores-base.js
Unescape View File

@ -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);
};
}());

199
js/lores-sprites.js
Unescape View File

@ -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
js/lores.js
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save