耐心烏龜 Patience

有一次去看診的時候，因為等了好久等到有點快失去耐性，看完診花了不少時間。在回家的路上有感而發，想說不知道有沒有什麼可以訓練或培養耐性的方法。如果沒有的話，或者我自己可以作個APP來達到這個目的，最後就作了這個APP。

<玩玩> <Android>


一開始想到的不是烏龜，而是主畫面是一個泡泡。這個泡泡會愈來愈大，但很容易就破掉。比如不小心點了畫面、程式進入背景、有來電或收到訊息通知等等，都會讓泡泡破掉。程式的目的就是想辨法讓泡泡持續變大，也就是你愈有耐心的保護它，就愈成功。可能可以顯示一個存活時間，用來表示耐心度。

後來一邊考慮程式內容時，一邊把泡泡改成了烏龜。同時考慮到，如果這隻烏龜很容易就死掉，要用這種方式來訓練耐心似乎很難，甚至會有反效果。考慮到一次性的遊戲方式，以存活度來評價耐心度有難度，改變為養成性質的作法。現在不會死掉了，存活時間是累計制的。這樣子應該會比較容易讓人持續的去作這作事，長期下來應該就能提高點耐心吧。

改成養成性質的作法後，其它的設計就能對應調整。首先除了存活度(存活時間)之外，再加上一個等級。這個等級的定義，只是簡單的每次烏龜從左走到右就升級一次。等級每升一級，烏龜就長大1個pixel。同時等級也對應烏龜移動速度，LV10表示每10秒烏龜走1個pixel。以上是核心功能，其它還設計了幾個裝飾畫面的功能。如上方背景日夜變化、月相變化及顯示12星座等。

以下作重點說明。

背景連續山脈圖

背景的山是先建好一個div元素，以CSS設定背景水平重複。
  // CSS.
  #mountains {
    background-repeat:repeat-x;
    background-position:bottom;
    text-align:
    right;font-size:48px;
  }

  // HTML.
  <div style="mountains">
  </div>
重複的圖片則以一記憶體canvas畫了一個山型emoji後產生。
var mountains = document.getElementById('mountains');
var url = getCharImgUrl(32, '⛰️');
mountains.style.backgroundImage = 'url("' + url + '")';

function drawCharCenter(ctx, size, s, x, y) {
  ctx.font = size + 'px Arial';
  ctx.textBaseline = 'middle';
  ctx.textAlign = 'center';
  ctx.fillText(s, x, y);
}

function getCharImgUrl(size, s) {
  var canvas = document.createElement('canvas');
  canvas.width = canvas.height = size;
  var ctx = canvas.getContext('2d');
  drawCharCenter(ctx, size, s, size/2, size/2);
  return canvas.toDataURL();
}

背景日夜變化

日夜變化是根據目前的時間來判斷是白天或黑夜，只是簡單的檢查目前小時來決定。
function isNight() {
  var now = new Date();
  var hour = now.getHours();
  return 6 > hour || 18 <= hour;
}

function getDayNightColor() {
  if (isNight()) {
    return 'black';
  } else {
    return 'skyblue';
  }
}

月相變化

月相是根據取得目前年月日計算得到，公式是上網google得到。
var now = new Date();
var phase = moonPhase(now.getFullYear(), now.getMonth() + 1, now.getDate());

function moonPhase(year, month, day) {
  var lp = 2551443; 
  var now = new Date(year, month - 1, day, 20, 35,0);
  var new_moon = new Date(1970, 0, 7, 20, 35, 0);
  var phase = ((now.getTime() - new_moon.getTime())/1000) % lp;
  return Math.floor(phase / (24 * 3600)) + 1;
}
月相圖則是根據計算得到的月相參數，再利用emoji內建的幾個月相圖作顯示。
function moonPhaseEmoji(day) {
  if (1 <= day && 30 >= day) {
    var emoji = ['🌑', '🌒', '🌒', '🌒', '🌒', '🌓', '🌓', '🌓', '🌓', '🌔', '🌔', '🌔', '🌔', '🌕', '🌕', '🌕', '🌖', '🌖', '🌖', '🌖', '🌗', '🌗', '🌗', '🌗', '🌘', '🌘', '🌘', '🌘', '🌘', '🌑'];
    return emoji[day - 1];
  } else {
    return ' ';
  }
}

12星座

12星座是根據目前月日，作簡單判斷得到。
var now = new Date();
var zodiac = getZodiacSign(now.getMonth() + 1, now.getDate());

function getZodiacSign(month, day) {
  var astro_sign = "";
  if (1 == month) {
    if (day < 20)
      astro_sign = "Capricorn♑";
    else
      astro_sign = "aquarius♒";
  } else if (2 == month) {
    if (day < 19)
      astro_sign = "Aquarius♒";
    else
      astro_sign = "pisces♓";
  } else if (3 == month) {
    if (day < 21)
      astro_sign = "Pisces♓";
    else
      astro_sign = "aries♈";
  } else if (4 == month) {
    if (day < 20)
      astro_sign = "Aries♈";
    else
      astro_sign = "taurus♉";
  } else if (5 == month) {
    if (day < 21)
      astro_sign = "Taurus♉";
    else
      astro_sign = "gemini♊";
  } else if (6 == month) {
    if (day < 21)
      astro_sign = "Gemini♊";
    else
      astro_sign = "cancer♋";
  } else if (7 == month) {
    if (day < 23)
      astro_sign = "Cancer♋";
    else
      astro_sign = "leo♌";
  } else if(8 == month) {
    if (day < 23)
      astro_sign = "Leo♌";
    else
      astro_sign = "virgo♍";
  } else if (9 == month) {
    if (day < 23)
      astro_sign = "Virgo♍";
    else
      astro_sign = "libra♎";
  } else if (10 == month) {
    if (day < 23)
      astro_sign = "Libra♎";
    else
      astro_sign = "scorpio♏";
  } else if (11 == month) {
    if (day < 22)
      astro_sign = "scorpio♏";
    else
      astro_sign = "sagittarius♐";
  } else if (12 == month) {
    if (day < 22)
      astro_sign = "Sagittarius♐";
    else
      astro_sign ="capricorn♑";
  }
  return astro_sign;
}

留言

張貼留言

這個網誌中的熱門文章

以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字元定義字串樣式，以下列出一些常規表示式所使用的符號。 . 表示除了換行字元
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};   sort(m
Read more »

KillSudoku 4顆星精彩數獨詳解 - 鍊技巧

圖片
這題數獨(sudoku)題目估計為4+顆星，有點難度。解題需要應用多種技巧，過程非常精彩有趣，是個好題。 底下使用 KillSudoku 作詳細圖解。 １，使用基本排除法則，可以簡單填入６個數字。到此為止，開始使用 候選數法 來解題。如下所示，為填入６個數字後的狀態圖。 ２，如下圖，使用進階排除法，在第９列和第４行可以先排除幾個候選數。 ３，如圖，在第２行有一個 Naked Subset (3,4)，可以對3,4候選數作排除。附帶提一下，反過來看在同一行裡面也可以說有另一個Hidden Subset(2,5,8)存在。Naked Subset和Hidden Subset常是一體二面同時存在，只不過對我們來說，Naked Subset是相對比較容易看的出來。 排除第２行的3,4後，又可以對第２列以外的3作排除，如下圖。 ４，接著，在第５行又發現了一個 Naked Subset (3,7,8)。 對第５行三個Subset以外的候選數3,7,8作排除後，又接著產生可以對第５行以外的3作排除。 ５，這一題解到此為止，開始進入高潮。大部份能解到3顆星題目的人，猜想應該就此卡住。以下開始需要應用更高級的鍊技巧，才能夠繼續進行。 應用X-Chains鍊技巧，可以找到一條由４條強連結組成的鍊，可以排除候選數2。這裡的鍊指的是由２條以上的強連結組成，而所謂的強連結是指在同一行、或同一列或同一個Box裡，由唯二的候選數構成的連結。如上圖中的第９行中，只有二個2，這二個2構成一條強連結。為什麼說這是一條強連結？因為在這條連結的AB二個端點中，肯定會有一個2存在，要麼是A點要麼是B點。鍊技巧就是將多條強連結串連起來作候選數排除的技巧，而X-Chains是高級的鍊技巧裡面的基本技巧。 接上圖，這樣一來就又可以應用基本排除方法，填入３個數字，如下圖所示。 ６，接下來就是本題最精彩的部份，以下需要連續找到３條鍊，才能繼續往下解。 ７，找出３條鍊後，剩下來的部份就沒什麼特別的了，只需要應用基本法就能把所有剩餘數字填完。
Read more »