243 lines
7.2 KiB
JavaScript
243 lines
7.2 KiB
JavaScript
'use strict';
|
||
|
||
import config from '../config.json'; // game configuration
|
||
import gameData from '../gameData.json'; // game data
|
||
|
||
import { getMousePos, isInside } from './buttons.js';
|
||
import { clearContext, getCenterH, getCenterV } from './draw.js';
|
||
import { clickAnswer, shuffleQuestAnswer } from './game.js';
|
||
|
||
// Engine variables -------------------------------------
|
||
let DEBUG = true;
|
||
let canvas = null; // canvas id
|
||
let context = null; // context id
|
||
let cW = null; // canvas with
|
||
let cH = null; // canvas height
|
||
let orientation = null; // screen orientation
|
||
let button = null; // buttons array
|
||
let area = null; // game areas (buttons, images, etc.)
|
||
let game = null;
|
||
|
||
// Init -------------------------------------------------
|
||
window.onload = function() {
|
||
// init canvas id and sizes
|
||
canvas = document.getElementById('game');
|
||
context = canvas.getContext('2d');
|
||
cW = canvas.width;
|
||
cH = canvas.height;
|
||
|
||
// set screen orientation by carculate canvas width&height
|
||
if (cW >= cH) { orientation = true; }
|
||
else { orientation = false; }
|
||
|
||
if (DEBUG) {
|
||
console.log(`Loaded ${gameData.length} quests.`);
|
||
}
|
||
|
||
game = {
|
||
// TODO: change quest by script
|
||
questIndex: 0,
|
||
quest: null,
|
||
questImage: null,
|
||
totalRightAnswers: 0, // количество правильных ответов
|
||
scene: null,
|
||
};
|
||
shuffleQuestAnswer(gameData); // shuffle quest
|
||
game.quest = gameData[game.questIndex];
|
||
shuffleQuestAnswer(gameData[game.questIndex].answer); // shuffle first quest answers
|
||
|
||
// присваем всем квестам статус не выполнен
|
||
gameData.forEach(element => element.status = null);
|
||
|
||
if (!orientation) {
|
||
area = {
|
||
answerButtons: { x: 10, y: cH - 340, w: cW - 20, h: 250 },
|
||
questionLabel: { x: 10, y: cH - 340 - 80, w: cW - 20, h: 70 },
|
||
uiButtons: { x: 10, y: cH - 80, w: cW - 20, h: 70 },
|
||
questProgress: { x: 10, y: 10, w: cW - 20, h: 20 },
|
||
}
|
||
area.image = { x: 10, y: area.questProgress.y + area.questProgress.h + 10,
|
||
w: cW - 20, h: area.questionLabel.y - area.questProgress.y - (area.questProgress.h * 2) };
|
||
}
|
||
// TODO: add areas for landscape mode
|
||
|
||
button = {
|
||
info: { x: 10, y: cH - 80, w: 70, h: 70 },
|
||
sfx: { x: cW - 80, y: cH - 80, w: 70, h: 70 },
|
||
// TODO: change data: to null
|
||
answerButtons: [
|
||
{ x: getCenterH(cW, cW / 1.5), y: 0, w: cW / 1.5, h: 50, data: null },
|
||
{ x: getCenterH(cW, cW / 1.5), y: 0, w: cW / 1.5, h: 50, data: null },
|
||
{ x: getCenterH(cW, cW / 1.5), y: 0, w: cW / 1.5, h: 50, data: null },
|
||
{ x: getCenterH(cW, cW / 1.5), y: 0, w: cW / 1.5, h: 50, data: null },
|
||
],
|
||
}
|
||
|
||
button.answerButtons.forEach(function callback(value, index, array) {
|
||
if (index == 0)
|
||
array[index].y = area.answerButtons.y;
|
||
else
|
||
array[index].y = array[index - 1].y + value.h + 15;
|
||
});
|
||
|
||
canvas.addEventListener('click', function(evt) {
|
||
let mousePos = getMousePos(canvas, evt);
|
||
|
||
// click info button
|
||
if (isInside(mousePos, button.info)) {
|
||
console.log("info");
|
||
}
|
||
|
||
// click sfx button
|
||
if (isInside(mousePos, button.sfx)) {
|
||
console.log("sfx");
|
||
}
|
||
|
||
// click by first answer button
|
||
if (isInside(mousePos, button.answerButtons[0])) {
|
||
clickAnswer(gameData, game, button.answerButtons[0].data);
|
||
}
|
||
|
||
// click by second answer button
|
||
if (isInside(mousePos, button.answerButtons[1])) {
|
||
clickAnswer(gameData, game, button.answerButtons[1].data);
|
||
}
|
||
|
||
// click by third answer button
|
||
if (isInside(mousePos, button.answerButtons[2])) {
|
||
clickAnswer(gameData, game, button.answerButtons[2].data);
|
||
}
|
||
|
||
// click by four answer button
|
||
if (isInside(mousePos, button.answerButtons[3])) {
|
||
clickAnswer(gameData, game, button.answerButtons[3].data);
|
||
}
|
||
}, false);
|
||
|
||
window.requestAnimationFrame(gameLoop);
|
||
};
|
||
|
||
|
||
// GameLoop ---------------------------------------------
|
||
function gameLoop(timeStamp) {
|
||
update();
|
||
draw();
|
||
|
||
window.requestAnimationFrame(gameLoop);
|
||
}
|
||
|
||
// Game update func -------------------------------------
|
||
function update() {
|
||
// Update answer buttons label
|
||
button.answerButtons.forEach(function callback(value, index) {
|
||
value.data = game.quest.answer[index];
|
||
});
|
||
}
|
||
|
||
// Draw to canvas func ----------------------------------
|
||
function draw() {
|
||
clearContext(canvas, config); // flush?! canvas
|
||
|
||
// draw question label
|
||
context.font = "32px Ubuntu";
|
||
context.textAlign = "center";
|
||
context.fillStyle = "white";
|
||
context.fillText(game.quest.question, cW / 2, area.questionLabel.y + 30);
|
||
|
||
// draw answer buttons
|
||
context.fillStyle = "purple";
|
||
context.strokeStyle = "navy";
|
||
context.lineWidth = 2;
|
||
|
||
for (let i = 0; i <= button.answerButtons.length - 1; i++) {
|
||
context.fillRect(button.answerButtons[i].x, button.answerButtons[i].y,
|
||
button.answerButtons[i].w, button.answerButtons[i].h);
|
||
context.strokeRect(button.answerButtons[i].x, button.answerButtons[i].y,
|
||
button.answerButtons[i].w, button.answerButtons[i].h);
|
||
}
|
||
|
||
// draw answer button label
|
||
context.font = "32px Ubuntu";
|
||
context.textAlign = "center";
|
||
context.fillStyle = "white";
|
||
|
||
button.answerButtons.forEach(function callback(value) {
|
||
context.fillText(value.data, cW / 2, value.y + 35);
|
||
});
|
||
|
||
// draw image
|
||
game.questImage = new Image();
|
||
game.questImage.src = 'assets/images/' + game.quest.image;
|
||
|
||
// carculate image ratio by area.image size
|
||
if (game.questImage.width >= game.questImage.height) {
|
||
if (game.questImage.height > area.image.h) {
|
||
let ratio = game.questImage.width / area.image.w;
|
||
let newImageW = area.image.w / ratio;
|
||
let newImageH = area.image.h;
|
||
|
||
context.drawImage(game.questImage, getCenterH(cW, newImageW), area.image.y,
|
||
newImageW, newImageH);
|
||
}
|
||
else {
|
||
// TODO: draw image center
|
||
// TODO: add option to sizeUp images to engine config
|
||
}
|
||
}
|
||
else {
|
||
let ratio = game.questImage.height / area.image.h;
|
||
let newImageW = area.image.w / ratio;
|
||
|
||
context.drawImage(game.questImage, getCenterH(cW, newImageW), area.image.y,
|
||
newImageW, area.image.h);
|
||
}
|
||
|
||
// draw progress bar
|
||
let sizeProgressItem = area.questProgress.w / gameData.length;
|
||
|
||
context.strokeStyle = "black";
|
||
|
||
for (let i = 0; i < gameData.length; i++) {
|
||
// change progress item color by status answer
|
||
switch (gameData[i].status) {
|
||
case null:
|
||
context.fillStyle = "gray";
|
||
break;
|
||
case true:
|
||
context.fillStyle = "green";
|
||
break;
|
||
case false:
|
||
context.fillStyle = "red";
|
||
break;
|
||
}
|
||
|
||
context.fillRect(10 + (i * sizeProgressItem), 10, sizeProgressItem, 20);
|
||
context.strokeRect(10 + (i * sizeProgressItem), 10, sizeProgressItem, 20);
|
||
}
|
||
|
||
// UI ------------------------------------------
|
||
// TODO: переписать это всё г*
|
||
context.fillStyle = "red";
|
||
context.strokeStyle = "navy";
|
||
context.lineWidth = 2;
|
||
context.fillRect(button.info.x, button.info.y, button.info.w, button.info.h); // info button
|
||
context.strokeRect(button.info.x, button.info.y, button.info.w, button.info.h); // info button
|
||
context.fillRect(button.sfx.x, button.sfx.y, button.sfx.w, button.sfx.h); // sfx button
|
||
context.strokeRect(button.sfx.x, button.sfx.y, button.sfx.w, button.sfx.h); // sfx button
|
||
|
||
// draw game areas
|
||
if (DEBUG) {
|
||
context.strokeStyle = "red";
|
||
context.lineWidth = 2;
|
||
|
||
// answer buttons area
|
||
if (orientation)
|
||
// TODO: draw answer buttons area by landscape
|
||
console.log('TODO: draw answer buttons area by landscape');
|
||
else
|
||
for (const [key, value] of Object.entries(area)) {
|
||
context.strokeRect(value.x, value.y, value.w, value.h);
|
||
}
|
||
}
|
||
}
|