iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 16
3
自我挑戰組

一週程式專案挑戰系列 第 16

[專案03]貓圍棋(一)規劃說明

以前玩過的小遊戲,因為Flash被淘汰以後都不能玩了。在消失以前,用HTML改寫把記憶保存下來。

【大綱】

  • 專題內容
  • 初步設計
  • 心得

貓圍棋(不安全)
來源:昌爸工作坊的數學遊戲
flash swf 遊戲區的遊戲,
需要下載檔案才能玩。


一、【專題內容】

  • 貓圍棋介紹
  • 初步設計

【貓圍棋介紹】

參考:貓圍棋(不安全)

貓咪會試圖逃出棋盤邊緣,
在棋盤上下棋困住貓咪。

https://ithelp.ithome.com.tw/upload/images/20190917/20091910czdKtnLAY1.jpg

二、【初步設計】

  1. 六角形地圖
  2. 下棋
  3. 計步器
  4. 貓咪AI

1.六角形地圖

雖然圖形看起來是圓的,
但是寫程式看的是有多少選項。

簡單來說,
貓咪每次可以選六條路走,
和跳棋地圖是一樣的。

六角形地圖和一般熟知的長方形不同,
比方說象棋是4X8地圖,
陣列[4][8]就可以。

但是六角形就需要想像力,
應該會在這卡最久。

2.下棋

讓按鈕變顏色,
連動計步器()貓咪AI

3.計步器

原作沒有的功能,
計算玩家總共走幾步。

4.貓咪AI

要計算離出口最近的路,
這個很考驗演算法。
寫的出來,
但是要寫出聰明的貓咪很難。

進階挑戰
1.角色對調
玩家扮演被困住的貓咪


【心得】

因為踩地雷多花一天時間,
壓縮到貓圍棋時間。

有款三國懷舊小遊戲,
忘記名子就找不到,
好想挑戰當年失敗的最後一關。

感謝撥冗閱讀,
這個月會以遊戲為主題。


上一篇
[專案02]自製踩地雷(八)JS控制CSS屬性
下一篇
[專案03]貓圍棋(二)製作六角形地圖
系列文
一週程式專案挑戰26
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1

您好,小馬剛好對「貓圍棋」遊戲這個主題也有興趣呢~
期待你的作品哦~

謝謝您的關注,
敬請期待。

2
ccutmis
iT邦高手 2 級 ‧ 2019-09-17 23:23:38

我有想到一個用2維陣列為基礎的六角地圖作法,提供給您參考...
http://www.web3d.url.tw/ITHELP/JS_20190917/
網頁檢視原始碼即可看到,這邊就不貼code了,加油~!
對了,demo只是簡單弄了一個物件可以依六角方向移動,
邊界碰撞偵測或最佳路徑那些有挑戰性的就交給樓主了...
/images/emoticon/emoticon82.gif

看更多先前的回應...收起先前的回應...
不明 檢舉
【**此則訊息已被站方移除**】
ccutmis iT邦高手 2 級 ‧ 2019-09-18 17:38:33 檢舉

謝謝您的鼓勵^^

謝謝您的範例,
目前在努力吸收中。
「$」好像是jQery語法,
沒學過要花一點時間。

六角形分成三塊組成,
沒想到可以這樣做。
原本在研究1:2:庚號3,
想辦法畫出角度正確的六角形。

ccutmis iT邦高手 2 級 ‧ 2019-09-18 21:46:03 檢舉

不客氣~加油! 對了範例裡面是用純JS寫的,
您說到的「$」應該是ES6的字串模板,我是參考下列文章弄的:
https://ithelp.ithome.com.tw/articles/10213611

objName='cat';
tmpstr=`<div class="${objName}-top"></div>`;

console.log(tmpStr);
// 在字串模板裡用 ${objName}可以帶入js變數
// 網頁瀏覽的時候<div class="${objName}-top"></div>
// 會變成 <div class="cat-top"></div>

六角型用CSS畫是google搜來的...
/images/emoticon/emoticon82.gif

ccutmis iT邦高手 2 級 ‧ 2019-09-18 22:19:31 檢舉

六角型tiles換成圓形tiles,架構不變...
http://www.web3d.url.tw/ITHELP/JS_20190917/index_ovalTile.htm

1
sixwings
iT邦研究生 4 級 ‧ 2022-09-25 01:16:34

講一個好消息,那款貓圍棋遊戲的原作者後來把遊戲改寫成 js 的版本了,有機會可以回頭看看原作者實作的方式唷~

謝謝你的好消息,會好好研究一下。

我要留言

立即登入留言