git/TheMathWizard
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

removed not needed code and cleaned up the codebase

Browse source
This commit is contained in:
Patryk Hegenberg 2023-01-17 08:40:11 +01:00
parent d945a8be8c
commit a711b804e1
5 changed files with 82 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

73
handout.tex Normal file
View file

@ -0,0 +1,73 @@
%!TeX encoding=utf8
\documentclass[fontsize:11pt]{article}
\usepackage{graphicx}
\usepackage{blindtext}
%---Language and umlauts
\usepackage[utf8]{inputenc} % UTF-8 Kodierung - ä, ö, ü, ß direkt eingeben
\renewcommand\familydefault{\sfdefault}
\usepackage[ngerman]{babel} % Neue deutsche Rechtschreibung
\usepackage[expansion=true, protrusion=true]{microtype} % Bessere Silbentrennung
%\usepackage[scaled]{helvet}
% Papierformat: DIN-A4, mit wenig Rand
\usepackage[
a4paper,
left=20mm,
right=20mm,
top=20mm,
bottom=20mm,
includefoot,
footskip=8mm
]{geometry}
% Literaturverzeichnis
\usepackage[style=alphabetic,sorting=ynt,backend=biber]{biblatex}
% Zeilenabstand
\usepackage[onehalfspacing]{setspace}
% Definition der Kopf- und Fußzeile
\usepackage[headsepline,automark]{scrlayer-scrpage}
\clearpairofpagestyles
\setlength{\headheight}{2.5\baselineskip}
\setlength{\footheight}{1\baselineskip}
\ihead[]{}
\chead[]{\author}
\ohead[]{Datum: \today}
\cfoot[]{\pagemark}
\usepackage{titlesec}
\usepackage{csquotes}
%titlepage information
\title{Entwicklung einer Lernplattform für Grundschüler}
\author{Patryk Hegenberg}
\date{\today}
\addbibresource{Literatur.bib}
\begin{document}
\maketitle
Eingereciht von:
\thispagestyle{empty}
\section{Einleitung}
\section{Anforderung}
\section{Aufbau der Lösung}
\section{Aufbau der Datenbank}
\section{Technische Lösung}
\section{Installationshinweise}
\section{Fazit und Reflektion}
\end{document}

69
scripts/game.js
View file

@ -113,51 +113,35 @@
// www.roguebasin.com/index.php?title=Rot.js_tutorial,_part_1 // www.roguebasin.com/index.php?title=Rot.js_tutorial,_part_1
const Game = { const Game = {
// this is the ROT.js display handler
display: null, display: null,
// this is our map data
map: {}, map: {},
// map of all items
items: {}, items: {},
// reference to the ROT.js engine which
// manages stuff like scheduling
engine: null, engine: null,
// schedules events in the game for ROT.js
scheduler: null, scheduler: null,
// reference to the player object
player: null, player: null,
// reference to the game monsters array
monsters: null, monsters: null,
door: null, door: null,
// arrow handler lastArrow: null,
lastArrow: null, // arrow keys held arrowInterval: null,
arrowInterval: null, // arrow key repeat arrowListener: null,
arrowListener: null, // registered listener for arrow event
// clean up this game instance
cleanup: cleanup, cleanup: cleanup,
playerAllowedToMove: true, playerAllowedToMove: true,
}; };
// this gets called by the menu system
// to launch the actual game
function init(game) { function init(game) {
game.map = {}; game.map = {};
game.items = {}; game.items = {};
// first create a ROT.js display manager
game.display = new ROT.Display(tileOptions); game.display = new ROT.Display(tileOptions);
resetCanvas(game.display.getContainer()); resetCanvas(game.display.getContainer());
generateMap(game, count); generateMap(game, count);
// let ROT.js schedule the player and monster entities
game.scheduler = new ROT.Scheduler.Simple(); game.scheduler = new ROT.Scheduler.Simple();
game.scheduler.add(game.player, true); game.scheduler.add(game.player, true);
game.monsters.map((m) => game.scheduler.add(m, true)); game.monsters.map((m) => game.scheduler.add(m, true));
// render the stats hud at the bottom of the screen
renderStats(game.player.stats); renderStats(game.player.stats);
// kick everything off
game.engine = new ROT.Engine(game.scheduler); game.engine = new ROT.Engine(game.scheduler);
game.engine.start(); game.engine.start();
count = 1; count = 1;
@ -177,28 +161,20 @@
}; };
generateMap(game, stage); generateMap(game, stage);
// let ROT.js schedule the player and monster entities
game.scheduler = new ROT.Scheduler.Simple(); game.scheduler = new ROT.Scheduler.Simple();
game.scheduler.add(game.player, true); game.scheduler.add(game.player, true);
game.monsters.map((m) => game.scheduler.add(m, true)); game.monsters.map((m) => game.scheduler.add(m, true));
// render the stats hud at the bottom of the screen
game.player.stats = stats; game.player.stats = stats;
renderStats(game.player.stats); renderStats(game.player.stats);
// kick everything off
game.engine = new ROT.Engine(game.scheduler); game.engine = new ROT.Engine(game.scheduler);
game.engine.start();; game.engine.start();;
} }
// this gets called at the end of the game when we want
// to exit back out and clean everything up to display
// the menu and get ready for next round
function destroy(game) { function destroy(game) {
// remove all listening event handlers
removeListeners(game); removeListeners(game);
// tear everything down
if (game.engine) { if (game.engine) {
game.engine.lock(); game.engine.lock();
game.display = null; game.display = null;
@ -213,18 +189,13 @@
game.stairs = null; game.stairs = null;
} }
// hide the toast message
hideToast(true); hideToast(true);
// close out the game screen and show the title
showScreen("title"); showScreen("title");
} }
// this generates the game map
function generateMap(game, stage) { function generateMap(game, stage) {
const digger = new ROT.Map.Digger(tileOptions.width, tileOptions.height); const digger = new ROT.Map.Digger(tileOptions.width, tileOptions.height);
// list of floor tiles that can be walked on
const freeCells = []; const freeCells = [];
// list of non-floor tiles that can't be traversed
const zeroCells = []; const zeroCells = [];
const digCallback = function (x, y, value) { const digCallback = function (x, y, value) {
@ -251,7 +222,6 @@
game.monsters.push(createBeing(makeMonster, freeCells)); game.monsters.push(createBeing(makeMonster, freeCells));
} }
// draw the map and items
for (let key in game.map) { for (let key in game.map) {
drawTile(game, key); drawTile(game, key);
} }
@ -347,7 +317,6 @@
} }
} }
// both the player and monster initial position is set
function createBeing(what, freeCells) { function createBeing(what, freeCells) {
if (what == makePlayer) { if (what == makePlayer) {
const pos = posFromKey(freeCells[0]); const pos = posFromKey(freeCells[0]);
@ -365,18 +334,13 @@
*** the player *** *** the player ***
******************/ ******************/
// creates a player object with position, and stats
function makePlayer(x, y) { function makePlayer(x, y) {
return { return {
// player's position
_x: x, _x: x,
_y: y, _y: y,
character: "@", character: "@",
name: statsOfPlayer['username'].replace('"',''), name: statsOfPlayer['username'].replace('"',''),
// the player's stats
stats: { hp: 10, xp: 0, gold: 0 }, stats: { hp: 10, xp: 0, gold: 0 },
// the ROT.js scheduler calls this method when it is time
// for the player to act
act: () => { act: () => {
Game.engine.lock(); Game.engine.lock();
if (!Game["arrowListener"]) { if (!Game["arrowListener"]) {
@ -387,7 +351,6 @@
}; };
} }
// this method gets called by the `movePlayer` function
function checkItem(entity) { function checkItem(entity) {
const key = entity._x + "," + entity._y; const key = entity._x + "," + entity._y;
if (key == Game.door) { if (key == Game.door) {
@ -421,7 +384,6 @@
return; return;
} }
// check if we've hit the monster
const hitMonster = monsterAt(x, y); const hitMonster = monsterAt(x, y);
if (hitMonster) { if (hitMonster) {
setTimeout(function () { setTimeout(function () {
@ -432,20 +394,16 @@
drawTile(Game, p._x + "," + p._y, p); drawTile(Game, p._x + "," + p._y, p);
// update the player's coordinates
p._x = x; p._x = x;
p._y = y; p._y = y;
// re-draw the player
for (let key in Game.map) { for (let key in Game.map) {
drawTile(Game, key); drawTile(Game, key);
} }
// re-locate the game screen to center the player
rescale(x, y, Game); rescale(x, y, Game);
window.removeEventListener("arrow", arrowEventHandler); window.removeEventListener("arrow", arrowEventHandler);
Game.engine.unlock(); Game.engine.unlock();
sfx["step"].play(); sfx["step"].play();
// check if the player stepped on an item
checkItem(p); checkItem(p);
} }
} }
@ -454,7 +412,6 @@
*** The monster *** *** The monster ***
*******************/ *******************/
// basic ROT.js entity with position and stats
function makeMonster(x, y) { function makeMonster(x, y) {
if (count === 5) { if (count === 5) {
return { return {
@ -478,13 +435,11 @@
}; };
} else { } else {
return { return {
// monster position
_x: x, _x: x,
_y: y, _y: y,
character: "a", character: "a",
name: "Kleiner Orc", name: "Kleiner Orc",
stats: { hp: 3 }, stats: { hp: 3 },
// called by the ROT.js scheduler
act: monsterAct, act: monsterAct,
}; };
} }
@ -540,7 +495,6 @@
: null; : null;
} }
// if the monster is dead remove it from the game
function checkDeath(m) { function checkDeath(m) {
if (m.stats.hp <= 0) { if (m.stats.hp <= 0) {
if (m == Game.player) { if (m == Game.player) {
@ -556,7 +510,6 @@
} }
} }
// remove a monster from the game
function removeMonster(m) { function removeMonster(m) {
const key = m._x + "," + m._y; const key = m._x + "," + m._y;
Game.scheduler.remove(m); Game.scheduler.remove(m);
@ -567,7 +520,6 @@
/****************************** /******************************
*** combat/win/lose events *** *** combat/win/lose events ***
******************************/ ******************************/
// this is how the player fights a monster
function checkSolution(solution, answer) { function checkSolution(solution, answer) {
if (solution == answer) { if (solution == answer) {
return true; return true;
@ -661,7 +613,6 @@
Game.engine.unlock(); Game.engine.unlock();
} }
// this gets called when the player wins the game
function win() { function win() {
Game.engine.lock(); Game.engine.lock();
Game.player.stats.xp += 10; Game.player.stats.xp += 10;
@ -670,17 +621,13 @@
sfx["win"].play(); sfx["win"].play();
}, 100 * i); }, 100 * i);
} }
// set our stats for the end screen
setEndScreenValues(Game.player.stats.xp, Game.player.stats.gold); setEndScreenValues(Game.player.stats.xp, Game.player.stats.gold);
// tear down the game
destroy(Game); destroy(Game);
showScreen("win"); showScreen("win");
} }
// this gets called when the player loses the game
function lose() { function lose() {
Game.engine.lock(); Game.engine.lock();
// change the player into a tombstone tile
const p = Game.player; const p = Game.player;
p.character = "T"; p.character = "T";
drawTile(Game, p._x + "," + p._y); drawTile(Game, p._x + "," + p._y);
@ -688,7 +635,6 @@
sfx["lose"].play(); sfx["lose"].play();
setTimeout(function () { setTimeout(function () {
setEndScreenValues(Game.player.stats.xp, Game.player.stats.gold); setEndScreenValues(Game.player.stats.xp, Game.player.stats.gold);
// tear down the game
destroy(Game); destroy(Game);
showScreen("lose"); showScreen("lose");
}, 2000); }, 2000);
@ -704,7 +650,6 @@
const $$ = document.querySelectorAll.bind(document); const $$ = document.querySelectorAll.bind(document);
NodeList.prototype.forEach = Array.prototype.forEach; NodeList.prototype.forEach = Array.prototype.forEach;
// this code resets the ROT.js display canvas
function resetCanvas(el) { function resetCanvas(el) {
$("#canvas").innerHTML = ""; $("#canvas").innerHTML = "";
$("#canvas").appendChild(el); $("#canvas").appendChild(el);
@ -758,7 +703,6 @@
} }
} }
// hides all screens and shows the requested screen
function showScreen(which, ev) { function showScreen(which, ev) {
ev && ev.preventDefault(); ev && ev.preventDefault();
const el = $("#" + which); const el = $("#" + which);
@ -776,7 +720,6 @@
} }
} }
// set the end-screen message
function setEndScreenValues(xp, gold) { function setEndScreenValues(xp, gold) {
$$(".xp-stat").forEach((el) => (el.textContent = Math.floor(xp))); $$(".xp-stat").forEach((el) => (el.textContent = Math.floor(xp)));
$$(".gold-stat").forEach((el) => (el.textContent = gold)); $$(".gold-stat").forEach((el) => (el.textContent = gold));
@ -803,7 +746,6 @@
xhr.send(json); xhr.send(json);
} }
// updates the stats listed at the bottom of the screen
function renderStats(stats) { function renderStats(stats) {
const st = $("#hud"); const st = $("#hud");
st.innerHTML = ""; st.innerHTML = "";
@ -859,7 +801,6 @@
} }
} }
// create an HTML element
function el(tag, attrs, children) { function el(tag, attrs, children) {
const node = document.createElement(tag); const node = document.createElement(tag);
for (a in attrs) { for (a in attrs) {
@ -875,13 +816,11 @@
return node; return node;
} }
// add an HTML element to a parent node
function attach(node, el) { function attach(node, el) {
node.appendChild(el); node.appendChild(el);
return el; return el;
} }
// remove an element from the dom
function rmel(node) { function rmel(node) {
node.parentNode.removeChild(node); node.parentNode.removeChild(node);
} }
@ -972,12 +911,10 @@
*** Startup *** *** Startup ***
***************/ ***************/
// this code is called at load time and sets the game title
document.querySelectorAll(".game-title-text").forEach(function (t) { document.querySelectorAll(".game-title-text").forEach(function (t) {
t.textContent = gametitle; t.textContent = gametitle;
}); });
// listen for the start game button
$("#play").addEventListener(clickevt, startGame); $("#play").addEventListener(clickevt, startGame);
if (w["rbb"]) { if (w["rbb"]) {

26
styles/game.css
View file

@ -52,8 +52,6 @@ a:hover {
text-decoration: none; text-decoration: none;
} }
/*** NES.css overrides ***/
.nes-container.is-rounded.is-dark { .nes-container.is-rounded.is-dark {
border-image-slice: 9 9 9 9 fill; border-image-slice: 9 9 9 9 fill;
border-image-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAphgAAKYYBIuzfjAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABgSURBVEiJY2AYBQQAIzGK/v///x+rZkZGgvqZSHURqYDmFrDgkkAOFikpZYJqcAXX0A8iFG8REyy4wLNndxGGIgXX0A+iUQsIApxlCTEpClfKQQbDOIiQwcgurkcBQQAARlMedugABy8AAAAASUVORK5CYII='); border-image-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAphgAAKYYBIuzfjAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABgSURBVEiJY2AYBQQAIzGK/v///x+rZkZGgvqZSHURqYDmFrDgkkAOFikpZYJqcAXX0A8iFG8REyy4wLNndxGGIgXX0A+iUQsIApxlCTEpClfKQQbDOIiQwcgurkcBQQAARlMedugABy8AAAAASUVORK5CYII=');
@ -65,8 +63,6 @@ a:hover {
background: none; background: none;
} }
/*** screens ***/
.screen { .screen {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -89,7 +85,7 @@ a:hover {
} }
#title { #title {
background-image: url(./../images/bg.png); background-image: url(./../images/HeroBanner.png);
background-size: cover; background-size: cover;
animation: 20s para infinite ease; animation: 20s para infinite ease;
} }
@ -279,22 +275,6 @@ a:hover {
background-position: -8px -48px; background-position: -8px -48px;
} }
.grow-fade {
animation: grow-fade 2s linear;
}
@keyframes grow-fade {
from {
transform: translate(0px, 0px) scale(8);
opacity: 0.5;
}
to {
transform: translate(0px, 0px) scale(16);
opacity: 0;
}
}
#play { #play {
width: 400px; width: 400px;
max-width: 90%; max-width: 90%;
@ -305,8 +285,6 @@ a:hover {
background-size: 20%; background-size: 20%;
} }
/*** HUD ***/
#hud { #hud {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
@ -347,8 +325,6 @@ a:hover {
} }
} }
/*** CSS animations ***/
.fade-in { .fade-in {
animation: fade-in 0.8s; animation: fade-in 0.8s;
display: flex; display: flex;

8
views/game.view.php
View file

@ -75,8 +75,8 @@
<a href="https://ondras.github.io/rot.js/hp/" <a href="https://ondras.github.io/rot.js/hp/"
target="_blank">ROT.js</a></li> target="_blank">ROT.js</a></li>
<li>Tiles by <li>Tiles by
<a href="https://kenney.nl/assets/micro-roguelike" <a href="https://0x72.itch.io/16x16-dungeon-tileset"
target="_blank">kenney.nl</a></li> target="_blank">0x72</a></li>
<li>Styles from <li>Styles from
<a href="https://nostalgic-css.github.io/NES.css/" <a href="https://nostalgic-css.github.io/NES.css/"
target="_blank">NESS.css</a></li> target="_blank">NESS.css</a></li>
@ -86,6 +86,8 @@
<li>Pixel coin by <li>Pixel coin by
<a href="https://opengameart.org/content/spinning-pixel-coin-0" <a href="https://opengameart.org/content/spinning-pixel-coin-0"
target="_blank">irmirx</a></li> target="_blank">irmirx</a></li>
<li>Parts of the Gamelogic and Design by
<a href="http://roguebasin.com/index.php/Roguelike_Browser_Boilerplate">chr15m</a</li>
</ul> </ul>
</div> </div>
<button class="nes-btn is-success action">Ok</button> <button class="nes-btn is-success action">Ok</button>
@ -106,7 +108,6 @@
<div id="win" class="screen modal"> <div id="win" class="screen modal">
<p class="nes-container is-rounded is-dark">Win!</p> <p class="nes-container is-rounded is-dark">Win!</p>
<div class="nes-container is-rounded is-dark"> <div class="nes-container is-rounded is-dark">
<p><div class="sprite amulet"></div></p>
<p>Du hast das Spiel gewonnen.</p> <p>Du hast das Spiel gewonnen.</p>
<p>Du hast <span class="gold-stat"></span> Gold und <span class="xp-stat"></span> XP erhalten.</p> <p>Du hast <span class="gold-stat"></span> Gold und <span class="xp-stat"></span> XP erhalten.</p>
</div> </div>
@ -117,7 +118,6 @@
<div id="lose" class="screen modal"> <div id="lose" class="screen modal">
<p>Lose!</p> <p>Lose!</p>
<div class="nes-container is-rounded is-dark"> <div class="nes-container is-rounded is-dark">
<div class="sprite tomb"></div>
<p>Oh nein, die Monster haben dich erwischt.</p> <p>Oh nein, die Monster haben dich erwischt.</p>
<p>Du bist tot.</p> <p>Du bist tot.</p>
<p>Du hast <span class="gold-stat"></span> Gold und <span class="xp-stat"></span> XP erhalten.</p> <p>Du hast <span class="gold-stat"></span> Gold und <span class="xp-stat"></span> XP erhalten.</p>