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",
|
||||
"%%%%%&&&****&&&.",
|
||||
"%+@@@@@##$$$$$#.",
|
||||
"%+++@@@@##$$##$.",
|
||||
"&++@@@@@@#$$$#$.",
|
||||
"&@+@+@@@#######.",
|
||||
"&@#@@++@@@#####.",
|
||||
"&###@@+@@@#@###.",
|
||||
".++.............",
|
||||
"***&%%%.%&%%%&&&",
|
||||
"$##++++.%@####@#",
|
||||
"#@@++++.%@####@#",
|
||||
"@@@@@++.%@#$#@@#",
|
||||
"@@@@@@+.%@#$#@@@",
|
||||
"@#@@@@+.%####@+#",
|
||||
"@@@@@##.%@###@+@",
|
||||
"......+........."};
|
||||
Reference in New Issue
Block a user