1 / 15

Internet Applications for Lincrea

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.

devi
Download Presentation

Internet Applications for Lincrea

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internet Applications for Lincrea Building a Brain Training Style Game

  2. Features of a Brain Training Game • Fast • Looks Good • Limited Time • Difficulty Gradient • Replayability

  3. 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.

  4. Find the duplicates 1

  5. Find the Duplicate 2

  6. Find the Duplicates 3

  7. Find the Duplicates 4

  8. 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

  9. 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'}], ]}

  10. Sample Image http://sqlzoo.net/~andrew/brain/

  11. 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;}

  12. 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>

  13. 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); }

  14. 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')); }

  15. 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/troyboydesign/delightful-zodiac/'+r[j].img+'-32x32.png'})); d.appendChild(e); } gs.appendChild(Builder.node('a',{href:'#'},[d])); } } }

More Related