Pits - CSS3+JS網頁小遊戲

玩遊戲 ↑ - 遊戲主頁 - 原文鏈接

遊戲介紹

這是一款非常簡單的網頁小遊戲。在小動物的前面的路上有美味的食物,然而擋在它面前的是一個方形的坑,要想拿到食物並須用土塊把坑填上再過去。按住屏幕放大土塊,鬆開手指讓土塊落下並填到坑裏。如果土塊太大,土塊無法填入坑裏,小動物將被擋住;如果土塊太小,小動物會陷在坑裏。因此土塊的大小非常重要。熱心的你快來幫忙吧!

遊戲製作

遊戲基於CSS3和Javascript實現,在PC和移動端的瀏覽器中均可運行。遊戲中的動畫效果主要使用CSS3 transition屬性來實現。關於CSS3 transition,請戳W3School CSS3 transition瞭解更多。

此外,按住屏幕放大土塊的動畫效果使用Javascript實現,邏輯如下:按下屏幕(mousedown/touchstart)時啓動一個周期函數(setInterval),在該函數中增大土塊的邊長並重繪土塊;擡起手指(mouseup/touchend)時清除周期函數(clearInterval),停止擴大土塊。

具體實現及源碼請參考 github,點擊原文鏈接查看原文。

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