Piccoche - a coordination game Click the divs to remove them. Remove all div's in the shortest time and minimal clicks (to do). Code needs streamlining.



&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;

div {
width:30px;
height:30px;
background-color:blue;
position:fixed;
}

&lt;/style&gt;

&lt;script&gt;

function init() {
var i;
count=10;
for (i=0;i&lt;10;i++) with (document.getElementById('div'+i).style) {top=rInt()+'px';left=rInt()+'px';}
}

function update(n) {
document.getElementById('div'+n).style.display='none';
count--;
if (count==0) alert('all gone!');
}

function rInt() {
return Math.floor(Math.random()*200);
}

&lt;/script&gt;
&lt;/head&gt;
&lt;body onload='init();'&gt;

&lt;div id='div0' onclick='update(0);'&gt;&lt;/div&gt;
&lt;div id='div1' onclick='update(1);'&gt;&lt;/div&gt;
&lt;div id='div2' onclick='update(2);'&gt;&lt;/div&gt;
&lt;div id='div3' onclick='update(3);'&gt;&lt;/div&gt;
&lt;div id='div4' onclick='update(4);'&gt;&lt;/div&gt;
&lt;div id='div5' onclick='update(5);'&gt;&lt;/div&gt;
&lt;div id='div6' onclick='update(6);'&gt;&lt;/div&gt;
&lt;div id='div7' onclick='update(7);'&gt;&lt;/div&gt;
&lt;div id='div8' onclick='update(8);'&gt;&lt;/div&gt;
&lt;div id='div9' onclick='update(9);'&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;




I have a To Do list:

To Do

Add timer,
Add 'missed click counter',
Colours,
Size,
Positions,
Number,
Streamline code into DOM format,
Score,
Play again

Options

Flashers,
Multi-size,
Movers,
Bonuses (double points, static, combos, chains),
Anti-bonuses (move, faster, half points, bombs)
This is cleaner.  
added &lt;title&gt; for no HTML Errors W3C Markup Validator. 
changed CSS units px to em, for 100% W3C Mobile OK  
changed width to 20em (320px) for Mobile Viewport 
added mobile meta viewport for Google PageSpeed Insights 100% (less when target divs overlap)
Moved JS below HTML
Made count global
added &lt;div id="page"&gt; to get misses
added &lt;div id="msg"&gt; to replace alert
replaced CSS div { with .target{
changed div ids to d+index
created target array and init code instead of calling getElementById
added [CDATA[ to JS
added miss counter
added elapsed time
added "Again" button and function
removed function rInt(), was not worth the stack push and pop of calling another function. 

While some might say the update() should be added by EventListener. When only one event is required onclick is easy, reliable, and more universally compatible. 

W3C HTML Markup Validation Service HTML5: NO ERRORS
W3C HTML Markup Validation Service XHTML Basic 1.1: NO ERRORS
W3C CSS Validation Service: NO ERRORS
W3C mobileOK Checker: Perfect Score: 100%

Google's "Usability Assesment" PageSpeed Insights


Mobile User Experience: Perfect Score: 100%
Desktop User Experience: Perfect Score: 100%
Mobile Speed: Perfect Score: Perfect Score: 100%
Desktop Speed: Perfect Score: 100%


Yahoo's YSlow Grade Perfect Score: 100% (gtmetrix.com)
Page Speed Grade: 99% (gtmetrix.com) 1% loss due to bug in PageSpeed scoring
Page Load time 0.250 seconds (gtmetrix.com)

HTML CSS

&lt;!DOCTYPE html&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;Piccoche&lt;/title&gt;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
&lt;style type="text/css"&gt;
.target {
width:1.8em;
height:1.8em;
background-color:blue;
position:fixed;
}
#page{width:20em;height:20em;background:#ff0;margin:0;padding:0;}
.hide{display:none;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="page" onclick="miss()"&gt;
&lt;div id="msg" class="hide"&gt;&lt;h3&gt;All Gone!&lt;/h3&gt;&lt;p id="score"&gt;&lt;/p&gt;&lt;button onclick="playAgain()"&gt;Again&lt;/button&gt;&lt;/div&gt;
&lt;div id="d0" class="target" onclick="update(event,0)"&gt;&lt;/div&gt;
&lt;div id="d1" class="target" onclick="update(event,1)"&gt;&lt;/div&gt;
&lt;div id="d2" class="target" onclick="update(event,2)"&gt;&lt;/div&gt;
&lt;div id="d3" class="target" onclick="update(event,3)"&gt;&lt;/div&gt;
&lt;div id="d4" class="target" onclick="update(event,4)"&gt;&lt;/div&gt;
&lt;div id="d5" class="target" onclick="update(event,5)"&gt;&lt;/div&gt;
&lt;div id="d6" class="target" onclick="update(event,6)"&gt;&lt;/div&gt;
&lt;div id="d7" class="target" onclick="update(event,7)"&gt;&lt;/div&gt;
&lt;div id="d8" class="target" onclick="update(event,8)"&gt;&lt;/div&gt;
&lt;div id="d9" class="target" onclick="update(event,9)"&gt;&lt;/div&gt;
&lt;/div&gt;


JS

&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
count=10;
misses = 0;
var target = new Array;
var elapsed = new Date();
function init() {
  var ndx = 0;
  var divs = document.getElementsByTagName("div");
  for (var div=0; div&lt;divs.length; div++){
    did = divs[div].getAttribute("id");
    if (did != null){
      if (did.substring(0,1) == "d"){
        ndx = parseInt(did.substring(1,2));
        target[ndx] = divs[div];
        target[ndx].style.top = Math.floor(Math.random()*290) + 'px'
        target[ndx].style.left= Math.floor(Math.random()*290) + 'px';
        ndx++;
      }
    }
  }
} 
function miss(){misses++;}
function update(e,n) {
if(count == 10){elapsed = new Date();}
target[n].style.display='none';
count--;
if (count==0){
  var t = new Date();
  document.getElementById('msg').style.display='block';
  document.getElementById('score').innerHTML = 'Misses=' + misses + ' &lt;br/&gt;Elapsed time = ' + (t - elapsed)/1000  + ' Sec.';}
  if(e &amp;&amp; e.stopPropagation){e.stopPropagation();}
  else{e.cancelBubble = true;}
}
window.onload = init;
//]]&gt;
&lt;/script&gt;
&lt;/body&gt;&lt;/html&gt;


New Play Again function

function playAgain(){
  for (var div=0; div&lt;10; div++){
    target[div].style.top = Math.floor(Math.random()*290) + 'px';
    target[div].style.left= Math.floor(Math.random()*290) + 'px';
    target[div].style.display = 'block';
  }
  count = 10;
  misses = -1;
  elapsed = new Date();
  document.getElementById('msg').style.display='none';
}