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

Implement dice #10

Merged
H4CK3R-01 merged 1 commits from dice into main 2021-06-09 12:12:12 +00:00
Conversation 0 Commits 1 Files Changed 4 +278 -53
4 changed files with 278 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
public/img/dice.svg Normal file
View File

@ -0,0 +1,164 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
width="512px"
height="512px"
viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;"
xml:space="preserve"
sodipodi:docname="gambler-casino-svgrepo-com.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"><metadata
id="metadata81"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata>
<defs
id="defs79"/>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1043"
id="namedview77"
showgrid="false"
inkscape:zoom="1.84375"
inkscape:cx="308.11041"
inkscape:cy="269.62905"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1"/>
<path
style="fill:#E3E8F4;"
d="M285.976,7.411c-16.487-9.114-43.465-9.114-59.952,0L54.779,102.077 c-16.487,9.114-29.976,31.984-29.976,50.822v206.776c0,18.838,13.49,41.708,29.976,50.822l171.245,94.666 c16.487,9.114,43.465,9.114,59.952,0l171.245-94.666c16.487-9.114,29.976-31.984,29.976-50.822V152.899 c0-18.838-13.49-41.708-29.976-50.822L285.976,7.411z"
id="path2"/>
<path
style="fill:#C7CFE2;"
d="M255.999,511.996V276.62c0-18.697-10.158-35.918-26.52-44.963L55.701,135.59 c-13.42-7.419-30.784,1.689-30.896,17.023c-0.001,0.095-0.001,0.192-0.001,0.287v206.777c0,18.838,13.489,41.707,29.975,50.821 l171.245,94.666c8.246,4.559,19.115,6.836,29.986,6.835L255.999,511.996z"
id="path4"/>
<path
style="fill:#D7DEED;"
d="M255.999,511.996V276.62c0-18.697,10.158-35.918,26.52-44.963l173.778-96.066 c13.42-7.419,30.784,1.689,30.896,17.023c0.001,0.095,0.001,0.192,0.001,0.287v206.777c0,18.838-13.489,41.707-29.975,50.821 l-171.244,94.664c-8.246,4.559-19.115,6.836-29.986,6.835L255.999,511.996z"
id="path6"/>
<path
style="fill:#EFF2FA;"
d="M287.071,229.168l170.646-94.336c12.773-7.06,12.773-25.421,0-32.481L287.071,8.016 c-19.335-10.689-42.807-10.689-62.141,0L54.282,102.352c-12.773,7.06-12.773,25.421,0,32.481l170.646,94.336 C244.264,239.857,267.736,239.857,287.071,229.168z"
id="path8"/>
<path
style="fill:#5B5D6E;"
d="M165.912,335.478c0,19.857-12.073,28.984-26.965,20.386c-14.893-8.598-26.965-31.665-26.965-51.522 c0-19.857,12.073-28.984,26.965-20.386C153.839,292.554,165.912,315.622,165.912,335.478z"
id="path10"/>
<path
style="fill:#515262;"
d="M138.947,283.955c-10.77-6.219-19.992-3.064-24.313,6.611c3.538-0.231,7.456,0.646,11.647,3.067 c14.893,8.598,26.965,31.665,26.965,51.523c0,5.497-0.999,10.071-2.653,13.774c9.035-0.591,15.32-9.183,15.32-23.451 C165.912,315.621,153.839,292.554,138.947,283.955z"
id="path12"/>
<path
style="fill:#707487;"
d="M290.251,432.098c0,19.857,12.073,28.984,26.965,20.386s26.965-31.665,26.965-51.522 s-12.073-28.984-26.965-20.386C302.324,389.173,290.251,412.24,290.251,432.098z"
id="path14"/>
<path
style="fill:#5B5D6E;"
d="M317.216,380.575c-1.965,1.135-3.87,2.55-5.717,4.148c9.168,0.448,15.557,9.088,15.557,23.486 c0,17.237-9.108,36.863-21.25,47.375c3.477,0.17,7.315-0.736,11.409-3.101c14.893-8.598,26.965-31.665,26.965-51.522 C344.182,381.104,332.109,371.977,317.216,380.575z"
id="path16"/>
<path
style="fill:#707487;"
d="M401.567,242.401c0,19.857,12.073,28.984,26.965,20.386c14.893-8.598,26.965-31.665,26.965-51.523 s-12.073-28.984-26.965-20.386S401.567,222.545,401.567,242.401z"
id="path18"/>
<path
style="fill:#5B5D6E;"
d="M428.533,190.879c-1.965,1.135-3.87,2.55-5.717,4.148c9.168,0.448,15.557,9.088,15.557,23.486 c0,17.237-9.108,36.863-21.25,47.375c3.477,0.17,7.315-0.736,11.409-3.101c14.893-8.598,26.965-31.665,26.965-51.522 C455.499,191.407,443.426,182.281,428.533,190.879z"
id="path20"/>
<path
style="fill:#707487;"
d="M347.636,336.592c0,19.857,12.073,28.984,26.965,20.386c14.893-8.598,26.965-31.665,26.965-51.523 c0-19.857-12.073-28.984-26.965-20.386C359.709,293.668,347.636,316.736,347.636,336.592z"
id="path22"/>
<path
style="fill:#5B5D6E;"
d="M374.602,285.07c-1.965,1.135-3.87,2.55-5.717,4.148c9.168,0.448,15.557,9.088,15.557,23.486 c0,17.237-9.108,36.863-21.25,47.375c3.477,0.17,7.315-0.736,11.409-3.101c14.893-8.598,26.965-31.665,26.965-51.523 C401.567,285.598,389.495,276.472,374.602,285.07z"
id="path24"/>
<ellipse
style="fill:#707487;"
cx="367.313"
cy="116.176"
rx="42.814"
ry="21.407"
id="ellipse38"/>
<path
style="fill:#65687A;"
d="M367.316,94.766c-20.246,0-37.11,7.047-41.569,16.489c7.851-4.798,19.639-7.926,33.006-7.926 c23.645,0,42.814,9.584,42.814,21.407c0,1.7-0.496,3.332-1.245,4.918c6.037-3.689,9.808-8.341,9.808-13.481 C410.13,104.35,390.962,94.766,367.316,94.766z"
id="path40"/>
<ellipse
style="fill:#707487;"
cx="144.679"
cy="116.176"
rx="42.814"
ry="21.407"
id="ellipse42"/>
<path
style="fill:#65687A;"
d="M144.683,94.766c-20.246,0-37.11,7.047-41.569,16.489c7.851-4.798,19.639-7.926,33.006-7.926 c23.645,0,42.814,9.584,42.814,21.407c0,1.7-0.496,3.332-1.245,4.918c6.037-3.689,9.808-8.341,9.808-13.481 C187.497,104.35,168.329,94.766,144.683,94.766z"
id="path44"/>
<g
id="g46">
</g>
<g
id="g48">
</g>
<g
id="g50">
</g>
<g
id="g52">
</g>
<g
id="g54">
</g>
<g
id="g56">
</g>
<g
id="g58">
</g>
<g
id="g60">
</g>
<g
id="g62">
</g>
<g
id="g64">
</g>
<g
id="g66">
</g>
<g
id="g68">
</g>
<g
id="g70">
</g>
<g
id="g72">
</g>
<g
id="g74">
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

5
public/index.html
View File

@ -49,9 +49,8 @@
</footer>
<script crossorigin="anonymous"
integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA=="
referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
<script crossorigin="anonymous" referrerpolicy="no-referrer"
src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.0.2/browser/pixi.js"></script>
<script src="js/Card.js"></script>
<script src="js/Button.js"></script>

23
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 (answer !== null) {
if (_this.right_answer === answer) {
console.log("Richtig")
console.log("Richtig");
} else {
console.log("Falsch")
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 {
alert("Bitte wähle eine Antwortmöglichkeit aus");
}
}).getButton());
app.stage.addChild(this.card);
}
};
function select_answer(id, text) {

93
public/js/game.js
View File

@ -1,23 +1,36 @@
/*
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);
function start_game() {
app = new PIXI.Application({
autoResize: true,
resolution: devicePixelRatio,
backgroundAlpha: 0,
width: max_size / game_board_size,
height: max_size / game_board_size
const rolled_number_style = new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 140,
fontWeight: 'bold',
wordWrap: true,
wordWrapWidth: game_board_size * 0.5 - 20,
});
document.getElementById('game').appendChild(app.view);
let rolled_number_text = new PIXI.Text("", rolled_number_style);
// fields
let sprites = [
@ -46,7 +59,17 @@ function start_game() {
new Sprite(5, 9),
new Sprite(7, 9),
new Sprite(9, 9),
]
];
function start_game() {
app = new PIXI.Application({
autoResize: true,
resolution: devicePixelRatio,
backgroundAlpha: 0,
width: max_size / game_board_size,
height: max_size / game_board_size
});
document.getElementById('game').appendChild(app.view);
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);
}