patternjavascriptMinor

Piccoche - a coordination game

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

coordinationgamepiccoche

Problem

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



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

function init() {
var i;
count=10;
for (i=0;i

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)

Solution

This is cleaner.

added `

 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

 to get misses

added

 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


Piccoche

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

All Gone!Again


//Elapsed time = ' + (t - elapsed)/1000  + ' Sec.';}
  if(e && e.stopPropagation){e.stopPropagation();}
  else{e.cancelBubble = true;}
}
window.onload = init;
//]]>

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';
}

Code Snippets

<!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>

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

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';
}

Context

StackExchange Code Review Q#84710, answer score: 4

Revisions (0)

No revisions yet.