全國統(tǒng)一學(xué)習(xí)專線 8:30-21:00
返學(xué)費(fèi)網(wǎng) > 培訓(xùn)機(jī)構(gòu) > 全國IT培訓(xùn)中心
想了解javascript基地嗎？想了解67 個(gè)節(jié)省開發(fā)者時(shí)間的實(shí)用工具、庫與資源（前端向），Node.js 16.0.0 發(fā)布，QQ空間 為什么我在“添加”中找不到“游戲基地”？，java script學(xué)習(xí)方法，javascript 難嗎?，javascript基礎(chǔ)修煉——前端路由的基本原理，為什么我的QQ空間里沒有游戲基地?，給前端程序員推薦一款游戲 Screeps：使用 JS/TS 代碼控制自己的殖民地?? 嗎？......本文帶你一探究竟。
在這篇文章中，我不會(huì)與大家談?wù)摯笮偷那岸丝蚣?，?React、Angular、Vue 等，也沒有涉及那些流行的代碼編輯器，如 Atom、VS Code、Sublime，我只想與大家分享一個(gè)有助于提升開發(fā)人員效率的工具列表合集?；蛟S，一些朋友已經(jīng)對(duì)文中的一些工具有所了解，但如果你發(fā)現(xiàn)了一些對(duì)你有幫助的新工具，那么，我將倍感欣慰。由于這個(gè)列表中包含了不同類別的資源，為了便于大家查看，我已將其進(jìn)行了重新的分類，來 Enjoy 吧！ 庫Particles.js ?- 一個(gè)用于在網(wǎng)頁上創(chuàng)建漂亮的浮動(dòng)粒子的 JS 庫；Three.js ?- 用于在網(wǎng)頁上創(chuàng)建 3D 物體與空間的 JS 庫；Fullpage.js - 易于實(shí)現(xiàn)全屏滾動(dòng)功能的庫；Typed.js - 實(shí)現(xiàn)打字機(jī)效果；Waypoints.js - 滾動(dòng)到元素觸發(fā)事件的庫；Highlight.js - 頁面上語法高亮顯示；Chart.js - 純 JS 制作漂亮的圖表； - 鼠標(biāo)懸停預(yù)先加載頁面資源，大大加速你的網(wǎng)站響應(yīng)速度；Chartist - 開源響應(yīng)式圖表庫；Motio - 基于 sprite 的動(dòng)畫和平移庫；Animstion - 頁面切換動(dòng)畫的 jQuery 插件；Barba.js - 創(chuàng)建頁面間流暢平滑的過渡效果； - jQuery 視差插件；Vivus.js - 可以執(zhí)行 SVG 路徑動(dòng)畫的輕量級(jí) JS 庫；Wow.js - 頁面滾動(dòng)時(shí)展現(xiàn)動(dòng)畫效果；Scrolline.js - 頁面滾動(dòng)時(shí)顯示滾動(dòng)進(jìn)度的 jQuery 插件；Velocity.js - 用于加速 動(dòng)畫；Animate on scroll - 頁面滾動(dòng)時(shí)增添元素動(dòng)畫的小型庫；.js - 模板引擎； - 輕量級(jí)的 jQuery 水平視差插件；One page scroll - 實(shí)現(xiàn)蘋果風(fēng)格單頁滾動(dòng)效果的 jQuery 插件；Parallax.js - 輕量級(jí)的視差引擎，能夠?qū)χ悄茉O(shè)備的方向作出反應(yīng)；Typeahead.js - 搜索框自動(dòng)補(bǔ)全的 JS 庫；.js - 基于拖動(dòng)的 組件；Bounce.js - 快速創(chuàng)建漂亮的 CSS3 動(dòng)畫效果；.js - 創(chuàng)建全屏滾動(dòng)效果；.js - 創(chuàng)建兩列垂直反向滾動(dòng)效果的 jQuery 插件；Favico.js - 動(dòng)態(tài)圖標(biāo)插件；Midnight.js - 固定頭部切換效果；Anime.js - 動(dòng)畫引擎；Keycode - 獲取鍵盤按鍵的 JS 鍵碼值；Sortable - 用于拖拽排序的 庫； - 支持 <datalist> 的 jQuery 自動(dòng)完成插件；Slideout.js - 實(shí)現(xiàn)滑出式 Web App 導(dǎo)航菜單；Jquerymy - 實(shí)時(shí)、復(fù)雜的雙向數(shù)據(jù)綁定 jQuery 插件；Cleave.js - 自動(dòng)格式化表單輸入框的文本內(nèi)容；Page - 構(gòu)建單頁應(yīng)用的小型客戶端路由庫；Selectize.js - 基于 jQuery 的 <select> UI 控件，用于創(chuàng)建 tag 標(biāo)簽輸入框和 select 下拉框；Nice select - 創(chuàng)建漂亮下拉框的 jQuery 插件；Tether - 使用絕對(duì)定位創(chuàng)建兩個(gè)互相相關(guān)元素的 JS 庫；Shepherd.js - 創(chuàng)建新手引導(dǎo)的 JS 庫；Tooltip - 工具提示插件；Select2 - 基于 jQuery 的替代選擇框；IziToast - 輕量的跨瀏覽器響應(yīng)式消息通知插件；IziModal - 炫酷的 jQuery 模態(tài)窗口插件。CSS 庫與設(shè)計(jì)資源Animate.css? - 強(qiáng)大的 CSS3 動(dòng)畫庫；Flat UI Colors - 漂亮的扁平化配色；Material Design Lite - 基于谷歌 Material Design 的前端框架；Colorrrs? - 隨機(jī)顏色生成器；Section - CSS 區(qū)域分割；Topcoat - 專注為簡潔、快速的 Web 應(yīng)用提供 CSS 開發(fā)的工具；Create Ken Burns Effect - 利用 CSS3 實(shí)現(xiàn)的 Ken burns 特效；DynCSS - 用于分析 CSS -dyn-屬性規(guī)則，并使其具備動(dòng)態(tài)屬性；Magic - 具備特殊動(dòng)效的 CSS3 動(dòng)畫；CSSpin - 豐富的 CSS 加載動(dòng)畫；Feather icons - 簡單、漂亮的開源圖標(biāo)庫；Ion icons - 專為 Ionic 框架設(shè)計(jì)的圖標(biāo)字體；Font Awesome - 可縮放的矢量圖標(biāo)字庫；Font Generator - 在線字體生成器；On/Off - 在線創(chuàng)建純 CSS3 動(dòng)畫開關(guān)效果；UIkit - 輕量級(jí)的模塊化前端框架；Bootstrap - 著名的前端框架； - 著名的前端框架。有用的產(chǎn)品/鏈接<head> - 可以寫入到 <head> 標(biāo)簽的內(nèi)容清單；（譯者注：中文翻譯版地址）Ghost - 基于 Node.js 的簡易博客平臺(tái)；What runs - 用于網(wǎng)站技術(shù)分析的 Chrome 插件；Learn anything - 用于分解項(xiàng)目的強(qiáng)大思維導(dǎo)圖。以上就是我個(gè)人常用的一些前端工具、框架、庫的列表，希望對(duì)大家有所幫助。如果你也愿意分享一些新的發(fā)現(xiàn)，可以在推特上隨時(shí)聯(lián)系我。感謝你的閱讀。若你有所收獲，歡迎點(diǎn)贊與分享。注：本文版權(quán)歸原作者所有，僅用于學(xué)習(xí)與交流；如需轉(zhuǎn)載譯文，煩請(qǐng)按下方注明出處信息，謝謝！英文原文：67 useful tools, libraries and resources for saving your time as a web developer作者：Ognjen Gatalo譯者：IT程序獅譯文地址： 個(gè)必備的 VSCode 插件2021 年 20 個(gè)最佳的極簡 CSS 框架10 個(gè)打造 React.js App 的最佳 UI 框架10 個(gè)基于 的機(jī)器學(xué)習(xí)實(shí)例同時(shí)也歡迎關(guān)注我的微信【IT程序獅】，不定期分享 IT 學(xué)習(xí)文章與資源。
出品|開源中國文|.js 是能夠在服務(wù)器端運(yùn)行 的開放源代碼、跨平臺(tái) 運(yùn)行環(huán)境。Node.js 由Node.js （已與JS 合并為OpenJS ）持有和維護(hù)，亦為 Linux 基金會(huì)的項(xiàng)目。Node.js采用Google開發(fā)的V8運(yùn)行代碼，使用事件驅(qū)動(dòng)、非阻塞和異步輸入輸出模型等技術(shù)來提高性能，可優(yōu)化應(yīng)用程序的傳輸量和規(guī)模。這些技術(shù)通常用于資料密集的即時(shí)應(yīng)用程序。Node.js 16.0.0 正式發(fā)布，本次更新內(nèi)容如下：穩(wěn)定 Timers Promises API：Timers Promises API 提供了一組替代的定時(shí)器函數(shù)，這些函數(shù)返回 Promise 對(duì)象。在Node.js v15.0.0 中添加，在此版本中，它們從實(shí)驗(yàn)狀態(tài)升級(jí)為穩(wěn)定狀態(tài)。Toolchain Node.js v16.0.0 將是發(fā)布用于 Apple Silicon 的預(yù)構(gòu)建二進(jìn)制文件的第一個(gè)版本。雖然我們將為 Intel（darwin-x64）和 ARM（darwin-arm64）架構(gòu)提供單獨(dú)的壓縮文件，但 macOS 安裝程序（.pkg）將作為多架構(gòu)二進(jìn)制文件提供。(SEMVER-MAJOR) build：移除對(duì) Python 2 的支持 #36691(SEMVER-MAJOR) build：將 Makefile 中的 Python 默認(rèn)為 Python3 #：更新 Makefile 以支持 fat 二進(jìn)制 #37861(SEMVER-MAJOR) build：在 macOS 上啟用 ASLR (PIE) #：對(duì)早于 8.3.0 的 gcc 版本發(fā)出警告 #37935(SEMVER-MAJOR) doc：將最低支持的 Xcode 更新到 11 #37872(SEMVER-MAJOR) doc：將最低支持的 GCC 更新到 8.3 #37871(SEMVER-MAJOR) doc：將 AIX 的 16.x 版本更新為 GCC 8 #37677工具：在 .xml 中設(shè)置 arch #38261V8 9.0：V8 引擎已更新至 9.0，其中包括性能調(diào)整和改進(jìn)。這次更新還帶來了 RegExp Match Indices，它提供了捕獲字符串的開始和結(jié)束索引。當(dāng)正則表達(dá)式有 /d 標(biāo)志時(shí)，索引數(shù)組可以通過匹配對(duì)象上的 .indices 屬性獲得。棄用和移除：(SEMVER-MAJOR) fs：刪除允許的 rmdir 遞歸 #37216(SEMVER-MAJOR) fs：運(yùn)行時(shí)棄用rmdir遞歸選項(xiàng) #37302(SEMVER-MAJOR) lib：運(yùn)行時(shí)棄用訪問 process.binding（'http_parser'） #37813(SEMVER-MAJOR) lib：運(yùn)行時(shí)棄用訪問 process.binding（'url'）#37799(SEMVER-MAJOR) lib：使 process.binding（'util'）僅返回類型檢查器 #37819(SEMVER-MAJOR) lib：運(yùn)行時(shí)棄用訪問 process.binding（'crypto'） #37790(SEMVER-MAJOR) 模塊：刪除 module. #37201(SEMVER-MAJOR) 模塊：運(yùn)行時(shí)棄用子路徑文件夾映射 #37215(SEMVER-MAJOR) 模塊：運(yùn)行時(shí)棄用“主”索引和擴(kuò)展查找 #37206(SEMVER-MAJOR) 模塊：運(yùn)行時(shí)棄用無效的 package.json 主要條目 #37204(SEMVER-MAJOR) 進(jìn)程：運(yùn)行時(shí)棄用更改 process.config #36902其他值得注意的變化(SEMVER-MAJOR) 緩沖區(qū)：將 btoa 和 atob 暴露為全局變量 #37786(SEMVER-MAJOR) deps: 將最低 ICU 版本提升到 68 #37330deps: 更新 ICU 至 69.1 #38178deps: 將 llhttp 升級(jí)到 6.0.0 #38277deps: 將 npm 升級(jí)到 7.10.0 #38254(SEMVER-MINOR) http: 添加 http..() #37660(SEMVER-MAJOR) lib,src: 更新群集以使用 Parent #36478(SEMVER-MINOR) 模塊：添加對(duì)有 require(…) 前綴的 node: 調(diào)用的支持 #37246(SEMVER-MINOR) perf_hooks: 添加直方圖選項(xiàng)以定時(shí) #37475(SEMVER-MINOR) 為有 require(…) 前綴的 node: 調(diào)用添加自動(dòng)完成功能 #37246(SEMVER-MINOR) util: 添加 () impl #38101
游戲基地是隨機(jī)出現(xiàn)的,你如果想打開游戲基地的話,可以打開自己空間，然后在地址欄那里輸入:QZONE.OFP.guideApp(346) 再按回車鍵就可以了～ 相信我吧 哈哈~
使網(wǎng)頁具有可編程的特性,可編程指通過一定的程序完成一系統(tǒng)列的動(dòng)作包含：、DOM、BOM學(xué)習(xí)方法建議：1、重視基礎(chǔ)，先掌握,再學(xué)習(xí)jQuery或其它的框架2、學(xué)習(xí)相關(guān)的計(jì)算機(jī)專業(yè)基礎(chǔ)課程：高級(jí)語言/數(shù)據(jù)結(jié)構(gòu)/算法基礎(chǔ)，程序=數(shù)據(jù)結(jié)構(gòu)+算法3、實(shí)踐+鉆研4、學(xué)會(huì)提問和尋找答案5、學(xué)會(huì)調(diào)試
只是一種語言，一種工具。和其他任何一種程序設(shè)計(jì)語言一樣，是實(shí)現(xiàn)某個(gè)目的的一種方式。是否容易，這得看你的基地，更得看你的耐心。編碼是一件很枯燥的事，有事也是一件很有樂趣的事，看你的心態(tài)。如果真想往這方面發(fā)展，不管難不難，只要堅(jiān)持就可以成功。至于用在哪些方面，可以參考我以前的回答:是一種基于網(wǎng)頁的客戶端腳本技術(shù)。這種技術(shù)的核心思想是通過這種技術(shù)，來增加用戶與瀏覽器的交互，增加用戶在使用網(wǎng)頁應(yīng)用的時(shí)候的體驗(yàn)。說白了，就是有了，網(wǎng)頁就可以實(shí)現(xiàn)很多互動(dòng)的操作。如:輸入一個(gè)文本后，會(huì)提示你有沒數(shù)正確，或經(jīng)?？吹降木W(wǎng)頁上的對(duì)聯(lián)廣告。都是編寫的。
【小宅按】 前端路由，顧名思義就是一個(gè)前端不同頁面的狀態(tài)管理器,可以不向后臺(tái)發(fā)送請(qǐng)求而直接通過前端技術(shù)實(shí)現(xiàn)多個(gè)頁面的效果?！驹燧喿印渴枪P者學(xué)習(xí)和理解一些較復(fù)雜的代碼結(jié)構(gòu)時(shí)的常用方法，它很慢，但是效果卻勝過你讀十幾篇相關(guān)的文章。為已知的API方法自行編寫實(shí)現(xiàn)，遇到自己無法復(fù)現(xiàn)的部分再有針對(duì)性地去查資料，最后當(dāng)你再去學(xué)習(xí)官方代碼的時(shí)候，就會(huì)明白這樣做的價(jià)值，總有一天，你也將有能力寫出大師級(jí)的代碼。一. 前端路由現(xiàn)代前端開發(fā)中最流行的頁面模型，莫過于SPA單頁應(yīng)用架構(gòu)。單頁面應(yīng)用指的是應(yīng)用只有一個(gè)主頁面，通過動(dòng)態(tài)替換DOM內(nèi)容并同步修改url地址，來模擬多頁應(yīng)用的效果，切換頁面的功能直接由前臺(tái)腳本來完成，而不是由后端渲染完畢后前端只負(fù)責(zé)顯示。前端三駕馬車Angular,Vue,React均基于此模型來運(yùn)行的。SPA能夠以模擬多頁面應(yīng)用的效果，歸功于其前端路由機(jī)制。前端路由，顧名思義就是一個(gè)前端不同頁面的狀態(tài)管理器,可以不向后臺(tái)發(fā)送請(qǐng)求而直接通過前端技術(shù)實(shí)現(xiàn)多個(gè)頁面的效果。angularjs中的ui-router,vue中的vue-router,以及react的react-router均是對(duì)這種功能的具體實(shí)現(xiàn)。既然前端路由這么牛逼，那必須的好好研究一下。二. 兩種實(shí)現(xiàn)方式及其原理常見的路由插件中兩種方式都是支持且可以切換的，例如.x中就可以通過以下代碼從Hash模式切換到H5模式： $.html5Mode(true);切換到HTML5的路由模式，主要用于避免url地址中包含#而引發(fā)的問題。1..1 原理HTML頁面中通過錨點(diǎn)定位原理可進(jìn)行無刷新跳轉(zhuǎn)，觸發(fā)后url地址中會(huì)多出# + 'XXX'的部分，同時(shí)在全局的window對(duì)象上觸發(fā)事件，這樣在頁面錨點(diǎn)哈希改變?yōu)槟硞€(gè)預(yù)設(shè)值的時(shí)候，通過代碼觸發(fā)對(duì)應(yīng)的頁面DOM改變，就可以實(shí)現(xiàn)基本的路由了,基于錨點(diǎn)哈希的路由比較直觀，也是一般前端路由插件中最常用的方式。1.2 應(yīng)用下面通過一個(gè)實(shí)例看一下,當(dāng)點(diǎn)擊angularjs的連接時(shí)，可以看到控制臺(tái)打印出了相應(yīng)的信息。2.HTML5 .1 原理HTML5的History API為瀏覽器的全局history對(duì)象增加的擴(kuò)展方法。一般用來解決ajax請(qǐng)求無法通過回退按鈕回到請(qǐng)求前狀態(tài)的問題。在HTML4中，已經(jīng)支持window.history對(duì)象來控制頁面歷史記錄跳轉(zhuǎn)，常用的方法包括：history.forward(); //在歷史記錄中前進(jìn)一步history.back(); //在歷史記錄中后退一步history.go(n): //在歷史記錄中跳轉(zhuǎn)n步驟，n=0為刷新本頁,n=-1為后退一頁。在HTML5中，window.history對(duì)象得到了擴(kuò)展，新增的API包括：history.pushState(data[,title][,url]);//向歷史記錄中追加一條記錄history.(data[,title][,url]);//替換當(dāng)前頁在歷史記錄中的信息。history.state;//是一個(gè)屬性，可以得到當(dāng)前頁的state信息。window.;//是一個(gè)事件，在點(diǎn)擊瀏覽器后退按鈕或js調(diào)用forward()、back()、go()時(shí)觸發(fā)。監(jiān)聽函數(shù)中可傳入一個(gè)event對(duì)象，event.state即為通過pushState()或()方法傳入的data參數(shù)。2.2 應(yīng)用瀏覽器訪問一個(gè)頁面時(shí)，當(dāng)前地址的狀態(tài)信息會(huì)被壓入歷史棧,當(dāng)調(diào)用history.pushState()方法向歷史棧中壓入一個(gè)新的state后，歷史棧頂部的指針是指向新的state的?？梢詫⑵渥饔煤唵卫斫鉃?假裝已經(jīng)修改了url地址并進(jìn)行了跳轉(zhuǎn) ,除非用戶點(diǎn)擊了瀏覽器的前進(jìn),回退,或是顯式調(diào)用HTML4中的操作歷史棧的方法，否則不會(huì)觸發(fā)全局的popstate事件。在下面的示例中，點(diǎn)擊導(dǎo)航按鈕，可以看到url地址欄發(fā)生了變化，且控制臺(tái)打印出了響應(yīng)的信息。3.hash 和 history API對(duì)比三.親手造一個(gè)簡單的前端路由插件造輪子,不是為了把它裝在你的車上，而是當(dāng)你在荒郊野外開車而輪子出了問題時(shí)多一種選擇。接下來就自己動(dòng)手實(shí)現(xiàn)一個(gè)前端路由的插件吧~3.1基于Hash的前端路由插件.js我們希望實(shí)現(xiàn)的功能是:1.引入.js庫2.通過when()方法來定義若干不同的路由狀態(tài)3.通過init()方法啟動(dòng)路由功能4.通過點(diǎn)擊導(dǎo)航實(shí)現(xiàn)前端路由切換首先編寫js骨架，如圖所示:;(function() { function Router() { //記錄路由的跳轉(zhuǎn)歷史 this. = []; //記錄已注冊(cè)的路由信息 this. = []; //路由匹配失敗時(shí)跳轉(zhuǎn)項(xiàng) this. = { path: '/', content: 'home page' } } /* * 啟動(dòng)路由功能 */ Router.prototype.init = function() { } /* * 綁定window.事件的回調(diào)函數(shù) */ Router.prototype._ = function() { } /** * 路由注冊(cè)方法 */ Router.prototype.when = function(path, content) { } /** * 判斷新添加的路由是否已存在 */ Router.prototype._ = function(path) { } /** * 路由不存在時(shí)的指定地址 */ Router.prototype.otherwise = function(path, content) { } /** * 路由跳轉(zhuǎn)方法，主動(dòng)調(diào)用時(shí)可用于跳轉(zhuǎn)路由 */ Router.prototype.go = function(topath) { } /** * 用于將對(duì)應(yīng)路由信息渲染至頁面,實(shí)現(xiàn)路由切換 */ Router.prototype.render = function (content) { } var router = new Router(); //將接口 暴露至全局 window.$router = router; })();完成了路由插件的編寫后，我們?cè)赿emo中引入該庫，然后使用when()方法注冊(cè)幾個(gè)路由地址，再使用init()方法啟動(dòng)路由，腳本部分代碼如下：效果：運(yùn)行附件中的router-demo-hash.html,點(diǎn)擊導(dǎo)航按鈕，即可看到url地址欄以及內(nèi)容區(qū)域同步更改。3.2基于History API的前端路由插件.js由于History API不支持低于IE10以下版本的瀏覽器（其他大多數(shù)現(xiàn)代瀏覽器基本都支持）,所以我們?cè)趇nit()方法啟動(dòng)時(shí)先進(jìn)行可用性判斷，基本代碼框架與基于Hash的路由插件一致。每個(gè)方法的實(shí)現(xiàn)并不難寫，這里不再贅述，筆者自己的代碼實(shí)現(xiàn)放在附件.js中，水平有限，僅供參考。3.3集成說明為方便理解，本例中將兩種模式分開編寫，如果是插件庫的開發(fā)，可以模仿ui-router增加一個(gè)html5mode()的方法,在init()方法啟動(dòng)路由時(shí)，根據(jù)所傳的參數(shù)生成不同的路由插件的單例，也就是我們常說的工廠模式來實(shí)現(xiàn)即可。四.后記造車輪是一個(gè)很好的學(xué)習(xí)方式，雖然自己造的車輪很簡陋，但是對(duì)于理解工具的底層原理卻很有幫助。本例只是編寫了一個(gè)路由工具的基本骨架，真正的路由工具還需要做很多功能擴(kuò)展，個(gè)別功能的復(fù)雜度也會(huì)很高，例如路徑的正則匹配,懶加載,組合視圖,嵌套視圖,路由動(dòng)畫等等，有興趣的小伙伴可以在本例提供的框架上進(jìn)行學(xué)習(xí)擴(kuò)展。附件說明：index_h5history.html —— history API基本用法演示demoindex_.html —— 基本用法演示-demo-hash.html —— 引用了.js的.js —— 自己開發(fā)的基于hash簡易路由插件router-demo-hash.html —— 引用了.js的.js —— 自己開發(fā)的基于的簡易路由插件router-demo-history.html —— 引用了.js的demodemo.rar 更多精彩內(nèi)容，請(qǐng)滑至頂部點(diǎn)擊右上角關(guān)注小宅哦~來源：華為云社區(qū)原創(chuàng) 作者：大史不說話加入華為云技術(shù)宅基地線上討論群，持續(xù)獲取最新技術(shù)分享→復(fù)制此鏈接至微信中打開：
游戲基地是隨機(jī)出現(xiàn)的,你如果想打開游戲基地的話,可以打開自己空間，然后在地址欄那里輸入:QZONE.OFP.guideApp(346)再按回車鍵就可以了~
Screeps 是一款面向編程愛好者的開源 MMO RTS 沙盒游戲，其核心機(jī)制是為您的單位編寫AI。您可以通過編寫 來控制自己的殖民地。Screeps 的游戲模式類似紅警、星際爭(zhēng)霸、魔獸、帝國時(shí)代等，但是和這些游戲不同，你無法通過鼠標(biāo)或者鍵盤控制你的角色，你需要編寫 代碼來控制你的單位去完成各項(xiàng)任務(wù)。您的殖民地可以采集資源，建造單位，征服領(lǐng)土或是與其他殖民地進(jìn)行貿(mào)易。您征服的土地越多，您擴(kuò)展疆域的能力和在游戲世界中的影響力也就越大。但是請(qǐng)注意，意圖控制相同區(qū)域的多個(gè)玩家可能會(huì)引發(fā)一場(chǎng)戰(zhàn)爭(zhēng)！Steam售價(jià)：65元。我是前不久搞促銷的時(shí)候半價(jià)買的。進(jìn)入游戲后選擇一個(gè)資源豐富、地形不錯(cuò)的地圖，創(chuàng)建自己的基地，默認(rèn)名字為 Spawn1。全局對(duì)象 Game 的 spawns包含了所有的基地(母巢)，因此 Game.spawns['Spawn1']或者 Game.spawns.Spawn1就是我們剛才創(chuàng)建的基地。 使用 方法我們可以創(chuàng)建自己的第一個(gè)單位(creep) ：Game.spawns['Spawn1'].( [WORK, CARRY, MOVE], 'creeper1' ); 上面代碼創(chuàng)建了一個(gè)名字為 creeper1 的單位。接下來我們編寫代碼，讓他去采集資源：module.exports.loop = function () { var creep = Game.creeps['creeper1']; var sources = creep.room.find(FIND_SOURCES); if(creep.harvest(sources[0]) == ERR_NOT_IN_RANGE){ creep.moveTo(sources[0]); } } Game.creeps['creeper1']從全局對(duì)象 Game 的 creeps 屬性中根據(jù)名字找到剛才創(chuàng)建的 creep(單位)從當(dāng)前房間 creep.room中尋找特定建筑，我們傳入的參數(shù)是 FIND_SOURCES，因此我們尋找的所有 source（資源）命令 creep 去采集所有 source 中的第 1 個(gè) source要想采集資源，需要 creep 在資源的附近，我們需要編寫代碼讓 creep 移動(dòng)過去，然后判斷兩者的距離再采集。但是有個(gè)討巧的方式，我們可以通過判斷 harvest 函數(shù)的返回值來實(shí)現(xiàn)。如果返回了 ERR_NOT_IN_RANGE。說明 creep 距離 source 太遠(yuǎn)，此時(shí)我們就調(diào)用 creep.moveTo 方法。最后是整個(gè)程序的入口。Screeps 規(guī)定程序的入口文件是 main.js，在主文件中需要導(dǎo)出一個(gè) loop 函數(shù)。這樣整個(gè)過程就永不間斷地執(zhí)行下去。這只是一個(gè)簡單的例子，你還可以發(fā)揮自己的想象力，開發(fā)不同的算法和策略來經(jīng)營自己的殖民地。通過算法你可以給房間的物品安排特定的布局以提高資源的產(chǎn)量和利用率：當(dāng)有敵人侵入時(shí)你可以防守，甚至可以主動(dòng)去進(jìn)攻別人，擴(kuò)大自己的殖民地：你不需要一直盯在電腦前，只需要把代碼上傳，然后是不是查看一下自己的基地就可以了。Screeps 支持搭建私服，服務(wù)器代碼使用 Node.js 編寫，并且在 GitHub 開源。我上周末也搭建了一個(gè)：screeps.devtips.cn。目前已經(jīng)運(yùn)行了一周，基本運(yùn)行平穩(wěn)。服務(wù)器中有 20*20 共 400 個(gè)房間，80% 以上的房間都是相對(duì)平坦的地形，并配有 2 個(gè)資源采集點(diǎn)。相關(guān)鏈接：游戲官網(wǎng)： Steam 地址： 我的私服地址：
上述文章了解到關(guān)于67 個(gè)節(jié)省開發(fā)者時(shí)間的實(shí)用工具、庫與資源（前端向），Node.js 16.0.0 發(fā)布，QQ空間 為什么我在“添加”中找不到“游戲基地”？，java script學(xué)習(xí)方法，javascript 難嗎?，javascript基礎(chǔ)修煉——前端路由的基本原理，為什么我的QQ空間里沒有游戲基地?，給前端程序員推薦一款游戲 Screeps：使用 JS/TS 代碼控制自己的殖民地?? ，讓我們對(duì)javascript基地 有一個(gè)直觀的認(rèn)知。我們發(fā)現(xiàn)，作為一個(gè)優(yōu)秀的Java程序員是多么的自豪。
