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

Уборка

Browse Source
This commit is contained in:
Alexander Popov
2021-07-04 19:56:18 +03:00
parent e8bfc0ae79
commit 3f51cd79d9
10 changed files with 4 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/config.json Normal file
View File

@@ -0,0 +1,8 @@
{
"gameName": "quizEngine",
"gameVersion": [0, 0, 1],
"scene": {
"backGradient": ["#2f80ff", "#3ccbff"]
}
}

BIN
app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

8
app/gameData.json Normal file
View File

@@ -0,0 +1,8 @@
[
{
"question": "Что это такое?",
"image": "image.png",
"answer": [ "Мост", "Рудник", "Река", "Солнце" ],
"rightAnser": "мост"
}
]

15
app/index.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>quizEngine</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<canvas id="game" width="400" height="600"></canvas>
</div>
<script type="text/javascript" src="dist/game.js"></script>
</body>
</html>

14
app/js/buttons.js Normal file
View File

@@ -0,0 +1,14 @@
// функции обработки кнопок
export function getMousePos(canvas, event) {
let rect = canvas.getBoundingClientRect();
return {
x: event.clientX - rect.left,
y: event.clientY - rect.top,
};
}
export function isInside(mousePos, rect) {
return mousePos.x > rect.x && mousePos.x < rect.x + rect.w && mousePos.y < rect.y + rect.h && mousePos.y > rect.y;
}

16
app/js/draw.js Normal file
View File

@@ -0,0 +1,16 @@
// функции рисоввания
export function clearContext(canvas, config) {
// var:canvas -- канвас, на котором рисуем
// var:config -- используется для получения цветов фона градиента сцены
let cW = canvas.width;
let cH = canvas.height;
let context = canvas.getContext('2d');
let graBack = context.createLinearGradient(cW / 2, 0, cW / 2, cH);
graBack.addColorStop(0, config.scene.backGradient[0]);
graBack.addColorStop(1, config.scene.backGradient[1]);
context.fillStyle = graBack;
context.fillRect(0, 0, cW, cH);
}

154
app/js/index.js Normal file
View File

@@ -0,0 +1,154 @@
'use strict';
import config from '../config.json'; // game configuration
import gameData from '../gameData.json'; // game data
import { getMousePos, isInside } from './buttons.js';
import { clearContext } from './draw.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.)
// 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; }
button = {
info: { x: 10, y: cH - 80, w: 70, h: 70 },
sfx: { x: cW - 80, y: cH - 80, w: 70, h: 70 },
}
canvas.addEventListener('click', function(evt) {
let mousePos = getMousePos(canvas, evt);
// bet inscrease
if (isInside(mousePos, button.info)) {
console.log("info");
}
}, false);
window.requestAnimationFrame(gameLoop);
};
// GameLoop ---------------------------------------------
function gameLoop(timeStamp) {
update();
draw();
window.requestAnimationFrame(gameLoop);
}
// Game update func -------------------------------------
function update() {
}
// Draw to canvas func ----------------------------------
function draw() {
clearContext(canvas, config); // flush?! canvas
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
context.strokeRect(10, cH - 390, cW - 20, 300);
}
// draw image ------------------------------------------
// let imageSize = { w: 320, h: 140 };
// let graImage = context.createLinearGradient(cW / 2 - imageSize.w / 2, cH / 2 - imageSize.h / 2, cW / 2 - imageSize.w / 2 + imageSize.w, cH / 2 - imageSize.h / 2 + imageSize.h);
// graImage.addColorStop(0, "#ff4ba7");
// graImage.addColorStop(1, "#ffda64");
// context.fillStyle = graImage;
// context.fillRect(cW / 2 - imageSize.w / 2, cH / 2 - imageSize.h / 2,
// imageSize.w, imageSize.h);
// draw quest ------------------------------------------
context.font = "32px Ubuntu";
context.textAlign = "center";
context.fillStyle = "white";
context.fillText(gameData[0].question, cW / 2, cH - 420);
// draw buttons ------------------------------------------
let graButton = context.createLinearGradient(0, 0, cW / 2, cH / 2);
graButton.addColorStop(0, "#3fff7c");
graButton.addColorStop(1, "#3ffbe0");
context.fillStyle = graButton;
function centerW(size) {
return cW / 2 - size / 2;
}
function centerH(size) {
return cH / 2 - size / 2;
}
context.fillRect(centerW(cW / 1.5), cH - 380, cW / 1.5, 50);
context.fillRect(centerW(cW / 1.5), cH - 320, cW / 1.5, 50);
context.fillRect(centerW(cW / 1.5), cH - 260, cW / 1.5, 50);
context.fillRect(centerW(cW / 1.5), cH - 200, cW / 1.5, 50);
context.strokeStyle = "navy";
context.lineWidth = 2;
context.strokeRect(centerW(cW / 1.5), cH - 380, cW / 1.5, 50);
context.strokeRect(centerW(cW / 1.5), cH - 320, cW / 1.5, 50);
context.strokeRect(centerW(cW / 1.5), cH - 260, cW / 1.5, 50);
context.strokeRect(centerW(cW / 1.5), cH - 200, cW / 1.5, 50);
context.font = "32px Ubuntu";
context.textAlign = "center";
context.fillStyle = "white";
for (let i = 0; i < 4; i++) {
switch(i) {
case 0:
context.fillText(gameData[0].answer[i], cW / 2, cH - 380 + 35);
break;
case 1:
context.fillText(gameData[0].answer[i], cW / 2, cH - 320 + 35);
break;
case 2:
context.fillText(gameData[0].answer[i], cW / 2, cH - 260 + 35);
break;
case 3:
context.fillText(gameData[0].answer[i], cW / 2, cH - 200 + 35);
break;
}
}
// UI ------------------------------------------
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
let q = 10;
for (var i = 1; i <= q - 1; i++) {
q[i];
}
}

20
app/styles.css Normal file
View File

@@ -0,0 +1,20 @@
html { height: 100%; }
body {
background-color: #6E5967;
padding: 0;
margin: 0;
height: 100%;
}
div.container {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
canvas#game {
margin: 0 auto;
display: block;
}