Internet Applications for Lincrea

internalchildlikeInternet and Web Development

Nov 12, 2013 (3 years and 9 months ago)

56 views

Internet Applications for Lincrea

Building a Brain Training Style Game

Features of a Brain Training Game


Fast


Looks Good


Limited Time


Difficulty Gradient


Replayability


Spot the Duplicate


Users are presented with a table.


The user must spot the duplicates.


Level 1: One column.


Level 2: Two columns.


Level 3: Three columns, but only two columns
are key.


Level 4: N columns, M of these are key.

Find the duplicates 1

6

7

8

6

4

3

6256

6358

6285

6252

6285

8258













Find the Duplicate 2



bear

15

tiger

15

tiger

51

ant

55

bear

11

bear

15

ant

51















Find the Duplicates 3

Find the Duplicates 4

Key

Key

Key

¥









¥









$









$









$









Data Structures


A puzzle includes a list of rows.


A puzzle includes list of keys.


A rows is a list of cells.


A cell has an img value or a str value or a sym
value


Example Data Structure

{keys:[0,2],


rows: [[{img:'Pig'},{img:'Pig'},{img:'Rat'}],


[{img:'Pig'},{img:'Rat'},{img:'Pig'}],


[{img:'Rat'},{img:'Pig'},{img:'Pig'}],


[{img:'Pig'},{img:'Rat'},{img:'Rat'}],

]}



Sample Image

http://sqlzoo.net/~andrew/brain/

Sample css Code

div#body {border:solid thin black;


width:600px;height:400px;


margin
-
left:auto;margin
-
right:auto;}

#gameSpace {margin:20px;position:relative;}

.head {border:solid thin black;position:absolute;


top:0px;text
-
align:center;padding:3px;}

.row {cursor:pointer;border:solid
rgb(192,192,192);}

a:hover .row {border
-
color:black;}


bt.html

<html>


<head>


<link rel='stylesheet' type='text/css' href='bt.css'/>


<script src="scriptaculous/prototype.js"


type="text/javascript"></script>


<script src="scriptaculous/scriptaculous.js"


type="text/javascript"></script>


<script src='bt.js' type='text/javascript'></script>


</head>


<body onload='ol()'>


<div id='body'><div id='gameSpace'> </div></div>


</body>

</html>

bt.js

function ol(){


var t = {keys:[0,2],


rows: [[{img:'Pig'},{img:'Pig'},{img:'Rat'}],


[{img:'Pig'},{img:'Rat'},{img:'Pig'}],


[{img:'Rat'},{img:'Pig'},{img:'Pig'}],


[{img:'Pig'},{img:'Rat'},{img:'Rat'}]


]


}


showPuzzle(t);

}

var bw = 100; var gap=10;

var bh = 36;


function showPuzzle(t){


var gs = $('gameSpace');


var nCols = t.rows[0].length;


for (var i=0;i<nCols;i++){


var d = Builder.node('div',{id:'ch'+i,'class':'head'},


['
\
u00A0']);


Element.setStyle(d,{left:(bw+gap)*i+'px',


width:bw+'px',


height:bh+'px'});


gs.appendChild(d);


}


for (var i=0;i<t.keys.length;i++){ var id = 'ch'+t.keys[i]


$(id).appendChild(document.createTextNode('key'));


}


for (var i=0;i<t.rows.length;i++){


var r=t.rows[i];


var d = Builder.node('div',{id:'rw'+i,'class':'row'});


Element.setStyle(d,{position:'absolute',


'top':(bh+gap)*(i+1)+'px', width:(bw+gap)*nCols+'px', height:bh+'px'});


for (var j=0;j<r.length;j++){


var e = Builder.node('div',{});


Element.setStyle(e,{position:'absolute', left:(bw+gap)*j+'px',


width:bw+'px', 'textAlign':'center'});


if (r[j].img){


e.appendChild(Builder.node('img',{src:'http://www.iconarchive.com/icons/tro
yboydesign/delightful
-
zodiac/'+r[j].img+'
-
32x32.png'}));


d.appendChild(e);


}


gs.appendChild(Builder.node('a',{href:'#'},[d]));


}


}

}