finish image

This commit is contained in:
Alexander Popov 2021-07-07 14:55:10 +03:00
parent 108064b0db
commit 187aa7bc4e
Signed by: iiiypuk
GPG Key ID: 398FC73478D97286
6 changed files with 28 additions and 8 deletions

View File

@ -1,5 +1,4 @@
## TODO: ## TODO:
- image border
- draw button and other elements func - draw button and other elements func
- info widget - info widget
- finish game image - finish game image
@ -10,6 +9,7 @@
- make quests editor - make quests editor
## DONE: ## DONE:
- image border [108064b]
- background music [c814f77] - background music [c814f77]
- several correct answer [498ab55] - several correct answer [498ab55]
- loading all quest images with loading [b8aa4b6] - loading all quest images with loading [b8aa4b6]

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

View File

@ -23,5 +23,10 @@
"100": "100%. Ты милаха!", "100": "100%. Ты милаха!",
"60": "Больше половины, красава.", "60": "Больше половины, красава.",
"0": "0%. Ты вообще нихуя не сечёшь" "0": "0%. Ты вообще нихуя не сечёшь"
},
"result": {
"minRightAnswer": 60,
"notPassed": "notPassed.png",
"passed": "passed.png"
} }
} }

View File

@ -26,8 +26,8 @@ export function placeImage(canvas, area, image, colors) {
} }
else { else {
// TODO: getCenterV({this}) <= need plus progressBar sizes // TODO: getCenterV({this}) <= need plus progressBar sizes
context.drawImage(image, getCenterH(canvas.width, image.width), getCenterV(area.y + area.h, image.height), image.width, image.height); context.drawImage(image, getCenterH(canvas.width, image.width), getCenterV(canvas.height / 2 + area.y, image.height), image.width, image.height);
context.strokeRect(getCenterH(canvas.width, image.width), getCenterV(area.y + area.h, image.height), image.width, image.height); context.strokeRect(getCenterH(canvas.width, image.width), getCenterV(canvas.height / 2 + area.y, image.height), image.width, image.height);
} }
} }
else { else {

View File

@ -42,13 +42,15 @@ window.onload = function() {
imageLogo.src = "assets/logo.png"; imageLogo.src = "assets/logo.png";
images.logo = imageLogo; images.logo = imageLogo;
let questImages = []; let loadingImages = [];
loadingImages.push(gameData.result.notPassed);
loadingImages.push(gameData.result.passed);
for (const [key, value] of Object.entries(gameData.questions)) { for (const [key, value] of Object.entries(gameData.questions)) {
questImages.push(value.image); loadingImages.push(value.image);
} }
imagePreloader(questImages, function() { imagePreloader(loadingImages, function() {
game.loadedState = true; game.loadedState = true;
game.showAlpha = 1; game.showAlpha = 1;
}); });
@ -92,6 +94,7 @@ window.onload = function() {
areas.finish.labelTotalAnswerPercent = { x: 10, y: getCenterV(cH, 80), w: cW - 20, h: 80 }; areas.finish.labelTotalAnswerPercent = { x: 10, y: getCenterV(cH, 80), w: cW - 20, h: 80 };
areas.finish.labelTotalAnswerRight = { x: 10, y: areas.finish.labelTotalAnswerPercent.y - 70, w: cW - 20, h: 60 }; areas.finish.labelTotalAnswerRight = { x: 10, y: areas.finish.labelTotalAnswerPercent.y - 70, w: cW - 20, h: 60 };
areas.finish.labelTotalInfo = { x: 10, y: areas.finish.labelTotalAnswerPercent.y + areas.finish.labelTotalAnswerPercent.h + 10, w: cW - 20, h: 90 }; areas.finish.labelTotalInfo = { x: 10, y: areas.finish.labelTotalAnswerPercent.y + areas.finish.labelTotalAnswerPercent.h + 10, w: cW - 20, h: 90 };
areas.finish.image = { x: 10, y: areas.finish.labelFinishGameName.y + areas.finish.labelFinishGameName.h + 10, w: cW - 20, h: areas.finish.labelTotalAnswerRight.y - 20 - areas.finish.labelFinishGameName.y - areas.finish.labelFinishGameName.h };
} }
else { else {
// TODO: add areas for landscape mode // TODO: add areas for landscape mode
@ -315,15 +318,27 @@ function draw() {
context.fillText(config['gameName'], cW / 2, areas.finish.labelFinishGameName.y + 25); context.fillText(config['gameName'], cW / 2, areas.finish.labelFinishGameName.y + 25);
// draw labelTotalAnswerRight /// draw finish game image
let rightAnswer = 0; let rightAnswer = 0;
gameData.questions.forEach(element => element.status ? rightAnswer += 1 : null); gameData.questions.forEach(element => element.status ? rightAnswer += 1 : null);
let rightAnswerPercentage = Math.ceil(rightAnswer / gameData.questions.length * 100);
let i = new Image();
if (rightAnswerPercentage >= gameData.result.minRightAnswer) {
i.src = `assets/images/${gameData.result.passed}`
}
else {
i.src = `assets/images/${gameData.result.notPassed}`
}
context.drawImage(i, getCenterH(cW, i.width), areas.finish.image.y + areas.finish.image.h - i.height);
// draw labelTotalAnswerRight
context.font = "50px Yanone Kaffeesatz"; context.font = "50px Yanone Kaffeesatz";
context.fillText(`Результат: ${rightAnswer} из ${gameData.questions.length} ответов верны`, cW / 2, areas.finish.labelTotalAnswerRight.y + 45); context.fillText(`Результат: ${rightAnswer} из ${gameData.questions.length} ответов верны`, cW / 2, areas.finish.labelTotalAnswerRight.y + 45);
// draw labelTotalAnswerPercent // draw labelTotalAnswerPercent
let rightAnswerPercentage = Math.ceil(rightAnswer / gameData.questions.length * 100);
context.font = "75px Yanone Kaffeesatz"; context.font = "75px Yanone Kaffeesatz";
context.fillText(`Выполнено на ${rightAnswerPercentage}%`, cW / 2, areas.finish.labelTotalAnswerPercent.y + 65); context.fillText(`Выполнено на ${rightAnswerPercentage}%`, cW / 2, areas.finish.labelTotalAnswerPercent.y + 65);