Learning Javascript using the game DOMINO
This page describes the game:
DOMINO
The game Domino is written in JavaScript and standard HTML commands.
The game is created on the principles of Domino cubes. The cubes show the most popular web browsers logos.
The game is for 4 players. The first 3 players are the virtual ones managed by a computer.
The player has 7 domino cubes. The player, which has the domino with Apple Safari logo, begins. This player continues in the game only with 6 cubes. Players take turns one. The player has to choose the cube with the same logo as there are the outer cubes in the playing area. When the player has no cube with the same logo, he should click on the button pass. The winner is the player which as the first one has no cube.
The objective of the game is to help the players to orientate in the most popular web browsers.
The "Teachers Guide" button will show a brief description of the game and its purpose within the Ingot project.
Game Download
The game can be copied and modified according to your own skills from here:
Right clicking the mouse will bring up a menu. The "View Source" item on the menu must be selected (the text of the menu can differ slightly according to the browser used; the text "View Source" refers to the Internet Explorer browser and the "View Page Source" is used by the Mozilla Firefox browser).
Mark the text using standard Windows OS commands (e.g. CTRL+A) and copy it into the clipboard (e.g. CTRL+C). Open any text editor capable of processing plain text (e.g. Notepad, which is part of Windows OS) and paste the text into the editor from the clipboard (e.g. CTRL+V).
Save the text displayed in the word editor as a file of any name and use either "html" or "htm" extension, which is the standard for the files to be opened in any internet browser.
Images are another essential part of the game.There are saved in the subfolder Images.
The list of images used is as follows:
0.gif, 1.gif , 2.gif , 3.gif , 4.gif , 5.gif, 6.gif, – web browsers logos images
n.gif – background image.
The images can be downloaded via changing the address in the browser bar: "domino.htm"is replaced e.g. with „images/0.gif“as shown on the example below.
(e.g. javascript/domino/domino.htm to javascript/domino/images/0.gif)
After pressing "Enter" on the keyboard, a dialog box will prompt you to save a file. The file must be saved under the same name and extension and into the same directory containing the previous file.
The image must be also saved in the subdirectory named "images", which must be created beforehand.
Correct function of all downloaded components of the game can be verified by launching the“domino.htm” file.
Replacing Images
The game images can be replaced with your own ones. The game background can be modified under the following conditions:
- the image files must have an identical name and extension(more experienced programmers can use a different type of the image file, provided they modify its source code accordingly as described below)
- the game background is only a template, which consists of its repeated parts
- the game background must be transparent (description of this feature is outside of the scope of this manual and can be found on the web)
- the images must have an identical length and width measured in pixels (description of this feature is outside of the scope of this manual and can be found on the web)
Changes of the Directory Name, Using Different Image File Formats
If the different names must be used for image files or a subdirectory containing them, it is necessary to modify them properly by editing the "domino.htm" file. This action is designed for more experienced programmers.
All expressions "images" present in the code must be replaced with your own ones.The expression "images" is the name of the directory where the images are stored:
- All expressions "gif" present in the code must be replaced with your own ones.The expression "gif" is the file extension of the image files used. The image file format can be replaced by extensions "png" or "jpg" (except for the background, which must be transparent – description of this feature is outside of the scope of this manual and can be found on the web)
Possibility to switch on the dialog window feature of the drawing player
This procedure is intended for the advanced users with the basic knowledge of Javascript.
There is possible in the game to allow the dialog window featuring the number of the drawing player. (The number of the player which clicks on “pass” is not featured.)
There is necessary to find the following line in the Javascript code:
//alert(currentplayer)
After rejection of the comment there will be featured the dialog window with the number of the drawing player. This window must be confirmed by the button OK. Dialog can be modified by own text.
Brief Description of the Game Functions in JavaScript Language
As mentioned earlier, the game is written using JavaScript and HTML commands. Brief help descriptions for functions and elements, and descriptions of variables are stated directly in the code (in the comment lines). In order to understand the function, basic knowledge of JavaScript and HTML programming is necessary.
Html code enables the feature of the graphical items in text, links and buttons:
<HTML>
<HEAD>
<TITLE>Domino-Internet browsers</TITLE>
<META NAME="keywords" CONTENT="Domino, Javascript, Game">
<META NAME="description" CONTENT="This Domino game against three computer player">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="css/game.css" />
</HEAD>
<body bgcolor="#ffffff" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
<!--page content-->
<h3 align="center">
Domino-Internet browsers
</p>
<form name="gameboard">
<hr>
<p align="center">
<table cellpadding=0 cellspacing=0 border=0 width="120"0>
<tr >
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s1"><img src = "images/n.gif" height="60" width="60" border="0" name="s2"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s3"><img src = "images/n.gif" height="60" width="60" border="0" name="s4"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s5"><img src = "images/n.gif" height="60" width="60" border="0" name="s6"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s7"><img src = "images/n.gif" height="60" width="60" border="0" name="s8"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s9"><img src = "images/n.gif" height="60" width="60" border="0" name="s10"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s11"><img src = "images/n.gif" height="60" width="60" border="0" name="s12"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s13"><img src = "images/n.gif" height="60" width="60" border="0" name="s14"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s15"><img src = "images/n.gif" height="60" width="60" border="0" name="s16"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s17"><img src = "images/n.gif" height="60" width="60" border="0" name="s18"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s19"><img src = "images/n.gif" height="60" width="60" border="0" name="s20"></td>
</tr>
<!-- left border-->
<tr><td align=left>
<table width=30 cellpadding=0 cellspacing=0 border=0>
<tr><td><img src = "images/n.gif"
height="60" width="60" border="0" name="s56"><br><img src = "images/n.gif"
height="60" width="60" border="0" name="s55"></td>
</tr>
<tr><td><img src = "images/n.gif"
height="60" width="60" border="0" name="s54"><br><img src = "images/n.gif"
height="60" width="60" border="0" name="s53"></td>
</tr>
<tr><td><img src = "images/n.gif"
height="60" width="60" border="0" name="s52"><br><img src = "images/n.gif"
height="60" width="60" border="0" name="s51"></td>
</tr>
<tr><td><img src = "images/n.gif"
height="60" width="60" border="0" name="s50"><br><img src = "images/n.gif"
height="60" width="60" border="0" name="s49"></td></tr>
</table>
</td>
<td colspan=8 valign=top align=middle>
<br><br>
<center>
</center>
<table cellpadding=2 cellspacing=5 border=1 width=420>
<tr>
<td width="120"><a href="javascript:void()" onclick="setinput(1,1);nextplayer();return false;"><img src = "images/n.gif" height="60" width="60" border="0" name="sm11"></a><a href="javascript:void()" onclick="setinput(1,2);nextplayer();return false;"><img src = "images/n.gif" height="60" width="60" border="0" name="sm12"></a></td>
<td width="120"><a href="javascript:void()" onclick="setinput(2,1);nextplayer();return false;"><img src = "images/n.gif" height="60" width="60" border="0" name="sm21"></a><a href="javascript:void()" onclick="setinput(2,2);nextplayer();return false;"><img src = "images/n.gif" height="60" width="60" border="0" name="sm22"></a></td>
<td width="120"><a href="javascript:void()" onclick="setinput(3,1);nextplayer();return false;"><img src = "images/n.gif" height="60" width="60" border="0" name="sm31"></a><a href="javascript:void()" onclick="setinput(3,2);nextplayer();return false;"><img src = "images/n.gif" height="60" width="60" border="0" name="sm32"></a></td>
<td width="120"><a href="javascript:void()" onclick="setinput(4,1);nextplayer();return false;"><img src = "images/n.gif" height="60" width="60" border="0" name="sm41"></a><a href="javascript:void()" onclick="setinput(4,2);nextplayer();return false;"><img src = "images/n.gif" height="60" width="60" border="0" name="sm42"></a></td>
<td width="120"><a href="javascript:void()" onclick="setinput(5,1);nextplayer();return false;"><img src = "images/n.gif" height="60" width="60" border="0" name="sm51"></a><a href="javascript:void()" onclick="setinput(5,2);nextplayer();return false;"><img src = "images/n.gif" height="60" width="60" border="0" name="sm52"></a></td>
<td width="120"><a href="javascript:void()" onclick="setinput(6,1);nextplayer();return false;"><img src = "images/n.gif" height="60" width="60" border="0" name="sm61"></a><a href="javascript:void()" onclick="setinput(6,2);nextplayer();return false;"><img src = "images/n.gif" height="60" width="60" border="0" name="sm62"></a></td>
<td width="120"><a href="javascript:void()" onclick="setinput(7,1);nextplayer();return false;"><img src = "images/n.gif" height="60" width="60" border="0" name="sm71"></a><a href="javascript:void()" onclick="setinput(7,2);nextplayer();return false;"><img src = "images/n.gif" height="60" width="60" border="0" name="sm72"></a></td>
</tr>
</table>
<br>
<input type ="button" value="Nová hra" onclick="initgame()">
<input type ="button" value="Vynechat" onclick="inputbufferstone=10;nextplayer();">
<INPUT TYPE="TEXT" SIZE="20" VALUE="" NAME=alertbox>
<table border=0><tr>
<td>
<font size="1" face="arial">Player1 : Computer</font></td>
<td><input type ="text" value="0" name="showplayer1" size=3></td>
<td> </td>
<td><font size="1" face="arial">Player 2 : PC </font></td>
<td><input type ="text" value="0" name="showplayer2" size=3></td></tr>
<tr><td><font size="1" face="arial">Player 3 : Notebook</font></td>
<td><input type ="text" value="0" name="showplayer3" size=3></td>
<td> </td>
<td><font size="1" face="arial">Player 4 : Ty </font></td>
<td><input type ="text" value="0" name="showplayer4" size=3></td></tr>
</td></tr>
</table><br>
</td>
<!--right border-->
<td align=right>
<table width=30 cellpadding=0 cellspacing=0 border=0>
<tr><td><img src = "images/n.gif"
height="60" width="60" border="0" name="s21"><br><img src = "images/n.gif"
height="60" width="60" border="0" name="s22"></td>
</tr>
<tr><td><img src = "images/n.gif"
height="60" width="60" border="0" name="s23"><br><img src = "images/n.gif"
height="60" width="60" border="0" name="s24"></td>
</tr>
<tr><td><img src = "images/n.gif"
height="60" width="60" border="0" name="s25"><br><img src = "images/n.gif"
height="60" width="60" border="0" name="s26"></td>
</tr>
<tr><td><img src = "images/n.gif"
height="60" width="60" border="0" name="s27"><br><img src = "images/n.gif"
height="60" width="60" border="0" name="s28"></td></tr>
</table>
</td></tr>
<!--bottom row-->
<tr>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s48"><img src = "images/n.gif" height="60" width="60" border="0"
name="s47"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s46"><img src = "images/n.gif" height="60" width="60" border="0" name="s45"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s44"><img src = "images/n.gif" height="60" width="60" border="0" name="s43"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s42"><img src = "images/n.gif" height="60" width="60" border="0" name="s41"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s40"><img src = "images/n.gif" height="60" width="60" border="0" name="s39"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s38"><img src = "images/n.gif" height="60" width="60" border="0" name="s37"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s36"><img src = "images/n.gif" height="60" width="60" border="0" name="s35"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s34"><img src = "images/n.gif" height="60" width="60" border="0" name="s33"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s32"><img src = "images/n.gif" height="60" width="60" border="0" name="s31"></td>
<td width="120"><img src = "images/n.gif" height="60" width="60" border="0" name="s30"><img src = "images/n.gif" height="60" width="60" border="0" name="s29"></td>
</tr>
</table>
<hr>
<center>
<a href="teachers_guide.htm" target="_blank">Teacher's guide</a>
</center>
</form>
</center>
Javascript code:
Definition of variables
<SCRIPT LANGUAGE="JavaScript">
<!--
//define field
var field = new Array(28);
var leftpointer=9 ;
var rightpointer=10;
//set next player to 0 for no gameplay
var currentplayer=0;
var playerscores = new Array(5);
var score=0
for (n=1;n<5;n++) playerscores[n] = 0;
var inputbufferstone=0
var inputbufferstoneside=0
function setinput(x,y) { inputbufferstone=x; inputbufferstoneside=y; }
var has_to_restart=false;
Definition and initialization of the fairway
//define field of stones from 1-28 and fill it with double for to next
var field = new Array(28);
var stones = new Array();
for (n=1;n<29;n++) stones[n] = new Array();
var piece=0;
for (n=0;n<7;n++)
{
for (m=n;m<7;m++)
{
piece++
stones[piece][1] =n;//left
stones[piece][2] =m;//right
stones[piece][3]=m+n;//holds points number
if(m==n) stones[piece][3]=stones[piece][3]+20;
}
}
Initialization of the players cubes
//distribute stones to 4 players
var playerhold = new Array()
//playerhold[player=1-4][stone=0-6
for (n=1;n<5;n++)
{
playerhold[n] = new Array()
for (m=0;m<7;m++)
{
playerhold[n][m] =28;//correct value is inserted in initgam
}
}
Function for the game initialization – random sample and the cubes assignment
function initgame()
{
// if(!has_to_restart)return;
clearfield()
inputbufferstone=0;
for (n=1;n<5;n++)
{
for (m=0;m<7;m++)
{
playerhold[n][m] =(m+1)+(n-1)*7
}
}
for (n=1;n<29;n++)
{
tmp=Math.floor(Math.random()*27+1)
if(tmp==29) tmp=28 ;//range defined from 1-28
tp=Math.floor((tmp-0.5)/7);//tmp player von 0-3
ts=tmp-tp*7-1;//range from 0-6
np=Math.floor((n-0.5)/7);//n player von 0-3
ns=n-np*7-1;//range from 0-6
swaptemp=playerhold[tp+1][ts]
playerhold[tp+1][ts]=playerhold[np+1][ns]
playerhold[np+1][ns]=swaptemp
}
//sort all non human players
for(n=1;n<5;n++)
{
//not fourth - player is human
for(m=0;m<7;m++)
{
smallpos=m
smallvalue=stones[playerhold[n][m]][3]
//find smallest
for (i=m;i<7;i++)
{
if (smallvalue>stones[playerhold[n][i]][3])
{
smallpos=i;
smallvalue=stones[playerhold[n][i]][3];
}
}
//swap smallest with m
tmp=playerhold[n][m]
playerhold[n][m]=playerhold[n][smallpos];
playerhold[n][smallpos]=tmp;
//select sort for one player finished
}
//finished sort for each nonhuman player
}
for(n=1;n<5;n++)
{
for(m=0;m<7;m++)
if (playerhold[n][m]==1)
{
//identify first player by 0:0
playerhold[n][m]=0;//first stone removed out of playerhold
pickstone=m
currentplayer=n
}
}
The cubes depiction at the playing area
//place it on the desk
window.document.gameboard.s9.src = "images/0.gif"
window.document.gameboard.s10.src = "images/0.gif"
The counter setting
//set pointer on the board
field[9]=0
field[10]=0
leftpointer=9 ;
rightpointer=10;
showhuman();
has_to_restart=false;
} ;//end of init game
Function for the next player game
function nextplayer()
{
if (has_to_restart) return;
currentplayer++
if (currentplayer==5) currentplayer=1
n=currentplayer
//look on field
putvalue1=field[leftpointer];//stonenumber
putvalue2=field[rightpointer]
if (currentplayer==4)
{
// player is human check for input.
if (inputbufferstone==10)
{
//pass
inputbufferstone=0;
checkmoveleft();
nextplayer();
return;
}
if (inputbufferstone==0)
{
// if no input wait another second before calling next player again
currentplayer--;
return;
}
else
{
// if input - read input
st=playerhold[4][inputbufferstone-1]
if (st==0) { currentplayer--;
return; }
stv1=stones[st][inputbufferstoneside]
stv2=stones[st][abso(inputbufferstoneside-3)]
if ( putvalue1==stv1)
{
//if yes show it in the field change and change pointer
leftpointer--
if ( leftpointer<1) leftpointer=56
eval("window.document.gameboard.s"+leftpointer+".src = 'images/"+stv1+".gif'")
field[leftpointer]=stv1
leftpointer--
eval("window.document.gameboard.s"+leftpointer+".src = 'images/"+stv2+".gif'")
field[leftpointer]=stv2
}
else
{
if ( putvalue2==stv1)
{
rightpointer++
if (rightpointer>56) rightpointer=1
eval("window.document.gameboard.s"+rightpointer+".src = 'images/"+stv1+".gif'")
field[rightpointer]=stv1
rightpointer++
eval("window.document.gameboard.s"+rightpointer+".src = 'images/"+stv2+".gif'")
field[rightpointer]=stv2
}
else
{
//check on fit for the other stoneside
if ( putvalue1==stv2)
{
leftpointer--
if ( leftpointer<1) leftpointer=56
eval("window.document.gameboard.s"+leftpointer+".src = 'images/"+stv2+".gif'")
field[leftpointer]=stv2
leftpointer--
eval("window.document.gameboard.s"+leftpointer+".src = 'images/"+stv1+".gif'")
field[leftpointer]=stv1
}
else
{
if ( putvalue2==stv2)
{
rightpointer++
if (rightpointer>56) rightpointer=1
eval("window.document.gameboard.s"+rightpointer+".src = 'images/"+stv2+".gif'")
field[rightpointer]=stv2
rightpointer++
eval("window.document.gameboard.s"+rightpointer+".src = 'images/"+stv1+".gif'")
field[rightpointer]=stv1
}
else
{
currentplayer--
// if input read- empty buffer
inputbufferstone=0
return;
}
}
}
}
//remove stone from player
playerhold[4][inputbufferstone-1]=0
// if input read- empty buffer
inputbufferstone=0
showhuman()
if(!gameover(n)) {
nextplayer();
}
return;
}
// check on fit for the right and do the same as for left and return
// or return!
}
else
{
//player is machine
//take first right in own stone array and call next
firststone=-1
for (m=6;m>(-1);m--)
{
st=playerhold[n][m]
if(!(st==0) && firststone==-1)
{
if (stones[st][1]==putvalue1) firststone=m
if (stones[st][1]==putvalue2) firststone=m
if (stones[st][2]==putvalue1) firststone=m
if (stones[st][2]==putvalue2) firststone=m
}
}
if (firststone==-1) {
//#setTimeout("nextplayer()",5);
//pass
nextplayer();
return;
}
//line above passed.
m=firststone;
stv1=stones[playerhold[n][m]][1];//catch stone values
stv2=stones[playerhold[n][m]][2];//catch stone values
if (putvalue1==stv1 || putvalue1==stv2)
{
//left
if ( putvalue1==stv2) {tmp=stv2;stv2=stv1;stv1=tmp;}
leftpointer--
if ( leftpointer<1) leftpointer=56
eval("window.document.gameboard.s"+leftpointer+".src = 'images/"+stv1+".gif'")
field[leftpointer]=stv1
leftpointer--
eval("window.document.gameboard.s"+leftpointer+".src = 'images/"+stv2+".gif'")
field[leftpointer]=stv2
Possibility to feature the dialog window with the numbers of the actually playing players
// display number of current player
//alert(currentplayer)
}
else
{
//left
if ( putvalue2==stv2) {tmp=stv2;stv2=stv1;stv1=tmp;}
rightpointer++
if (rightpointer>56) rightpointer=1
eval("window.document.gameboard.s"+rightpointer+".src = 'images/"+stv1+".gif'")
field[rightpointer]=stv1
rightpointer++
eval("window.document.gameboard.s"+rightpointer+".src = 'images/"+stv2+".gif'")
field[rightpointer]=stv2
pausecomp(500)
}
playerhold[n][m]=0
//end of machine
}
if(!gameover(n)) {
//setTimeout("nextplayer()",5)
nextplayer();
}
return;
}
Function game over
function gameover(pl1)
{sum=0
for (m2t=0;m2t<7;m2t++) sum=sum+playerhold[pl1][m2t];
if (sum>0) return false;
alerting("Player "+pl1+" won!")
addpoints();
has_to_restart=true;
return true;
}
Function for control of remaining cubes of the players
function checkmoveleft()
{
pr1=field[leftpointer]
pr2=field[rightpointer]
if (!(pr2==pr1)) return;
m2z=0
n2z=0
stonefound=false
for (n2z=1;n2z<5;n2z++)
for (m2z=0;m2z<7;m2z++)
for (k2=1;k2<3;k2++)
{
st2=playerhold[n2z][m2z]
if (!(st2==0)) { if (stones[st2][k2]==pr2) stonefound=true; }
}
if (stonefound) return;
alerting("Nobody won");
addpoints();
has_to_restart=true;
return;
}
Function for the player no. 4 (the human player)
function showhuman()
{
for(m=0;m<7;m++)
{
ts=playerhold[4][m];//temp placeholder for the stone
if (ts==0)
{
eval("window.document.gameboard.sm"+(m+1)+"1.src = 'images/n.gif'")
eval("window.document.gameboard.sm"+(m+1)+"2.src = 'images/n.gif'")
}
else
{
eval("window.document.gameboard.sm"+(m+1)+"1.src = 'images/"+stones[ts][1]+".gif'")
eval("window.document.gameboard.sm"+(m+1)+"2.src = 'images/"+stones[ts][2]+".gif'")
}
}
}
Function for deleting the playing area
function clearfield()
{
for (z1=1;z1<57;z1++)
eval("window.document.gameboard.s"+z1+".src = 'images/n.gif'");
alerting(" ");
}
Function for score update
function addpoints()
{
for (n=1;n<5;n++)
{
for (m=0;m<7;m++)
{
sttmp=playerhold[n][m];
v=0;
if (!(sttmp==0)) v=stones[sttmp][3];
if(v>15) v-=20;
playerscores[n] += v;
}
eval("window.document.gameboard.showplayer"+n+".value=playerscores[n]")
}
score=playerscores[1]+playerscores[2]+playerscores[3]-playerscores[4]*2
//if (score<0) score=0
//window.document.scoreform.newscore.value=score;
}
Function for the dialog windows
function alerting(alertmsg)
{
window.document.gameboard.alertbox.value=alertmsg
}
Function for upload the domino cubes
function abso(valt)
{
if (valt<0) valt=valt*(-1)
return valt
}
z1 = new Image(30, 30);
z1.src = "images/n.gif" ;
a1 = new Image(30, 30);
a1.src = "images/0.gif" ;
b1 = new Image(30, 30);
b1.src = "images/1.gif" ;
c1 = new Image(30, 30);
c1.src = "images/2.gif" ;
d1 = new Image(30, 30);
d1.src = "images/3.gif" ;
e1 = new Image(30, 30);
e1.src = "images/4.gif" ;
f1 = new Image(30, 30);
f1.src = "images/5.gif" ;
g1 = new Image(30, 30);
g1.src = "images/6.gif" ;
Function for the pause
function pausecomp(millis)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}
has_to_restart=true;
initgame();
//-->
</SCRIPT>
Standard ending HTML code
<br>
</body></html>
