From 83855f9acda8743a285135132c2863065c8c3313 Mon Sep 17 00:00:00 2001 From: H4CK3R-01 Date: Tue, 1 Jun 2021 13:24:52 +0200 Subject: [PATCH] - CSS background instead of pixi.js background - Refactoring pixi.js code - Resize game board on browser resize --- public/css/game.css | 5 ++ public/js/game.js | 176 ++++++++++++++++++++++++++------------------ 2 files changed, 108 insertions(+), 73 deletions(-) diff --git a/public/css/game.css b/public/css/game.css index b336f1c..23fa8ea 100644 --- a/public/css/game.css +++ b/public/css/game.css @@ -5,4 +5,9 @@ display: flex; justify-content: center; align-items: center; + background: url(/img/background.jpg) no-repeat center center fixed; + -webkit-background-size: cover; /* For WebKit*/ + -moz-background-size: cover; /* Mozilla*/ + -o-background-size: cover; /* Opera*/ + background-size: cover; /* Generic*/ } \ No newline at end of file diff --git a/public/js/game.js b/public/js/game.js index 6aeef5a..353812e 100644 --- a/public/js/game.js +++ b/public/js/game.js @@ -1,99 +1,107 @@ let game = document.getElementById('game'); -let size; -if (game.offsetWidth > game.offsetHeight) { - size = game.offsetHeight; -} else { - size = game.offsetWidth; -} +let game_board_size = calculate_size(); +let sprite_size = Math.floor(game_board_size / 11); const app = new PIXI.Application({ autoResize: true, resolution: devicePixelRatio, - width: size, - height: size + transparent: true, + width: game_board_size, + height: game_board_size }); -let img = new PIXI.Sprite.from("/img/background.jpg"); -img.width = size; -img.height = size; -app.stage.addChild(img); - - document.getElementById('game').appendChild(app.view); -// -------------------------------------- code -------------------------------------- function Sprite(x, y) { - this.x = x; - this.y = y; + this.sprite = PIXI.Sprite.from('/img/sprite.jpg'); + this.coord_x = x; + this.coord_y = y; + + this.getSprite = function () { + this.setSize(this.sprite, sprite_size); + return this.sprite; + } + + this.resize = function (sprite_size) { + this.setSize(this.sprite, sprite_size); + } + + this.setSize = function (sprite, size) { + sprite.x = this.coord_x * size - size * 0.2; + sprite.y = this.coord_y * size - size * 0.2; + sprite.width = size * 1.5; + sprite.height = size * 1.5; + } } -let sprite_size = Math.floor(size / 11); + let sprites = { - 0: new Sprite(sprite_size, sprite_size), - 1: new Sprite(sprite_size * 3, sprite_size), - 2: new Sprite(sprite_size * 5, sprite_size), - 3: new Sprite(sprite_size * 7, sprite_size), - 4: new Sprite(sprite_size * 9, sprite_size), + 0: new Sprite(1, 1), + 1: new Sprite(3, 1), + 2: new Sprite(5, 1), + 3: new Sprite(7, 1), + 4: new Sprite(9, 1), - 5: new Sprite(sprite_size, sprite_size * 3), - 6: new Sprite(sprite_size * 9, sprite_size * 3), + 5: new Sprite(1, 3), + 6: new Sprite(9, 3), - 7: new Sprite(sprite_size, sprite_size * 5), - 8: new Sprite(sprite_size * 9, sprite_size * 5), + 7: new Sprite(1, 5), + 8: new Sprite(9, 5), - 9: new Sprite(sprite_size, sprite_size * 7), - 10: new Sprite(sprite_size * 9, sprite_size * 7), + 9: new Sprite(1, 7), + 10: new Sprite(9, 7), - 11: new Sprite(sprite_size, sprite_size * 9), - 12: new Sprite(sprite_size * 3, sprite_size * 9), - 13: new Sprite(sprite_size * 5, sprite_size * 9), - 14: new Sprite(sprite_size * 7, sprite_size * 9), - 15: new Sprite(sprite_size * 9, sprite_size * 9), + 11: new Sprite(1, 9), + 12: new Sprite(3, 9), + 13: new Sprite(5, 9), + 14: new Sprite(7, 9), + 15: new Sprite(9, 9), } for (let i = 0; i < 16; i++) { - const sprite = PIXI.Sprite.from('/img/sprite.jpg'); - - sprite.x = sprites[i].x - sprite_size * 0.2; - sprite.y = sprites[i].y - sprite_size * 0.2; - sprite.width = sprite_size * 1.5; - sprite.height = sprite_size * 1.5; - - app.stage.addChild(sprite); + app.stage.addChild(sprites[i].getSprite()); } -const graphics = new PIXI.Graphics(); -graphics.lineStyle(10, 0x862323, 1); -graphics.drawRect(sprite_size * 9 - sprite_size * 0.2, sprite_size * 9 - sprite_size * 0.2, sprite_size * 1.5, sprite_size * 1.5); -app.stage.addChild(graphics); +const red_border = new PIXI.Graphics(); +red_border.lineStyle(10, 0x862323, 1); +red_border.drawRect(sprite_size * 9 - sprite_size * 0.2, sprite_size * 9 - sprite_size * 0.2, sprite_size * 1.5, sprite_size * 1.5); +app.stage.addChild(red_border); -graphics.lineStyle(0); -graphics.beginFill(0xffffff, 1); -graphics.drawCircle(sprite_size * 3 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * 9 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size/4); -graphics.endFill(); +const first_circle = new PIXI.Graphics(); +first_circle.lineStyle(0); +first_circle.beginFill(0xffffff, 1); +first_circle.drawCircle(sprite_size * 3 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * 9 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size/4); +first_circle.endFill(); +app.stage.addChild(first_circle); -graphics.lineStyle(0); -graphics.beginFill(0xffffff, 1); -graphics.drawCircle(sprite_size * 5 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * 9 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size/4); -graphics.endFill(); +const second_circle = new PIXI.Graphics(); +second_circle.lineStyle(0); +second_circle.beginFill(0xffffff, 1); +second_circle.drawCircle(sprite_size * 5 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * 9 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size/4); +second_circle.endFill(); +app.stage.addChild(second_circle); + +const third_circle = new PIXI.Graphics(); +third_circle.lineStyle(0); +third_circle.beginFill(0xffffff, 1); +third_circle.drawCircle(sprite_size * 7 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * 9 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size/4); +third_circle.endFill(); +app.stage.addChild(third_circle); -graphics.lineStyle(0); -graphics.beginFill(0xffffff, 1); -graphics.drawCircle(sprite_size * 7 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * 9 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size/4); -graphics.endFill(); 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."); function generate_card(s) { - let start_x = size / 2 - 110; - let start_y = size / 2 - 150; - graphics.lineStyle(5, 0x000000, 1); - graphics.beginFill(0x650A5A); - graphics.drawRoundedRect(start_x, start_y, 220, 300, 10); - graphics.endFill(); + const card = new PIXI.Graphics(); + let start_x = game_board_size / 2 - 110; + let start_y = game_board_size / 2 - 150; + card.lineStyle(5, 0x000000, 1); + card.beginFill(0x650A5A); + card.drawRoundedRect(start_x, start_y, 220, 300, 10); + card.endFill(); const style = new PIXI.TextStyle({ fontFamily: 'Arial', @@ -105,17 +113,39 @@ function generate_card(s) { basicText.x = start_x + 10; basicText.y = start_y + 10; - app.stage.addChild(basicText); + card.addChild(basicText); + app.stage.addChild(card); +} + +function calculate_size() { + if (game.offsetWidth > game.offsetHeight) { + return game.offsetHeight; + } else { + return game.offsetWidth; + } } // ------------------------------------ end code ------------------------------------ // Resize -// window.addEventListener('resize', resize); -// -// function resize() { -// let game = document.getElementById('game'); -// app.renderer.resize(game.offsetWidth, game.offsetHeight); -// } -// -// resize(); \ No newline at end of file +window.addEventListener('resize', resize); + +function resize() { + game_board_size = calculate_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 + // TODO + + // Resize first circle + // TODO +} + +resize(); \ No newline at end of file