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>

guessView.ejs

<!-- This file is a very simple view that consists of a label and a text field
     The label comes dynamically from the message field of the observable myData
  -->
<form name='myform' >
<div >
<!-- This next line inserts the value of the message field on the myData observable.
     Using attr  to ftech it makes it "magic" in that the HTML wll update automatically
     when the obervable is aware of a change to the value of the message field. -->
<%= myData.attr('message'); %>
<input id='guess' type="text" name="guess" >
</div>
</form >

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