<style> hr, h1 br, .slides summary h2{display:none} .slides h1 br{display:inline!important} summary h2{display:inline;border:0} .slides .dino{filter:invert(1)} </style> ###### [JavaScript 教學/](/@NCHUIT/js) # [簡易社課體驗](https://gist.github.com/JARVIS-AI/cfb916c7dc3bea73abf0edac42749ea8) ## `chrome://dino` <img class="dino" width="200" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAGFBMVEUAAABTU1NNTU1TU1NPT09SUlJSUlJTU1O8B7DEAAAAB3RSTlMAoArVKvVgBuEdKgAAAJ1JREFUeF7t1TEOwyAMQNG0Q6/UE+RMXD9d/tC6womIFSL9P+MnAYOXeTIzMzMzMzMzaz8J9Ri6HoITmuHXhISE8nEh9yxDh55aCEUoTGbbQwjqHwIkRAEiIaG0+0AA9VBMaE89Rogeoww936MQrWdBr4GN/z0IAdQ6nQ/FIpRXDwHcA+JIJcQowQAlFUA0MfQpXLlVQfkzR4igS6ENjknm/wiaGhsAAAAASUVORK5CYII="> ---- ## 無敵  ```javascript=! [|1|2|3] 原本的gameOver = Runner.prototype.gameOver //存檔 Runner.prototype.gameOver = function(){} //無敵 Runner.prototype.gameOver = 原本的gameOver //復原 ``` ---- ## 超音速/龜速/太空步  ```javascript=! [|1|2|3|4] Runner.instance_.setSpeed(1000) //超音速 Runner.instance_.setSpeed(6) //預設 Runner.instance_.setSpeed(1) //龜速 Runner.instance_.setSpeed(-1) //太空步 ``` ---- ## 飛高高/跳不起來?  ```javascript=! [|1|2|3] Runner.instance_.tRex.setJumpVelocity(24) //如上圖 Runner.instance_.tRex.setJumpVelocity(12) //預設 Runner.instance_.tRex.setJumpVelocity(-1) //跳不起來 ``` --- ## 預設設定 <!-- 「想要我的財寶嗎，想要的話可以全部給你，去找吧！ 我把所有的財寶都放在那裡！」 --> > *「想解鎖所有設定嗎？想要的話可以全部給你。去找吧！我把所有的程式碼都放在那裡！」* :::info 🕹快捷鍵: 在 <i class="fa fa-fw fa-chrome"></i>Chrome 或 <i class="fa fa-fw fa-internet-explorer"></i>Edge 瀏覽器中按下 <kbd>F12</kbd> 或 <kbd>Ctrl + Shift + I</kbd> 可以在 `Elements` 頁面檢視所有 HTML 元素。 ::: ```javascript=! /* Copyright 2017 The Chromium Authors. All rights reserved. * Use of this source code is governed by a BSD-style * license that can be found in the LICENSE file. */ ``` ---- ```javascript=! [|18|18,25] /** * Default game configuration. * Shared config for all versions of the game. Additional parameters are * defined in Runner.normalConfig and Runner.slowConfig. */ Runner.config = { AUDIOCUE_PROXIMITY_THRESHOLD: 190, AUDIOCUE_PROXIMITY_THRESHOLD_MOBILE_A11Y: 250, BG_CLOUD_SPEED: 0.2, BOTTOM_PAD: 10, // Scroll Y threshold at which the game can be activated. CANVAS_IN_VIEW_OFFSET: -10, CLEAR_TIME: 3000, CLOUD_FREQUENCY: 0.5, FADE_DURATION: 1, FLASH_DURATION: 1000, GAMEOVER_CLEAR_TIME: 1200, INITIAL_JUMP_VELOCITY: 12, INVERT_FADE_DURATION: 12000, MAX_BLINK_COUNT: 3, MAX_CLOUDS: 6, MAX_OBSTACLE_LENGTH: 3, MAX_OBSTACLE_DUPLICATION: 2, RESOURCE_TEMPLATE_ID: 'audio-resources', SPEED: 6, SPEED_DROP_COEFFICIENT: 3, ARCADE_MODE_INITIAL_TOP_POSITION: 35, ARCADE_MODE_TOP_POSITION_PERCENT: 0.1 }; ``` ---- ```javascript=! [|7,9] Runner.normalConfig = { ACCELERATION: 0.001, AUDIOCUE_PROXIMITY_THRESHOLD: 190, AUDIOCUE_PROXIMITY_THRESHOLD_MOBILE_A11Y: 250, GAP_COEFFICIENT: 0.6, INVERT_DISTANCE: 700, MAX_SPEED: 13, MOBILE_SPEED_COEFFICIENT: 1.2, SPEED: 6 }; ``` ---- ```javascript=! [|2] Runner.slowConfig = { ACCELERATION: 0.0005, AUDIOCUE_PROXIMITY_THRESHOLD: 170, AUDIOCUE_PROXIMITY_THRESHOLD_MOBILE_A11Y: 220, GAP_COEFFICIENT: 0.3, INVERT_DISTANCE: 350, MAX_SPEED: 9, MOBILE_SPEED_COEFFICIENT: 1.5, SPEED: 4.2 }; ``` --- ## 補充 ---- ### 物件導向 + [維基百科](https://zh.wikipedia.org/wiki/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1) + [JavaScript 物件介紹](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Objects) ```javascript=! var 人 = { 暱稱 : 'VJ', 年齡 : 22, 性別 : '男', 興趣 : ['看韓劇', '睡覺', '電腦遊戲'], 高中畢業 : true, 打招呼: function() { alert('Hello world'); } }; ``` ---- ### [HTTP](https://zh.wikipedia.org/wiki/%E8%B6%85%E6%96%87%E6%9C%AC%E4%BC%A0%E8%BE%93%E5%8D%8F%E8%AE%AE) **H**yper**T**ext **T**ransfer **P**rotocol(超文本傳輸協定)，縮寫：HTTP，是全球資訊網絡數據通信的基礎。 ### [HTTPS](https://zh.wikipedia.org/wiki/%E8%B6%85%E6%96%87%E6%9C%AC%E4%BC%A0%E8%BE%93%E5%AE%89%E5%85%A8%E5%8D%8F%E8%AE%AE) **H**yper**T**ext **T**ransfer **P**rotocol **S**ecure，經由**實聯制**進行通訊，但利用SSL/TLS來加密封包，更安全。 ### [URL(網址)](https://zh.wikipedia.org/wiki/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E5%AE%9A%E4%BD%8D%E7%AC%A6) **U**niform **R**esource **L**ocator(統一資源定位符)，俗稱網頁位址，簡稱**網址**，是網際網路上標準的資源的位址(Address)，如同在網路上的門牌。 ---- [](https://www.design-hu.com/web-news/domain.html) 統一資源定位符(網址)的完整格式如下： ```=! [協定]://[帳號@][伺服器位址][:埠]/[檔案路徑][?請求參數][#ID] ``` ###### 其中[帳號@]、[:埠]、[檔案路徑]、[?請求參數]、[#ID]都屬於選填項。 ---  ---- ### 請求與回應 HTTP 的基本運作方式就像上圖一樣，我們開啟網頁、或在網頁上做特定的操作的時候，其實都是在向伺服器發送請求(`request`)，而伺服器則會對應 `request` 給予我們回應(`response`)。 回應(`response`)的主要內容就是 ==HTML==。 ###### [*從HTML到MarkDown(建議閱讀)*](/@NCHUIT/mdhtml) ---- ## Offline? > *講了這麼多...可是我不能上網啊...* ---- ### Data [URI](https://zh.wikipedia.org/wiki/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E6%A0%87%E5%BF%97%E7%AC%A6) ###### [維基百科(英文)](https://en.wikipedia.org/wiki/Data_URI_scheme) ```=! data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAGFBMVEUAAABTU1NNTU1TU1NPT09SUlJSUlJTU1O8B7DEAAAAB3RSTlMAoArVKvVgBuEdKgAAAJ1JREFUeF7t1TEOwyAMQNG0Q6/UE+RMXD9d/tC6womIFSL9P+MnAYOXeTIzMzMzMzMzaz8J9Ri6HoITmuHXhISE8nEh9yxDh55aCEUoTGbbQwjqHwIkRAEiIaG0+0AA9VBMaE89Rogeoww936MQrWdBr4GN/z0IAdQ6nQ/FIpRXDwHcA+JIJcQowQAlFUA0MfQpXLlVQfkzR4igS6ENjknm/wiaGhsAAAAASUVORK5CYII= ``` <img class="dino" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAGFBMVEUAAABTU1NNTU1TU1NPT09SUlJSUlJTU1O8B7DEAAAAB3RSTlMAoArVKvVgBuEdKgAAAJ1JREFUeF7t1TEOwyAMQNG0Q6/UE+RMXD9d/tC6womIFSL9P+MnAYOXeTIzMzMzMzMzaz8J9Ri6HoITmuHXhISE8nEh9yxDh55aCEUoTGbbQwjqHwIkRAEiIaG0+0AA9VBMaE89Rogeoww936MQrWdBr4GN/z0IAdQ6nQ/FIpRXDwHcA+JIJcQowQAlFUA0MfQpXLlVQfkzR4igS6ENjknm/wiaGhsAAAAASUVORK5CYII="> ---- #### 轉換器 Encoder  --- ## 既然斷線了，那我們就來做網絡線吧 [接網路線教學](https://hackmd.io/z4c2BzaaRgWRyDUu72dKGw)