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

Implement dice

Browse Source
This commit is contained in:
Administrator
2021-06-09 14:11:47 +02:00
parent d47456c184
commit 6de03184f4
4 changed files with 278 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
public/js/Card.js
View File

@@ -48,19 +48,19 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
this.card.addChild(basicText);
// Answers
this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 4, this.a1.text, this.a1.status, true, function () {
this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 4, this.a1.text, this.a1.status, true, function () {
select_answer(0, _this.a1.text);
}));
this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 3, this.a2.text, this.a2.status, true, function () {
this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 3, this.a2.text, this.a2.status, true, function () {
select_answer(1, _this.a2.text);
}));
this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 2, this.a3.text, this.a3.status, true, function () {
this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 2, this.a3.text, this.a3.status, true, function () {
select_answer(2, _this.a3.text);
}));
this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 1, this.a4.text, this.a4.status, true, function () {
this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 1, this.a4.text, this.a4.status, true, function () {
select_answer(3, _this.a4.text);
}));
@@ -69,17 +69,26 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
// OK-Button
this.card.addChild(new Button(0xffffff, 0xcccccc, 0xffffff, this.card_width - 40, 100, this.card_x + 20, this.card_y + this.card_height - 120, "OK", null, false, function () {
if (_this.right_answer === answer) {
console.log("Richtig")
if (answer !== null) {
if (_this.right_answer === answer) {
console.log("Richtig");
} else {
console.log("Falsch");
}
show_card = false;
answer = null;
diced = false;
rolled_number = null;
rolled_number_text.destroy();
border_card_stack.clear();
_this.card.destroy();
} else {
console.log("Falsch")
alert("Bitte wähle eine Antwortmöglichkeit aus");
}
show_card = false;
_this.card.destroy();
}).getButton());
app.stage.addChild(this.card);
}
};
function select_answer(id, text) {

133
public/js/game.js
View File

@@ -1,13 +1,66 @@
/*
Images
background.jpg: https://www.lignaushop.de/images/product_images/popup_images/treppenstufe-buecherregal-fensterbank-eiche-country-rustikal-unbehandelt-wuppertal.JPG
card_stack.png: https://www.google.de/url?sa=i&url=https%3A%2F%2Fwww.pngegg.com%2Fpt%2Fsearch%3Fq%3Drainha%2Bde%2Bcopas&psig=AOvVaw3wwfk87wAXBxqmdXnoGSfe&ust=1623254731054000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCMjUoaG1iPECFQAAAAAdAAAAABA5
dice.svg: https://www.svgrepo.com/download/198836/gambler-casino.svg
sprite.jpg: https://media.istockphoto.com/photos/gray-granite-stone-texture-seamless-square-background-tile-ready-picture-id1096464726
*/
let curr_player = 1;
let player_array = [1, 1, 1, 1];
let player_color = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00];
let player_sprite_array = [];
let answer = null;
let show_card = false;
let diced = false;
let rolled_number = null;
let game = document.getElementById('game');
let app;
let border_card_stack = new PIXI.Graphics();
let game_board_size = 2000;
let max_size = calculate_size();
let sprite_size = Math.floor(game_board_size / 11);
const rolled_number_style = new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 140,
fontWeight: 'bold',
wordWrap: true,
wordWrapWidth: game_board_size * 0.5 - 20,
});
let rolled_number_text = new PIXI.Text("", rolled_number_style);
// fields
let sprites = [
// First row
new Sprite(1, 1),
new Sprite(3, 1),
new Sprite(5, 1),
new Sprite(7, 1),
new Sprite(9, 1),
// Second row
new Sprite(1, 3),
new Sprite(9, 3),
// Third row
new Sprite(1, 5),
new Sprite(9, 5),
// Fourth row
new Sprite(1, 7),
new Sprite(9, 7),
// Fifth row
new Sprite(1, 9),
new Sprite(3, 9),
new Sprite(5, 9),
new Sprite(7, 9),
new Sprite(9, 9),
];
function start_game() {
app = new PIXI.Application({
autoResize: true,
@@ -18,36 +71,6 @@ function start_game() {
});
document.getElementById('game').appendChild(app.view);
// fields
let sprites = [
// First row
new Sprite(1, 1),
new Sprite(3, 1),
new Sprite(5, 1),
new Sprite(7, 1),
new Sprite(9, 1),
// Second row
new Sprite(1, 3),
new Sprite(9, 3),
// Third row
new Sprite(1, 5),
new Sprite(9, 5),
// Fourth row
new Sprite(1, 7),
new Sprite(9, 7),
// Fifth row
new Sprite(1, 9),
new Sprite(3, 9),
new Sprite(5, 9),
new Sprite(7, 9),
new Sprite(9, 9),
]
sprites.forEach(sprite => app.stage.addChild(sprite.getSprite()));
@@ -69,7 +92,7 @@ function start_game() {
// Card stacks
let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () {
if (!show_card) {
if (!show_card && rolled_number === 1) {
console.log("1");
socket.emit('get card', 1);
}
@@ -77,7 +100,7 @@ function start_game() {
app.stage.addChild(cards_1);
let cards_2 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 5, 3, function () {
if (!show_card) {
if (!show_card && rolled_number === 2) {
console.log("2");
socket.emit('get card', 2);
}
@@ -85,21 +108,51 @@ function start_game() {
app.stage.addChild(cards_2);
let cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 7, 3, function () {
if (!show_card) {
if (!show_card && rolled_number === 3) {
console.log("3");
socket.emit('get card', 3);
}
});
app.stage.addChild(cards_3);
socket.on('dice', function (data) {
console.log(data);
// Dice
let diceTexture = PIXI.Texture.from('/img/dice.svg');
let dice = new PIXI.Sprite(diceTexture);
dice.x = sprite_size * 7 - sprite_size * 0.2;
dice.y = sprite_size * 7 - sprite_size * 0.2;
dice.width = 200;
dice.height = 200;
dice.interactive = true;
dice.buttonMode = true;
dice.defaultCursor = 'pointer';
dice.on('click', function () {
if (!diced) {
socket.emit('roll dice');
}
});
app.stage.addChild(dice);
app.stage.addChild(border_card_stack);
socket.on('dice', function (randomInt) {
rolled_number = randomInt;
diced = true;
border_card_stack.clear();
border_card_stack.lineStyle(15, 0x862323, 1);
border_card_stack.drawRoundedRect(sprite_size * (1 + 2 * rolled_number) - sprite_size * 0.2, sprite_size * 3 - sprite_size * 0.2, sprite_size * 1.5, sprite_size * 3 * 0.72, 10);
rolled_number_text = new PIXI.Text(rolled_number, rolled_number_style);
rolled_number_text.x = sprite_size * 7 - sprite_size * 0.2 + dice.width / 2 - rolled_number_text.width / 2;
rolled_number_text.y = sprite_size * 6 - sprite_size * 0.2;
app.stage.addChild(rolled_number_text);
});
socket.on('card', function (data) {
let q = data.question
let a = data.answers
let d = data.difficulty
let q = data.question;
let a = data.answers;
let d = data.difficulty;
new Card(game_board_size, q, a[0], a[1], a[2], a[3], d).showCard();
show_card = true;
});
@@ -116,7 +169,7 @@ function generate_card_stack(sprite, x, y, onclick) {
sprite.buttonMode = true;
sprite.defaultCursor = 'pointer';
sprite.on('click', onclick);
return sprite
return sprite;
}
function generate_red_border(graphics) {
@@ -148,5 +201,5 @@ function resize() {
let size = calculate_size();
app.stage.scale.set(size / game_board_size, size / game_board_size);
app.renderer.resize(size, size)
app.renderer.resize(size, size);
}