emilecok/quizEngine
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

imagesPreloader

Browse Source 
- add draw quest image
- new game progress bar
This commit is contained in:
Alexander Popov 2021-07-06 09:45:08 +03:00
parent 6aaad0c45d
commit b8aa4b66af
Signed by: iiiypuk
GPG Key ID: 398FC73478D97286
5 changed files with 92 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/config.json
View File

@ -1,5 +1,6 @@
{
"gameName": "quizEngine",
"gameVersion": [0, 0, 1],
"debug": true
"debug": true,
"loaderWidth": 200
}

1
app/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8">
<title>quizEngine</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="preload" as="image" href="assets/logo.png">
</head>
<body>
<div class="container">

26
js/draw.js
View File

@ -15,6 +15,32 @@ export function clearContext(canvas) {
context.fillRect(0, 0, cW, cH);
}
export function placeImage(canvas, area, image) {
let context = canvas.getContext('2d');
if (image.width >= image.height) {
if (image.width > area.w) {
let newImageW = area.w;
let newImageH = image.height * (area.h / newImageW);
if (newImageH > area.h) {
newImageH = area.h;
// BUG: ...
newImageW = image.width * (area.h / image.height);
context.drawImage(image, getCenterH(canvas.width, newImageW), area.y, newImageW, newImageH);
}
else {
context.drawImage(image, area.x, getCenterV(canvas.height - area.h + area.y, newImageH), newImageW, newImageH);
}
}
}
else {
let newImageH = area.h;
let newImageW = image.width * (area.h / image.height);
context.drawImage(image, getCenterH(canvas.width, newImageW), area.y, newImageW, newImageH);
}
}
export function getCenterH(canvasWidth, objectWidth) {
return canvasWidth / 2 - objectWidth / 2;
}

20
js/game.js
View File

@ -1,11 +1,21 @@
// функции игры
export function loadingLogo(imagesArray) {
// FIXME: возможно потом просто удалить функцию, если будет реализован imageLoader
let imgLogo = new Image();
imgLogo.src = 'assets/logo.png';
export function imagePreloader(images, callback) {
let counter = 0;
imagesArray.logo = imgLogo;
// norm
function onLoad() {
counter += 1;
if (counter == images.length) callback();
}
let assetsDiv = document.getElementById("assets");
for (let i of images) {
let img = document.createElement('img');
img.onload = img.onerror = onLoad;
img.src = `assets/images/${i}`;
}
}
export function checkAnswer(quest, answer) {

84
js/index.js
View File

@ -4,8 +4,8 @@ import config from '../app/config.json'; // game configuration
import gameData from '../app/gameData.json'; // game data
import { getMousePos, isInside } from './buttons.js';
import { clearContext, getCenterH, getCenterV } from './draw.js';
import { loadingLogo, checkAnswer, shuffle, restartGame } from './game.js';
import { clearContext, placeImage, getCenterH, getCenterV } from './draw.js';
import { imagePreloader, checkAnswer, shuffle, restartGame } from './game.js';
// Engine variables -------------------------------------
const DEBUG = config.debug;
@ -19,7 +19,6 @@ let areas = { game: {}, finish: {} };
let images = {};
let buttons = {};
// Init -------------------------------------------------
window.onload = function() {
// init canvas id and sizes
@ -36,13 +35,23 @@ window.onload = function() {
if (DEBUG)
console.log(landscape_orientation ? "Canvas orientation set to landscape" : "Canvas orientation set to portrait");
loadingLogo(images);
let imageLogo = new Image();
imageLogo.src = "assets/logo.png";
images.logo = imageLogo;
let questImages = [];
for (const [key, value] of Object.entries(gameData.questions)) {
questImages.push(value.image);
}
imagePreloader(questImages, function() { game.loadedState = true; });
game.loadedState = false;
game.finish = false;
game.currentQuest = 0;
shuffle(gameData); // shuffle quests
shuffle(gameData.questions); // shuffle quests
shuffle(gameData.questions[game.currentQuest].answer); // shuffle first quest answers
// присваем всем квестам статус не выполнен
@ -60,6 +69,14 @@ window.onload = function() {
areas.game.questImage = { x: 10, y: areas.game.questProgress.y + areas.game.questProgress.h + 10,
w: cW - 20, h: areas.game.labelQuestion.y - areas.game.questProgress.y - (areas.game.questProgress.h * 2) };
let progressBarHeight = cH - (getCenterV(cH, images.logo.height) + images.logo.height) > 301 ?
getCenterV(cH, images.logo.height) + images.logo.height + 70 : cH - 70;
areas.splash = {
border: { x: getCenterH(cW, config.loaderWidth), y: progressBarHeight, w: config.loaderWidth, h: 20 },
pointer: { position: 0, direction: true },
}
areas.finish.labelFinishGameName = { x: 10, y: 60, w: cW - 20, h: 30 };
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 };
@ -108,15 +125,19 @@ function gameLoop(timeStamp) {
// Game update func -------------------------------------
function update() {
// progressBar %percentage updater
// and set gameStateLoaded true
if (!game.loadedState && game.loadingProgress <= 99) {
// TODO: реализовать функционал проверки загрузки изображений and fonts
if (DEBUG) game.loadingProgress += 10; // FIXME: костыль
else game.loadingProgress += 1;
if (!game.loadedState) {
if (areas.splash.pointer.position < areas.splash.border.w - 50 && areas.splash.pointer.direction) {
areas.splash.pointer.position += 1;
}
else areas.splash.pointer.direction = false;
if (!areas.splash.pointer.direction) {
if (areas.splash.pointer.position <= 0)
areas.splash.pointer.direction = true;
areas.splash.pointer.position -= 1;
}
}
else if (game.loadingProgress == 100)
game.loadedState = true;
if (game.loadedState && !game.finish) {
buttons.answerButton0 = { x: getCenterH(cW, cW / 1.5), y: 0, w: cW / 1.5, h: 50, data: null };
@ -156,27 +177,19 @@ function draw() {
// render splash screen -----------------------------
if (!game.loadedState) {
// TODO: change if(! to NaN check
if (!game.loadingProgress) {
game.loadingProgress = 0;
}
context.drawImage(images.logo, getCenterH(cW, images.logo.width), getCenterV(cH, images.logo.height));
// TODO: check loadedState to final loading game
context.font = "32px Yanone Kaffeesatz";
context.textAlign = "center";
context.fillStyle = "white";
context.fillRect(areas.splash.pointer.position + areas.splash.border.x, areas.splash.border.y, 50, areas.splash.border.h);
context.strokeRect(areas.splash.border.x, areas.splash.border.y,
areas.splash.border.w, areas.splash.border.h);
context.strokeStyle = "black";
context.lineWidth = 2;
context.fillStyle = "yellow";
// FIXME: translate to English
// если расстояние от нижнего края картинки до конца канваса меньше ???
// то рисуем прогрессбар от нижнего края
// если больше, то на расстояние от картинки
let progressBarHeight = cH - (getCenterV(cH, images.logo.height) + images.logo.height) > 301 ?
getCenterV(cH, images.logo.height) + images.logo.height + 70 : cH - 70;
context.fillRect(50, progressBarHeight, ((cW - 100) / 100 * game.loadingProgress), 20);
context.strokeRect(50, progressBarHeight, cW - 100, 20);
}
// render game --------------------------------------
@ -204,6 +217,11 @@ function draw() {
context.strokeRect(10 + (i * sizeProgressItem), 10, sizeProgressItem, 20);
}
// draw quest image
let i = new Image();
i.src = `assets/images/${gameData.questions[game.currentQuest].image}`;
placeImage(canvas, areas.game.questImage, i);
// draw question label
context.font = "32px Yanone Kaffeesatz";
context.textAlign = "center";
@ -242,8 +260,7 @@ function draw() {
context.fillText(config['gameName'], cW / 2, areas.finish.labelFinishGameName.y + 25);
// draw labelTotalAnswerRight :FIXME:
// draw labelTotalAnswerRight
let rightAnswer = 0;
gameData.questions.forEach(element => element.status ? rightAnswer += 1 : null);
context.font = "50px Yanone Kaffeesatz";
@ -259,11 +276,6 @@ function draw() {
context.font = "50px Yanone Kaffeesatz";
let resultInfo = null;
// for (let i = gameData.answerResult.length - 1; i >= 0; i--) {
// if (rightAnswerPercentage > gameData.answerResult[i]) {
// resultInfo = gameData.answerResult[i];
// }
// }
for (const [key, value] of Object.entries(gameData.answerResult)) {
if (key <= rightAnswerPercentage) {
resultInfo = value;