diff --git a/.gitignore b/.gitignore
index 504afef..0e92cb6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,5 @@
node_modules/
package-lock.json
+
+dist/
+game.js
diff --git a/game.js b/game.js
deleted file mode 100644
index 172b023..0000000
--- a/game.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-/******/ (() => { // webpackBootstrap
-/******/ "use strict";
-/******/ var __webpack_modules__ = ({
-
-/***/ "./src/js/index.js":
-/*!*************************!*\
- !*** ./src/js/index.js ***!
- \*************************/
-/***/ (() => {
-
-eval("\n\nlet DEBUG = true;\nlet canvas;\nlet context;\nlet cW;\nlet cH;\n\nlet dragging = false;\n\nfunction mMove(e) {\n if (dragging) {\n point.pX = e.offsetX * cW / canvas.clientWidth | 0;\n point.pY = e.offsetY * cH / canvas.clientHeight | 0;\n };\n}\n\nfunction mDown(e) {\n dragging = true;\n}\n\nfunction mUp(e) {\n dragging = false;\n}\n\nfunction clearContext() {\n context.fillStyle = '#b27e56';\n context.fillRect(0, 0, cW, cH);\n}\n\n// Init\nwindow.onload = function() {\n canvas = document.getElementById('game');\n context = canvas.getContext('2d');\n cW = canvas.width;\n cH = canvas.height;\n\n window.requestAnimationFrame(gameLoop);\n};\n\n// GameLoop\nfunction gameLoop(timeStamp) {\n update();\n draw();\n\n window.requestAnimationFrame(gameLoop);\n}\n\nfunction update() {\n\n}\n\nfunction draw() {\n clearContext();\n}\n\n\n//# sourceURL=webpack://quizEngine/./src/js/index.js?");
-
-/***/ })
-
-/******/ });
-/************************************************************************/
-/******/
-/******/ // startup
-/******/ // Load entry module and return exports
-/******/ // This entry module can't be inlined because the eval devtool is used.
-/******/ var __webpack_exports__ = {};
-/******/ __webpack_modules__["./src/js/index.js"]();
-/******/
-/******/ })()
-;
\ No newline at end of file
diff --git a/index.html b/index.html
index 27043c1..8864f7a 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
-
+
diff --git a/js/buttons.js b/js/buttons.js
new file mode 100644
index 0000000..260a6fd
--- /dev/null
+++ b/js/buttons.js
@@ -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;
+}
diff --git a/js/draw.js b/js/draw.js
new file mode 100644
index 0000000..8ef0d2a
--- /dev/null
+++ b/js/draw.js
@@ -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);
+}
diff --git a/js/index.js b/js/index.js
index eb8c806..85d68c2 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,65 +1,52 @@
'use strict';
-import config from '../config.json';
-import gameData from '../gameData.json';
+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;
-let context;
-let cW;
-let cH;
-let landscape = 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 button = null;
-
-let dragging = false;
-
-function mMove(e) {
- if (dragging) {
- point.pX = e.offsetX * cW / canvas.clientWidth | 0;
- point.pY = e.offsetY * cH / canvas.clientHeight | 0;
- };
-}
-
-function mDown(e) {
- dragging = true;
-}
-
-function mUp(e) {
- dragging = false;
-}
-
-function clearContext() {
- 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);
-}
-
-// Init
+// Init -------------------------------------------------
window.onload = function() {
+ // init canvas id and sizes
canvas = document.getElementById('game');
context = canvas.getContext('2d');
cW = canvas.width;
cH = canvas.height;
- if (cW >= cH) {
- landscape = true;
- }
- else {
- landscape = false;
- }
+ // 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
+
+// GameLoop ---------------------------------------------
function gameLoop(timeStamp) {
update();
draw();
@@ -67,11 +54,25 @@ function gameLoop(timeStamp) {
window.requestAnimationFrame(gameLoop);
}
+// Game update func -------------------------------------
function update() {
}
+// Draw to canvas func ----------------------------------
function draw() {
- clearContext();
+ 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 };
diff --git a/webpack.config.js b/webpack.config.js
index 5a2f84f..8133640 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,7 +5,7 @@ module.exports = {
mode: 'development',
output: {
// libraryExport: 'default',
- path: path.resolve(__dirname, 'dist'),
+ path: path.resolve(__dirname, '.'),
filename: 'game.js',
},
};