L

O

A

D

I

N

G

Top

Snake Game

{ 復古貪食蛇遊戲 }

caculator-cover
caculator-img1
貪食蛇遊戲
  • Duration .

    2023/7/10 - 7/12

  • Project .

    Side project

  • Role .

    Developer

是一個經典的網站遊戲,目標是控制一條蛇,讓它不斷吃到食物,盡可能增長蛇的身體,同時避免蛇撞到自己的身體,挑戰玩家的反應速度和策略技巧。

snakegame-img

{ Tools & Takeaway }

此專案以HTML5為基礎,JavaScript繪製畫面並製作互動功能,再以SCSS修飾美化:

  • 以 Canvas 元素並呼叫 getContext 來繪製遊戲內容,包含貪食蛇、果實等。

  • 使用 addEventListener 來監聽鍵盤並以 if...else 語法,來讓方向鍵控制蛇的移動方向。

  • 利用( x , y )座標定位蛇的身體和果實的位置,並以 Math.random 來讓它們隨機出現。

  • 透過 setInterval 語法,實現了一個連續的遊戲循環,並控制運行的速度。

  • 最後利用 localStorage 來儲存最高分數,讓玩家可以不斷挑戰自己的紀錄。

{ Next Work }

metro-uiux-project

View +

  • 01 2022/10 - 11
  • 02 台北捷運GO
  • 03

UIUX

App

Metro

grapic-project

View +

  • 01 2021 - 2022
  • 02 品牌包裝設計
  • 03

Graphic

Package

Branding