A Pen by Giovanny.

Akari.markdown

Akari

Akari is a puzzle game, you need to put the lights in the free cells to light all the room. rules are simple: a numbered cell means you must to put that number of lights just side to that cell.

A Pen by Giovanny on CodePen.

License.

index.html

<h1>Akari</h1>
<canvas id='board' width='550px' height='550px'></canvas>
<section id='info'>
  <article id='rules'>
    <p>Your goal is to place light bulbs in white cells such that no two bulbs shine on each other, until the entire grid is lit up.</p>
    <p><strong>Click into the grid to place a bulb</strong>, it sends rays of light horizontally and vertically, illuminating its entire row and column unless its light is blocked by a black cell. </p>
    <p>A black cell may have a number on it from 0 to 4, indicating how many bulbs must be placed adjacent to its four sides</p>
    <p>for example, a cell with a 4 must have four bulbs around it, one on each side, and a cell with a 0 cannot have a bulb next to any of its sides. An unnumbered black cell may have any number of light bulbs adjacent to it, or none. Bulbs placed diagonally adjacent to a numbered cell do not contribute to the bulb count.
    </p>
  </article>
</section>
<section id='levels'>
    <button id='level1' data-level='1' data-map='1999999991999899999998999299899999999199999499999999999929999929999999989929998999999909991999999991'>level 1</button>
    <button id='level2' data-level='2' data-map='9999910991908999199999989919998992999919899990989999891999989499992998999899199999929998398999889999'>level 2</button>
    <button id='level3' data-level='3' data-map='9999999999999999999999999999999298999999299293992999999992929999199999991999999999909999299999918992'>level 3</button>
    <button id='level4' data-level='4' data-map='9999999999999990999999990999999999919999999999929989999999998299199991999299909993199999999999999999'>level 4</button>
    <button id='level5' data-level='5' data-map='9919919991999999999999929399999999999099199999999992999999819999999991999999991919999999999998999299'>level 5</button>
    <button id='level6' data-level='6' data-map='1899999999999998999999999199999299189999999999999999992999199099999919999999999990999299999999999999'>level 6</button>
    <button id='level7' data-level='7' data-map='9929999999999393999999999939299999999992819999999999199999999999099999999990999199999999999899999999'>level 7</button>
    <button id='level8' data-level='8' data-map='9999999999999999199999991999199999999192199999999991199939199999829991919999999999991999999199999999'>level 8</button>
    <button id='level9' data-level='9' data-map='9998999999999999399990999999999999999999999999999991999099999292999999994999919992992929199999999999'>level 9</button>
    <button id='level10' data-level='10' data-map='8999999299999999999199999999999919999999998999989999299999999392992999919919990999999999999999999999'>level 10</button>
    <button id='level11' data-level='11' data-map='9999399998999999999999999099999999999999192999999199919999999999999199999199999990992199099999999999'>level 11</button>
    <button id='level12' data-level='12' data-map='9991999199993999999999999919999999929999899199999999993998399999939999999999299999999991999999999999'>level 12</button>
  <button id='level13' data-level='13' data-map='9999999991939939991939929299999999999999299999919991999999292999999991999999999999999999999999299819'>level 13</button>
  <button id='level14' data-level='14' data-map='9999809999929999998999949919999989999899199988999189998299919989999899999399899990999999299999889999'>level 14</button>
  <button id='level15' data-level='15' data-map='9919989999999991939919999999999999999999999899999999929919099999999999999399999919299999999999999998'>level 15</button>
</section>
<footer>
  This is a weekly project by <a href='http://twitter.com/agar3s' target='_blank'>@agar3s</a> follow my blog on tumblr <a href='aweeklyproject.tumblr.com' target='_blank'>aweeklyproject.tumblr.com</a>
</footer>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
  $(document).ready(function(){
    $('#board').on('click', function(event){
        var xpos=0, ypos=0;
      if(event.offsetX==undefined){
        xpos = event.pageX-$('#board').offset().left;
        ypos = event.pageY-$('#board').offset().top;  
      }else{
        xpos = event.offsetX;
        ypos = event.offsetY;
      }
    addLight(Math.round((xpos-35)/50), Math.round((ypos-35)/50));
  return false;
    });
    $('button').on('click', function(event){
      $('#level'+currentLevel).removeClass('selected');
      var mapdata = $(this).data('map');
      currentLevel = $(this).data('level');
      loadMap(mapdata);
      $('#level'+currentLevel).addClass('selected');
    });
  });
</script>

script.js

var canvas = document.getElementById('board');
var ctx = canvas.getContext('2d');
var currentLevel = 1;

//you need oks = number of numbered cells to win
var oks = 0;
var totalOks = 0;

var lighteds = 0;
var totalLighteds = 0;

var validateGame = function(){
  console.log('oks', oks, totalOks);
  console.log('lighteds', lighteds, totalLighteds);
  if(oks==totalOks&&lighteds==totalLighteds){
     alert('you win');
  }
}

ctx.strokeStyle = '#000';
ctx.font = "bold 28px Arial";
ctx.textBaseline="middle";
ctx.textAlign='center';

var Cell = {
  'content': '',
  'lighted': false,
  'block': false,
  'perfect': false,
  'sideLights': 0,
  'position':{i:0,j:0},
  'setUp': function(type){
    if(type<9){
      this.block = true;
      this.content = type;
      if(type<=4){
        totalOks+=1;
      }
      if(type==0){
        oks+=1;
        this.perfect=true;
      }
    }else{
      totalLighteds+=1;
    }
  },
  'setLighted': function(lighted){
    if(this.lighted==lighted)return;
    this.lighted = lighted;
    if(lighted){
      lighteds++;
    }else{
      lighteds--;
    }
    
  },
  'light': function(){
    if(this.block){
      return false;
    }
    this.setLighted(true);
    this.draw(ctx);
    return true;
  },
  'crossLight': function(){
    var j = this.position.i;
    var i = this.position.j;
      for(var ii=i;ii<10; ii++){
        if(!cells[ii][j].light())break;
      }
      for(var ii=i;ii>=0; ii--){
        if(!cells[ii][j].light())break;
      }
      for(var jj=j;jj<10; jj++){
        if(!cells[i][jj].light())break;
      }
      for(var jj=j;jj>=0; jj--){
        if(!cells[i][jj].light())break;
      }
  },
  'updateMySideLight': function(number){
    this.sideLights+=number;
    if(this.block&&this.content>=0){
      if(this.sideLights==this.content){
        this.perfect = true;
        oks++;
      }else if(this.perfect){
        this.perfect=false;
        oks--;
      }
      console.log(oks, totalOks);
    }
    this.draw(ctx);
  },
  'updateSideLights': function(number){
    var j = this.position.i;
    var i = this.position.j;
    if(i>0){
      cells[i-1][j].updateMySideLight(number);
    }
    if(i<9){
     cells[i+1][j].updateMySideLight(number);
    }
    if(j>0){
      cells[i][j-1].updateMySideLight(number);
    }
    if(j<9){
      cells[i][j+1].updateMySideLight(number);
    }
  },
  'draw': function(ctx){
    if(this.block){
      ctx.fillStyle='#444';
    }else{
      if(this.lighted){
        ctx.fillStyle='#FF5';
      }else{
        ctx.fillStyle='#AAA';
      }
    }
    var i = this.position.i;
    var j = this.position.j;
    ctx.fillRect(10+i*50,10+j*50, 50,50);
    ctx.strokeRect(10+i*50,10+j*50, 50,50);
    
    if(this.content>=0&&this.content<8){
      if(this.content==this.sideLights){
        ctx.fillStyle = "#080";
      }else if(this.content>this.sideLights){
        ctx.fillStyle = "#000";
      }else{
        ctx.fillStyle = "#800";
      }
      ctx.fillText(this.content, 35+i*50, 35+j*50);
    }else if(this.content==='b'){
      ctx.fillStyle = "#00F";
      ctx.fillText(this.content, 35+i*50, 35+j*50);
    }
  }
};
var cells = [];
var loadMap = function(map){
  oks = 0;
  totalOks = 0;
  lighteds = 0;
  totalLighteds = 0;
  cells = [];
  for(var j = 0; j<10; j++){
    cells.push([]);
    for(var i = 0; i<10; i++){
      var number = 10*j+i;
      var type = parseInt(map[number]);
      var cell = Object.create(Cell, {});
      cell.setUp(type);
      cell.position = {i:i, j:j};
      cells[j].push(cell);
      cell.draw(ctx);
    }
  }
};



//'9999999999'+
var map3 = '9919989999'+
           '9999919399'+
           '1999999999'+
           '9999999999'+
           '9998999999'+
           '9992991909'+
           '9999999999'+
           '9993999999'+
           '1929999999'+
           '9999999998';

loadMap(map3);

var addLight = function(j, i){
  var cell = cells[i][j];

  if(cell.content==='b'){
    cell.content = '';
    cell.setLighted(false);
    cell.updateSideLights(-1);
    turnOff();
    turnOn();

  }else if(!cell.block && !cell.lighted){
    cell.content = 'b';
    cell.light();
    cell.updateSideLights(1);
    cell.crossLight();
  }
  validateGame();
};
var turnOff = function(){
  for(var j=0; j<10; j++){
    for(var i=0; i<10; i++){
      cells[i][j].setLighted(false);
      cells[i][j].draw(ctx);
    }
   }
};
var turnOn = function(){
  for(var j=0; j<10; j++){
    for(var i=0; i<10; i++){
      if(cells[i][j].content==='b'){
        cells[i][j].crossLight();
      }
    }
  }
};

style.css

#board {
  display: block;
  float: left;
}
#levels {
  display: block;
  width: 100%;
}
.selected {
  background-color: #333;
  color: #FFF;
}

footer {
  display: block;
  position: absolute;
  bottom: 0;
  padding: 10px 5px 50px;
}