уборочка

This commit is contained in:
Alexander Popov 2021-07-08 00:45:43 +03:00
parent 48a6c57741
commit 8e0c66565c
Signed by: iiiypuk
GPG Key ID: 398FC73478D97286
12 changed files with 36 additions and 252 deletions

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
node_modules/ node_modules/
package-lock.json package-lock.json
docs/DOCS.md

View File

@ -1,3 +1,8 @@
# Headline # quizEngine [In Development] [В разработке]
![Logo](logo.png)
> An awesome project. Движок для викторин
**Contact:**
- [Discord](https://discord.gg/pqsu6FsHSe) room `#quiz-engine`
- [Telegram](https://t.me/slexbc)

1
docs/_sidebar.md Normal file
View File

@ -0,0 +1 @@
- [Documentation](DOCS.md)

View File

@ -12,8 +12,17 @@
<div id="app"></div> <div id="app"></div>
<script> <script>
window.$docsify = { window.$docsify = {
name: '', name: 'quizEngine',
repo: '' // basePath: 'https://lickass.club/quizengine/',
repo: 'https://github.com/emilecok/quizEngine',
coverpage: false,
onlyCover: false,
loadNavbar: false,
mergeNavbar: true,
loadSidebar: true,
// notFoundPage: true,
subMaxLevel: 3,
auto2top: true
} }
</script> </script>
<!-- Docsify v4 --> <!-- Docsify v4 -->

BIN
docs/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

View File

@ -1,4 +1,4 @@
import config from '../app/config.json'; import config from './config.json';
import * as Draw from './draw.js' import * as Draw from './draw.js'

View File

@ -1,4 +1,4 @@
import config from '../app/config.json'; import config from './config.json';
export function imagePreloader(images, callback) { export function imagePreloader(images, callback) {
let counter = 0; let counter = 0;
@ -16,12 +16,20 @@ export function imagePreloader(images, callback) {
} }
export function shuffle(array) { export function shuffle(array) {
// ф
for (let i = array.length - 1; i > 0; i--) { for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1)); const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]]; [array[i], array[j]] = [array[j], array[i]];
} }
} }
//
/**
* Функция возвращает ориентацию игры в зависимости от размера canvas
* @param {Object} canvas canvas object
* @return {Bool} landscape_orientation
*/
export function setOrientation(canvas) { export function setOrientation(canvas) {
let landscape_orientation = null; let landscape_orientation = null;
@ -30,8 +38,8 @@ export function setOrientation(canvas) {
if (config.debug) if (config.debug)
console.log(landscape_orientation ? console.log(landscape_orientation ?
'Canvas orientation set to landscape' : 'Set game orientation to landscape' :
'Canvas orientation set to portrait'); 'Set game orientation to portrait');
return landscape_orientation; return landscape_orientation;
} }

View File

@ -1,242 +0,0 @@
'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);
}
}
}

View File

@ -1,8 +1,8 @@
'use strict'; 'use strict';
// Import game configs and questsData ------------------- // Import game configs and questsData -------------------
import config from '../app/config.json'; // game configuration import config from './config.json'; // game configuration
import gameData from '../app/gameData.json'; // game data import gameData from './gameData.json'; // game data
// Import engine libs ----------------------------------- // Import engine libs -----------------------------------
import * as Engine from './engine.js'; import * as Engine from './engine.js';

View File

@ -6,6 +6,7 @@
"scripts": { "scripts": {
"start": "webpack serve", "start": "webpack serve",
"build": "webpack --mode=production", "build": "webpack --mode=production",
"docs": "documentation build ./js -f md --markdown-toc=false -o docs/DOCS.md",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"repository": { "repository": {
@ -21,6 +22,7 @@
"homepage": "https://github.com/emilecok/quizEngine#readme", "homepage": "https://github.com/emilecok/quizEngine#readme",
"devDependencies": { "devDependencies": {
"docsify-cli": "^4.4.3", "docsify-cli": "^4.4.3",
"documentation": "^13.2.5",
"webpack": "^5.42.0", "webpack": "^5.42.0",
"webpack-cli": "^4.7.2", "webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2" "webpack-dev-server": "^3.11.2"