Opera Widgets blog

A Simple Game of Sudoku!

I figured since most of you either dont know how to make a widget, or dont know what to make - I thought I would give you guys a small and simple example!

To start I have a small template for making a widget right here

Now all we need to do to make a Sudoku widget is this:
1. Write a class to hold data, marking each value with three options - correct/userInput/editable
2. Write a class that creates a random Sudoku Game using the above class.
3. Write some functions to verify and display all the data

And thats all there is to it. For those of you who didnt understand the 3 tasks, dont worry, I will be explaining each now:

1. A Class to hold the data

  var sudokuBlock = function(){
    //To make the grid we create a Three dimensional Array
    //To create the X Axis for our Sudoku Grid
    this.theGrid = new Array();
    //Add columns to our Grid -> Y-Axis
    for(var i=0;i<9;i++){
      this.theGrid[i] = new Array();
      //Add a Z Axis to our Grid
      for(var j=0;j<9;i++){
        this.theGrid[i][j] = new Array();
      }
    }
  }

Sudoku, the game, is a grid size 9x9 containing numbers from 1 to 9 in each column, row and block. The numbers do not repeat themselves in any column, row or block.

On paper, 2 dimensions are just fine! but for a computer we need the 3rd dimension. Here is why:

sudokuBlock.theGrid[0][0][0] = The Correct Value for the box
sudokuBlock.theGrid[0][0][1] = The User's input for that box
sudokuBlock.theGrid[0][0][2] = The State of that box - Editable or uneditable

Its true that there may be more than one correct arrangement for a game of sudoku - but if the user decides to quit - we need to have atleast one answer right!?

2. A class that creates a random Sudoku game for us!

var sudokuCreator = function(sudokuBlockObject){
this.data = sudokuBlockObject.theGrid;
    
//Start filling in the data!
// This function can be made in *many* ways. 
//The following is just one way I came up with.
    var flag = 'everything is ok!';
    for(var i=0;i<9;i++){
      for(var j=0;j<9;j++){
        flag = 0;
        while(flag == 'everything is ok!'){
          
          //Generates a random value ranging from 1 to 9
          var randomValue = Math.floor(Math.random()*9)+1;
          this.data[i][j][0] = randomValue;
          
          //We will define this function in the next step :)
          flag = checkData(this.data, i, j);
        }
      }
    }
    
// This function is a random generator that will simply create
// 1 solved block of Sudoku. Now what we need to do it shift 
//some of its values into UnEditable spots, just like in the game!
    
//This function makes 4 blocks per row visible to the player, and 
//sets them as 'UnEditable'

    var colNumber = 0;
    for(var i=0;i<9;i++){
      for(var j=0;j<4;j++){
        colNumber = Math.floor(Math.random()*9);
        if(!this.data[i][colNumber][2]){
          this.data[i][colNumber][1] = this.data[i][colNumber][0];
          this.data[i][colNumber][2] = 'UnEditable';
        } else {
          j--;
        }
      }
    }
  }

3. Some functions to verify and display the data!

In the Class sudokuCreator() we used a function called checkData()
Thats the key to most of the game!

function checkData(data, maxI, maxJ){
    if(!maxI) maxI = 9;
    if(!maxJ) maxJ = 9;
    var verified = 'everything is ok!';
    
    var testArray = new Array(0,0,0,0,0,0,0,0,0);
    
    //First we check each row
    for(var i=0;i<maxI;i++){
      for(var j=0;j<maxJ;j++){
        if(testArray[data[i][j][0]]!=0) 
          testArray[data[i][j][0]] = 1;
      }
      var oops = 0;
      for(var j=0;j<maxJ;j++){
        if(testArray[data[i][j][0]]==0) oops = 1;
      }
      if(oops==1){
        verified = 'Row '+i+' is incorrect';
        //Here we can do something about the fact the this row is incorrect
        changeRowColour(i);
      }
    }
    .
    .
    .

...Did you really think I would give away the whole widget for someone to make and win??

I'm leaving the rest up to you! Use your imagination, use the Animation Library and make the numbers fade in and out. Let the lines glow when they are correct. Get the numbers to shake 2 pixels left and right when they are incorrect.

So how about it? any takers to complete this widget:)