on cloud
This commit is contained in:
parent
a9f46c3631
commit
fae1bf49e3
GPG Key ID:
398FC73478D97286
8
config.json
Normal file
8
config.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"gameName": "quizEngine",
|
||||||
|
"gameVersion": [0, 0, 1],
|
||||||
|
|
||||||
|
"scene": {
|
||||||
|
"backGradient": ["#2f80ff", "#3ccbff"]
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
33
game.js
Normal file
33
game.js
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
/*
|
||||||
|
* 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"]();
|
||||||
|
/******/
|
||||||
|
/******/ })()
|
||||||
|
;
|
||||||
8
gameData.json
Normal file
8
gameData.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"question": "Что это такое?",
|
||||||
|
"image": "image.png",
|
||||||
|
"answer": [ "Мост", "Рудник", "Река", "Солнце" ],
|
||||||
|
"rightAnser": "мост"
|
||||||
|
}
|
||||||
|
]
|
||||||
15
index.html
Normal file
15
index.html
Normal 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="450" height="800"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="game.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
153
js/index.js
Normal file
153
js/index.js
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import config from '../config.json';
|
||||||
|
import gameData from '../gameData.json';
|
||||||
|
|
||||||
|
let DEBUG = true;
|
||||||
|
let canvas;
|
||||||
|
let context;
|
||||||
|
let cW;
|
||||||
|
let cH;
|
||||||
|
let landscape = true;
|
||||||
|
|
||||||
|
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
|
||||||
|
window.onload = function() {
|
||||||
|
canvas = document.getElementById('game');
|
||||||
|
context = canvas.getContext('2d');
|
||||||
|
cW = canvas.width;
|
||||||
|
cH = canvas.height;
|
||||||
|
|
||||||
|
if (cW >= cH) {
|
||||||
|
landscape = true;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
landscape = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
button = {
|
||||||
|
info: { x: 10, y: cH - 80, w: 70, h: 70 },
|
||||||
|
sfx: { x: cW - 80, y: cH - 80, w: 70, h: 70 },
|
||||||
|
}
|
||||||
|
|
||||||
|
window.requestAnimationFrame(gameLoop);
|
||||||
|
};
|
||||||
|
|
||||||
|
// GameLoop
|
||||||
|
function gameLoop(timeStamp) {
|
||||||
|
update();
|
||||||
|
draw();
|
||||||
|
|
||||||
|
window.requestAnimationFrame(gameLoop);
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
clearContext();
|
||||||
|
|
||||||
|
// 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];
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -4,6 +4,7 @@
|
|||||||
"description": "",
|
"description": "",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"build": "webpack",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
@ -18,6 +19,9 @@
|
|||||||
},
|
},
|
||||||
"homepage": "https://github.com/emilecok/quizEngine#readme",
|
"homepage": "https://github.com/emilecok/quizEngine#readme",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"docsify-cli": "^4.4.3"
|
"docsify-cli": "^4.4.3",
|
||||||
|
"webpack": "^5.42.0",
|
||||||
|
"webpack-cli": "^4.7.2",
|
||||||
|
"webpack-dev-server": "^3.11.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
20
styles.css
Normal file
20
styles.css
Normal 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;
|
||||||
|
}
|
||||||
11
webpack.config.js
Normal file
11
webpack.config.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: './js/index.js',
|
||||||
|
mode: 'development',
|
||||||
|
output: {
|
||||||
|
// libraryExport: 'default',
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
filename: 'game.js',
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user