3
\$\begingroup\$

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

<!DOCTYPE html>
<html>
<head>
<style>

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

</style>

<script>

function init() {
var i;
count=10;
for (i=0;i<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);
}

</script>
</head>
<body onload='init();'>

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

</body>
</html>

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)

\$\endgroup\$
4
\$\begingroup\$

This is cleaner.
added <title> 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 <div id="page"> to get misses
added <div id="msg"> 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

<!DOCTYPE html>
<html><head><title>Piccoche</title><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
.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;}
</style>
</head>
<body>
<div id="page" onclick="miss()">
<div id="msg" class="hide"><h3>All Gone!</h3><p id="score"></p><button onclick="playAgain()">Again</button></div>
<div id="d0" class="target" onclick="update(event,0)"></div>
<div id="d1" class="target" onclick="update(event,1)"></div>
<div id="d2" class="target" onclick="update(event,2)"></div>
<div id="d3" class="target" onclick="update(event,3)"></div>
<div id="d4" class="target" onclick="update(event,4)"></div>
<div id="d5" class="target" onclick="update(event,5)"></div>
<div id="d6" class="target" onclick="update(event,6)"></div>
<div id="d7" class="target" onclick="update(event,7)"></div>
<div id="d8" class="target" onclick="update(event,8)"></div>
<div id="d9" class="target" onclick="update(event,9)"></div>
</div>

JS

<script type="text/javascript">
//<![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<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 + ' <br/>Elapsed time = ' + (t - elapsed)/1000  + ' Sec.';}
  if(e && e.stopPropagation){e.stopPropagation();}
  else{e.cancelBubble = true;}
}
window.onload = init;
//]]>
</script>
</body></html>

New Play Again function

function playAgain(){
  for (var div=0; div<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';
}
\$\endgroup\$
  • \$\begingroup\$ looks good. can you put it in a snippet/jsfiddle. why use <div id="page" onclick="miss()">, can we use <div id="page" onclick="misses++;"> instead. what's the PageSpeed bug/ \$\endgroup\$ – JMP Mar 23 '15 at 22:19
  • \$\begingroup\$ what does the echo do? and misses remains 0. i think i might to use setTimeout to make a dynamic timer. does code review have question page size limits, coz this could go on for a while. \$\endgroup\$ – JMP Mar 23 '15 at 22:26
  • \$\begingroup\$ echo is a typo, I did a PHP version also. Then I deleted the PHP and missed that. I just changed it so the clock starts ticking when the first tile is clicked. have not save that edit yet. I will remove the echo too. \$\endgroup\$ – Misunderstood Mar 23 '15 at 23:36
  • \$\begingroup\$ the reason I went with calling function miss() is because I was expecting potential problem with bubbling. this is where both the update() and miss() are called for the same click. I was able to use stopPropagation() in the update routine to suppress bubbling. So the onclick="misses++;" should be fine. \$\endgroup\$ – Misunderstood Mar 23 '15 at 23:41
  • 1
    \$\begingroup\$ @Coburn There is also gtmetrix.com for PageSpeed and Yahoo's Yslow, Google Page Speed Insights, and WebPageTest http://www.webpagetest.org/ which is the same as the gtmetrix PageSpeed but has a more technical interface with various options. gtmetrix is easy and good report, webpagetest delivers a very detailed JSON file. \$\endgroup\$ – Misunderstood Mar 26 '15 at 16:20
-1
\$\begingroup\$
<!DOCTYPE html>
<html>
<head>
<title>Piccoche</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
.target {
width:1.8em;
height:1.8em;
background-color:#f44;
position:fixed;
border:1px solid black;
}
#page {
width:19.5em;
height:19.5em;
background-color:#9d6;
margin:0;
padding:0;
border:3px solid black;
}
.hide {
text-align:center;
display:none;
}
</style>
</head>
<body>
<div id="page" onclick="misses++;">
<div id="msg" class="hide">
<h3>All Gone!</h3>
<p id="score"></p>
<button onclick="playAgain()">Again</button>
</div>
<div id="d0" class="target" onclick="update(event,0)"></div>
<div id="d1" class="target" onclick="update(event,1)"></div>
<div id="d2" class="target" onclick="update(event,2)"></div>
<div id="d3" class="target" onclick="update(event,3)"></div>
<div id="d4" class="target" onclick="update(event,4)"></div>
<div id="d5" class="target" onclick="update(event,5)"></div>
<div id="d6" class="target" onclick="update(event,6)"></div>
<div id="d7" class="target" onclick="update(event,7)"></div>
<div id="d8" class="target" onclick="update(event,8)"></div>
<div id="d9" class="target" onclick="update(event,9)"></div>
</div>
<div id="time"></div>
<script type="text/javascript">
//<![CDATA[
count=10;
misses=0;
dynTime=setInterval('time.textContent=((new Date-elapsed)/1000).toFixed(1);',100);
var target=new Array;
var elapsed=new Date;
function init() {
  var ndx = 0;
  var divs = document.getElementsByTagName("div");
  for (var div=0; div<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()*18)+1 + 'em';
        target[ndx].style.left= Math.floor(Math.random()*18)+1 + 'em';
        ndx++;
      }
    }
  }
} 

function update(e,n) {
target[n].style.display='none';
count--;
if (count==0){
  clearInterval(dynTime);
  var t = new Date();
  document.getElementById('msg').style.display='block';
  str='Misses : ' + misses + ' <br/>Elapsed time : ' + (t - elapsed)/1000  + ' seconds';
  document.getElementById('score').innerHTML = str;}
  if(e && e.stopPropagation){e.stopPropagation();}
  else{e.cancelBubble = true;}
}
function playAgain(){
  for (var div=0; div<10; div++)
    with (target[div].style) {
        top = Math.floor(Math.random()*18)+1 + 'em';
        left= Math.floor(Math.random()*18)+1 + 'em';
        display = 'block';
  }
  count = 10;
  misses = -1;
  elapsed = new Date;
  document.getElementById('msg').style.display='none';
dynTime=setInterval('time.textContent=((new Date-elapsed)/1000).toFixed(1);',100);

}
window.onload = init;
//]]>
</script>
</body></html>

Tidied it up a bit, added dynamic timer (added current miss count should be a breeze). Gonna fix the div's up next. Made everything 'em' - changed CSS units px to em, for 100% W3C Mobile OK missed your +'px' in the code.

\$\endgroup\$
  • \$\begingroup\$ The px in the JS will not affect MobileOK, only the CSS width and height. Mobile OK will not see the JS positioning. When you are at 100% Mobile OK, that cannot be beat. It is not easy to get 100%. Mobile OK is the reason I check the HTML markup with XHTML Basic 1.1. Any errors with that doctype will cost points. \$\endgroup\$ – Misunderstood Mar 24 '15 at 0:12
  • \$\begingroup\$ i had a look at your SO profile - these guys need a forum : distribly.com/sell-pdfs.html @Misunderstood \$\endgroup\$ – JMP Mar 24 '15 at 5:44
  • \$\begingroup\$ The with (divs[div].style) { is cleaner. I like how you create the divs. While it makes the init routine much cleaner, the bad thing, it does not work. It is easier to go with the HTML divs. addEventListener does not work with older IE Browsers.('event' in quotes will get the event to fire. misses,numdiv, and count need var . If you want to have variable number of divs, consider using PHP to generate the HTML and JS. I find JS gets out of control when an apps HTML is not scripted. PHP can make a page functional, then use JS only for improving the look, and user interaction. \$\endgroup\$ – Misunderstood Mar 25 '15 at 16:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.