more modules
This commit is contained in:
parent
fae1bf49e3
commit
e8bfc0ae79
3
.gitignore
vendored
3
.gitignore
vendored
@ -1,2 +1,5 @@
|
||||
node_modules/
|
||||
package-lock.json
|
||||
|
||||
dist/
|
||||
game.js
|
||||
|
||||
33
game.js
33
game.js
@ -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"]();
|
||||
/******/
|
||||
/******/ })()
|
||||
;
|
||||
@ -7,7 +7,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<canvas id="game" width="450" height="800"></canvas>
|
||||
<canvas id="game" width="400" height="600"></canvas>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="game.js"></script>
|
||||
|
||||
14
js/buttons.js
Normal file
14
js/buttons.js
Normal 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
js/draw.js
Normal file
16
js/draw.js
Normal 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);
|
||||
}
|
||||
87
js/index.js
87
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 };
|
||||
|
||||
@ -5,7 +5,7 @@ module.exports = {
|
||||
mode: 'development',
|
||||
output: {
|
||||
// libraryExport: 'default',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
path: path.resolve(__dirname, '.'),
|
||||
filename: 'game.js',
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user