Sie sind auf Seite 1von 18

<!

-- TWO STEPS TO INSTALL BOX-IN:

1. Copy the coding into the HEAD of your HTML document


2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Herb Hasler -->
<!-- Web Site: http://www.geocities.com/hhasler -->
<STYLE>
.inputTableText {color=blue; font-family:Comic Sans MS, Bazooka; font-size: 10pt
}
.resultTableText {color=white; background=gray; font-family:Comic Sans MS, Bazoo
ka; font-size: 10pt}
</STYLE>

<SCRIPT Language="Javascript">

// Copyright (c) 2003 Herb Hasler


//
boxes = new Array(10);
vLines = new Array(10);
hLines = new Array(10);

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


boxes[i] = new Array(10);
vLines[i] = new Array(10);
hLines[i] = new Array(10);
}

var gridSize = 9;
var canMove = false;
var compBox = false;
var compMoveAgain;
var doneMoves;
var gameStarted = false;

var htype = 'h';


var vtype = 'v';
var utype = 'u';
var ctype = 'c';

var m1;
var m2;
var m3;
var m1cnt;
var m2cnt;
var m3cnt;
var userImage = 0;
var userScore;
var compScore;

m1x = new Array(10);


m1y = new Array(10);
m2x = new Array(10);
m2y = new Array(10);
m3x = new Array(100);
m3y = new Array(100);

boxBlank = new Image(30,30);


boxBlank.src = 'blank.gif';
boxComputer = new Image(30,30);
boxComputer.src = 'computer.gif';
var boxUser = new Array(5);
for (i=0; i<5; i++) {
boxUser[i] = new Image(30,30);
boxUser[i].src = 'user' + i + '.gif';
}
var digits = new Array(10);
for (i=0; i<10; i++) {
digits[i] = new Image(64,64);
digits[i].src = 'frutti-' + i + '.gif';
}
boxVLine = new Image(5,30);
boxVLine.src = 'vline0.gif';
boxVLineH = new Image(5,30);
boxVLineH.src = 'vline1.gif';
boxHLine = new Image(35,5);
boxHLine.src = 'hline0.gif';
boxHLineH = new Image(35,5);
boxHLineH.src = 'hline1.gif';
buttonBeg = new Image(100,28);
buttonBeg.src = 'beginButton.gif';
buttonEnd = new Image(100,28);
buttonEnd.src = 'endButton.gif';
function newGame() {
gameStarted = true;
for (i=0; i<10; i++) {
for (j=0; j<10; j++) {
boxes[i][j] = 0;
vLines[i][j] = 0;
hLines[i][j] = 0;
}
}
for (j=0; j< gridSize; j++) {
for (i=0; i< gridSize; i++) {
document.images['hline'+j+i].src = boxHLine.src;
}
for (i=0; i<gridSize; i++) {
document.images['vline'+j+i].src = boxVLine.src;
document.images['box'+j+i].src = boxBlank.src;
}
document.images['vline'+j+gridSize].src = boxVLine.src;

}
for (i=0; i<gridSize; i++) {
document.images['hline'+gridSize+i].src = boxHLine.src;
}
canMove = true;
compScore = 0;
userScore = 0;
document.images['cdig1'].src = digits[0].src;
document.images['cdig2'].src = digits[0].src;
document.images['udig1'].src = digits[0].src;
document.images['udig2'].src = digits[0].src;
}

function clickButton() {
if (gameStarted == true) {
endGame();
} else {
document.images['buttonImg'].src = buttonEnd.src;
newGame();
}
}

function endGame() {
canMove = false;
var totScore = gridSize * gridSize;
gameStarted = false;
if ((compScore *1 + userScore*1) < totScore) {
compScore = totScore - userScore;
displayScore(compScore, 'cdig');
}
document.images['box31'].src = 'frutti-y.gif';
document.images['box32'].src = 'frutti-o.gif';
document.images['box33'].src = 'frutti-u.gif';
if (userScore > compScore) {
document.images['box35'].src = 'frutti-w.gif';
document.images['box36'].src = 'frutti-o.gif';
document.images['box37'].src = 'frutti-n.gif';
} else {
document.images['box35'].src = 'frutti-l.gif';
document.images['box36'].src = 'frutti-o.gif';
document.images['box37'].src = 'frutti-s.gif';
document.images['box38'].src = 'frutti-t.gif';

}
document.images['buttonImg'].src = buttonBeg.src;
}

function highLight(ltype, y, x) {
if (ltype == "h") {
var imgName = 'hline'+y+x;
document.images[imgName].src = boxHLineH.src;
} else {
var imgName = 'vline'+y+x;
document.images[imgName].src = boxVLineH.src;
}
}

function unHighLight(ltype, y, x) {
if (ltype == "h") {
if (hLines[y][x] != 1) {
var imgName = 'hline'+y+x;
document.images[imgName].src = boxHLine.src;
}
} else {
if (vLines[y][x] != 1) {
var imgName = 'vline'+y+x;
document.images[imgName].src = boxVLine.src;
}
}
}

function addLine(mtype, ltype, y, x)


{
if (mtype == utype && canMove == false) {
return;
}
compMoveAgain = false;
compBox = false;
if (ltype == 'h') {
if (hLines[y][x] == 0) {
hLines[y][x] = 1;
var imgName = 'hline'+y+x;
document.images[imgName].src = boxHLineH.src;
addBox(mtype, y, x);
if (y > 0) {
addBox(mtype, y*1-1, x);
}
} else {
if (mtype == utype) {
return;
}
}
} else {
if (vLines[y][x] == 0) {
vLines[y][x] = 1;
var imgName = 'vline'+y+x;
document.images[imgName].src = boxVLineH.src;
addBox(mtype, y, x);
if (x > 0) {
addBox(mtype, y, x*1-1);
}

} else {
if (mtype == utype) {
return;
}
}
}
if ((compBox == false) && (mtype == utype) && (gameStarted == true)) {
setTimeout(compMove,200);
} else {
if (mtype == ctype && compBox == true) {
compMoveAgain = true;
}
}
}

function addBox(mtype, y, x) {
var gotBox;
boxes[y][x] = (boxes[y][x])*1 +1;
gotBox = false
if (boxes[y][x] > 3) {
var imgName = 'box'+y+x;
if (mtype == utype) {
document.images[imgName].src = boxUser[userImage].src;
} else {
document.images[imgName].src = boxComputer.src;
}
updateScore(mtype);
compBox = true;
}

function updateScore(mtype) {
var dig1;
var dig2;
if (mtype == utype) {
userScore = userScore * 1 + 1;
displayScore(userScore, 'udig');
} else {
compScore = compScore * 1 + 1;
displayScore(compScore, 'cdig');

}
if ((compScore*1 + userScore*1) >= (gridSize * gridSize)) {
endGame();
}
}

function displayScore(score, imgName) {


var dig1 = Math.floor(score / 10);
var dig2 = score % 10;
document.images[imgName + '1'].src = digits[dig1].src;
document.images[imgName + '2'].src = digits[dig2].src;
}
function compMove() {
if (gameStarted == false) {
return;
}
canMove = false;
compMoveAgain = false;
compDoMove();
if (compMoveAgain == false) {
canMove = true;
} else {
setTimeout(compMove,400);
}
}

function compDoMove() {
var boxY;
var boxX;
var cBoxY;
var cBoxX;
var foundMove;
var lpos;

m1cnt = 0;
m2cnt = 0;
m3cnt = 0;

doneMoves = true;
for (i=0; i<gridSize; i++) {
for (j=0; j<gridSize; j++) {
if (boxes[i][j] == 3) {
if (m1cnt < 10) {
m1x[m1cnt] = j;
m1y[m1cnt] = i;
m1cnt = m1cnt * 1 + 1;
}
} else if (boxes[i][j] == 2) {
if (m2cnt < 10) {
m2x[m2cnt] = j;
m2y[m2cnt] = i;
m2cnt = m2cnt * 1 + 1;
}
} else if (boxes[i][j] < 2) {
if (m3cnt < 100) {
m3x[m3cnt] = j;
m3y[m3cnt] = i;
m3cnt = m3cnt * 1 + 1;
}
}
}
}

if (m1cnt > 0) {
lpos = Math.floor(Math.random() * m1cnt);
boxX = m1x[lpos];
boxY = m1y[lpos];
} else if (m3cnt > 0) {
lpos = Math.floor(Math.random() * m3cnt);
boxX = m3x[lpos];
boxY = m3y[lpos];
} else if (m2cnt > 0) {
lpos = Math.floor(Math.random() * m2cnt);
boxX = m2x[lpos];
boxY = m2y[lpos];
}

cBoxY = boxY;
cBoxX = boxX;

foundMove = false;

compMoveAgain = false;

if (Math.floor(Math.random() * 2) == 1) {
for (j=0; j<2 && foundMove == false; j++) {
cBoxY = (boxY*1 + j*1);
if (cBoxY >= 0 && cBoxY <= gridSize) {
if (hLines[cBoxY][cBoxX] == 0) {
addLine(ctype, htype, cBoxY, cBoxX);
foundMove = true;
}
}
}
cBoxY = boxY;
cBoxX = boxX;
}

for (i=0; i< 2 && foundMove == false; i++) {


cBoxX = (boxX*1 + i*1);
if (cBoxX >= 0 && cBoxX <= gridSize) {
if (vLines[cBoxY][cBoxX] == 0) {
addLine(ctype, vtype, cBoxY, cBoxX);
foundMove = true;
}
}
}

cBoxX = boxX;

for (j=0; j<2 && foundMove == false; j++) {


cBoxY = (boxY*1 + j*1);
if (cBoxY >= 0 && cBoxY <= gridSize) {
if (hLines[cBoxY][cBoxX] == 0) {
addLine(ctype, htype, cBoxY, cBoxX);
foundMove = true;
}
}
}
}

function rotateImage() {
var prevImage = userImage;
userImage = userImage*1 + 1;
if (userImage > 4) {
userImage = 0;
}
document.images['userImage'].src = boxUser[userImage].src;

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


for (j=0; j<gridSize; j++) {
if (document.images['box'+i+j].src == boxUser[prevImage].src) {
document.images['box'+i+j].src = boxUser[userImage].src;
}
}
}
}

</SCRIPT>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Herb Hasler -->
<!-- Web Site: http://www.geocities.com/hhasler -->
<center>
<IMG SRC="frutti-b.gif" BORDER=0 HEIGHT="48">
<IMG SRC="frutti-o.gif" BORDER=0 HEIGHT="48">
<IMG SRC="frutti-x.gif" BORDER=0 HEIGHT="48">
<IMG SRC="frutti-dash.gif" BORDER=0 HEIGHT="48">
<IMG SRC="frutti-i.gif" BORDER=0 HEIGHT="48">
<IMG SRC="frutti-n.gif" BORDER=0 HEIGHT="48">
</center>
<p>
<TABLE BORDER="0" WIDTH="640" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD WIDTH="75" ROWSPAN="6"> </TD>
</TR>
</TR>
<TD WIDTH="375" ROWSPAN="6">
<SCRIPT>

for (j=0; j<gridSize; j++) {


for (i=0; i<gridSize; i++) {
document.write('<a href="javascript:addLine(utype,htype,'+j+','+i+')"
onMouseover="highLight(htype,'+j+','+i+')" onMouseout="unHighLight(htype,'+j+',
'+i+')"><IMG SRC="hline0.gif" BORDER=0 NAME="hline' + j + + i +'" WIDTH="35" HEI
GHT="5"></A>');
}
document.write('<IMG SRC="hline0.gif" BORDER=0 NAME="hlineEnd" WIDTH="35"
HEIGHT="5">');
document.write('<br>');
for (i=0; i<gridSize; i++) {
document.write('<a href="javascript:addLine(utype,vtype,'+j+','+i+')" o
nMouseover="highLight(vtype,'+j+','+i+')" onMouseout="unHighLight(vtype,'+j+','+
i+')"><IMG SRC="vline0.gif" BORDER=0 NAME="vline' + j+ i+ '" WIDTH="5" HEIGHT="3
0"></a>');
document.write('<IMG SRC="blank.gif" BORDER=0 NAME="box' + j + i + '" W
IDTH="30" HEIGHT="30">');
}
document.write('<a href="javascript:addLine(utype,vtype,'+j+','+gridSize+'
)" onMouseover="highLight(vtype,'+j+','+gridSize+')" onMouseout="unHighLight(vty
pe,'+j+','+gridSize+')"><IMG SRC="vline0.gif" BORDER=0 NAME="vline' + j+ gridSiz
e + '" WIDTH="5" HEIGHT="30">');
document.write('<br>');
}
for (i=0; i<gridSize; i++) {
document.write('<a href="javascript:addLine(utype,htype,'+gridSize+','+i+
')" onMouseover="highLight(htype,'+gridSize+','+i+')" onMouseout="unHighLight(ht
ype,'+gridSize+','+i+')"><IMG SRC="hline0.gif" BORDER=0 NAME="hline' + gridSize
+ i +'" WIDTH="35" HEIGHT="5">');
}
document.write('<IMG SRC="hline0.gif" BORDER=0 NAME="hlineEnd" WIDTH="35" HEIG
HT="5">');
document.write('<br>');

document.images['box22'].src = 'frutti-c.gif';
document.images['box23'].src = 'frutti-l.gif';
document.images['box24'].src = 'frutti-i.gif';
document.images['box25'].src = 'frutti-c.gif';
document.images['box26'].src = 'frutti-k.gif';

document.images['box32'].src = 'frutti-b.gif';
document.images['box33'].src = 'frutti-e.gif';
document.images['box34'].src = 'frutti-g.gif';
document.images['box35'].src = 'frutti-i.gif';
document.images['box36'].src = 'frutti-n.gif';

document.images['box43'].src = 'frutti-t.gif';
document.images['box44'].src = 'frutti-o.gif';

document.images['box52'].src = 'frutti-s.gif';
document.images['box53'].src = 'frutti-t.gif';
document.images['box54'].src = 'frutti-a.gif';
document.images['box55'].src = 'frutti-r.gif';
document.images['box56'].src = 'frutti-t.gif';
</SCRIPT>

</TD>
</TR>
<TR>
<TD align="center">
<br><A HREF="javascript:rotateImage()"><IMG SRC="user0.gif" BORDER=0 NAME="userI
mage" HEIGHT="48" WIDTH="48"></A><br><i>
<font color="blue">Click To Change Your Graphic</font>
</TD>
</TR>
<TR>
<TD align="center">
<BUTTON NAME="beginButton" onClick="clickButton()"><IMG NAME="buttonImg" SRC="be
ginButton.gif" WIDTH="100" HEIGHT="28"></BUTTON>
</TD>
</TR>
<TR>
<TD align="center">
<IMG SRC="frutti-y.gif" BORDER=0 WIDTH="18" HEIGHT="18">
<IMG SRC="frutti-o.gif" BORDER=0 WIDTH="18" HEIGHT="18">
<IMG SRC="frutti-u.gif" BORDER=0 WIDTH="18" HEIGHT="18">
<IMG SRC="frutti-dash.gif" BORDER=0 WIDTH="18" HEIGHT="18">
<IMG SRC="frutti-0.gif" BORDER=0 WIDTH="18" HEIGHT="18" NAME="udig1">
<IMG SRC="frutti-0.gif" BORDER=0 WIDTH="18" HEIGHT="18" NAME="udig2">
</TD>
</TR>
<TR>
<TD align="center">
<IMG SRC="frutti-c.gif" BORDER=0 WIDTH="18" HEIGHT="18">
<IMG SRC="frutti-m.gif" BORDER=0 WIDTH="18" HEIGHT="18">
<IMG SRC="frutti-p.gif" BORDER=0 WIDTH="18" HEIGHT="18">
<IMG SRC="frutti-dash.gif" BORDER=0 WIDTH="18" HEIGHT="18">
<IMG SRC="frutti-0.gif" BORDER=0 WIDTH="18" HEIGHT="18" NAME="cdig1">
<IMG SRC="frutti-0.gif" BORDER=0 WIDTH="18" HEIGHT="18" NAME="cdig2">
</TD>
</TR>
</TABLE>

</FORM>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 16.27 KB -->

Das könnte Ihnen auch gefallen