html 一起做小動物遊戲
AHALAB / 小動物遊戲課程入口

休息一下,再繼續

每隔約30分鐘,安排5–10分鐘離開屏幕:看看窗外遠處,或玩猜動物、動作模仿、紙上迷宮、國際象棋或鬥獸棋。休息時不換成手機或影片。成人負責提醒,孩子需要時可以提前休息。休息計入課程總時長,相應縮短電腦操作或展示;約兩小時的活動可在第30、60、90分鐘安排離屏時間。

小設計師的遊戲想法

我想養這些小動物

先玩一會兒,再選一件想改的事。

打開小動物園 →

怎麼玩?

  1. 給第一隻小貓起名字,餵它吃東西,陪它玩球。
  2. 點“找動物”,點地圖裏的藏身處,找到新朋友。
  3. 照顧動物會累計次數。達到地圖上寫的條件,就能去下一張地圖。
  4. 找到的動物都在下面。點一隻,就能給它起名字、餵食和玩耍。

共有12只動物、4張地圖。進度只存在當前瀏覽器。不同設備各玩各的;關閉頁面後再回來可以接着玩。重新開始需要點兩次確認。

小老師可以這樣問

“你最想養哪隻?給它起什麼名字?”

“它吃東西的時候,你希望耳朵動一動,還是尾巴搖一搖?”

“新地圖裏應該藏着誰?你想讓朋友怎麼找到它?”

“朋友玩的時候,有沒有哪個按鈕沒看懂?”

選一個改動,試着做出來

時間一起做什麼
3分鐘同學説想法,小老師複述:“你想養很多動物,還想去地圖裏找新的,對嗎?”
5分鐘玩第一張地圖:起名、餵食、玩球,找到一隻新動物。
5分鐘畫一隻想加的動物,或畫“餵食前 / 吃東西 / 吃飽了”三張小圖。
8分鐘選一處改動,請成人把要求交給AI改程式碼。孩子決定動作或開放條件,成人操作工具。
5分鐘請朋友試玩。看新動作有沒有出現,名字能不能保存,地圖有沒有按規則開放。
4分鐘改一處,再試一次。説説:“我改了……,因為朋友剛才……”

這30分鐘可以替換迷宮創作與試玩部分;共同的開場、表達和AI討論仍然保留。無需同時完成兩個遊戲。

我來選

我想加入:________________ 它叫:________________

吃東西時,它會:________________________________

和它玩的時候,它會:____________________________

新地圖叫:____________ 裏面藏着:______________

朋友試完後,我發現:____________________________

給AI説清楚

“請修改 animal-garden 裏的小動物遊戲。我想讓________在________時做________動作。請保留起名字、餵食、玩球、找動物和存檔。改好後讓我們用按鈕試玩。”

運行和修改

可以直接打開小動物園;下載後運行的方法見安裝與運行説明。無需賬號或聯網素材。

index.html 是頁面,garden.css 是畫面和動作,garden.mjs 是動物、地圖及規則。動作是程序繪製的2D動畫,音效為本地合成提示音。遊戲裏的食物是示意,不能作為現實餵養説明。