iT邦幫忙

鐵人檔案

第 11 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

以前端角度探討遊戲化的資訊設計 系列

這次的鐵人挑戰的是,研究資訊設計的遊戲為互動載體。在這三十天會整理,目前台灣在資訊設計裡的互動遊戲,去分析網頁遊戲如何成為資訊設計互動載體的選項,並主要探討前端方面的實作

參賽天數 13 天 | 共 13 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 01 - 介紹資訊設計卷軸式遊戲

圖文不符推出兩個卷軸式遊戲,《全能古蹟燒毀王》 與 《奔跑吧!台北》 全能古蹟燒毀王 議題 表達出因土地利益,台灣一些珍貴古蹟,在半夜忽然被縱火燒掉,文化保存...

2019-09-16 ‧ 由 Bu 分享
DAY 2

Day 02 - 讀取 sprite sheet

讀取 sprite sheet 並產生動畫,介紹兩種方法: css animation 與 canvas 這裡示範使用的 sprite sheet,是使用六角學...

2019-09-17 ‧ 由 Bu 分享
DAY 3

Day 03 -遊戲機制的抽象化與模組化

拿昨天的動畫 sprite function 示範用 prototype 和 es6 的 class 重構 Prototype 步驟 1.建立時呼叫⺟類別 (初...

2019-09-18 ‧ 由 Bu 分享
DAY 4

Day 04 - 橫向捲軸背景移動實作

Demo 用到的 canvas 技巧 ctx.save( ) //儲存當下座標狀態 ctx.restore( ) //還原上⼀個儲存的狀態 原則 - 先進...

2019-09-19 ‧ 由 Bu 分享
DAY 5

Day 05 - 切換場景

簡易的切換場景(使用滑鼠 click 事件) var currentScene = 1; var sceneDraw; // this is the only...

2019-09-20 ‧ 由 Bu 分享
DAY 6

Day 06 - 切換場景(續)

今天花點時間研究昨日的切換場景,寫個簡易的場景管理器 簡易場景切換 Demo with ScenesManager 1.製作一個場景為四方形的物體場景 func...

2019-09-21 ‧ 由 Bu 分享
DAY 7

Day 07 - 調整程式內部的變數 Dat.gui

在開發互動式網頁裡,可以外掛 Dat.gui 直接調整程式內部的變數,便於開發與測試 起手式 var gui = new dat.GUI(); var cont...

2019-09-22 ‧ 由 Bu 分享
DAY 8

Day 08 - JS 型別守護者 TypeScript

改寫原本的 Day 06 的 ScenesManger switch scence with ScenesManager by ts private: 私有屬...

2019-09-23 ‧ 由 Bu 分享
DAY 9

Day 09 - simple change direction

改變刺蝟的方向 Demo (function() { var hedgehogImage, canvas; class sprite { c...

2019-09-24 ‧ 由 Bu 分享
DAY 10

Day 10 - RXJS 事件流

const keydown$ = Rx.Observable .fromEvent(document, 'keydown', e =>...

2019-09-25 ‧ 由 Bu 分享