<html>
<HEAD>

<TITLE>Twist and turn Puzzle game -  JavaScript Game programmed by Armin Kielack</TITLE>
<META NAME="keywords" CONTENT="Jigsaw, Slide puzzle,  Javascript, Kielack, WebTV, Spiel, Web Design, free, kostenlos, Online Game, ">
<META NAME="description" CONTENT="This Puzzle game is programmed by Armin Kielack in Javascript to download fast and to be playable by the largest audience possible on the web, including 286, WB-1, and WebTV user.">
<meta name="author" content="armin kielack">

</HEAD>
<body bgcolor="#ffffff" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
<form name='board'>
<font face=arial size=5><b>Twist and turn Puzzle game </b></font>
<Script language="Javascript">
var start_new=true
var xsize=8
var ysize=6
var holefield=1
var field=[ ]
var imagedir="./"
var copyright=2019

function pushup(col)
{
if ( start_new) return;
if ((holefield+xsize)>(xsize*ysize)) return
field[holefield]=field[holefield+xsize]

holefield=holefield+xsize
field[holefield]=0
}

function pushdown(col)
{
if ( start_new) return;
if ((holefield-xsize)<1) return
field[holefield]=field[holefield-xsize]

holefield=holefield-xsize
field[holefield]=0
}

function pushleft(row)
{
if ( start_new) return;
tmp=field[from_coordinates(1,row)]
for(x=1;x<xsize;x++)  field[from_coordinates(x,row)]=field[from_coordinates(x+1,row)]
field[from_coordinates(xsize,row)]=tmp
checkrow(row)
}

function pushright(row)
{
if ( start_new) return;
tmp=field[from_coordinates(xsize,row)]
for(x=1;x<xsize;x++) field[from_coordinates(xsize-x+1,row)]=field[from_coordinates(xsize-x,row)]
field[from_coordinates(1,row)]=tmp
checkrow(row)
}
function checkrow(row)
{
for(x=1;x<xsize;x++)  if (field[from_coordinates(x,row)]==0 ) holefield=from_coordinates(x,row)
}

function from_coordinates(x1,y1)
{
z1=x1+(y1-1)*xsize
return z1;
}

function pushfield(x,y)
{

	clicked_field=from_coordinates(x,y)
	if (holefield==(clicked_field+xsize)) {field[holefield]=field[clicked_field];field[clicked_field]=0; }
	if (holefield==(clicked_field-xsize)) {field[holefield]=field[clicked_field];field[clicked_field]=0;}
}

function showfield()
{
for(y=1;y<=ysize;y++) 
	for(x=1;x<=xsize;x++) 
		eval("document.board.r"+y+"c"+x+".src='z"+field[from_coordinates(x,y)]+".gif'")
		if(game_over()) {alert("DONE");start_new=true}
}


function game_over()
{
	gameover=true
	for(x=1;x<=xsize;x++) {
		current_row_content=-1
		for(y=1;y<=ysize;y++) {
			if ( current_row_content==-1){
				if (field[from_coordinates(x,y)] > 0)  {
					current_row_content=field[from_coordinates(x,y)]
				} else {
					current_row_content=field[from_coordinates(x,y+1)]
				}
			}
			current_field_content=field[from_coordinates(x,y)]
			if(current_field_content==0) holefield=from_coordinates(x,y)
			if( current_field_content != current_row_content && current_field_content != 0 ) gameover=false
		}
	}

return gameover;
}

function start()
{
 //start_new=true
 start_new=false
for(x=1;x<=xsize;x++) 
	for(y=1;y<=ysize;y++) 
		field[from_coordinates(x,y)]=x;
field[1]=0
holefield=1
}

function mix()
{
 start_new=false
for(m=0;m<80;m++)
 {
 dir=randomize(6)
 moves=randomize(6)
 colrow=randomize(6)
 for (n=0;n<moves;n++) 
  {
  if (dir==1) pushleft(colrow)
  if (dir==2) pushright(colrow)
  if (dir==3 || dir==5 ) pushup()
  if (dir==4 || dir==6 ) pushdown()
  }
 }
}

function randomize(max)
{
n=Math.ceil(Math.random()*max)
return n;
}


//--------------------------WRITE GAME BOARD ---------------------
 document.write("<table border=0 cellspacing='4' cellpadding='0'>")
 //document.write("<tr><td>&nbsp;</td>")
 //for(x=1;x<=xsize;x++)  document.write("<td align='middle'><a href='javascript:void()' onclick='pushdown("+x+");showfield();return false;' ><img src='"+imagedir+"down.gif' height='10' width='10' border='0'></a></td>")
 //document.write("<td>&nbsp;</td></tr>")
for(y=1;y<=ysize;y++){
	document.write("<tr>");
	document.write("<td><a href='javascript:void()' onclick='pushleft("+y+");showfield();return false;' ><img src='"+imagedir+"left.gif' height='10' width='10' border='0'></a></td>")
	
	for(x=1;x<=xsize;x++) { 
		if(x==1 && y==1 ) {
			document.write("<td cellpadding=3><img src='"+imagedir+"z0.gif' onclick='pushfield("+x+","+y+");showfield();return false;' border='0'  height='8' width='8' name='r"+y+"c"+x+"'></td>")
		}else {
			document.write("<td cellpadding=3><img src='"+imagedir+"z"+x+".gif' onclick='pushfield("+x+","+y+");showfield();return false;' border='0'  height='8' width='8' name='r"+y+"c"+x+"'></td>")
		}
	}
	document.write("<td><a href='javascript:void()' onclick='pushright("+y+");showfield();return false;' ><img src='"+imagedir+"right.gif' height='10' width='10' border='0'></a></td>")
	document.write("</tr>");
}
 //document.write("<tr><td>&nbsp;</td>")
 //for(x=1;x<=xsize;x++)  document.write("<td align='middle'><a href='javascript:void()' onclick='pushup("+x+");showfield();return false;'><img src='"+imagedir+"up.gif' height='10' width='10' border='0'></a></td>")
 //document.write("<td>&nbsp;</td></tr>")
 document.write("</table ><br><INPUT TYPE='button' value='Mix Puzzle' onclick='mix();showfield();return false;'></form>")
start()
</Script>
<br>


<p>
This is a simple puzzle game.The goal is to sort the numbers into columns 
You can move tiles by clicking on the arrows on the side.
Vertically you can move a number only onto an empty ( zero) field.
The puzzle is solved in each columns are all numbers.
<p>
<!--/page content-->



You can play more of <a href="http://www.kielack.de/games.htm" target=_top>My Games</a>
 or email to <img src="/email.gif" height="15" width="115" border="0" alt="my email address"> to complain. The Game was programmed by Armin Kielack in JavaScript.


<!-- footersection -->
<hr>
<center>
<FONT SIZE=1>Copyright by 
<a href="http://www.kielack.de/index.htm" target=_top>
Armin Kielack </a> <script language="javascript">
document.write(copyright);
</script> - last modified:<script>document.writeln(document.lastModified)</script></font>
</center>
<!-- /footersection -->
</body>
</html>