уборочка
This commit is contained in:
parent
48a6c57741
commit
8e0c66565c
GPG Key ID:
398FC73478D97286
|
|
@ -1,2 +1,3 @@
|
|||
node_modules/
|
||||
package-lock.json
|
||||
docs/DOCS.md
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
# Headline
|
||||
# quizEngine [In Development] [В разработке]
|
||||
|
||||
|
||||
> An awesome project.
|
||||
Движок для викторин
|
||||
|
||||
**Contact:**
|
||||
- [Discord](https://discord.gg/pqsu6FsHSe) room `#quiz-engine`
|
||||
- [Telegram](https://t.me/slexbc)
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
- [Documentation](DOCS.md)
|
||||
|
|
@ -12,8 +12,17 @@
|
|||
<div id="app"></div>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: '',
|
||||
repo: ''
|
||||
name: 'quizEngine',
|
||||
// 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>
|
||||
<!-- Docsify v4 -->
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
import config from '../app/config.json';
|
||||
import config from './config.json';
|
||||
|
||||
import * as Draw from './draw.js'
|
||||
|
||||
|
|
|
|||
14
js/engine.js
14
js/engine.js
|
|
@ -1,4 +1,4 @@
|
|||
import config from '../app/config.json';
|
||||
import config from './config.json';
|
||||
|
||||
export function imagePreloader(images, callback) {
|
||||
let counter = 0;
|
||||
|
|
@ -16,12 +16,20 @@ export function imagePreloader(images, callback) {
|
|||
}
|
||||
|
||||
export function shuffle(array) {
|
||||
// ф
|
||||
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
/**
|
||||
* Функция возвращает ориентацию игры в зависимости от размера canvas
|
||||
* @param {Object} canvas canvas object
|
||||
* @return {Bool} landscape_orientation
|
||||
*/
|
||||
export function setOrientation(canvas) {
|
||||
let landscape_orientation = null;
|
||||
|
||||
|
|
@ -30,8 +38,8 @@ export function setOrientation(canvas) {
|
|||
|
||||
if (config.debug)
|
||||
console.log(landscape_orientation ?
|
||||
'Canvas orientation set to landscape' :
|
||||
'Canvas orientation set to portrait');
|
||||
'Set game orientation to landscape' :
|
||||
'Set game orientation to portrait');
|
||||
|
||||
return landscape_orientation;
|
||||
}
|
||||
|
|
|
|||
242
js/index.bak.js
242
js/index.bak.js
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
'use strict';
|
||||
|
||||
// Import game configs and questsData -------------------
|
||||
import config from '../app/config.json'; // game configuration
|
||||
import gameData from '../app/gameData.json'; // game data
|
||||
import config from './config.json'; // game configuration
|
||||
import gameData from './gameData.json'; // game data
|
||||
|
||||
// Import engine libs -----------------------------------
|
||||
import * as Engine from './engine.js';
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
"scripts": {
|
||||
"start": "webpack serve",
|
||||
"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"
|
||||
},
|
||||
"repository": {
|
||||
|
|
@ -21,6 +22,7 @@
|
|||
"homepage": "https://github.com/emilecok/quizEngine#readme",
|
||||
"devDependencies": {
|
||||
"docsify-cli": "^4.4.3",
|
||||
"documentation": "^13.2.5",
|
||||
"webpack": "^5.42.0",
|
||||
"webpack-cli": "^4.7.2",
|
||||
"webpack-dev-server": "^3.11.2"
|
||||
|
|
|
|||
Loading…
Reference in New Issue