From b8aa4b66affc4671095bbad4b7e772f1ddf25227 Mon Sep 17 00:00:00 2001 From: Alexander Popov Date: Tue, 6 Jul 2021 09:45:08 +0300 Subject: [PATCH] imagesPreloader - add draw quest image - new game progress bar --- app/config.json | 3 +- app/index.html | 1 + js/draw.js | 26 +++++++++++++++ js/game.js | 20 +++++++++--- js/index.js | 84 ++++++++++++++++++++++++++++--------------------- 5 files changed, 92 insertions(+), 42 deletions(-) diff --git a/app/config.json b/app/config.json index 638a11c..47d01bf 100644 --- a/app/config.json +++ b/app/config.json @@ -1,5 +1,6 @@ { "gameName": "quizEngine", "gameVersion": [0, 0, 1], - "debug": true + "debug": true, + "loaderWidth": 200 } diff --git a/app/index.html b/app/index.html index 4a8ee52..484ebc5 100644 --- a/app/index.html +++ b/app/index.html @@ -4,6 +4,7 @@ quizEngine +
diff --git a/js/draw.js b/js/draw.js index 8e98818..f865c3c 100644 --- a/js/draw.js +++ b/js/draw.js @@ -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; } diff --git a/js/game.js b/js/game.js index 43150e6..cbc4701 100644 --- a/js/game.js +++ b/js/game.js @@ -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) { diff --git a/js/index.js b/js/index.js index 77bddcb..d963967 100644 --- a/js/index.js +++ b/js/index.js @@ -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;