DHBW/Projektmanagement-Game
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

Update readme #2

Merged
H4CK3R-01 merged 8 commits from update_readme into main 2021-06-07 20:07:34 +00:00
Conversation 0 Commits 8 Files Changed 13 +42 -88
1 changed files with 42 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 678d6f8eb7 - Show all commits

130
public/js/game.js
View File

@ -1,4 +1,5 @@
let answer = null; let answer = null;
let show_card = false;
function Sprite(x, y) { function Sprite(x, y) {
this.sprite = PIXI.Sprite.from('/img/sprite.jpg'); this.sprite = PIXI.Sprite.from('/img/sprite.jpg');
@ -10,10 +11,6 @@ function Sprite(x, y) {
return this.sprite; return this.sprite;
} }
this.resize = function (sprite_size) {
this.setSize(this.sprite, sprite_size);
}
this.setSize = function (sprite, size) { this.setSize = function (sprite, size) {
sprite.x = this.coord_x * size - size * 0.2; sprite.x = this.coord_x * size - size * 0.2;
sprite.y = this.coord_y * size - size * 0.2; sprite.y = this.coord_y * size - size * 0.2;
@ -25,15 +22,16 @@ function Sprite(x, y) {
let game = document.getElementById('game'); let game = document.getElementById('game');
let game_board_size = calculate_size(); let game_board_size = 2000;
let size = calculate_size();
let sprite_size = Math.floor(game_board_size / 11); let sprite_size = Math.floor(game_board_size / 11);
const app = new PIXI.Application({ const app = new PIXI.Application({
autoResize: true, autoResize: true,
resolution: devicePixelRatio, resolution: devicePixelRatio,
backgroundAlpha: 0, backgroundAlpha: 0,
width: game_board_size, width: size / game_board_size,
height: game_board_size height: size / game_board_size
}); });
document.getElementById('game').appendChild(app.view); document.getElementById('game').appendChild(app.view);
@ -83,20 +81,27 @@ app.stage.addChild(third_circle);
// Card stacks // Card stacks
let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () { let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () {
console.log("1"); if(!show_card) {
generate_card("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores."); console.log("1");
}); generate_card("Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 1);
show_card = true;
}});
app.stage.addChild(cards_1); app.stage.addChild(cards_1);
let cards_2 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 5, 3, function () { let cards_2 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 5, 3, function () {
console.log("2"); if(!show_card) {
generate_card("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores."); console.log("2");
}); generate_card("Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 1);
show_card = true;
}});
app.stage.addChild(cards_2); app.stage.addChild(cards_2);
let cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 7, 3, function () { let cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 7, 3, function () {
console.log("3"); if(!show_card) {
generate_card("Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 1); console.log("3");
generate_card("Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 1);
show_card = true;
}
}); });
app.stage.addChild(cards_3); app.stage.addChild(cards_3);
@ -128,14 +133,14 @@ function generate_circle(graphics, x, y) {
function generate_card(s, a1, a2, a3, a4, right_a, d) { function generate_card(s, a1, a2, a3, a4, right_a, d) {
const style = new PIXI.TextStyle({ const style = new PIXI.TextStyle({
fontFamily: 'Arial', fontFamily: 'Arial',
fontSize: 20, fontSize: 60,
wordWrap: true, wordWrap: true,
wordWrapWidth: game_board_size * 0.5 - 20, wordWrapWidth: game_board_size * 0.5 - 20,
}); });
const header_style = new PIXI.TextStyle({ const header_style = new PIXI.TextStyle({
fontFamily: 'Arial', fontFamily: 'Arial',
fontSize: 25, fontSize: 70,
wordWrap: true, wordWrap: true,
wordWrapWidth: game_board_size * 0.5 - 20, wordWrapWidth: game_board_size * 0.5 - 20,
}); });
@ -143,19 +148,19 @@ function generate_card(s, a1, a2, a3, a4, right_a, d) {
const card = new PIXI.Graphics(); const card = new PIXI.Graphics();
let start_x = game_board_size * 0.25 + 2.5; let start_x = game_board_size * 0.25 + 2.5;
let start_y = game_board_size / 2 - game_board_size * 0.72 / 2 + 2.5; let start_y = game_board_size / 2 - game_board_size * 0.72 / 2 + 2.5;
card.lineStyle(5, 0x000000, 1); card.lineStyle(20, 0x6C9A8B, 1);
card.beginFill(0xffffff); card.beginFill(0xffffff);
card.drawRoundedRect(start_x, start_y, game_board_size * 0.5, game_board_size * 0.72, 10); card.drawRoundedRect(start_x, start_y, game_board_size * 0.5, game_board_size * 0.72, 10);
card.endFill(); card.endFill();
const header = new PIXI.Text("Schwierigkeit " + d, header_style); const header = new PIXI.Text("Schwierigkeit " + d, header_style);
header.x = start_x + 10 + card.width / 2 - header.width / 2 - 2.5 - 10; header.x = start_x + 20 + card.width / 2 - header.width / 2 - 2.5 - 20;
header.y = start_y + 10; header.y = start_y + 20;
card.addChild(header); card.addChild(header);
const basicText = new PIXI.Text(s, style); const basicText = new PIXI.Text(s, style);
basicText.x = start_x + 10; basicText.x = start_x + 20;
basicText.y = start_y + 20 + header.height; basicText.y = start_y + 50 + header.height;
card.addChild(basicText); card.addChild(basicText);
@ -189,15 +194,14 @@ function generate_card(s, a1, a2, a3, a4, right_a, d) {
card.addChild(answer_4_text); card.addChild(answer_4_text);
// OK-Button // OK-Button
const ok = new PIXI.Graphics(); const ok = new PIXI.Graphics();
ok.lineStyle(2, 0x000000, 1); ok.lineStyle(4, 0x000000, 1);
ok.beginFill(0xffffff); ok.beginFill(0xffffff);
ok.drawRect(start_x, start_y, game_board_size * 0.5 - 20, 50); ok.drawRect(start_x, start_y, game_board_size * 0.5 - 40, 100);
ok.endFill(); ok.endFill();
ok.x = 10; ok.x = 20;
ok.y = game_board_size * 0.72 - 60; ok.y = game_board_size * 0.72 - 120;
card.addChild(ok); card.addChild(ok);
const ok_text = new PIXI.Text('OK', style); const ok_text = new PIXI.Text('OK', style);
@ -207,11 +211,12 @@ function generate_card(s, a1, a2, a3, a4, right_a, d) {
ok.interactive = true; ok.interactive = true;
ok.on('click', function () { ok.on('click', function () {
if(right_a === answer) { if (right_a === answer) {
console.log("Richtig") console.log("Richtig")
} else { } else {
console.log("Falsch") console.log("Falsch")
} }
show_card = false;
card.destroy(); card.destroy();
}); });
@ -220,9 +225,9 @@ function generate_card(s, a1, a2, a3, a4, right_a, d) {
function select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y, id) { function select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y, id) {
if(answer === null) { if (answer === null) {
answer = id; answer = id;
switch(answer) { switch (answer) {
case 1: case 1:
draw_rect(answer_1, 0xff00ff, start_x, start_y); draw_rect(answer_1, 0xff00ff, start_x, start_y);
break; break;
@ -250,17 +255,17 @@ function select_answer(answer_1, answer_2, answer_3, answer_4, start_x, start_y,
function draw_rect(answer, color, start_x, start_y) { function draw_rect(answer, color, start_x, start_y) {
answer.clear(); answer.clear();
answer.lineStyle(2, 0x000000, 1); answer.lineStyle(4, 0x000000, 1);
answer.beginFill(color); answer.beginFill(color);
answer.drawRect(start_x, start_y, game_board_size * 0.5 - 20, 75); answer.drawRect(start_x, start_y, game_board_size * 0.5 - 40, 150);
answer.endFill(); answer.endFill();
} }
function generate_answer_button(answer, y, start_x, start_y, onclick) { function generate_answer_button(answer, y, start_x, start_y, onclick) {
draw_rect(answer, 0xffffff, start_x, start_y); draw_rect(answer, 0xffffff, start_x, start_y);
answer.x = 10; answer.x = 20;
answer.y = game_board_size * 0.72 - 60 - 85 * y; answer.y = game_board_size * 0.72 - 120 - 170 * y;
answer.interactive = true; answer.interactive = true;
answer.on('click', onclick); answer.on('click', onclick);
@ -269,7 +274,6 @@ function generate_answer_button(answer, y, start_x, start_y, onclick) {
} }
function generate_answer_text(answer_text, rect, start_x, start_y) { function generate_answer_text(answer_text, rect, start_x, start_y) {
console.log(rect.width)
answer_text.x = start_x + rect.x + rect.width / 2 - answer_text.width / 2; answer_text.x = start_x + rect.x + rect.width / 2 - answer_text.width / 2;
answer_text.y = start_y + rect.y + rect.height / 2 - answer_text.height / 2; answer_text.y = start_y + rect.y + rect.height / 2 - answer_text.height / 2;
return answer_text return answer_text
@ -287,60 +291,10 @@ function calculate_size() {
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
function resize() { function resize() {
game_board_size = calculate_size(); let size = calculate_size();
sprite_size = Math.floor(game_board_size / 11); app.stage.scale.set(size / game_board_size, size / game_board_size);
// Resize container
app.renderer.resize(game_board_size, game_board_size);
// Resize fields
for (let i = 0; i < 16; i++) {
sprites[i].resize(Math.floor(game_board_size / 11));
}
// Resize red border
red_border.clear();
red_border = generate_red_border(new PIXI.Graphics());
app.stage.addChild(red_border);
// Resize circles
first_circle.clear();
first_circle = generate_circle(new PIXI.Graphics(), 3, 9);
app.stage.addChild(first_circle);
second_circle.clear();
second_circle = generate_circle(new PIXI.Graphics(), 5, 9);
app.stage.addChild(second_circle);
third_circle.clear();
third_circle = generate_circle(new PIXI.Graphics(), 7, 9);
app.stage.addChild(third_circle);
// card stacks
cards_1.destroy();
cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () {
console.log("1");
generate_card("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.");
});
app.stage.addChild(cards_1);
cards_2.destroy();
cards_2 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 5, 3, function () {
console.log("2");
generate_card("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.");
});
app.stage.addChild(cards_2);
cards_3.destroy();
cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 7, 3, function () {
console.log("3");
generate_card("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.");
});
app.stage.addChild(cards_3);
// card
app.renderer.resize(size, size)
} }
resize(); resize();