Implement dice #10
164
public/img/dice.svg
Normal file
164
public/img/dice.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 7.0 KiB |
@ -49,9 +49,8 @@
|
|||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script crossorigin="anonymous"
|
<script crossorigin="anonymous" referrerpolicy="no-referrer"
|
||||||
integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA=="
|
src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
|
||||||
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="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.0.2/browser/pixi.js"></script>
|
||||||
<script src="js/Card.js"></script>
|
<script src="js/Card.js"></script>
|
||||||
<script src="js/Button.js"></script>
|
<script src="js/Button.js"></script>
|
||||||
|
|||||||
@ -48,19 +48,19 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
|
|||||||
this.card.addChild(basicText);
|
this.card.addChild(basicText);
|
||||||
|
|
||||||
// Answers
|
// 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);
|
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);
|
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);
|
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);
|
select_answer(3, _this.a4.text);
|
||||||
}));
|
}));
|
||||||
|
|
||||||
@ -69,17 +69,26 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
|
|||||||
|
|
||||||
// OK-Button
|
// 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 () {
|
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) {
|
if (answer !== null) {
|
||||||
console.log("Richtig")
|
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 {
|
} else {
|
||||||
console.log("Falsch")
|
alert("Bitte wähle eine Antwortmöglichkeit aus");
|
||||||
}
|
}
|
||||||
show_card = false;
|
|
||||||
_this.card.destroy();
|
|
||||||
}).getButton());
|
}).getButton());
|
||||||
|
|
||||||
app.stage.addChild(this.card);
|
app.stage.addChild(this.card);
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
function select_answer(id, text) {
|
function select_answer(id, text) {
|
||||||
|
|||||||
@ -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 answer = null;
|
||||||
let show_card = false;
|
let show_card = false;
|
||||||
|
let diced = false;
|
||||||
|
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 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
|
||||||
|
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() {
|
function start_game() {
|
||||||
app = new PIXI.Application({
|
app = new PIXI.Application({
|
||||||
autoResize: true,
|
autoResize: true,
|
||||||
@ -18,36 +71,6 @@ function start_game() {
|
|||||||
});
|
});
|
||||||
document.getElementById('game').appendChild(app.view);
|
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()));
|
sprites.forEach(sprite => app.stage.addChild(sprite.getSprite()));
|
||||||
|
|
||||||
|
|
||||||
@ -69,7 +92,7 @@ function start_game() {
|
|||||||
|
|
||||||
// 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 () {
|
||||||
if (!show_card) {
|
if (!show_card && rolled_number === 1) {
|
||||||
console.log("1");
|
console.log("1");
|
||||||
socket.emit('get card', 1);
|
socket.emit('get card', 1);
|
||||||
}
|
}
|
||||||
@ -77,7 +100,7 @@ function start_game() {
|
|||||||
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 () {
|
||||||
if (!show_card) {
|
if (!show_card && rolled_number === 2) {
|
||||||
console.log("2");
|
console.log("2");
|
||||||
socket.emit('get card', 2);
|
socket.emit('get card', 2);
|
||||||
}
|
}
|
||||||
@ -85,21 +108,51 @@ function start_game() {
|
|||||||
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 () {
|
||||||
if (!show_card) {
|
if (!show_card && rolled_number === 3) {
|
||||||
console.log("3");
|
console.log("3");
|
||||||
socket.emit('get card', 3);
|
socket.emit('get card', 3);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
app.stage.addChild(cards_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) {
|
socket.on('card', function (data) {
|
||||||
let q = data.question
|
let q = data.question;
|
||||||
let a = data.answers
|
let a = data.answers;
|
||||||
let d = data.difficulty
|
let d = data.difficulty;
|
||||||
new Card(game_board_size, q, a[0], a[1], a[2], a[3], d).showCard();
|
new Card(game_board_size, q, a[0], a[1], a[2], a[3], d).showCard();
|
||||||
show_card = true;
|
show_card = true;
|
||||||
});
|
});
|
||||||
@ -116,7 +169,7 @@ function generate_card_stack(sprite, x, y, onclick) {
|
|||||||
sprite.buttonMode = true;
|
sprite.buttonMode = true;
|
||||||
sprite.defaultCursor = 'pointer';
|
sprite.defaultCursor = 'pointer';
|
||||||
sprite.on('click', onclick);
|
sprite.on('click', onclick);
|
||||||
return sprite
|
return sprite;
|
||||||
}
|
}
|
||||||
|
|
||||||
function generate_red_border(graphics) {
|
function generate_red_border(graphics) {
|
||||||
@ -148,5 +201,5 @@ function resize() {
|
|||||||
let size = calculate_size();
|
let size = calculate_size();
|
||||||
app.stage.scale.set(size / game_board_size, size / game_board_size);
|
app.stage.scale.set(size / game_board_size, size / game_board_size);
|
||||||
|
|
||||||
app.renderer.resize(size, size)
|
app.renderer.resize(size, size);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user