Git Product home page Git Product logo

demii871023.github.io's Introduction

CEEC MiniPro

Problem

Code Detail

進度

2020 / 8 / 13(四)

  • 利用 Phaser 建構出背景及角色,並利用 group 嘗試生成 8 個科目豆

    • 需要再利用變數 e.g. player_id 來紀錄要創建的角色為何(搭配 playerSelect 場景)。
    • 科目豆 (beans) 用亂數生成的座標位置需要再修正產生 x 及 y,且要避免生成位置過於靠近 (可能還要再想方法 e.g. 每次產生亂數時去檢查之前生成的,若距離小於 ? 就不要,但有可能仍然有 bug),因此可能事先設定好 8 個科目豆生成位置,用亂數產生哪個座標所使用的科目豆 index = 0,但可能要注意到暫存 subject_select 的數值。
  • 人物可以依照鍵盤上下左右按鍵移動

  • 按下 space 鍵為 eat,且會彈出確認視窗 (Bootstrap modal),按下 shift 鍵為 don't eat,會關閉視窗 (Bootstrap modal)

    • 還需要再撰寫若再次按下 space 鍵為確認,會關閉視窗 (Bootstrap modal),並讓該科目豆消失。
    • 目前儲存玩家所決定的科目豆為變數 subject_select,計畫使用 index 來記錄,但因為生成時搭配 group 使用,因此方法可能要再研究,若不行就要把 group 拔掉,改用較髒寫法。

2020 / 8 / 19(三)

  • Bonus 使用吃豆豆的形式進行四種分數的加分,但是在吃到之後要先完成指令(e.g. 唯舞獨尊 上下左右按鍵)才真的加到分!
  • Bonus 限制時間為 10 秒,想採用 bootstrap progress 呈現
  • 玩家的狀態能力值目前先寫死,等待自定義參數部分完成,在讀取數值
// index.js gameBonus.js
// 玩家擁有數值 ->
 - var lazyNum = 100;      // 惰性
 - var pressureNum = 100;  // 壓力
 - var strengthNum = 100;  // 體力
 - var socialNum = 100;    // 人際

2020 / 08 / 25 (二)

  • 實作 完成課業學業遊戲 doSubject.js
  • 討論出的遊戲內容為,讓 player 去吃掉落物 ( 閃電:lighting → 加分/ 炸彈:bomb → 扣分)。
    • (1) 增加遊戲性:先給使用者看完選項後開始遊戲,有四個 badge 在畫面中呈現出來,依據難易度放置在不同的高度。
    • (2) 分數的顯示方式:利用水的漲退來呈現出分數的變化,若吃到閃電加分即漲水,若吃到炸彈扣分即退水。若水的高度高於選項的 badge 即達成該選項,每達成一個選項的高度掉落物速度加快,來呈現出四個選項的難易度不同。
-(OK) 原本是利用時間去控制遊戲是否結束,但考量到若玩家可能只想要達到某個選項高度,要再討論是否新增退出該遊戲的方式。

2020 / 08 / 27 (四)

  • 多人會議所提優化:

    • Bonus 時加完分,會有提示文字,現實生活中可以透過其他事情達到加分效果,並不是平白無故像遊戲中刷一刷就可以得到。
    • 如果照舊 完成課內學業遊戲 doSubject.js,保留遊戲性達到某個選項等級之後掉落物下降速度會加快,會失去原本選擇的意義。
      • 因此經過討論之後,決定先讓玩家選擇他想要的選項(option),後再依據他選擇的選項困難度給予掉落物不同的下降速度。
  • 實作 紀錄上傳功能 recordUpload.js,每一個 record 豆利用 player 移動至吃掉達到 hover,而顯示其紀錄的詳細資訊。

    • 當玩家要選擇此項目上傳,就 hover 該項目,並按下空白鍵選取,若不要該項目可以在按 shift 鍵來放掉。
-(OK) recordUpload.js 的部分:再討論要不要於挑選上傳時,選擇某項之後,在右邊放置一個 card 來顯示他選擇上傳的項目。

2020 / 09 / 01 (二)

  • 實作 紀錄上傳功能 recordUpload.js 的右側 card (HTML ID:uploadDetailCard) ,並另用 list-group 來放置每一個新增的項目。而 class 和 do 的文字內容皆是利用先在 nameen 陣列裡面找出對應 index 後,再利用找到的 index 去 name 裡面找中文。
    • record_class:課外學科 或 課外活動
    • record_do:class 的子類別。( e.g. 課業學科裡的語文、數學、自然科學... / 課外活動裡的社團、校隊、科展... )
    • record_option:於 doSubject.js 中選取的選項,利用 optionStr 先暫存起來後放入陣列裡面再顯示出來

2020 / 09 / 09 (三)

  • doSubject.js 更改為,先選擇選項,再依據該選項難易度給予掉落物不同的下降速度。
    • 於時間內完成:水的高度超過選項擺放的位置,即代表完成,並立刻離開 doSubject.js 頁面。
    • 於時間內未完成:繼續選擇選項,再遊戲,持續到完成遊戲為止。
-(OK)下次此專案可能於 10 月才會再接手,因此先整理 code,暫緩實作。

目標

gameInit

遊戲開始介面

playerSelect

角色選擇與能力值設定

gameSelect

選擇課業學科或課外活動

  • 架設選擇要 課業學科(目前 gamePlay 場景) 或 課外活動 (計畫名為 gameActivity)
  • 開啟兩張選擇的圖片,並開啟互動事件後點選並跳轉頁面
- (後期) 改變滑鼠指標樣式、hovor 時增加特效
- (20200819 Meeting) 更改選擇方式為鍵盤(左右),按下空白鍵進入 (選擇到的就亮色,其他就刷淡)

gameSubject

課業學科

  • 基本吃科目豆

  • Bonus 門設置

  • 觸發突發事件

    • 先設立一個全域變數紀錄選擇 課業學科、課外活動分別的次數,目前因為還不完整,該變數先寫死,做為測試。
    • 呈現方式可能是 Bootstrap modal(?)
  • 能力值

gameActivity

課外活動

gameBouns (2020 / 8 / 25 M)

獎勵

  • 有彈力的豆豆,吃到之後完成指令才算入分數,有限時(10s)
    • 於畫面最上面,利用 Progress 實作倒數計時器
  • 限制進入次數,以年級為限

doSubject

> 進行課業學科的遊戲挑戰

Resource

Phaser

設置不同的重力值

在 Phaser Canvas 前顯示 HTML5 物件

Radar Chart

Water Effect

Bootstrap

visibility v.s. display

在時間軸上設置節點

tooltip

Chartjs

basic radar chart

Temp Codepen

demii871023.github.io's People

Contributors

demii871023 avatar demi871023 avatar

Watchers

 avatar

Forkers

demi871023

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.