[Ff13-2] Chromie - Time Labyrinth Breaker

- - posted in jQuery, javascriptMVC | Comments

簡介

  • ff13-2裡面有個時鐘小遊戲,影片參考
  • 說穿了就是一個排列組合遊戲,比起其他小遊戲這個難度高很多,所以網路上有一些人寫了程式專門解這個小遊戲。其實有很多解答版本,但是都不太好用,UI也…。乾脆自己寫一個!
  • 有參考某個flash實做,不過我用純html5+js實現。js核心是jquery1.7.1,框架是javascriptMVC。

命名

Chromie = 克羅米

克羅米是魔獸世界WoW中擁有時間穿梭能力的種族-青銅龍族中的一員。 克羅米@wow wiki

實做

  1. 尋徑遞迴演算法 核心片段
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
divergence: function(current, attractor_fields, paths, dir){
  var self = this;
  var value = attractor_fields[current];
  if(value == null)
  {
      return false;
  }
  //paths.push(attractor_fields[current].toString()+'['+(current+1)+']'+dir);
  paths.push(current);
  attractor_fields[current] = null;
  if(paths.length == attractor_fields.length)
  {
      this.renderSolution(paths);
      this.renderHistroy(paths);
      if(this.element.find('#steinsgate span').length > 0)
          this.element.find('#steinsgate').html('');
      this.element.find('#steinsgate').append(paths.toString()+'<br/>');
      return true;
  }
  var path_fork1 = paths.slice();
  var path_fork2 = paths.slice();
  var af1 = attractor_fields.slice();
  var af2 = attractor_fields.slice();
  return this.divergence((attractor_fields.length+current+value)%attractor_fields.length, af1, path_fork1, '+'+value) || this.divergence((attractor_fields.length+current-value)%attractor_fields.length, af2, path_fork2, '-'+value);  
}
  1. Canvas繪圖 就是查API而已,利用了mozilla的線上開發手冊mdn

截圖及操作

1~6數字輸入刻度,0刪除前一個。

Github demo page

chromie

Comments