JS for card game

Developer
Harry Sadler
Size
5,115 Kb
Views
6,072
  1. JS for card game Previews
  2. JS for card game HTML Codes
  3. JS for card game CSS Codes
  4. JS for card game JS Codes

How do I make an js for card game?

WORK IN PROGRESSBuilding a card game as an exercise. I want to get familiar with Object Oriented Programming. This is all through the console so far.. What is a js for card game? How do you make a js for card game? This script and codes were developed by Harry Sadler on 29 November 2022, Tuesday.

JS for card game Previews
IQ Test

JS for card game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JS for card game</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.5.0/pure-min.css"> <script src="//jashkenas.github.io/underscore/underscore-min.js"> </script> <script src="//code.jquery.com/jquery-2.1.1.min.js"> </script> <meta name="description" content="Steampunk Duel JS" /> <meta charset="utf-8"> <title>Steampunk Duel JS</title> </head> <body> <div class='testingWrapper'> <button class="pure-button" id='resetGame'>Restart Game</button> <div class="p1Buttons"> <button class="pure-button" id='p1DrawCard'>p1 draw card</button> <button class="pure-button playcard cardSelected" id='p1Drone'>Patrol Drone</button> <button class="pure-button playcard" id='p1Assassin'>Dagger Assassin</button> <button class="pure-button playcard" id='p1Snail'>Armored Snail</button> <button class="pure-button playcard" id='p1Inspector'>Dark Coat Inspector</button> <button class="pure-button" id='test6'>p1 button</button> <button class="pure-button" id='test7'>p1 button</button> <button class="pure-button" id='test8'>p1 button</button> <button class="pure-button" id='test9'>p1 button</button> <button class="pure-button" id='p1EndTurn'>p1 end turn</button> </div> <div class='p2Buttons'> <button class="pure-button" id='p2DrawCard'>p2 draw card</button> <button class="pure-button playcard" id='p2Drone'>Patrol Drone</button> <button class="pure-button playcard" id='p2Assassin'>Dagger Assassin</button> <button class="pure-button playcard" id='p2Snail'>Armored Snail</button> <button class="pure-button playcard" id='p2Inspector'>Dark Coat Inspector</button> <button class="pure-button" id='test16'>p2 button</button> <button class="pure-button" id='test17'>p2 button</button> <button class="pure-button" id='test18'>p2 button</button> <button class="pure-button" id='test19'>p2 button</button> <button class="pure-button" id='p2EndTurn'>p2 end turn</button> </div> </div> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

JS for card game - Script Codes CSS Codes

 {border:1px dotted red;}
button {
}
.testingWrapper { display: block; margin: 40px auto; width: 400px; height: 500px;
}
.pure-button { display: block; margin: 8px auto;
}
.p1Buttons,
.p2Buttons { *display: block; width: 198px; float: left; *padding: 0 auto;
}
#resetGame { display: block; clear: both; margin: 20px auto; color: white; background-color: #444444;
}

JS for card game - Script Codes JS Codes

// game object //
var game = { players: { // player1: { // name, hp, status, alive, isPlayer, hasTurn, // pointsAvail, // cards: { // Patrol Drone: { // name, cost, attack, hp, status, ready, // alive, myOwner: player1 (circular reference) // isInHand(), isOnBoard(), logStatus() // }, etc. // }, // inHand: {}, onBoard: {} // addCard(), getNewDeck(), drawCard(), // playCard(), spendPoints() // }, // player2: {}, // newPlayers() }, turn: { current: null, whoStarted: null, whoHasTurn: null, //nextTurn(), rollTurn(), setHasTurn() }, round: { current: null //nextRound() }, cardLibrary: [],//holds sub arrays of card infos currentFight: { cardsInvolved: [] //tradeAttack1v1(card1, card2), checkCardEligible(), //logfight1v1(), updateCardStatus() } //resetGame()
};
// for utility functions //
var gameFunc = { getRandInt: function(min, max) { return Math.floor(Math.random() * max) + min; }, randObjProp: function(obj) { var objPropArr = Object.keys(obj); var randPropName = objPropArr[ Math.floor( Math.random() * objPropArr.length ) ]; return obj[randPropName]; }, isEmpty: function(obj) { for(var prop in obj) { if(obj.hasOwnProperty(prop)) { return false; } } return true; }
};
game.cardLibrary = [ //['name', cost, hp, attack] ["Patrol Drone", "pDrone", 2, 3, 2], ["Dagger Assassin", "dAssassin", 4, 2, 4], ["Armored Snail", "aSnail", 3, 5, 1], ["Dark Coat Inspector", "dcInspector", 7, 6, 5]
];
//card constructor
var Card = function(infoArray) { this.name = infoArray[0]; this.shortName = infoArray[1]; this.cost = infoArray[2]; this.hp = infoArray[3]; this.attack = infoArray[4]; this.alive = true; this.ready = false; this.status = 'alive'; //will make better use of this soon
};
//add to Card prototype
Card.prototype.uniqueID = function() { return this.myOwner.name + this.shortName;
};
Card.prototype.logStatus = function() { console.log(this.name + '\n\thp: ' + this.hp + '\n\tstatus: ' + this.status + '\n\n');
};
Card.prototype.isInHand = function() { if(this.myOwner.inHand[this.name]) { return true; } else{return false;}
};
Card.prototype.isOnBoard = function() { if(this.myOwner.onBoard[this.name]) { return true; } else{return false;}
};
//player constructor
var Player = function(playerNum) { this.number = playerNum; this.name = 'player' + playerNum; this.hp = null; this.cards = {}; this.inHand = {}; this.onBoard = {}; this.status = null; this.alive = null; this.isPlayer = true; this.hasTurn = null; this.pointsAvail = null; this.drawCardCost = 1;
};
//add to Player prototype
Player.prototype.addCard = function(cardInfoArray){ this.cards[cardInfoArray[0]] = new Card(cardInfoArray);
};
Player.prototype.getNewDeck = function() { this.cards = {}; this.inHand = {}; this.onBoard = {}; var thisPlayer = this; _.each(game.cardLibrary, function(cardInfo) { thisPlayer.addCard(cardInfo); }); //card.myOwner is its own parent (circular reference) var myPlayer = this; //for closure _.each(this.cards, function(card){ card.myOwner = myPlayer; });
};
Player.prototype.drawCard = function() { //if player doesn't have turn if(!this.hasTurn) { alert('It\'s not your turn...'); return; } //if player deck is empty if(gameFunc.isEmpty(this.cards)){ alert('Invalid move!\nYour deck is empty!'); return; } //if enought points, spend and draw card.. if(this.spendPoints(this.drawCardCost)){ var randCard = gameFunc.randObjProp(this.cards); this.inHand[randCard.name] = randCard; delete this.cards[randCard.name]; console.log('Player ' + this.number + ' drew card: ' + randCard.name); }
};
Player.prototype.playCard = function(cardName) { //if player doesn't have turn if(!this.hasTurn) { alert('It\'s not your turn...'); return; } //if player hand is empty if(!this.inHand[cardName]){ alert(cardName + ' does not exist in your hand..'); return; } //if player has the points to spend on the card.. if(this.spendPoints(this.inHand[cardName].cost)) { var expense = this.inHand[cardName].cost; this.onBoard[cardName] = this.inHand[cardName]; delete this.inHand[cardName]; console.log('Player ' + this.number + ' spent ' + expense + ' points to play ' + cardName + '.'); }
};
//need to implement this spend function.....
Player.prototype.spendPoints = function(toSpend) { if(toSpend > this.pointsAvail) { alert('Invalid move\nYou don\'t have enought points'); return false; } else { this.pointsAvail = this.pointsAvail - toSpend; return true; }
};
game.players.newPlayers = function(numPlayers) { for (var person in this){ if(this[person].isPlayer){ delete this[person]; } } var player = null; for(i = 0; i < numPlayers; i++) { player = "player" + (i + 1); this[player] = new Player(i+1); }
};
game.currentFight.cardsEligible = function(cardsInvArr) { if(!cardsInvArr[0].myOwner.hasTurn || cardsInvArr[1].myOwner.hasTurn){ alert('Invalid move!\nIt isn\'t your turn!'); return false; } for(i = 0; i < cardsInvArr.length; i++){ if(!cardsInvArr[i].isOnBoard()){ alert('Invalid Move!\n' + cardsInvArr[i].name + ' is not on the board!'); return false; } if(!cardsInvArr[i].alive) { alert(cardsInvArr[i].name + ' is already dead!' + '\nChoose a different card..'); return false; } } return true;
};
game.currentFight.logFight1v1 = function() { console.log(this.cardsInvolved[0].name + ' attacks ' + this.cardsInvolved[1].name + '!'); _.each(this.cardsInvolved, function(card) { card.logStatus(); });
};
game.currentFight.updateCardStatus = function() { _.each(this.cardsInvolved, function(card) { if(card.hp < 1) { card.alive = false; card.status = 'dead'; } else if(card.hp > 0) { //may never use this card.alive = true; card.status = 'alive'; } });
};
game.turn.rollTurn = function() { return gameFunc.getRandInt(1,2);
};
game.turn.nextTurn = function() { if(this.current === 1) { this.current = 2; if(this.whoStarted === 2){ game.round.nextRound(); } } else { this.current = 1; if(this.whoStarted === 1){ game.round.nextRound(); } } this.setHasTurn(); console.log('Player ' + this.current + ', Your turn');
};
game.turn.setHasTurn = function() { for(var player in game.players) { game.players[player].hasTurn = false; } var playerWithTurn = 'player' + this.current; game.players[playerWithTurn].hasTurn = true;
};
game.round.nextRound = function() { this.current++; console.log('Round: ' + this.current); var currentRound = this.current; _.each(game.players, function(player){ if(player.isPlayer){ player.pointsAvail = currentRound + 20; // temp point amount } });
};
// reset game method
game.resetGame = function() { this.players.newPlayers(2); for(var player in this.players) { var thisPlayer = this.players[player]; if(thisPlayer.isPlayer) { thisPlayer.getNewDeck(); thisPlayer.hp = 25; thisPlayer.status = 'alive'; thisPlayer.alive = true; } } this.turn.current = this.turn.whoStarted = game.turn.rollTurn(); this.turn.setHasTurn(); console.log('New Game Started!'); this.round.current = 0; this.round.nextRound(); console.log('Player ' + this.turn.current + ' goes first!');
};
//card battle function 1v1
game.currentFight.tradeAttack1v1 = function(card1, card2) { //console.log(card1); var cardsInvolved = this.cardsInvolved = [card1, card2]; if(!this.cardsEligible(cardsInvolved)) { return; } //fight! card2.hp = card2.hp - card1.attack; card1.hp = card1.hp - card2.attack; this.updateCardStatus(cardsInvolved); this.logFight1v1(); //log summary of fight
};
// GAME TESTING //
//initialize game
game.resetGame();
//saving cards to quick variables..
var p1drone = game.players.player1.cards['Patrol Drone'];
var p1assass = game.players.player1.cards['Dagger Assassin'];
var p1snail = game.players.player1.cards['Armored Snail'];
var p1inspector = game.players.player1.cards['Dark Coat Inspector'];
var p2drone = game.players.player2.cards['Patrol Drone'];
var p2assass = game.players.player2.cards['Dagger Assassin'];
var p2snail = game.players.player2.cards['Armored Snail'];
var p2inspector = game.players.player2.cards['Dark Coat Inspector'];
//save players to quick vars
var p1 = game.players.player1;
var p2 = game.players.player2;
// game.currentFight.tradeAttack1v1(p1drone, p2snail);
// game.turn.nextTurn();
// game.currentFight.tradeAttack1v1(p2inspector, p1assass);
// game.currentFight.tradeAttack1v1(p2inspector, p1drone);
// game.currentFight.tradeAttack1v1(p2inspector, p1drone);
// BUGS:
// TO DO:
// - cards on board vs cards in hand
// X need player.playCard() to put on board
// - need card.ready = true/false
// - need a "wait" function for situations where
// turns need to pass(ex. 'card is frozen for 2 turns')
// - card.status will include 'in deck', 'in hand', 'on board',
// 'stunned', 'dead'
//JQUERY GAME SETUP
//reset game
$('#resetGame').click(function() { game.resetGame();
});
//draw cards
$('#p1DrawCard').click(function() { game.players.player1.drawCard();
});
$('#p2DrawCard').click(function() { game.players.player2.drawCard();
});
//end turns
$('#p1EndTurn, #p2EndTurn').click(function() { game.turn.nextTurn();
});
//next:
//make DOM card IDs match the js card uniqueIDs
JS for card game - Script Codes
JS for card game - Script Codes
Home Page Home
Developer Harry Sadler
Username harrysadlermusic
Uploaded November 29, 2022
Rating 3
Size 5,115 Kb
Views 6,072
Do you need developer help for JS for card game?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Harry Sadler (harrysadlermusic) Script Codes
Name
SFS Secret Store
Page layout
SFS hover effect v8
Change Table Cells with Slider
Simple Javascript Quiz
SFS hover cross-browser testing
A hover effect
Audio Button example
A hover effect SFS draft
Secret Store - item filter v3
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!