{"id":43777,"date":"2019-02-23T03:01:40","date_gmt":"2019-02-22T17:01:40","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=43777"},"modified":"2019-02-24T19:12:41","modified_gmt":"2019-02-24T09:12:41","slug":"simon-says-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/simon-says-game-primer-tutorial\/","title":{"rendered":"Simon Says Game Primer Tutorial"},"content":{"rendered":"
\"Simon<\/a>

Simon Says Game Primer Tutorial<\/p><\/div>\n

One of the great things about the “net” is learning things off other people. Here at this blog we’ve mentioned the stupendous HTML5 File API<\/a> link we’ve used a lot for “shape to upload” local disk file browsing purposes in so many web applications we’ve talked about. So, thanks for that, but that File API brilliance is not all we learnt by putting that logic into play. We’ve not up until now, formalized it into a “proof of concept” web application, but we’ve now adapted its …<\/p>\n\n\n\n\n\n
At HTML5 File API<\/a> …<\/th>\n<\/tr>\n
\n

\ndocument.querySelector(‘.readBytesButtons’).addEventListener(‘click’, function(evt) {
\n if (evt.target.tagName.toLowerCase() == ‘button’) {
\n var startByte = evt.target.getAttribute(‘data-startbyte’);
\n var endByte = evt.target.getAttribute(‘data-endbyte’);
\n readBlob(startByte, endByte);
\n }
\n }, false);\n<\/p><\/blockquote>\n<\/td>\n<\/tr>\n

Adapted for a Simon Says<\/a> Game<\/th>\n<\/tr>\n
\ndocument.querySelector(‘.classy’).addEventListener(‘click’, function(evt) {
\n if (evt.target.tagName.toLowerCase() == ‘button’) {
\n eval(evt.target.title);
\n }
\n}, false);\n<\/td>\n<\/tr>\n<\/table>\n

Let’s learn a bit more about the crucial document.querySelector<\/a> method …<\/p>\n

\nThe querySelector() method returns the first element that matches a specified CSS selector(s) in the document.\n<\/p><\/blockquote>\n

For me, and I grant you it might just be me, but it breaks the nexus in my mind that I should always be thinking …<\/p>\n