跳到主要內容

HTML5 Kill Sudoku

花了二晚將前次發表的KillSudoku移植成Web版，這次利用HTML5的繪圖功能取代掉原來簡單的文字模式顯示，改良成更好的圖形顯示。

這個版本實作了簡單的編輯功能，可以很容易的輸入或創造謎題(滑鼠左鍵輸入再點一下取消輸入)。不過目前還沒有實作檢查輸入的題目是否有唯一解，所以如果嘗試去解沒有唯一解的題目時可能有會不可預期的結果。

這次增加了一個新的Pattern：XYZ Wings，不過現在懶的介紹了～



目前只在Chrome及Safari上試過。

(試試看)

標籤：

留言

  1. Waync Cheng2013年2月5日 晚上10:19

    改成再點一下左鍵就取消輸入, 這樣在touch device上也能取消

    回覆刪除
  2. Waync Cheng2013年3月11日 上午11:12

    新增了 W-Wings

    回覆刪除
  3. Waync Cheng2013年9月25日 上午8:11

    新增了分享功能...

    回覆刪除
  4. 匿名2013年12月18日 凌晨12:37

    你好~
    我在輸入某一題數獨時發現大大提供的數獨解答器沒辦法算出答案
    多試了網路上的一些解答器發現都可以算出答案...
    想請問一下這大概是什麼原因造成的呢?

    回覆刪除
  5. Waync Cheng2013年12月18日 清晨7:39

    你好,
    這是因為網路上找到的大多數解答器都是使用暴力方法窮舉出答案，除非輸入的答案無解，否則都是可以得到答案。而KillSudoku是模擬人類思維方法來解題，所以才能一步一步列出解題過程。也因為如此，假如KillSudoku模擬的功力不夠高的話就無法解出更難的題目，就像你遇到的情況一樣...目前KillSudosu只會解中高級的題目，太難的題目它不會解。等到我也會解了，就可以讓它也用同樣的方法來解...

    回覆刪除
  6. Waync Cheng2014年1月18日 晚上11:26

    有興趣的人可以在這裡下載 source code http://sourceforge.net/projects/html5killsudoku/

    回覆刪除

張貼留言

這個網誌中的熱門文章

以lex/yacc實作算式計算機

前面我們透過 手工的方式 實作了一個簡易的算式計算機，現在我們要開始使用工具來作同樣的事，比較看看手工和使用工具有什麼不同的差別。首先要介紹的就是lex&yacc。 lex & yacc lex(Lexical Analyzar)及yacc(Yet Another Compiler Compiler)是用來輔助程式設計師製作語法剖析器的程式工具。lex的工作就是幫助我們將輸入的資料文字串流分解成一個個有意義的token，而yacc的工作就是幫我們分析這些token和我們定義的規則作匹配。下圖中所表示的是使用lex及yacc的一般工作流程。 首先看到yacc會讀入一個.y檔案，這裡.y檔案的內容就是我們使用類似(E)BNF語法定義的語法規則，yacc會分析這些語法規則後，幫我們產生可以用來解析這些規則的程式碼，而這個檔案一般名稱預設為y.tab.c，產生的程式碼裡面最重要的一個的函式叫作yyparse。 同yacc類似，lex也會讀入一個.l的檔案，這個檔案裡面定義的是如何從文字流裡解出token的規則，使用的方法是常規表示式(regular expression)。在圖的左側中間我們還可以看到有一個叫作y.tab.h的檔案從yacc產生出來並餵給lex作輸入，這個檔案是yacc根據在讀入的.y檔裡面所定義的token代號所產生出來的一個header，這樣yacc及lex產生出來的程式碼裡面就可以使用共通定義的代碼而不必各寫個的。lex分析過.l檔案後也會產生一個一般預設叫作lex.yy.c的原始碼檔案，裡頭最重要的一個函式叫作yylex。 最後，我們把yacc產生出來的y.tab.c還有lex產生出來的lex.yy.c，以及其它我們自己撰寫的原始碼檔案一起拿來編譯再作連結，最後產生出來的就是一個可以用來解析我們定義的語法的解析器工具。以上是整個lex及yacc的使用流程概觀。 常規表示式 在正式使用lex之前，我們首先來對常規表示法作一個基本的認識。常規表示法是一種用來表示字串樣式(pattern)的中繼語言，就好比前文所介紹的(E)BNF表示式一樣，都是用來描述其它語言的語言，只不過用途不太一樣罷了。 常規表示式使用一些中繼符號(meta-symbol)以及ASCII字元定義字串樣式，以下列出一些常規表示式所使用的符號。 . 表示除了換行字元...
25 則留言
Read more »

猜數字遊戲 (電腦猜人)

前幾天午睡時突然被告知要參加公司內部的程式設計比賽，題目是用C寫一支文字模式的4位數字猜數字遊戲，由使用者來猜電腦的數字。在上星期時其實就已經有公佈了，但我沒有注意到所以是臨時加入，還好這是個簡單的題目，不用花多少時間就可以寫出來。 規則： - 這是一對一比賽，雙方各選擇一4位數字，不讓對方知道。 - 4位數字由數字0至9組成，每位數不得重複。 - 雙方輪流猜對方的數字，直到一方猜中為止。 - A方猜B方的數字後，B方根據A方的猜測回答幾A幾B。 - 一個A表示猜中一個數字且位置正確，一個B表示猜中一個數字但位置不正確。 - 當一方猜中4A0B時即表示猜中對方全部4個數字且位置正確，贏得比賽。 - 例：B的謎底是4208，底下箭頭左測是A的猜測，箭頭右測是B的回答。 　　　1234 ==> 1A1B 　　　5678 ==> 1A0B 　　　2406 ==> 1A2B 　　　... 　　　4208 ==> 4A0B ; 寫個程式讓玩家來猜電腦的數字不難，不過我從來沒有寫過讓電腦來猜玩家數字的版本，所以花了點時間想想怎麼寫。 研究後歸納出二個點。 1, 使用窮舉法將所有可能數字組合列出。 2, 每次猜測後根據結果排除不可能是答案的組合，重複這個動作直到猜中答案為止。 第1點只是實作問題，第2點概念也很簡單，但要過濾不是答案的組合根據的是什麼？乍看之下沒什麼頭緒，不過想通之後就非常簡單了。 它的基本原理如下：假如謎底是4561，如果猜1524則會得到1A2B。從相反的角度來看，如果謎底是1524，則猜4561時也會得到1A2B的回答。 利用這個方法，每一次猜測一個數字X後，再以這個數字當作答案，來和所有剩下來的候選答案作比對，如果得到的結果(幾A幾B)和數字X是一樣的話，就把這個數字保留下來繼續作為候選答案，否則就過把這個數字過濾掉。下一把，繼續從候選答案裡選一個出來猜，重複上面的動作，直到猜中為止。 ; C++ STL的algorithm裡有個叫作next_permutation的函數，可以用來生成排列。 #include <iostream> #include <algorithm> using namespace std; int main () {   int myints[] = {1,2,3};  ...
12 則留言
Read more »

窮人的 AI：自動漫畫分鏡切割

  ( 試試看 ) 在手機上看漫畫時，有一個體驗上的問題： 漫畫原本是「整頁設計」 手機最適合的是「一格一格往下滑」 與其強迫使用者縮放、拖曳、放大，更直覺的做法是： 直接把一頁漫畫自動切成多個分鏡，轉成瀑布流閱讀。 這篇文章分享一個不靠深度學習、完全在前端完成的實作方式： 使用 OpenCV.js 做分鏡偵測 輸出 rect list 再用 全畫面 Canvas 把每個分鏡當成一個「閱讀單位」 整個系統可以拆成三層： 漫畫圖片 ↓ 影像處理（找出 rects） ↓ 排序後的 rect list ↓ 全畫面 Canvas 逐格呈現（瀑布流） Step 1：灰階化 漫畫的資訊 90% 都在線條上，顏色反而是干擾。 cv.cvtColor(src, grayImage, cv.COLOR_RGBA2GRAY); 灰階化的好處： 降低維度 對邊緣偵測更穩定 對黑白漫畫特別有效 Step 2：邊緣偵測，抓出「分鏡的邊」 接下來用最經典、也最夠用的 Canny Edge Detection： cv.Canny(grayImage, edges, 50, 150); 在漫畫中，分鏡外框通常就是最明顯的邊界。 Step 3：形態學操作，把破碎邊框「補起來」 真實漫畫的線條並不完美，常常有斷線、陰影、留白。 所以要做一個很重要的步驟：膨脹（Dilation） const kernel = cv.Mat.ones( 5 , 5 , cv.CV_8U); cv.dilate(edges, dilatedEdges, kernel); 直覺理解就是： 把細線「抹粗一點」， 讓本來斷掉的邊界連成封閉區域。 這一步直接決定後面能不能成功抓到「一整格分鏡」。 Step 4：找輪廓，轉成矩形框（rect） 有了封閉區域之後，就可以找輪廓： cv.findContours( dilatedEdges, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE ); 每一個 contour，代表一個「可能的分鏡區塊」。 接著轉成矩形： const rect = cv.boundingRect(contour); rects.push([rect.x, rect.y, rect.widt...
張貼留言
Read more »