For the final in NMD 295, the class divided into groups and made card games from javascript code. As you can see below, my group chose the game War. On the real page, the buttons are interactive and you can play against the computer.
Below, you can examine the code that my group created in order to make the game.
<!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>