Hello everybody,

the site I want to bulid should do this:
- have a public start page with a javascript game on it (game is a modified version of this: http://janmulder.com/Scripts/MSquares/)
- have another version of the game in a page after someone logs in.

The game is a HTML with some external javascript files and some code inside the HTML aswell. (see the example link above)

I want an easy way to create these pages and login functionality. Is it totally wrong to try with Drupal? I'm not a big expert and all the documentation I read so far on drupal and javascript were not helpful to me.

So, if you know how this can work, please explain to me.

Thanks a lot
Sandra

Comments

bwv’s picture

Yes, you can certainly put this game in a drupal page. The code below is from a website I developed a few years back; it creates a memory game similar to what you have linked above. The images are numbered 1.jpg, 2.jpg, etc. This script asks the visitor to press a button below the game to start. Set input filter to full html.

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var pics = new Array();
for (i = 0; i <= 18; i++) {
pics[i] = new Image();
pics[i].src = 'http://site.com/images/image' + i + '.jpg';
}
var map=new Array(1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18);
var user = new Array();
var temparray = new Array();
var clickarray = new Array(0, 0);
var ticker, sec, min, ctr, id, oktoclick, finished;
function init() {
clearTimeout(id);
for (i = 0; i <= 35 ;i++) {
user[i] = 0;
}
ticker = 0;
min = 0;
sec = 0;
ctr = 0;
oktoclick = true;
finished = 0;
document.f.b.value = "";
scramble();
runclk();
for (i = 0; i <= 35; i++) {
document.f[('img'+i)].src = "http://site.com/images/image0.jpg";
   }
}
function runclk() {
min = Math.floor(ticker/60);
sec = (ticker-(min*60))+'';
if(sec.length == 1) {sec = "0"+sec};
ticker++;
document.f.b.value = min+":"+sec;id = setTimeout('runclk()', 1000);
}
function scramble() {
for (z = 0; z < 5; z++) {
for (x = 0; x <= 35; x++) {
temparray[0] = Math.floor(Math.random()*36);
temparray[1] = map[temparray[0]];
temparray[2] = map[x];
map[x] = temparray[1];
map[temparray[0]] = temparray[2];
	  }
   }
}
function showimage(but) {
if (oktoclick) {
oktoclick = false; 
document.f[('img'+but)].src = 'http://site.com/images/image'+map[but]+'.jpg';
if (ctr == 0) {
ctr++;
clickarray[0] = but;
oktoclick = true;
} else {
clickarray[1] = but;
ctr = 0;
setTimeout('returntoold()', 600);
	  }
   }
}
function returntoold() {
if ((clickarray[0] == clickarray[1]) && (!user[clickarray[0]])) {
document.f[('img'+clickarray[0])].src = "http://site.com/images/image0.jpg";
oktoclick = true;
} else {if (map[clickarray[0]] != map[clickarray[1]]) {
if (user[clickarray[0]] == 0) {
document.f[('img'+clickarray[0])].src = "http://site.com/images/image0.jpg";
}
if (user[clickarray[1]] == 0) {
document.f[('img'+clickarray[1])].src = "http://site.com/images/image0.jpg";
   }
}
if (map[clickarray[0]] == map[clickarray[1]]) {
if (user[clickarray[0]] == 0&&user[clickarray[1]] == 0) { finished++; }
user[clickarray[0]] = 1;
user[clickarray[1]] = 1;
}
if (finished >= 18) {
alert('You did it in '+document.f.b.value+' !');
init();
} else {
oktoclick = true;
	  }
   }
}
//  End -->
</script><style>

table {
  margin: 0;
  width:85%;

}
tr{padding: 0;}
td {padding: 0;}
</style>

<hr>

<CENTER>
<Table border=1 bgcolor="#dddddd"><tr><td>
<table border=0 cellpadding="0" cellspacing="0">

<form name="f"> 
<script language="javascript">
<!-- Begin
for (r = 0; r <= 5; r++) {
document.write('<tr>');
for (c = 0; c <= 5; c++) {
document.write('<td align="center">');document.write('<a href="javascript:showimage('+((6*r)+c)+')" onClick="document.f.b.focus()">');
document.write('<img src="http://site.com/images/image0.jpg" name="img'+((6*r)+c)+'" border="0">');
document.write('</a></td>');
}
document.write('</tr>');
}
// End -->
</script>

</table> </tr></td></table>
<br>
<font color="#0000cc"><b>Press here to start ---></b></font> <input type="button" value="	Go	 " name="b" onClick="init()">
</form></center>

SandraNeu’s picture

bmv,

thanks a lot! you gave me new hope :-)

What I don't understand so far is where I put the single elements and scripts that I need.

- The HTML code with some javascript parts and function calls in it I put in the new page, right?

- My external js scripts I put somewhere on my server. Same for the pictures.

BUT how do I get drupal to load the external scripts? I also use jquery. How do I get all this to work together?

Thx
Sandra

bwv’s picture

Yes, html and small JS bits go into the new page.

For external scripts, see this:

http://drupal.org/node/91250#comment-1301628

(If I recall correctly, the 6.x code goes into your page.tpl.php page, which is located in your theme directory.)