iT邦幫忙

2022 iThome 鐵人賽

DAY 7
0
自我挑戰組

菜鳥的前端學習筆記系列 第 7

DAY7 - 中秋節插播

  • 分享至 

  • xImage
  •  

前言

因為今天是中秋節,所以要跳脫框架來作一個中秋月兔賀卡(就是任性),其實是課程中一個可愛的小活動,讓大家可以運用程式碼畫出賀卡,先分享一下最終完成圖

https://ithelp.ithome.com.tw/upload/images/20220910/20151646FiDYPKAfvG.jpg


製作過程分享

活動其實是希望我們以for迴圈為主來完成賀卡圖,但當時我選擇運用陣列及函式來挑戰完成(我絕不承認是因為懶惰),今天想分享一下製作時的想法:

  1. 我希望將每一行的點位存入各自的陣列中(如第一行為[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1]),陣列裡0代表空格,1為白方塊,2是黑方塊,3則是紅方塊。
  2. 宣告一個變數newLine待會可以放入每一行點位轉換後輸出的字串。
  3. 接著創建一個函式drawRabbit並將參數設置為line(代表著待會要放入每一行的陣列)
  4. 然後每一行陣列進入函式後,要先確認變數newLine為空字串用來儲存該行陣列迴圈判斷完的方塊及空格(為了確保每一行進來時字串都是空的所以必須將字串置於函式一開始)
  5. 運用for迴圈判斷陣列裡的每一個值,如是1則字串添加白方塊,2添加黑方塊,3添加紅方塊,而0則是空格。函式最終回傳並輸出newLine

ps. 我發現表情符號裡面的月亮好像顯示不出來,所以程式碼內就先摘掉了XD"

let newLine = ''

function drawRabbit(line) {
  newLine = ''
  
	for (let i = 0; i < line.length; i++) {
    if (line[i] === 1) {
      newLine += '⬜'
    } else if (line[i] === 2) {
      newLine += '⬛'
    } else if (line[i] === 3) {
      newLine += '?'
    } else {
      newLine += ' '
    }
  }
  return newLine
}


console.log(drawRabbit([0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1]))
console.log(drawRabbit([0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 1, 0, 1, 3, 1]))
console.log(drawRabbit([0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 1, 0, 1, 3, 1]))
console.log(drawRabbit([0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 1, 0, 1, 3, 1]))
console.log(drawRabbit([0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 1, 0, 1, 3, 1]))
console.log(drawRabbit([0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1]))
console.log(drawRabbit([0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1]))
console.log(drawRabbit([0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]))
console.log(drawRabbit([0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]))
console.log(drawRabbit([0, 0, 0, 0, 0, 1, 1, 1, 2, 1, 1, 1, 1, 2, 1, 1, 1, 1]))
console.log(drawRabbit([0, 0, 0, 0, 0, 1, 1, 1, 2, 2, 1, 1, 1, 2, 2, 1, 1, 1]))
console.log(drawRabbit([0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]))
console.log(drawRabbit([0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 3, 1, 1, 1, 1, 1]))
console.log(drawRabbit([0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1]))
console.log('           ~ 祝大家中秋節快樂 ~')


以上步驟成功完成中秋月兔賀卡!
新手第一次嘗試發自己完成的程式碼,可能有很多地方寫得不是那麼好,
還請各位多多指教並祝大家中秋節快樂!再忙都要記得吃烤肉跟月餅哦❤️


上一篇
DAY6 - 運算子
下一篇
DAY8 - if/else
系列文
菜鳥的前端學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言