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

Player movement #38

Merged
fabianthome merged 14 commits from player-movement into main 2021-06-18 08:20:22 +00:00
Conversation 0 Commits 14 Files Changed 11 +70 -33
2 changed files with 70 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 73ced0222f - Show all commits

6
Webservice/server.js
View File

@ -125,12 +125,16 @@ io.on('connection', socket => {
generate_log_message(socket.room, socket.username, "MOVE", difficulty); generate_log_message(socket.room, socket.username, "MOVE", difficulty);
} }
io.in(socket.room).emit('card destroyed'); io.in(socket.room).emit('card destroyed');
gameState[socket.room].finish_turn();
let index = gameState[socket.room].get_player_index(socket.username); let index = gameState[socket.room].get_player_index(socket.username);
let next_player = gameState[socket.room].players[gameState[socket.room].currentPlayerIndex].name;
io.in(socket.room).emit('player moved', { io.in(socket.room).emit('player moved', {
"next_player": next_player,
"player": index, "player": index,
"position": gameState[socket.room].players[index].position "position": gameState[socket.room].players[index].position
}); });
gameState[socket.room].finish_turn();
} }
}); });
}); });

97
public/js/game.js
View File

@ -14,20 +14,12 @@ let rolled_number = null;
let game = document.getElementById('game'); let game = document.getElementById('game');
let app; let app;
let border_card_stack = new PIXI.Graphics(); let border_card_stack = new PIXI.Graphics();
let my_turn;
let game_board_size = 2000; let game_board_size = 2000;
let max_size = calculate_size(); let max_size = calculate_size();
let sprite_size = Math.floor(game_board_size / 11); 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 // fields
let sprites = [ let sprites = [
new Sprite(9, 9), // lower right new Sprite(9, 9), // lower right
@ -71,10 +63,10 @@ function start_game() {
let player_b = generate_circle(new PIXI.Graphics(), 9, 9, 'blue', 2); let player_b = generate_circle(new PIXI.Graphics(), 9, 9, 'blue', 2);
app.stage.addChild(player_b); app.stage.addChild(player_b);
let player_c = generate_circle(new PIXI.Graphics(), 9, 9, 'green', 3); let player_c = generate_circle(new PIXI.Graphics(), 9, 9, 'green', 3);
app.stage.addChild(player_c); app.stage.addChild(player_c);
let player_d = generate_circle(new PIXI.Graphics(), 9, 9, 'red', 4); let player_d = generate_circle(new PIXI.Graphics(), 9, 9, 'red', 4);
app.stage.addChild(player_d); app.stage.addChild(player_d);
@ -105,7 +97,7 @@ function start_game() {
app.stage.addChild(cards_3); app.stage.addChild(cards_3);
// Die // Dice
let diceTexture = PIXI.Texture.from('/img/dice.svg'); let diceTexture = PIXI.Texture.from('/img/dice.svg');
let dice = new PIXI.Sprite(diceTexture); let dice = new PIXI.Sprite(diceTexture);
dice.x = sprite_size * 7 - sprite_size * 0.2; dice.x = sprite_size * 7 - sprite_size * 0.2;
@ -134,6 +126,29 @@ function start_game() {
// logo.rotation -= Math.PI / 8; // logo.rotation -= Math.PI / 8;
app.stage.addChild(logo); app.stage.addChild(logo);
my_turn = new PIXI.Text("", new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 70,
fontWeight: 'bold',
}));
my_turn.x = sprite_size * 3;
my_turn.y = sprite_size * 8;
app.stage.addChild(my_turn);
let rolled_number_text = new PIXI.Text("", new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 140,
fontWeight: 'bold',
wordWrap: true,
wordWrapWidth: game_board_size * 0.5 - 20,
}));
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('dice', function (randomInt) { socket.on('dice', function (randomInt) {
rolled_number = randomInt; rolled_number = randomInt;
diced = true; diced = true;
@ -141,10 +156,7 @@ function start_game() {
border_card_stack.lineStyle(15, 0x862323, 1); 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); 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.text = rolled_number;
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) { socket.on('card', function (data) {
@ -161,39 +173,44 @@ function start_game() {
diced = false; diced = false;
show_card = false; show_card = false;
card.destroyCard(); card.destroyCard();
rolled_number_text.destroy(); rolled_number_text.text = "";
border_card_stack.clear(); border_card_stack.clear();
}); });
socket.on('player moved', function(data){ socket.on('player moved', function (data) {
my_turn.text = "";
let player = data.player; let player = data.player;
let position = data.position; let position = data.position;
let next_player = data.next_player;
let x = sprites[position].coord_x; let x = sprites[position].coord_x;
let y = sprites[position].coord_y; let y = sprites[position].coord_y;
switch(player){ switch (player) {
case 0: case 0:
player_a.clear(); player_a.clear();
player_a = generate_circle(new PIXI.Graphics(), y, x, 'yellow', 1); player_a = generate_circle(new PIXI.Graphics(), y, x, 'yellow', 1);
app.stage.addChild(player_a); app.stage.addChild(player_a);
break; break;
case 1: case 1:
player_b.clear(); player_b.clear();
player_b = generate_circle(new PIXI.Graphics(), y, x, 'blue', 2); player_b = generate_circle(new PIXI.Graphics(), y, x, 'blue', 2);
app.stage.addChild(player_b); app.stage.addChild(player_b);
break; break;
case 2: case 2:
player_c.clear(); player_c.clear();
player_c = generate_circle(new PIXI.Graphics(), y, x, 'green', 3); player_c = generate_circle(new PIXI.Graphics(), y, x, 'green', 3);
app.stage.addChild(player_c); app.stage.addChild(player_c);
break; break;
case 3: case 3:
player_d.clear(); player_d.clear();
player_d = generate_circle(new PIXI.Graphics(), y, x, 'red', 4); player_d = generate_circle(new PIXI.Graphics(), y, x, 'red', 4);
app.stage.addChild(player_d); app.stage.addChild(player_d);
break; break;
} }
if (next_player === username) my_turn.text = "Your Turn";
}); });
resize(); resize();
@ -219,17 +236,33 @@ function generate_red_border(graphics) {
function generate_circle(graphics, x, y, color, offset) { function generate_circle(graphics, x, y, color, offset) {
graphics.lineStyle(0); graphics.lineStyle(0);
switch (color){ switch (color) {
case 'yellow': graphics.beginFill(0xFFDDA1, 1); break; case 'yellow':
case 'red': graphics.beginFill(0xF47A93, 1); break; graphics.beginFill(0xFFDDA1, 1);
case 'green': graphics.beginFill(0x6C9A8B, 1); break; break;
case 'blue': graphics.beginFill(0x4169E1, 1); break; case 'red':
graphics.beginFill(0xF47A93, 1);
break;
case 'green':
graphics.beginFill(0x6C9A8B, 1);
break;
case 'blue':
graphics.beginFill(0x4169E1, 1);
break;
} }
switch(offset){ switch (offset) {
case 1: graphics.drawCircle(sprite_size * x - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); break; // upper left case 1:
case 2: graphics.drawCircle(sprite_size * x + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); break; // upper right graphics.drawCircle(sprite_size * x - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4);
case 3: graphics.drawCircle(sprite_size * x - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); break; // lower left break; // upper left
case 4: graphics.drawCircle(sprite_size * x + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); break; // lower right case 2:
graphics.drawCircle(sprite_size * x + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4);
break; // upper right
case 3:
graphics.drawCircle(sprite_size * x - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4);
break; // lower left
case 4:
graphics.drawCircle(sprite_size * x + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4);
break; // lower right
} }
graphics.endFill(); graphics.endFill();
return graphics; return graphics;