littlejsengine
Version:
LittleJS - Tiny and Fast HTML5 Game Engine
173 lines (147 loc) • 10 kB
HTML
<head>
<title>LittleJS Stress Test</title>
<meta charset=utf-8>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=mobile-web-app-capable content=yes>
<link rel=icon type=image/png href=../favicon.png>
</head><body>
<script type=module>
/*
LittleJS Stress Test
- Render over 100,000 sprites at 60 fps in Chrome
- Also plays music in the background with zzfxm
- All code and the image is contained in this html file
*/
;
// import LittleJS module
import * as LJS from '../../dist/littlejs.esm.min.js';
const {vec2, rgb} = LJS;
// keep our own list of simple sprites and track fps
let sprites, tileLayer, timeMS, fpsDisplay, statsDisplay, spriteColor, spriteAdditiveColor, musicInstance, hasClicked;
///////////////////////////////////////////////////////////////////////////////
class TestObject extends LJS.EngineObject
{
constructor(pos)
{
super(pos, vec2(1), LJS.tile(0), 0, spriteColor);
this.additiveColor = spriteAdditiveColor;
this.setCollision();
}
}
///////////////////////////////////////////////////////////////////////////////
function gameInit()
{
// create tile collision ground for objects to collide with
tileLayer = new LJS.TileCollisionLayer(vec2(), vec2(99,55));
for (let x = tileLayer.size.x; x--;)
tileLayer.setCollisionData(vec2(x,0));
// set things up
LJS.setCanvasFixedSize(vec2(1920, 1080)); // 1080p
LJS.setCameraScale(20);
LJS.setCameraPos(tileLayer.size.scale(.5));
LJS.setCanvasClearColor(rgb(.4,.4,.4));
LJS.setGravity(vec2(0,-.005));
sprites = [];
// display stats using a div so when using glOverlay it still appears on top
document.body.appendChild(statsDisplay = document.createElement('div'));
statsDisplay.style = 'position:absolute;width:100%;font-size:3em;text-align:center;font-family:arial;user-select:none;';
}
///////////////////////////////////////////////////////////////////////////////
function gameUpdate()
{
// mouse click = change color
if (LJS.mouseWasPressed(0) || LJS.mouseIsDown(2))
{
hasClicked = true;
spriteColor = LJS.randColor();
spriteAdditiveColor = LJS.randColor(rgb(.5,.5,.5, 0), rgb(0,0,0,0));
}
// right click = drop test object
if (LJS.mouseIsDown(2))
new TestObject(LJS.mousePos);
// mouse hold = add objects
if (LJS.mouseIsDown(0))
{
spriteColor = spriteColor.mutate();
spriteAdditiveColor = spriteAdditiveColor.mutate();
for (let i=100;i--;)
sprites.push({
pos:LJS.mousePos.add(LJS.randInCircle(2)),
angle:LJS.rand(2*LJS.PI),
velocity:LJS.randInCircle(.2),
color:spriteColor.rgbaInt(),
additiveColor:spriteAdditiveColor.rgbaInt()
});
}
// mouse wheel = zoom
LJS.setCameraScale(LJS.clamp(LJS.cameraScale*(1-LJS.mouseWheel/10), 1, 1e3));
// mouse click = play music
if (hasClicked)
{
if (!musicInstance)
musicInstance = music.play();
else if (!musicInstance.isPlaying())
musicInstance.start();
}
}
///////////////////////////////////////////////////////////////////////////////
function gameUpdatePost()
{
}
///////////////////////////////////////////////////////////////////////////////
function gameRender()
{
// track fps and update stats
const frameTimeMS = Date.now();
fpsDisplay = LJS.lerp(fpsDisplay||0, 1e3/(frameTimeMS - timeMS||1), .05);
timeMS = frameTimeMS;
// show stats
const spriteCount = sprites.length
const objectCount = LJS.engineObjects.length;
statsDisplay.innerText =
spriteCount + objectCount ?
spriteCount + ' Sprites / '
+ (objectCount ? objectCount + ' Objects / ' : '')
+ fpsDisplay.toFixed(1) + ' FPS'
: 'LittleJS Stress Test\nLeft Click = Add Sprites\nRight Click = Add Objects';
// position stats
const canvasRect = LJS.mainCanvas.getBoundingClientRect();
statsDisplay.style.top = canvasRect.top+'px';
statsDisplay.style.fontSize = canvasRect.width*.04+'px';
// update sprites
for (const sprite of sprites)
{
// apply velocity and gravity
sprite.pos.x += sprite.velocity.x;
sprite.pos.y += sprite.velocity.y += LJS.gravity.y;
// bounce
if (sprite.pos.y < 0)
{
sprite.pos.y = 0;
sprite.velocity.y = LJS.rand(.3,.8);
}
if (sprite.pos.x < 0)
sprite.pos.x = 0, sprite.velocity.x *= -1;
if (sprite.pos.x > tileLayer.size.x)
sprite.pos.x = tileLayer.size.x, sprite.velocity.x *= -1;
// rotate sprite
sprite.angle += sprite.velocity.x > 0 ? .02 : -.02;
// draw the sprite directly using glDraw for extra speed
LJS.glDraw(sprite.pos.x, sprite.pos.y, 1, 1, sprite.angle, 0, 0, 1, 1,
sprite.color, sprite.additiveColor);
}
}
///////////////////////////////////////////////////////////////////////////////
function gameRenderPost()
{
}
///////////////////////////////////////////////////////////////////////////////
// load tiles image via url data
const tilesImageData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAYklEQVR42u2TQQqAQAwDPfg6P5SX+b7VgkpDhNH7DuTSNGFZ6LJv66OTUWoz9M28sCXyw2xLpjc/CiQNQpIVFGaKZa+I538JZ4EDYSgAsCB+Pma5OwtgGWd2ZUCE4xr/6M4d3aFsj7DwoPQAAAAASUVORK5CYII=';
///////////////////////////////////////////////////////////////////////////////
// Startup LittleJS Engine
LJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, [tilesImageData]);
///////////////////////////////////////////////////////////////////////////////
// music - Depp Loop
const music = new LJS.ZzFXMusic([[[.6,0,77,,,1,1,.5,,,,,.1,,,.05,,.5,.4,.2],[,0,43,.01,,.2,2,,,,,,,,,,.01],[,0,170,.003,,.008,,.97,-35,53,,,,,,.1],[.8,0,270,,,.12,3,1.65,-2,,,,,4.5,,.02],[,0,86,,,.1,,.7,,,,.5,,6.7,1,.05],[,0,41,,.05,.4,2,0,,,9,.01,,,,.08,.02],[,0,2200,,,.04,3,2,,,800,.02,,4.8,,.01,.1],[.3,0,16,,,.3,3]],[[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,22,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,24,,,,,,,,,,,,,,,,,,,,,,,,22,,22,,22,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33],[3,1,24,,,,,,,,27,,,,,,,,,,,,,,,,27,,,,24,,,,24,,,,,,,,27,,,,,,,,,,,,,,,,24,,24,,24,,,,],[5,-1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[,1,21,,,,,,,,,,,,,,,,,,,,,,,,,,,,24,,,,23,,,,,,,,,,,,,,,,,,,,,,,,24,,23,,21,,,,],[6,1,,,34,34,34,,,,,,34,34,,,,,34,,,,34,34,,,,,34,,,,34,,,,34,34,34,,,,,,34,,,,,,34,34,,,34,34,,,,,,,,,34,34],[4,1,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,,,,,,,24,,,,,,24,,24,,,,24,,,,24,,,,,,,,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,23,23,35,23,23,36,23,23,35,23,23,36,23,23,35,35,23,23,35,23,23,35,23,23,36,23,23,35,23,23,36,36],[5,-1,21,,,19,,,21,,,,,,,,,,21,,,19,,,17,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,],[3,1,24,,,24,,,24,,,,,,,,,,24,,,24,,,24,,,,24.75,24.5,24.26,24.01,24.01,24.01,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[4,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,24.75,24.5,24.26,24.01,24.01,24.01,24.01,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,23,,21,23,,35,,23,,21,23,,35,,35,,23,,21,23,,35,,21,23,,35,,21,23,,,],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,36,34,,33,34,34,36,31,36,34,,31,34,32,,33,36,34,,31,34,34,36,33,36,33,,31,,,]],[[1,-1,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,21,21,33,21,21,33,21,21,33,21,21,33,21,21,33,33,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,21,,19,21,,33,,21,,19,21,,33,,33,,21,,19,21,,33,,21,,19,21,,33,,33,,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29],[2,1,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,34,34,,34,,,],[6,1,,,36,,,,,,36,,36,,,,,,,,36,,,,,,36,,36,,,,,,,,36,,,,,,,,,,,,,,,,36,,,,,,36,,36,,,,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,25,,,25,,,,,,,,25,,,,,,,,25,25,25,25]],[[1,-1,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,14,14,26,14,14,26,14,14,26,14,14,26,14,14,26,26,17,17,29,17,17,29,17,17,29,17,17,29,17,17,29,29,19,19,31,19,19,31,19,19,31,19,19,31,19,19,31,31],[4,1,24,24,,24,24,,24,24,24,24,,24,24,,24,,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,24,24,24,24,,24,24,,36,,24,24,,24,24,,24,24,24,24,,24,24,,24,24],[7,-1,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,14,,14,14,26,14,14,26,17,,17,17,29,17,17,29,17,,17,17,29,17,17,29,19,,19,19,31,19,19,31,19,,19,19,31,19,19,31],[2,1,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,36,36,,36,,,],[3,1,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25,,,,,25,,,,,,,,25,,,,,,,,25,,,,,,,,25,25,25,25],[6,1,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,34,,,,,,34,,34,,,,,,,,34,,,,,,34,,34,,,,,,]]],[0,1,1,2,3,4,4]]);
</script>