nathan
/
cardGame
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change base cardsize to fit on board

Browse Source
develop
Nathan Steel 1 year ago
parent 3e71a1cfb0
commit 558a452d29
1 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File

68
public/board.js
Unescape Escape View File

@ -2,8 +2,8 @@ const ctx = canvas.getContext('2d');
const canvasLeft = canvas.offsetLeft + canvas.clientLeft; const canvasLeft = canvas.offsetLeft + canvas.clientLeft;
const canvasTop = canvas.offsetTop + canvas.clientTop; const canvasTop = canvas.offsetTop + canvas.clientTop;
const cardWidth = 240; const cardWidth = 80;
const cardHeight = 360; const cardHeight = 120;
const cards = new Image(); const cards = new Image();
const back = new Image(); const back = new Image();
@ -91,7 +91,7 @@ class Board{
ctx.fillStyle = '#000'; ctx.fillStyle = '#000';
ctx.fillText( ctx.fillText(
array[arrayKey]['name'] array[arrayKey]['name']
, positionX + (ctx.measureText(array[arrayKey]['name']/2).width) , positionX + (ctx.measureText(array[arrayKey]['name']/2).width) - width/4
, positionY+20 , positionY+20
); );
} }
@ -100,10 +100,10 @@ class Board{
// Deck // Deck
clickableItems['deckSprite'] = new Shape({ clickableItems['deckSprite'] = new Shape({
name: 'deck', name: 'deck',
x: canvas.width-cardWidth/2-40, x: canvas.width-cardWidth*1.5-40,
y: canvas.height-cardHeight/2-60, y: canvas.height-cardHeight*1.5-60,
width: cardWidth/2, width: cardWidth*1.5,
height: cardHeight/2, height: cardHeight*1.5,
fillStyle: "#0000FF" fillStyle: "#0000FF"
}); });
//ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2); //ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2);
@ -111,17 +111,17 @@ class Board{
let deckCounterSprite = new Shape({ let deckCounterSprite = new Shape({
shape: 'circle', shape: 'circle',
name: 'deckCounter', name: 'deckCounter',
x: canvas.width-cardWidth/5, x: canvas.width-cardWidth*.6,
y: canvas.height-cardHeight/5, y: canvas.height-cardHeight*.6,
width: cardWidth/8, width: cardWidth*.375,
height: cardHeight/8, height: cardHeight*.375,
fillStyle: "#FFF" fillStyle: "#FFF"
}); });
deckCounterSprite.draw(); deckCounterSprite.draw();
// TODO: Center in the circle // TODO: Center in the circle
ctx.fillStyle = '#000'; ctx.fillStyle = '#000';
ctx.fillText(playerDeck.length, canvas.width-cardWidth/5 - (ctx.measureText(playerDeck.length).width) + 7, canvas.height-cardHeight/5 + 5); ctx.fillText(playerDeck.length, canvas.width-cardWidth*.6 - (ctx.measureText(playerDeck.length).width) + 7, canvas.height-cardHeight*.6 + 5);
} }
drawDeckOpponent(){ drawDeckOpponent(){
// Opponent's Deck // Opponent's Deck
@ -129,25 +129,25 @@ class Board{
name: 'deckOpponent', name: 'deckOpponent',
x: 40, x: 40,
y: 60, y: 60,
width: cardWidth/2, width: cardWidth*1.5,
height: cardHeight/2, height: cardHeight*1.5,
fillStyle: "#FF0000" fillStyle: "#FF0000"
}); });
clickableItems['deckOpponentSprite'].draw(); clickableItems['deckOpponentSprite'].draw();
let deckCounterOpponentSprite = new Shape({ let deckCounterOpponentSprite = new Shape({
shape: 'circle', shape: 'circle',
name: 'deckCounterOpponent', name: 'deckCounterOpponent',
x: cardWidth/2+(cardWidth/8), x: cardWidth*1.5+(cardWidth*.375),
y: cardHeight/2+(cardHeight/8), y: cardHeight*1.5+(cardHeight*.375),
width: cardWidth/8, width: cardWidth*.375,
height: cardHeight/8, height: cardHeight*.375,
fillStyle: "#FFF" fillStyle: "#FFF"
}); });
deckCounterOpponentSprite.draw(); deckCounterOpponentSprite.draw();
ctx.fillStyle = '#000'; ctx.fillStyle = '#000';
// TODO: Center in the circle // TODO: Center in the circle
ctx.fillText(opponentDeck.length, cardWidth/2 + (ctx.measureText(opponentDeck.length).width) + 10, cardHeight/1.58); ctx.fillText(opponentDeck.length, cardWidth*1.5 + (ctx.measureText(opponentDeck.length).width) + 10, cardHeight*1.9);
} }
// Naming's getting awkward here... // Naming's getting awkward here...
@ -162,10 +162,10 @@ class Board{
let fill = '#'+i+i+'FF00'; let fill = '#'+i+i+'FF00';
// TODO: fix positionX, actually have some maffs // TODO: fix positionX, actually have some maffs
let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (playerHand.length - (i+1)) - (cardPadding * (i+1))); let positionX = canvas.width/2 - (cardWidth * (playerHand.length - (i+1)) - (cardPadding * (i+1)));
let positionY = canvas.height - cardHeight/2-20; let positionY = canvas.height-cardWidth*1.5-20;
let width = cardWidth/2; let width = cardWidth;
let height = cardHeight/2; let height = cardHeight;
this.drawCard(playerHand, i, name, positionX, positionY, width, height, fill); this.drawCard(playerHand, i, name, positionX, positionY, width, height, fill);
} }
@ -182,10 +182,10 @@ class Board{
let fill = '#'+i+i+'DD00'; let fill = '#'+i+i+'DD00';
// TODO: fix positionX, actually have some maffs // TODO: fix positionX, actually have some maffs
let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (opponentHand.length - (i+1)) - (cardPadding * (i+1))); let positionX = canvas.width/2 - (cardWidth * (opponentHand.length - (i+1)) - (cardPadding * (i+1)));
let positionY = 20; let positionY = 20;
let width = cardWidth/2; let width = cardWidth;
let height = cardHeight/2; let height = cardHeight;
this.drawCard(opponentHand, i, name, positionX, positionY, width, height, fill); this.drawCard(opponentHand, i, name, positionX, positionY, width, height, fill);
} }
@ -236,10 +236,10 @@ class Board{
let fill = '#'+i+i+'CC00'; let fill = '#'+i+i+'CC00';
// TODO: fix positionX, actually have some maffs // TODO: fix positionX, actually have some maffs
let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (playerBoard.length - (i+1)) - (cardPadding * (i+1))); let positionX = canvas.width/2 - (cardWidth * (playerBoard.length - (i+1)) - (cardPadding * (i+1)));
let positionY = canvas.height - cardHeight/2-20-(cardHeight/2); let positionY = canvas.height - cardHeight-30-(cardHeight);
let width = cardWidth/2; let width = cardWidth;
let height = cardHeight/2; let height = cardHeight;
this.drawCard(playerBoard, i, name, positionX, positionY, width, height, fill); this.drawCard(playerBoard, i, name, positionX, positionY, width, height, fill);
} }
@ -254,10 +254,10 @@ class Board{
let fill = '#'+i+i+'AA00'; let fill = '#'+i+i+'AA00';
// TODO: fix positionX, actually have some maffs // TODO: fix positionX, actually have some maffs
let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (opponentBoard.length - (i+1)) - (cardPadding * (i+1))); let positionX = canvas.width/2 - (cardWidth * (opponentBoard.length - (i+1)) - (cardPadding * (i+1)));
let positionY = cardHeight/2; let positionY = cardHeight + 30;
let width = cardWidth/2; let width = cardWidth;
let height = cardHeight/2; let height = cardHeight;
this.drawCard(opponentBoard, i, name, positionX, positionY, width, height, fill); this.drawCard(opponentBoard, i, name, positionX, positionY, width, height, fill);
} }

Write Preview
Loading…
Cancel
Save