144 lines
4.2 KiB
JavaScript
144 lines
4.2 KiB
JavaScript
var results = [
|
|
{name: "Satisfied", count: 1043, color: "lightblue"},
|
|
{name: "Neutral", count: 563, color: "lightgreen"},
|
|
{name: "Unsatisfied", count: 510, color: "pink"},
|
|
{name: "No comment", count: 175, color: "silver"}
|
|
];
|
|
|
|
function flipHorizontally(context, around) {
|
|
context.translate(around, 0);
|
|
context.scale(-1, 1);
|
|
context.translate(-around, 0);
|
|
}
|
|
|
|
var CanvasDisplay = class CanvasDisplay {
|
|
constructor(parent, level) {
|
|
this.canvas = document.createElement("canvas");
|
|
this.canvas.width = Math.min(600, level.width * scale);
|
|
this.canvas.height = Math.min(450, level.height * scale);
|
|
parent.appendChild(this.canvas);
|
|
this.cx = this.canvas.getContext("2d");
|
|
|
|
this.flipPlayer = false;
|
|
|
|
this.viewport = {
|
|
left: 0,
|
|
top: 0,
|
|
width: this.canvas.width / scale,
|
|
height: this.canvas.height / scale
|
|
};
|
|
}
|
|
|
|
clear() {
|
|
this.canvas.remove();
|
|
}
|
|
}
|
|
|
|
CanvasDisplay.prototype.syncState = function(state) {
|
|
this.updateViewport(state);
|
|
this.clearDisplay(state.status);
|
|
this.drawBackground(state.level);
|
|
this.drawActors(state.actors);
|
|
};
|
|
|
|
CanvasDisplay.prototype.updateViewport = function(state) {
|
|
let view = this.viewport, margin = view.width / 3;
|
|
let player = state.player;
|
|
let center = player.pos.plus(player.size.times(0.5));
|
|
|
|
if (center.x < view.left + margin) {
|
|
view.left = Math.max(center.x - margin, 0);
|
|
} else if (center.x > view.left + view.width - margin) {
|
|
view.left = Math.min(center.x + margin - view.width,
|
|
state.level.width - view.width);
|
|
}
|
|
if (center.y < view.top + margin) {
|
|
view.top = Math.max(center.y - margin, 0);
|
|
} else if (center.y > view.top + view.height - margin) {
|
|
view.top = Math.min(center.y + margin - view.height,
|
|
state.level.height - view.height);
|
|
}
|
|
};
|
|
|
|
CanvasDisplay.prototype.clearDisplay = function(status) {
|
|
if (status == "won") {
|
|
this.cx.fillStyle = "rgb(68, 191, 255)";
|
|
} else if (status == "lost") {
|
|
this.cx.fillStyle = "rgb(44, 136, 214)";
|
|
} else {
|
|
this.cx.fillStyle = "rgb(52, 166, 251)";
|
|
}
|
|
this.cx.fillRect(0, 0,
|
|
this.canvas.width, this.canvas.height);
|
|
};
|
|
|
|
var otherSprites = document.createElement("img");
|
|
otherSprites.src = "img/sprites.png";
|
|
|
|
CanvasDisplay.prototype.drawBackground = function(level) {
|
|
let {left, top, width, height} = this.viewport;
|
|
let xStart = Math.floor(left);
|
|
let xEnd = Math.ceil(left + width);
|
|
let yStart = Math.floor(top);
|
|
let yEnd = Math.ceil(top + height);
|
|
|
|
for (let y = yStart; y < yEnd; y++) {
|
|
for (let x = xStart; x < xEnd; x++) {
|
|
let tile = level.rows[y][x];
|
|
if (tile == "empty") continue;
|
|
let screenX = (x - left) * scale;
|
|
let screenY = (y - top) * scale;
|
|
let tileX = tile == "lava" ? scale : 0;
|
|
this.cx.drawImage(otherSprites,
|
|
tileX, 0, scale, scale,
|
|
screenX, screenY, scale, scale);
|
|
}
|
|
}
|
|
};
|
|
|
|
var playerSprites = document.createElement("img");
|
|
playerSprites.src = "img/player.png";
|
|
var playerXOverlap = 4;
|
|
|
|
CanvasDisplay.prototype.drawPlayer = function(player, x, y,
|
|
width, height){
|
|
width += playerXOverlap * 2;
|
|
x -= playerXOverlap;
|
|
if (player.speed.x != 0) {
|
|
this.flipPlayer = player.speed.x < 0;
|
|
}
|
|
|
|
let tile = 8;
|
|
if (player.speed.y != 0) {
|
|
tile = 9;
|
|
} else if (player.speed.x != 0) {
|
|
tile = Math.floor(Date.now() / 60) % 8;
|
|
}
|
|
|
|
this.cx.save();
|
|
if (this.flipPlayer) {
|
|
flipHorizontally(this.cx, x + width / 2);
|
|
}
|
|
let tileX = tile * width;
|
|
this.cx.drawImage(playerSprites, tileX, 0, width, height,
|
|
x, y, width, height);
|
|
this.cx.restore();
|
|
};
|
|
|
|
CanvasDisplay.prototype.drawActors = function(actors) {
|
|
for (let actor of actors) {
|
|
let width = actor.size.x * scale;
|
|
let height = actor.size.y * scale;
|
|
let x = (actor.pos.x - this.viewport.left) * scale;
|
|
let y = (actor.pos.y - this.viewport.top) * scale;
|
|
if (actor.type == "player") {
|
|
this.drawPlayer(actor, x, y, width, height);
|
|
} else {
|
|
let tileX = (actor.type == "coin" ? 2 : 1) * scale;
|
|
this.cx.drawImage(otherSprites,
|
|
tileX, 0, width, height,
|
|
x, y, width, height);
|
|
}
|
|
}
|
|
};
|