趣味javascript程序

遺傳算法解決旅行商問題(TSP)

旅行商問題(TSP)是經典的NP完全問題,也經常被程序員們用來測試和練習各種算法的效率。這是我寫的一個純粹練手的程序,還未完善,隨後應該會稍作改進,增加更多的設定選項和更好的遺傳生成算法。

Continue reading 

素數螺旋

本文啓發自知乎問題:極座標表示 5000 到 50000 之間的素數畫點到紙上爲什麼會形成一條斐波那契螺旋線?

把一個自然數n用極座標表示,也就是在座標(n*cos n,n*sin n)的位置繪製一個點;而當你把所有素數繪製到紙上之後,會發現它是一個包含了許多條空白線條的圓形:

很顯然,空白是合數導致的,但爲什麼合數會排列成一條條曲線呢?

王小龍已經做了精彩的回答。不過爲了更直觀地理解,我寫了這個小程序:

Continue reading 

WWDC 2014海報的彩虹特效

這個有趣的小程序出自知乎問題:WWDC 2014 的海報是怎麼做出來的?

本程序使用HTML5+JS進行開發,可以將任意圖片轉換成WWDC2014海報的樣式:用色調如彩虹般絢麗的圓角矩形來拼成原圖。

裏面已經預置了幾個圖形,只要點最上面的按鈕即可切換;當然,最有意思的是在右邊上傳本地硬盤的圖片,不管是什麼圖,都能轉換成海報上的效果。
(上傳圖片需較新版本的IE、FF、Chrome瀏覽器才能支持,建議使用淺色背景、深色圖案的)

Enjoy it.

Continue reading 

約瑟夫斯問題:最後生還者

有這麼一個古老的問題:一羣死刑犯排成圓圈,每隔一人槍斃一個,轉完一圈後從頭開始繼續槍斃,直到剩下最後一個人,這個幸運兒會被釋放。

問:一開始站在哪個位置才能活下來?

這就是著名的約瑟夫斯問題,排成的圓圈叫做約瑟夫斯環。

(當然,隔一人只是個特殊情況,約瑟夫斯問題包含了間隔任何人數的計算方法)

在上面維基百科的鏈接以及知乎的答案裏已經有了通用的計算方法,這裏就不必講什麼公式和證明了,而是直接用圖形來演示:

Continue reading 

HTML5入門習作2:炮臺

上一篇中,初學html5動畫的我在canvas畫布上用彩色小球模擬了煙花噴射的效果,功能雖簡單,但在製作中涉及到了幾個要點:計算、繪製、顯示。而且實現了可兼容舊版的requestAnimationFrame方法,以達到更平滑的動畫效果。

接下來,我準備在上一篇的基礎上加以改進,實現一個有簡單互動的小遊戲。

當然,只有小球是遠遠不夠用的,在邊調試邊開發的過程中,下列功能也逐一實現:

  • 封裝動畫框架到單獨js文件(代碼複用);
  • 生成多邊形(繪製炮臺);
  • 漸變填充(繪製防衛區);
  • 角度計算(發射扇面形散佈的炮彈);
  • 碰撞檢測(炮彈擊中目標,以及目標撞牆後的反彈);
  • 鼠標事件(實時調整炮口方向);

以及之前實現過的漸隱對象,用於顯示摧毀後的爆炸效果、全屏閃爍以及文字提示。

那麼,先看看效果再講解代碼吧。

操作提示:

  • 鼠標控制炮口方向,炮彈自動發射;
  • 擊墜10、20、40、80、160……個目標時會升級,升級後某個炮臺威力會增加,相應的,敵人數量也會增加;
  • 上方中央的“@”表示HP,敵人觸底一次則減少一格;
  • GameOver後,點擊屏幕重新開始。

Continue reading 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章