Mal/mr-crocs-adventures
Mal
/
mr-crocs-adventures
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

merge into: Mal:master
Branches Tags
Mal:master
Mal:develop
...
pull from: Mal:develop
Branches Tags
Mal:master
Mal:develop

5 Commits
master ... develop

Author SHA1 Message Date
Mal 83c1ae8119 Level added 2022-05-16 17:18:06 +02:00
Mal e476e689e1 Mouse cursor is visible again 2021-09-21 11:19:05 +02:00
Mal 2fe9b63c70 Double frame rate 2021-09-21 09:48:54 +02:00
Mal 598dbc67ac Optimization for Firefox and Chrome 2021-09-21 09:47:27 +02:00
Mal 46c584d9ee Static frame rate established 2021-09-15 17:24:53 +02:00
5 changed files with 72 additions and 25 deletions
Show Stats Expand all files Collapse all files

3
index.html
View File

@ -13,7 +13,6 @@
position: absolute;
top: 0;
left: 0;
cursor: none;
}
</style>
<link rel="shortcut icon" type="image/png" href="favicon.png">
@ -22,4 +21,4 @@
<body>
<canvas id="canvas"></canvas>
</body>
</html>
</html>

2
js/ImageLoader.js
View File

@ -29,4 +29,4 @@ export default class ImageLoader
this.images.push(image);
}
}
}

33
js/module.js
View File

@ -103,6 +103,8 @@ function MainLoop(timestamp)
/* Drawing */
if (timestamp - lastRendered >= frameDuration) {
lastRendered = timestamp;
if (gisela.currentAnimation !== 'LOOK_LEFT' && mrCroc.position.x < gisela.position.x) {
gisela.currentAnimation = 'LOOK_LEFT';
} else if (gisela.currentAnimation !== 'LOOK_RIGHT' && mrCroc.position.x >= gisela.position.x) {
@ -110,12 +112,19 @@ function MainLoop(timestamp)
}
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
architecture.draw(context, camera);
switch (browser) {
case 'Chrome':
architecture.drawForChrome(context, camera);
break;
default:
architecture.drawForFirefox(context, camera);
}
mrCroc.draw(context, camera);
gisela.draw(context, camera);
userInterface.draw(context);
lastRendered = timestamp;
}
lastTimestamp = timestamp;
@ -140,6 +149,7 @@ const LEVEL = [
'moon.json',
'moonbase.json',
'terrain8.json',
'darius.json',
];
let urlGetter = new UrlParam();
@ -154,7 +164,8 @@ let level = Level.createFromFile(Setting.LEVELS_LOCATION + LEVEL[levelIndex]);
const GAME_SPEED = 1;
const GRAVITY = level.gravity;
let fps;
let fps = 120;
const browser = navigator.userAgent.indexOf('Firefox') === -1 ? 'Chrome' : 'Firefox';
let frameDuration;
let lastRendered = undefined;
let lastTimestamp = undefined;
@ -179,8 +190,6 @@ loader.addImage(Setting.TILESET_LOCATION + GraphicSet[level.getTilesetId()].tile
loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-right.png');
loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-left.png');
new FrameRateMeasurer();
window.addEventListener(
'imagesloaded',
() => {
@ -227,13 +236,7 @@ window.addEventListener(
gisela = new Gisela();
architecture.setMovableToTargetPosition(gisela);
window.addEventListener(
InterfaceEvent.FRAME_RATE_MEASURED,
(event) => {
fps = event.frameRate;
frameDuration = 1000 / fps;
window.requestAnimationFrame(MainLoop);
}
);
frameDuration = 1000 / fps;
window.requestAnimationFrame(MainLoop);
}
);
);

58
js/retro/RetroArchitecture.js
View File

@ -5,6 +5,7 @@ import GeometryPoint from "../geometry/GeometryPoint.js";
import GeometryRect from "../geometry/GeometryRect.js";
import GraphicSet from "../GraphicSet.js";
import Setting from "../Setting.js";
import Camera from "../Camera.js";
export default class RetroArchitecture
{
@ -19,6 +20,10 @@ export default class RetroArchitecture
this.matrix = [];
this.tileWidth = this.tilesetSprite.getWidth() / this.tiles;
this.tileHeight = this.tilesetSprite.getHeight();
this.terrainCanvas = document.createElement('canvas');
this.terrainCanvas.width = this.tileWidth * this.columns;
this.terrainCanvas.height = this.tileHeight * this.rows;
this.terrainContext = this.terrainCanvas.getContext('2d');
this.startX = 0;
this.startY = 0;
this.targetX = 0;
@ -41,6 +46,23 @@ export default class RetroArchitecture
}
}
render()
{
const camera = new Camera();
for (let y = 0; y < this.rows; y++) {
for (let x = 0; x < this.columns; x++) {
const field = this.matrix[y][x];
if (field === null) {
continue;
}
this.drawField(this.terrainContext, x, y, camera, field);
}
}
}
setBackgroundColor(color)
{
this.backgroundColor = color;
@ -202,16 +224,16 @@ export default class RetroArchitecture
tileRect.isContainingPoint(movable.getPositionFootRight());
}
draw(context, camera = new Camera())
drawForFirefox(context, camera = new Camera())
{
let viewX = parseInt(Math.floor(Math.max(0, camera.position.x) / this.tileWidth));
let viewWidth = parseInt(Math.min(Math.ceil(camera.width), this.columns));
let viewY = parseInt(Math.floor(Math.max(0, camera.position.y)) / this.tileHeight);
let viewHeight = parseInt(Math.min(Math.ceil(camera.height), this.rows));
const viewX = parseInt(Math.floor(Math.max(0, camera.position.x) / this.tileWidth));
const viewWidth = parseInt(Math.min(Math.ceil(camera.width), this.columns));
const viewY = parseInt(Math.floor(Math.max(0, camera.position.y)) / this.tileHeight);
const viewHeight = parseInt(Math.min(Math.ceil(camera.height), this.rows));
for (let y = viewY; y < viewHeight; y++) {
for (let x = viewX; x < viewWidth; x++) {
let field = this.matrix[y][x];
const field = this.matrix[y][x];
if (field !== null) {
this.drawField(context, x, y, camera, field);
@ -220,6 +242,26 @@ export default class RetroArchitecture
}
}
/**
*
* @param context
* @param camera Camera
*/
drawForChrome(context, camera)
{
context.drawImage(
this.terrainCanvas,
camera.position.x,
camera.position.y,
camera.width,
camera.height,
0,
0,
camera.width,
camera.height
);
}
drawField(context, x, y, camera, field)
{
context.drawImage(
@ -274,6 +316,8 @@ export default class RetroArchitecture
}
}
architecture.render();
return architecture;
}
}
}

1
levels/darius.json Normal file
View File

File diff suppressed because one or more lines are too long