Learning Javascript using the game PUZZLE

PUZZLE – COMPUTERS

The game Puzzle – Computers uses Javascript, scripting language
PHP and standard HTML commands.

Before playing the game there is possible to meet with the most IT components.

When putting the mouse on the particular device there is the interactive voice which names the chosen device.

The player's objective is to compose a chosen picture:
- a desktop with an analogue monitor,

- a desktop with LCD monitor,

- a notebook or

- a smartphone.

The picture is decomposed to 9 or 16 pieces, according to the chosen level – level 1 or level 2.

By pressing the button “Shuffle” the pieces are randomly shuffled and the timer is displayed on the gaming area. After the successful finish the window with the total time needed for the game is displayed. The time has also the verbal comment.

The button “Build a different computer” enables to return to the main screen and select a different picture.

A "Teachers Guide" button is the link to a brief description of the game and its purpose within the Ingot project.

Game Description

Right-clicking the mouse will bring up a menu and the item "View Source" must be selected (the text can differ slightly according to the browser used; the text "View Source" refers to the Internet Explorer browser; the Mozilla Firefox uses the text "View Page Source").

The text is marked using standard Windows OS commands (e.g. the keyboard shortcut CTRL+A) and copied into the clipboard (e.g. the keyboard shortcut CTRL+C). Any text editor capable of processing the plain text is opened (e.g. the program Notepad, which is part of the Windows OS) and the text is pasted into it from the clipboard (e.g. the keyboard shortcut CTRL+V).
The text in the word editor is saved into a file. The file can have any name but must have an extension of "html" or "htm" (the standard extension for files to be opened with an internet browser).

The game code is further saved in 2 files: games.js and wz_dragdrop.js

The files can be copied and viewed.

The file can be downloaded by deleting the “start.htm” and replaced by e.g. js/games.js
(the files are saved in the sub-folder js).

Brief Description of the Game Functions in Javascript Language

As mentioned earlier, the game is written using the Javascript and HTML commands. Brief help descriptions of the functions and elements, and the descriptions of the variables are stated directly in the code (in the comment lines). In order to understand the function, basic knowledge of the Javascript and HTML programming is necessary.

Parts of the code are repeated calls for simplification of procedures and functions written in PHP. Experienced programmer can modify these parts e.g. to the VB script asp language.
Depending on the platform where the game is located.

Source code asp scripts is below:

It consists from 2 files.

Master boot code file puzzle.php:

<? include "common.php"; ?>

SET_DHTML(CURSOR_MOVE,
"block_11","block_12","block_13",
"block_21","block_22","block_23",
"block_31","block_32","block_33"
);

var block = new Array();
block[0] = "block_11";
block[1] = "block_12";
block[2] = "block_13";
block[3] = "block_21";
block[4] = "block_22";
block[5] = "block_23";
block[6] = "block_31";
block[7] = "block_32";
block[8] = "block_33";

function shuffle() {

var i;
for (i=0; i < 90; i++) {
r1 = (Math.round(Math.random()*8));
r2 = (Math.round(Math.random()*8));

x1 = dd.elements[block[r1]].x;
y1 = dd.elements[block[r1]].y;
x2 = dd.elements[block[r2]].x;
y2 = dd.elements[block[r2]].y;

dd.elements[block[r1]].moveTo(x2,y2);
dd.elements[block[r2]].moveTo(x1,y1);
}

startclock();
}

function reset() {
dd.elements.block_11.moveTo(100, 10);
dd.elements.block_12.moveTo(280, 10);
dd.elements.block_13.moveTo(460, 10);
dd.elements.block_21.moveTo(100, 190);
dd.elements.block_22.moveTo(280, 190);
dd.elements.block_23.moveTo(460, 190);
dd.elements.block_31.moveTo(100, 370);
dd.elements.block_32.moveTo(280, 370);
dd.elements.block_33.moveTo(460, 370);

stopclock();

sekunda=0;
document.puzzle.zobrcas.value = "Time:"+sekunda;
}
</script>　

<div style="position:absolute; top: 80px; left: 10px;">
<form name="puzzle">
<div class="button-green"> <a class="button" href="javascript:shuffle()">Shuffle</a> </div>
<div class="button-blue"> <a class="button" href="javascript:reset()">Restart</a> </div>
<br />

<div class="button-red"> <a class="button" href="javascript:reset()">Level 1</a> </div>
<div class="button-blue"> <a class="button" href="puzzle.php?priznak=<? print priznak ?>&level=2">Level 2</a> </div>

<br />
<INPUT TYPE="button" NAME="zobrcas" VALUE ="Time:0">
</div>
<div style="position:absolute; top: 14px; left: 5px">
<h5><a href="javascript:teachers_guide()">Teachers guide</a></h5>
</form>
</div>

<?
}
else
{
?>　

var level=2;

SET_DHTML(CURSOR_MOVE,

"block_11","block_12","block_13","block_14",
"block_21","block_22","block_23","block_24",
"block_31","block_32","block_33","block_34",
"block_41","block_42","block_43","block_44"
);

var block = new Array();

block[0] = "block_11";
block[1] = "block_12";
block[2] = "block_13";
block[3] = "block_14";
block[4] = "block_21";
block[5] = "block_22";
block[6] = "block_23";
block[7] = "block_24";
block[8] = "block_31";
block[9] = "block_32";
block[10] = "block_33";
block[11] = "block_34";
block[12] = "block_41";
block[13] = "block_42";
block[14] = "block_43";
block[15] = "block_44";

function shuffle() {

var i;

for (i=0; i < 160; i++) {

r1 = (Math.round(Math.random()*15));
r2 = (Math.round(Math.random()*15));

x1 = dd.elements[block[r1]].x;
y1 = dd.elements[block[r1]].y;
x2 = dd.elements[block[r2]].x;
y2 = dd.elements[block[r2]].y;

dd.elements[block[r1]].moveTo(x2,y2);
dd.elements[block[r2]].moveTo(x1,y1);
}

startclock();

}

function reset() {

dd.elements.block_11.moveTo(100, 10);
dd.elements.block_12.moveTo(235, 10);
dd.elements.block_13.moveTo(370, 10);
dd.elements.block_14.moveTo(505, 10);
dd.elements.block_21.moveTo(100, 145);
dd.elements.block_22.moveTo(235, 145);
dd.elements.block_23.moveTo(370, 145);
dd.elements.block_24.moveTo(505, 145);
dd.elements.block_31.moveTo(100, 280);
dd.elements.block_32.moveTo(235, 280);
dd.elements.block_33.moveTo(370, 280);
dd.elements.block_34.moveTo(505, 280);
dd.elements.block_41.moveTo(100, 415);
dd.elements.block_42.moveTo(235, 415);
dd.elements.block_43.moveTo(370, 415);
dd.elements.block_44.moveTo(505, 415);

stopclock();

sekunda=0;

document.puzzle.zobrcas.value = "Time:"+sekunda;

}

</script>
</body>
</html>

<br />

<div class="button-blue"> <a class="button" href="puzzle.php?priznak=<? print priznak ?>&level=1">Level 1</a> </div>
<div class="button-red"> <a class="button" href="javascript:reset()">Level 2</a> </div>

<br />

</div>
<br />
</div>
<div style="position:absolute; top: 14px; left: 5px">
<h5><a href="javascript:teachers_guide()">Teachers guide</a></h5>
</form>
</div>
<?
}

var timerID = null;
var timerRunning = false;
var sekunda =0;

function stopclock(){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}

function startclock(){

// Make sure the clock is stopped

sekunda =0;
stopclock();
showtime();

}

function showtime(){

sekunda++;
document.puzzle.zobrcas.value = "Time:"+sekunda;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}　

var holdX = 0; /* X pos of the block I'm holding. */
var holdY = 0; /* Y pos of the block I'm holding. */

function my_PickFunc() {

/* A block is picked up. */

holdX = dd.obj.x;
holdY = dd.obj.y;

}

function my_DropFunc() {

/* A image is dropped - swap images */

var i;
var moved = false;
for (i in block) {
if (!isOver(dd.elements[block[i]])) continue;
b = block[i];
dd.obj.moveTo(dd.elements[b].x,dd.elements[b].y);
dd.elements[b].moveTo(holdX, holdY);
moved = true;
}

if (!moved) {
dd.obj.moveTo(holdX, holdY);
}

checkend();

}

function isOver(obj) {

if (obj == dd.obj) return false;
if (dd.e.x < obj.x) return false;
if (dd.e.y < obj.y) return false;
if (dd.e.x > obj.x + obj.w) return false;
if (dd.e.y > obj.y + obj.h) return false;
return true;

}

function checkend()

{

var theend=1;
var pos_x=100;
var pos_y=10;

if (block.length==9)

{
increment=180;
end_x=460;
}
else
{
increment=135;
end_x=505;

}

for (i=0;i<block.length;i++)
{
if (dd.elements[block[i]].x!=pos_x || dd.elements[block[i]].y!=pos_y)
{
theend=0;
}

if (pos_x==end_x)

{
pos_x=100;
pos_y+=increment;
}
else
{
pos_x+=increment;
}
}

if (theend==1)
{
stopclock();

if (level==1)

{
if (sekunda<15)
{
window.alert("Well done, you solved the puzzle in: "+sekunda+" sec" + " like greased lightning!");
}
if (sekunda>=15 && sekunda<40)
{
window.alert("Well done, you solved the puzzle in: "+sekunda+" sec" + " at the speed of a mouse!");
}
if (sekunda>=40)
{
window.alert("Well done, you solved the puzzle in: "+sekunda+" sec" + " at the speed of a snail!");
}
}
else
{
if (sekunda<30)
{
window.alert("Well done, you solved the puzzle in: "+sekunda+" sec" + " like greased lightning!");
}
if (sekunda>=30 && sekunda<80)
{
window.alert("Well done, you solved the puzzle in: "+sekunda+" sec" + " at the speed of a mouse!");
}
if (sekunda>=80)
{
window.alert("Well done, you solved the puzzle in: "+sekunda+" sec" + " at the speed of a snail");
}
}
}
}
</script>
</body>
</html>

Code auxiliary file common.php:

</style></head>

<body>

style="position:absolute; top: 10px; left: 100px"/> <img name="block_12" src="<%=path_image%>level1/12.png" width="180" height="180"
style="position:absolute; top: 10px; left: 280px" /> <img name="block_13" src="<%=path_image%>level1/13.png" width="180" height="180"
style="position:absolute; top: 10px; left: 460px" /> <img name="block_21" src="<%=path_image%>level1/21.png" width="180" height="180"
style="position:absolute; top: 190px; left: 100px" /> <img name="block_22" src="<%=path_image%>level1/22.png" width="180" height="180"
style="position:absolute; top: 190px; left: 280px" /> <img name="block_23" src="<%=path_image%>level1/23.png" width="180" height="180"
style="position:absolute; top: 190px; left: 460px" /> <img name="block_31" src="<%=path_image%>level1/31.png" width="180" height="180"
style="position:absolute; top: 370px; left: 100px" /> <img name="block_32" src="<%=path_image%>level1/32.png" width="180" height="180"
style="position:absolute; top: 370px; left: 280px" /> <img name="block_33" src="<%=path_image%>level1/33.png" width="180" height="180"
style="position:absolute; top: 370px; left: 460px" />

<?
}
else{
?>

<img name="block_11" src="<%=path_image%>level2/11.png" width="135" height="135"
style="position:absolute; top: 10px; left: 100px" />
<img name="block_12" src="<%=path_image%>level2/12.png" width="135" height="135"
style="position:absolute; top: 10px; left: 235px" />
<img name="block_13" src="<%=path_image%>level2/13.png" width="135" height="135"
style="position:absolute; top: 10px; left: 370px" />
<img name="block_14" src="<%=path_image%>level2/14.png" width="135" height="135"
style="position:absolute; top: 10px; left: 505px" />
<img name="block_21" src="<%=path_image%>level2/21.png" width="135" height="135"
style="position:absolute; top: 145px; left: 100px" />
<img name="block_22" src="<%=path_image%>level2/22.png" width="135" height="135"
style="position:absolute; top: 145px; left: 235px" />
<img name="block_23" src="<%=path_image%>level2/23.png" width="135" height="135"
style="position:absolute; top: 145px; left: 370px" />
<img name="block_24" src="<%=path_image%>level2/24.png" width="135" height="135"
style="position:absolute; top: 145px; left: 505px" />
<img name="block_31" src="<%=path_image%>level2/31.png" width="135" height="135"
style="position:absolute; top: 280px; left: 100px" />
<img name="block_32" src="<%=path_image%>level2/32.png" width="135" height="135"
style="position:absolute; top: 280px; left: 235px" />
<img name="block_33" src="<%=path_image%>level2/33.png" width="135" height="135"
style="position:absolute; top: 280px; left: 370px" />
<img name="block_34" src="<%=path_image%>level2/34.png" width="135" height="135"
style="position:absolute; top: 280px; left: 505px" />
<img name="block_41" src="<%=path_image%>level2/41.png" width="135" height="135"
style="position:absolute; top: 415px; left: 100px" />
<img name="block_42" src="<%=path_image%>level2/42.png" width="135" height="135"
style="position:absolute; top: 415px; left: 235px" />
<img name="block_43" src="<%=path_image%>level2/43.png" width="135" height="135"
style="position:absolute; top: 415px; left: 370px" />
<img name="block_44" src="<%=path_image%>level2/44.png" width="135" height="135"
style="position:absolute; top: 415px; left: 505px" />
<?
}
?>

<p style="position:absolute; top: 555px; left: 240px" >
<b>How quickly can you solve the puzzle?</b>
</p>
<h5 align="center" style="position:absolute; top: 275px; left: 3px" >
<a href="start.htm">Build a different </br> computer</a>
</h5>

Search form

Learning Javascript using the game PUZZLE

PUZZLE – COMPUTERS