You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 8 Next »

This is a simple number guessing game written in javascript using Canjs

Index.html

 <!-- This is the main html file for the guess a number game
     It sets up a div as an attachment point for the view
     Includes some helper CSS, and loads the necessary
     javascript files
-->

<!doctype html>
<html>
<head>
    <title>Guess a number</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/contacts.css">
</head>
<body>
<div id="guessView" ></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="js/can.jquery.js"></script>
<script src="js/can.fixture.js"></script>
<script src="js/guess.js"></script>
</body></html>

guess.js

// This is the application code for "guess a number'

// This sets up a callback triggered at the end of document load
// All can setup needs to be done after the DOM is ready
$(document).ready(function(){
   // This creates a new instance of the Guess controller
   // Its view will be affixed to the div named guessView in
   // the index.html and the observable GuessData will be passed
   // in for its use as the 'data' field on this.options
   new Guess('#guessView',{data:GuessData});
});


// This defines an obervable data block that has two fields
// The first is a message that will be displayed in the view
// The second is a random number between 0 and 99 inclusive
// that is hidden from the user
// The point of the game is to guess this random number
var GuessData = new can.Observe({
    message: "Enter a guess: ",
    guess: Math.floor(Math.random()*100)
});

// This creates a constructor called Guess that can create
// a guess controller when new'd.  It is used in the document loaded
// callback above to instance an actual controller
Guess = can.Control({
   // The init function is called when an instance is new'd
   init: function(){
       // can.vew compiles the view ejs
       // this.element.html attaches the compiled view at the dom point
       // specified in the constructor call
       this.element.html(can.view('views/guessView.ejs',{
           myData:this.options.data
       }));
   },
   // This method is automagically attached to the controller's associated
   // div and calls back to this function on form submit
   // It returns false to prevent actual submission to the web server
    "submit": function(event){
        DoGuess(parseFloat(document.myform.guess.value),this.options.data);
        document.myform.guess.value="";
        return false; // short circuit submit
    }
});

// This function checks the guess and updates the message field
// IMPORTANT: such updates must be done through obervable.attr(<key>,<new value>)
// or they wil not be observed
function DoGuess(guess,myData){
    if (guess<myData.guess){
        myData.attr('message',"Too low, Guess again: ");
    } else if (guess>myData.guess) {
        myData.attr('message', "Too High, Guess again: ");
    } else {
        myData.attr("message","You got it!");
    }
}
  • No labels