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

Add basic player draw/card discard

Browse Source
develop
Nathan Steel 1 year ago
parent 0479a3ef8e
commit abb7443658
1 changed files with 176 additions and 22 deletions
Show Stats Download Patch File Download Diff File

198
public/board.js
Unescape Escape View File

@ -10,9 +10,24 @@ const back = new Image();
let clickableItems = [];
console.log(clickableItems);
clickableItems['hand'] = [];
clickableItems['opponentHand'] = [];
// TODO: Uniform the arrays to player and opponent/different playesr
let playerHand = [];
let opponentHand = [];
let playerBoard = [];
let opponentBoard = [];
let deckCount = 60;
let deckCountOpponent = 60;
let cardsInOpponentsHand = 0;
const maxHandSize = 4;
const maxBoardSize = 3;
// Gonna need lots of refactoring, and sorting
class Board{
constructor(){
console.log('initBoard');
@ -24,7 +39,7 @@ class Board{
}
drawBoard(){
console.log('drawBoard');
// Reset board
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Room Name
ctx.fillText(name, 0, 10);
@ -32,12 +47,13 @@ class Board{
this.drawDeck();
this.drawDeckOpponent();
this.drawHand();
this.drawOpponentHand();
this.drawPlayerNames('Nathan', 'Evil Nathan');
}
drawPlayerNames(playerName, opponentName = false){
console.log('drawPlayerNames');
// Player Name
ctx.fillText(playerName, 50, canvas.height - 110);
@ -59,6 +75,7 @@ class Board{
height: cardHeight/2,
fillStyle: "#0000FF"
});
//ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2);
clickableItems['deckSprite'].draw();
let deckCounterSprite = new Shape({
shape: 'circle',
@ -70,10 +87,8 @@ class Board{
fillStyle: "#FFF"
});
deckCounterSprite.draw();
let cardsInDeck = 60;
// TODO: Center in the circle
ctx.fillText(cardsInDeck, canvas.width-cardWidth/5 - (ctx.measureText(cardsInDeck).width) + 7, canvas.height-cardHeight/5 + 5);
//ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2);
ctx.fillText(deckCount, canvas.width-cardWidth/5 - (ctx.measureText(deckCount).width) + 7, canvas.height-cardHeight/5 + 5);
}
drawDeckOpponent(){
// Opponent's Deck
@ -96,27 +111,122 @@ class Board{
fillStyle: "#FFF"
});
deckCounterSprite.draw();
let cardsInDeck = 60;
// TODO: Center in the circle
ctx.fillStyle = '#000';
ctx.strokeStyle = '#000';
ctx.fillText(cardsInDeck, cardWidth/2 + (ctx.measureText(cardsInDeck).width) + 10, cardHeight/1.58);
// TODO: Center in the circle
ctx.fillText(deckCountOpponent, cardWidth/2 + (ctx.measureText(deckCount).width) + 10, cardHeight/1.58);
}
// Naming's getting awkward here...
// Draw the card
drawCardSprites(){
drawHand(){
// Player Hand/Cards in Hand
for (let i = 0; i < playerHand.length; i++) {
let name = 'cardInHand_'+(i+1);
let cardPadding = 10;
let fill = '#'+i+i+'FF00';
// TODO: fix positionX, actually have some maffs
let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (playerHand.length - (i+1)) - (cardPadding * (i+1)));
console.log('drawHand: cardsInHand: '+(i+1)+' / '+playerHand.length);
clickableItems['hand'][name] = new Shape({
name: name,
x: positionX,
y: canvas.height - cardHeight/2-20,
width: cardWidth/2,
height: cardHeight/2,
fillStyle: fill
});
playerHand[i]['clickable'] = clickableItems['hand'][name];
playerHand[i]['clickable'].draw();
}
}
drawCardSpritesOpponent(){
drawOpponentHand(){
// Opponents Hand/Cards in Hand
for (let i = 0; i < opponentHand.length; i++) {
let name = 'cardInOpponentsHand_'+(i+1);
let cardPadding = 10;
let fill = '#'+i+i+'DD00';
// TODO: fix positionX, actually have some maffs
let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (opponentHand.length - (i+1)) - (cardPadding * (i+1)));
console.log('drawOpponentHand: cardsInHand: '+(i+1)+' / '+opponentHand.length);
clickableItems['opponentHand'][name] = new Shape({
name: name,
x: positionX,
y: 20,
width: cardWidth/2,
height: cardHeight/2,
fillStyle: fill
});
clickableItems['opponentHand'][name].draw();
}
}
drawCards(){}
// Draw a card, traditional TCG
drawACard(){
if(playerHand.length >= maxHandSize){
alert('Hand full '+playerHand.length+'/'+maxHandSize);
return 0;
}
playerHand.push({'name':'CardName', 'cost':1, 'atk':1, 'def':1, 'rarity': 'common', 'effect':null, 'type':'human'});
this.drawBoard();
}
drawACardOpponent(){
if(opponentHand.length >= maxHandSize){
alert('Hand full '+opponentHand.length+'/'+maxHandSize);
return 0;
}
this.drawBoard();
}
drawCardsOnBoard(){
// DUPER OF DRAW PLAYER HAND FOR NOW!!!
for (let i = 0; i < playerHand.length; i++) {
let name = 'cardInHand_'+(i+1);
let cardPadding = 10;
let fill = '#'+i+i+'FF00';
// TODO: fix positionX, actually have some maffs
let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (playerHand.length - (i+1)) - (cardPadding * (i+1)));
console.log('drawHand: cardsInHand: '+(i+1)+' / '+playerHand.length);
clickableItems['hand'][name] = new Shape({
name: name,
x: positionX,
y: canvas.height - cardHeight/2-20,
width: cardWidth/2,
height: cardHeight/2,
fillStyle: fill
});
playerHand[i]['clickable'] = clickableItems['hand'][name];
playerHand[i]['clickable'].draw();
}
}
drawCardsOnBoardOpponent(){
}
playCardToBoard(){
}
}
@ -139,24 +249,68 @@ canvas.addEventListener('click', function(event) {
// Want to loop clickables ideally, and call a function
// that's set to them for click, hover, etc.
// TODO: potentially loop all clickables, and do a check on clickable.name to differ event handling per-item
// For now this will be fine, as it functions
if (
y > clickable.y && y < clickable.y + clickable.height
&& x > clickable.x && x < clickable.x + clickable.width
) {
console.log('click Event: '+clickable.name);
if(clickableCheck(x,y,clickable)){
board.drawACard();
}
// # OPPONENT DECK
clickable = clickableItems['deckOpponentSprite'];
if (
y > clickable.y && y < clickable.y + clickable.height
&& x > clickable.x && x < clickable.x + clickable.width
) {
console.log('click Event: '+clickable.name);
if(clickableCheck(x,y,clickable)){
board.drawACardOpponent();
}
// # PLAYER HAND
clickableHand = clickableItems['hand'];
let handLength = Object.keys(clickableHand).length;
playerHand.forEach(function(card, index){
console.log(card);
console.log(card.clickable);
let clickable = card.clickable;
if(clickableCheck(x,y,clickable)){
console.log('Clicked Hand item: '+ clickable.name);
// Remove from hand
playerHand.splice(index, 1);
// This would actually fire off a socketIO doodad, that would then return
// data, and redraw. But for now (UI test)
// Add to board
board.drawBoard();
}
});
}, false);
function clickableCheck(x,y,clickable){
console.log('click Event: '+clickable.name);
// Debug Stuff
let debug = false
if(debug){
console.log(clickable.y+' <');
console.log(y+ '<')
console.log(clickable.y+clickable.height);
}
if(
y > clickable.y && y < clickable.y + clickable.height
&& x > clickable.x && x < clickable.x + clickable.width)
{
return true;
}
return false;
}

Write Preview
Loading…
Cancel
Save