The Code

Example 10-1 gives the code for our game. We’ll discuss the various functions in the next section before we move on to testing it in a desktop browser and then modifying it to run full screen on an iOS device. This version of the game will work fine on a Safari desktop browser. We will highlight the modifications necessary to port it to the iPhone/iPad in the next section.

Example 10-1. BSBingo.html full source listing

<!doctype html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">

 <title>BS Bingo</title>
 <script src="modernizr-min.js"></script>
 <script src="TextButton.js"></script>
 <script src="ConsoleLog.js"></script>
 <script type="text/javascript">

 window.addEventListener('load', eventWindowLoaded, false);
 function eventWindowLoaded() {

    canvasApp();

 }

 function canvasSupport () {
     return Modernizr.canvas;
 }

 function canvasApp(){

    if (!canvasSupport()) {
           return;
      }else{
       theCanvas = document.getElementById("canvas");
        context = theCanvas.getContext("2d");
    }

    var bingoCard = [];
    var buttons = [];

    var standardJargonList = [];
    var tempButton = {};
    var clickSound;

    function initLists(){

       standardJargonList=[
        "Actionable", "Assessment" ,"Bandwidth", "Benchmark",
        "Best\nPractices", "Bottle neck" , "Change\nManagement",  "Coach",
        "Competitive\nAdvantage", "Constraints", "Core\nCompetencies",
        "Core values", "Critical\nthinking", "Cutting\nedge",
        "Dashboard", "Deliverables", "Enterprise","Gatekeeper",
        "Individual\nContributor", "Leadership", "Matrix\norganisation",
        "Metrics", "Milestones" ...

Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial