From e8bfc0ae79befc36af47ae5c5a4d610fdcae0e11 Mon Sep 17 00:00:00 2001 From: Alexander Popov Date: Sun, 4 Jul 2021 19:42:03 +0300 Subject: [PATCH] more modules --- .gitignore | 3 ++ game.js | 33 ------------------ index.html | 2 +- js/buttons.js | 14 ++++++++ js/draw.js | 16 +++++++++ js/index.js | 87 ++++++++++++++++++++++++----------------------- webpack.config.js | 2 +- 7 files changed, 79 insertions(+), 78 deletions(-) delete mode 100644 game.js create mode 100644 js/buttons.js create mode 100644 js/draw.js 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', }, };