Sunday, 27 April 2014

Simon Says game in EaselJS

I have ported over one of my older post, the Simon Says game in Actionscript 3 to EaselJS. The code can be seen below and an example can been seen here.

<!DOCTYPE html> 
<html> 
 <head> 
  <style> 
  html,body{padding:0; margin:0;} 
  #canvas{background-color: black;} 
  </style>
  
  <script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
  <script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
  <script src="http://code.createjs.com/soundjs-0.5.2.min.js"></script>
  <script>
   var stage,
    coloursArray = [],
    userArray,
    computerArray,
    sequenceEnd,
    timer,
    count,
    score,
    playText,
    guessText,
    st,
    manifest;
    
   
   function init()
   {
    stage = new createjs.Stage('canvas');
    stage.enableMouseOver(10); 
    
    createjs.Ticker.addEventListener("tick", stage);
    createjs.Ticker.setFPS(30); 
    
    //colour blocks
    var b1 = createBlock( '#ff0000', 'tl', 45, 18);
    var b2 = createBlock( '#00ff00', 'tr', 155, 18);
    var b3 = createBlock( '#FFFF00', 'bl', 45, 128);
    var b4 = createBlock( '#0000FF', 'br', 155, 128);
    stage.addChild(b1, b2, b3, b4);
  
    coloursArray.push(b1, b2, b3, b4);
    
    for(var i = 0; i < coloursArray.length; i++){
     coloursArray[i].id = i;
     coloursArray[i].cursor = 'pointer';
     coloursArray[i].addEventListener('click', buttonHandler);
    }
    
    
    //play text
    playText = new createjs.Text();
    playText.text = 'CLICKn TO PLAY';
    playText.color = '#ffffff';
    playText.font =  'bold 18px Arial';
    playText.textAlign = 'center';
    playText.x = stage.canvas.width/2;
    playText.y = stage.canvas.height/2 - 20;
    playText.hitArea  = new createjs.Shape(new createjs.Graphics()
                       .beginFill("#f00")
                       .drawRect(-stage.canvas.width/2,-stage.canvas.height/2 + 20,300,250)); 
    playText.addEventListener('click', playHandler);
    stage.addChild(playText);
    
    //guess text
    guessText = new createjs.Text();
    guessText.text = '';
    guessText.color = '#ffffff';
    guessText.font =  'bold 55px Arial';
    guessText.x = stage.canvas.width/2;
    guessText.y = stage.canvas.height/2 - 25;
    guessText.textAlign = 'center';
    guessText.visible = false;
    stage.addChild(guessText);
                
    stage.update(); 
                
                
    //load sounds
    if (!createjs.Sound.initializeDefaultPlugins()) { return; }
        var audioPath = 'sounds/';
        manifest = [
        {id:'chicken_sfx', src:'chicken_sfx.ogg'},
        {id:'cow_sfx'    , src:'cow_sfx.ogg'},
        {id:'oink_sfx'   , src:'oink_sfx.ogg'},
        {id:'sheep_sfx'  , src:'sheep_sfx.ogg'}
        ]
        createjs.Sound.alternateExtensions = ['mp3'];
        createjs.Sound.registerManifest(manifest, audioPath);
                
   }
   

   function playHandler(e)
   {
    playText.visible = false;
    start();
               
   }
   

   function start()
   {
    userArray = [];
    computerArray = [];
    guessText.text = '0';
    guessText.visible = true;
    count = 0;
    score = 0;
    sequenceEnd = false;
    newRound();
   }
   
   
   function newRound()
   {
    var r = Math.floor(Math.random() * coloursArray.length);
    userArray.push(r);
    
    st = setInterval(checkColours, 1000);
   }

   
   function checkColours()
   {
    if(count < userArray.length){
     var value = userArray[count];
     createjs.Tween.get(coloursArray[value]).to({alpha:0.5}, 300).to({alpha:1},300);        
     createjs.Sound.play(manifest[value].id);
     count++;
     
    }else{
     clearInterval(st);
     computerArray = userArray.concat();
     sequenceEnd = true;
    }
   }
   
   
   function buttonHandler(e)
   {
    
    if(sequenceEnd){
     
     var computerChoice = computerArray.shift();
     var userChoice = e.target.id;
     
     if(userChoice == computerChoice){
      
      createjs.Tween.get(coloursArray[userChoice]).to({alpha:0.5}, 300).to({alpha:1},300);
      createjs.Sound.play(manifest[userChoice].id);
                        
      if(computerArray.length == 0){
       newRound();
       count = 0;
       sequenceEnd = false;
       score++;
       guessText.text = String(score);
      }
      
     }else{
      guessText.text = '';
      guessText.visible = false;
      playText.visible = true;
     }
     
    }
   }
   
   
   function createBlock(colour, direction, xpos, ypos)
   {
    var g = new createjs.Graphics();
    g.beginFill(colour);
    
    switch(direction)
    {
     case 'tl':
      g.lineTo(0, 0);
      g.lineTo(100, 0);
      g.lineTo(100, 60);
      g.quadraticCurveTo(60, 60, 58, 100);
      g.lineTo(0, 100);
     break; 
     
     case 'tr':
      g.lineTo(0, 0);
      g.lineTo(100, 0);
      g.lineTo(100, 100);
      g.lineTo(47, 100);
      g.quadraticCurveTo(40, 60, 0, 58);
     break;
      
     case 'bl':
      g.lineTo(0, 0);
      g.lineTo(57, 0);
      g.quadraticCurveTo(60, 50, 100, 49);
      g.lineTo(100, 100);
      g.lineTo(0, 100);
     break;
     
     case 'br':
      g.moveTo(47,0);
      g.lineTo(100,0);
      g.lineTo(100,100);
      g.lineTo(0, 100);
      g.lineTo(0, 50);
      g.quadraticCurveTo(40, 50, 47, 0);
     break; 
    } 

    var s = new createjs.Shape(g);
    s.x = xpos;
    s.y = ypos;
    return s;
   }

  </script>
  
 </head>
 
 <body onload="init()">
  <canvas id="canvas" width="300" height="250"></canvas> 
 </body>
</html> 

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP