This game was a group project. It involved coding with JavaScript, HTML, and CSS. This was our first exposure to JavaScript, and it took almost half of a semester to complete. The code is below;
<!DOCTYPE HTML>
<html>
<head>
<style>
.startbutton{
position: center;
display: block;
left: 126px;
top: 46px;
}
.drawButton{
position: absolute;
display: block;
left: 455px;
top: 705px;
}
.card{
position: absolute;
display: block;
}
.card1, .card2, .card3, .card4, .card5{
position: absolute;
display: block;
top: 382px;
z-index: 10;
}
.card1{
left: 249px;
}
.card2{
left: 421px;
}
.card3{
left: 423px;
}
.card4{
left: 605px;
}
.card5{
left: 787px;
}
#score{
position: absolute;
display: block;
left: 112px;
top: 210px;
line-height: 26px;
font-size: 14px;
}
</style>
<script type="text/javascript">
//overall game section
//Card suits and values
var suits = ['clubs', 'diamonds', 'hearts', 'spades'];
var values = ['two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'jack', 'queen', 'king', 'ace'];
function init(){
theDeck = new Deck();
player1 = theDeck.deck.slice(0,25);
player2 = theDeck.deck.slice(25,51);
document.getElementById('startbutton').onmouseup = draw;
document.getElementById('resetbutton').onmouseup = reset;
document.getElementById('instructionbutton').onmouseup = instructions;
//document.getElementById('player1button').onmouseup = player1;
//document.getElementById('player2button').onmouseup = player2;
//document.getElementById('scorebutton').onmouseup = score;
// play();
}
function startGame(){
thePlayer.redrawHand();
thePlayer.score -= 1;
}
function draw(oldcards){
var card1 = player1.shift();
var card2 = player2.shift();
console.log(player2);
card1.img.className = 'card1';
card2.img.className = 'card2';
card1.show();
card2.show();
if(card1.numbervalue> card2.numbervalue){
player1.push(card1)
player1.push(card2)
console.log("p1 win")
}
if(card1.numbervalue< card2.numbervalue){
player2.push(card1)
player2.push(card2)
console.log("p2 win")
}
if(card1.numbervalue== card2.numbervalue){
var drawn=[card1,card2]
drawn.push(player1.shift());
drawn.push(player2.shift());
drawn.push(player1.shift());
drawn.push(player2.shift());
console.log("tie")
draw(drawn);
}
document.getElementById('player1score').innerHTML = player1.length
document.getElementById('player2score').innerHTML = player2.length
// thePlayer.redrawHand();
// thePlayer.checkHand();
}
function reset(){
document.location.href = document.location.href;
}
function instructions(){
}
/**
* Card class
* Defines the data associated with a card, including
* the DOM object for an image tag to represent the card
* @params:
* ordValue int Ordered integer value of a card (0-51?)
* value str String for the value of the card
* suit str String for the suit of the card
* display bool Whether to add the image to the DOM
*/
function Card(ordValue, value, suit, display){
this.value = value;
this.suit = suit;
this.numbervalue = 0;
this.isFaceUp = true;
this.img = document.createElement('img');
this.img.className = "card";
this.imgSrcFront = "img/"+value+"."+suit+".jpg"; //image source for card
this.imgSrcBack = "img/back.jpg";
this.img.src = this.imgSrcFront; //default face up
if(display==true){
document.body.appendChild(this.img);
}
switch(value){
case "two":this.numbervalue = 2; break;
case "three":this.numbervalue = 3; break;
case "four":this.numbervalue = 4; break;
case "five":this.numbervalue = 5; break;
case "six":this.numbervalue = 6; break;
case "seven":this.numbervalue = 7; break;
case "eight":this.numbervalue = 8; break;
case "nine":this.numbervalue = 9; break;
case "ten":this.numbervalue = 10; break;
case "jack":this.numbervalue = 11; break;
case "queen":this.numbervalue = 12; break;
case "king":this.numbervalue = 13; break;
case "ace":this.numbervalue = 14; break;
}
//give the card image a handle back to the object for events
this.img.cardObj = this;
this.show = function(offset){
document.body.appendChild(this.img);
}
this.hide = function(){
this.img.parentNode.removeChild(this.img);
}
this.flip = function(){
if(this.isFaceUp==true){ //card is up, show back to flip over
this.img.src = this.imgSrcBack;
this.isFaceUp = false;
} else { //card is down, flip over front
this.img.src = this.imgSrcFront;
this.isFaceUp = true;
}
}
}
/**
* Deck class
* defines the data and methods of the deck
* includes some game-specific structures, like
* the inPlay array and knowing what the current
* card in play is.
*/
function Deck(){
//make data arrays
this.deck = [];
this.inPlay = [];
this.currentCard = false; //one card, not an array
//this is the function that constructs a new deck
//it will automatically be called when new Deck() is
//called
this.construct = function(){
for(var i=0; i<suits.length; i++){
for(var j=0; j<values.length; j++){
var newCard = new Card(j+i*j, values[j], suits[i], false);
this.deck.push(newCard);
}
}
this.shuffle();
}
//Shuffles the deck
this.shuffle = function(){
for(var i=this.deck.length-1; i>0; i--){
var card = Math.floor(Math.random()*this.deck.length);
var temp = this.deck[i];
this.deck[i] = this.deck[card];
this.deck[card] = temp;
}
}
//Draws a card from the deck
//Drawing a card means taking the top card out of the deck
//array and returning it.
this.draw = function(){
if(this.deck.length > 0) return this.deck.pop();
return false;
}
//Now that all the methods are defined, call construct
this.construct();
}
</script>
<title>War</title>
</head>
<body onload="init()"> <style>
.background{
background-color: green
}
</style>
<img src="img/start.png" id="startbutton" />
<img src="img/war.jpg" id="title" />
<img src="img/reset.png" id="resetbutton" />
<div id="player1score"></div>
<div id="player2score"></div>
</body>
</html>