iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
2
自我挑戰組

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

[專案03]寶石搶地盤(四)可自訂地圖大小

之前是用「float」排版所以要每個元素各別設定位置,不過這樣之後用手機瀏覽會有問題,畢竟手機不是寬螢幕。

【大綱】

  • 今日進度:可自訂地圖大小
  • 心得

作品:寶石搶地盤(之後改版不一定和畫面相同)
下方可以隨便輸入一個數字,
就會變成長度n的正六邊形。
沒有做玩家輸入檢查,之後要補上。
https://ithelp.ithome.com.tw/upload/images/20190926/20091910tvbkriNJo1.jpg


【今日進度:可自訂地圖大小】

參考:ccummit大貓圍棋
flex不用算距離,
可以直接垂直置中真方便。

#map{
	display:flex;
	background-color:darkgray;
	padding: 10px;
	width: fit-content;
}

用每一行把包起來,
這樣用flex比較方便,
然後設定垂直置中。

.col{
	display:flex;
	flex-direction: column;
	justify-content: center;
	margin:0px -3px;
}

六角形版塊

.poly{
	display:flex;
	background-color:#9C27B0;
	width:50px;
	height:46px;
	clip-path: polygon(25% 0%, 75% 0%,100% 50%,
                75% 100%,25% 100%,0% 50%);
	margin: 3px 0px;
}


【心得】

明天預定:地圖挖洞、寶石複製行動

感謝撥冗閱讀,
有錯誤地方請多指教。


上一篇
[專案03]寶石搶地盤(三)六角形地圖
下一篇
[專案03]寶石搶地盤(五)挖洞、放寶石
系列文
一週程式專案挑戰26

尚未有邦友留言

立即登入留言