Kos 3.0 Extensions: 8 Kauj Ruam

2024 Tus sau: John Day | [email protected]. Kawg hloov kho: 2024-01-30 09:24

Scratch txuas ntxiv yog daim ntawm Javascript code uas ntxiv cov thaiv tshiab rau Kos. Thaum Scratch tau ntim nrog ib pawg ntawm kev ua haujlwm txuas ntxiv, tsis muaj ib txoj haujlwm tseem ceeb rau kev ntxiv cov neeg siv ua txuas ntxiv.

Thaum kuv tau ua kuv li Minecraft tswj kev txuas ntxiv rau Kos 3.0, Kuv pom tias nws nyuaj rau pib. Cov Lus Qhia no sau ua ke cov ntaub ntawv los ntawm ntau qhov chaw (tshwj xeeb yog qhov no), ntxiv rau qee yam uas kuv pom kuv tus kheej.

Koj yuav tsum paub yuav ua haujlwm li cas hauv Javascript thiab yuav ua li cas tuav koj li Javascript ntawm lub vev xaib. Txog qhov kawg, Kuv pom zoo GitHub Nplooj Ntawv.

Lub tswv yim tseem ceeb yog siv SheepTester's mod of Scratch uas cia koj thauj khoom txuas ntxiv thiab plugins.

Cov Lus Qhia no yuav coj koj los ntawm kev ua ob qhov txuas ntxiv:

• Nqa: thauj cov ntaub ntawv los ntawm URL thiab rho tawm JSON cim npe, piv txwv li rau thauj cov ntaub ntawv huab cua
• SimpleGamepad: siv tus tswj kev ua si hauv Kos (qhov hloov kho tau yooj yim dua nyob ntawm no).

Kauj Ruam 1: Ob Hom Kev Txuas Ntxiv

Muaj ob hom kev txuas ntxiv uas kuv yuav hu "unsandboxed" thiab "sandboxed". Sandboxed txuas ntxiv ua haujlwm li Web Workers, thiab vim li ntawd muaj cov kev txwv tseem ceeb:

• Cov Neeg Ua Haujlwm Hauv Web tsis tuaj yeem nkag mus thoob ntiaj teb hauv qhov khoom qhov rai (hloov chaw, lawv muaj lub ntiaj teb tus kheej lub hom phiaj, uas muaj ntau qhov txwv), yog li koj tsis tuaj yeem siv lawv rau yam xws li gamepad nkag.
• Sandboxed txuas ntxiv tsis muaj nkag mus rau Scratch runtime kwv.
• Sandboxed txuas ntxiv qeeb dua.
• Javascript console yuam kev cov lus rau sandboxed txuas ntxiv yog qhov tsis meej pem hauv Chrome.

Ntawm qhov tod tes:

• Kev siv lwm tus neeg cov ntawv txuas ntxiv txuas ntxiv yog nyab xeeb dua.
• Sandboxed txuas ntxiv muaj feem ntau yuav ua haujlwm nrog ib qho xwm txheej kawg txuas ntxiv kev thauj khoom txhawb nqa.
• Sandboxed txuas ntxiv tuaj yeem sim yam tsis tau xa mus rau lub web server los ntawm kev nkag mus rau hauv cov ntaub ntawv: // URL.

Cov haujlwm txuas ntxiv (xws li Suab Nkauj, Cwjmem, thiab lwm yam) yog txhua yam tsis muaj ntawv pov thawj. Tus neeg tsim khoom rau kev txuas ntxiv tau txais cov khoom runtime los ntawm Kos, thiab lub qhov rai nkag tau yooj yim.

Qhov Kev Txuas Ntxiv yog sandboxed, tab sis Gamepad ib tus xav tau cov khoom siv coj los ntawm lub qhov rais.

Kauj Ruam 2: Sau Sandboxed Extension: Ntu Kuv

Txhawm rau ua qhov txuas ntxiv, koj tsim chav kawm uas muaj cov ntaub ntawv hais txog nws, thiab tom qab ntawd ntxiv me ntsis cov cai txhawm rau sau npe txuas ntxiv.

Qhov tseem ceeb hauv chav kawm txuas ntxiv yog getInfo () txoj hauv kev uas rov qab cov khoom nrog cov haujlwm xav tau:

• id: lub npe sab hauv ntawm kev txuas ntxiv, yuav tsum yog qhov tshwj xeeb rau txhua qhov txuas ntxiv
• lub npe: tus phooj ywg lub npe txuas ntxiv, uas tshwm nyob rau hauv Kos cov npe ntawm cov khoom thaiv
• block: daim ntawv teev cov khoom piav qhia txog kev txwv tshiab.

Thiab muaj cov ntawv qhia zaub mov xaiv uas tsis tau siv hauv Fetch tab sis yuav siv hauv Gamepad.

Yog li, ntawm no yog tus qauv yooj yim rau Fetch:

chav kawm ScratchFetch {

constructor () {} getInfo () {return {"id": "Fetch", "name": "Fetch", "blocks": [/* add later * /]}} / * add methods for blocks * /} Scratch.extensions.register (ScratchFetch tshiab ())

Kauj Ruam 3: Sau Sandboxed Extension: Ntu II

Tam sim no, peb yuav tsum tsim cov npe ntawm cov block hauv getInfo () cov khoom. Txhua qhov thaiv xav tau tsawg kawg plaub qhov haujlwm no:

• opcode: qhov no yog lub npe ntawm txoj hauv kev uas raug hu los ua lub luag haujlwm

• blockType: qhov no yog hom thaiv; qhov feem ntau yog qhov txuas ntxiv yog:

  • "hais kom ua": ua qee yam tab sis tsis rov qab tus nqi
  • "reporter": xa ib txoj hlua lossis tus lej
  • "Boolean": rov qab boolean (nco ntsoov cov peev txheej)
  • "lub kaus mom": kev tshwm sim ntes thaiv; yog tias koj tus lej Scratch siv qhov thaiv no, Scratch runtime tsis tu ncua xaiv cov txheej txheem cuam tshuam uas rov qab boolean los hais tias qhov xwm txheej tau tshwm sim
• ntawv: qhov no yog kev piav qhia tus phooj ywg ntawm qhov thaiv, nrog cov lus sib cav hauv cov kab ntawv, piv txwv li, "nqa cov ntaub ntawv los ntawm "

• kev sib cav: qhov no yog cov khoom uas muaj qhov chaw rau txhua qhov kev sib cav (piv txwv li, "url" hauv qhov piv txwv saum toj no); qhov khoom nyob rau hauv lem muaj cov haujlwm no:

  • hom: tog twg los "hlua" lossis "tus lej"
  • defaultValue: tus nqi pib yuav tsum tau ua ntej.

Piv txwv li, ntawm no yog thaj chaw thaiv hauv kuv qhov Fetch extension:

"Thaiv": [{"opcode": "fetchURL", "blockType": "reporter", "text": "nqa cov ntaub ntawv los ntawm ", "sib cav": {"url": {"type": "string", "defaultValue ":" https://api.weather.gov/stations/KNYC/observations "},}}, {" opcode ":" jsonExtract "," blockType ":" reporter "," text ":" extract [name] los ntawm [cov ntaub ntawv] "," kev sib cav ": {" lub npe ": {" hom ":" hlua "," defaultValue ":" kub "}," cov ntaub ntawv ": {" hom ":" hlua "," defaultValue ": '{"kub": 12.3}'},}},]

Ntawm no, peb tau txhais ob ntu: fetchURL thiab jsonExtract. Ob leeg yog neeg sau xov xwm. Thawj rub cov ntaub ntawv los ntawm URL thiab xa nws rov qab, thiab qhov thib ob rho tawm ib daim teb los ntawm JSON cov ntaub ntawv.

Thaum kawg, koj yuav tsum suav nrog cov txheej txheem rau ob ntu. Txhua txoj hauv kev siv cov khoom raws li kev sib cav, nrog cov khoom suav nrog cov teb rau txhua qhov kev sib cav. Koj tuaj yeem txiav txim siab cov no siv cov zawm hniav hauv cov lus sib cav. Piv txwv li, ntawm no yog ib qho piv txwv synchronous:

jsonExtract ({lub npe, cov ntaub ntawv}) {

var parsed = JSON.parse (cov ntaub ntawv) yog (lub npe hauv parsed) {var tawm = parsed [lub npe] var t = typeof (tawm) yog (t == "hlua" || t == "tus lej") rov qab tawm yog tias (t == "boolean") rov t? 1: 0 rov qab JSON.stringify (tawm)} lwm qhov {rov qab ""}}

Txoj cai rub tawm lub npe teb los ntawm JSON cov ntaub ntawv. Yog tias daim teb muaj cov hlua, tus lej lossis boolean, peb xa rov qab ntawd. Txwv tsis pub, peb rov JSONify daim teb. Thiab peb xa txoj hlua khoob yog tias lub npe ploj ntawm JSON.

Qee zaum, txawm li cas los xij, koj yuav xav ua qhov thaiv uas siv API asynchronous. FetchURL () txoj hauv kev siv fetch API uas yog asynchronous. Hauv qhov xwm txheej ntawd, koj yuav tsum rov qab cog lus los ntawm koj txoj hauv kev uas ua haujlwm. Piv txwv li:

fetchURL ({url}) {

rov qab mus nqa (url). ces (teb => teb.text ())}

Qhov ntawd yog nws. Cov ntawv txuas ntxiv yog nyob ntawm no.

Kauj Ruam 4: Siv Sandboxed Extension

Muaj ob txoj hauv kev siv sandboxed txuas ntxiv. Ua ntej, koj tuaj yeem tso nws rau lub vev xaib server, thiab tom qab ntawd thauj nws mus rau SheepTester's Scratch mod. Qhov thib ob, koj tuaj yeem nkag nws mus rau hauv cov ntaub ntawv URL, thiab thauj khoom rau hauv Scratch mod. Kuv tau siv txoj kev thib ob me ntsis rau kev sim, vim nws zam kev txhawj xeeb txog cov qauv qub ntawm kev txuas ntxiv tau txais cached los ntawm server. Nco ntsoov tias thaum koj tuaj yeem tuav javascript los ntawm Github Nplooj Ntawv, koj tsis tuaj yeem ua ncaj qha los ntawm qhov qub github chaw cia khoom.

Kuv fetch.js tau tuav ntawm https://arpruss.github.io/fetch.js. Lossis koj tuaj yeem hloov koj qhov txuas mus rau cov ntaub ntawv URL los ntawm kev rub nws ntawm no thiab tom qab ntawd luam nws mus rau hauv daim ntawv teev cia. Cov ntaub ntawv URL yog URL loj heev uas tuav tag nrho cov ntaub ntawv hauv nws.

Mus rau SheepTester's Scratch mod. Nyem rau ntawm Add Extension khawm nyob rau hauv kaum sab laug. Tom qab ntawv nyem rau "Xaiv qhov txuas ntxiv", thiab nkag mus rau koj qhov URL (koj tuaj yeem muab tso rau hauv tag nrho cov ntaub ntawv loj heev URL yog tias koj nyiam).

Yog tias txhua yam mus tau zoo, koj yuav muaj kev nkag mus rau koj qhov txuas ntxiv ntawm sab laug ntawm koj lub Scratch screen. Yog tias txhua yam tsis zoo, koj yuav tsum qhib koj lub Javascript console (hloov-ctrl-J hauv Chrome) thiab sim daws qhov teeb meem.

Saum toj no koj yuav pom qee qhov piv txwv piv txwv uas nqa thiab cais tawm JSON cov ntaub ntawv los ntawm KNYC (hauv New York) chaw nres tsheb ntawm Asmeskas Kev Pabcuam Huab Cua Hauv Tebchaws, thiab nthuav tawm nws, thaum tig lub sprite kom zoo ib yam li cua tshuab. Txoj kev kuv ua nws yog los ntawm kev nqa cov ntaub ntawv mus rau hauv lub vev xaib, thiab tom qab ntawd xam tawm cov cim npe. Yog tias koj xav sim lub chaw nres tsheb huab cua sib txawv, nkag mus rau tus lej zauv nyob ze rau hauv lub npov tshawb fawb ntawm weather.gov, thiab nplooj ntawv huab cua rau koj qhov chaw nyob yuav tsum muab plaub tsab ntawv chaw nres tsheb rau koj, uas koj tuaj yeem siv qhov chaw ntawm KNYC hauv chaws.

Koj kuj tseem tuaj yeem suav nrog koj cov sandboxed txuas ntxiv txoj cai hauv URL rau SheepTester's mod los ntawm kev ntxiv "? Url =" kev sib cav. Piv txwv li:

sheeptester.github.io/scratch-gui/?url=https://arpruss.github.io/fetch.js

Kauj Ruam 5: Sau ib qho Unsandboxed Extension: Taw qhia

Tus tsim ntawm qhov txuas ntxiv uas tsis tau txais xov tooj tau dhau los ntawm Runtime kwv. Koj tuaj yeem tsis quav ntsej nws lossis siv nws. Ib qho siv ntawm Runtime kwv yog siv nws cov cuab yeej MSecs tam sim no los ua ke cov xwm txheej ("lub kaus mom thaiv"). Raws li kuv tuaj yeem qhia, txhua qhov xwm txheej thaiv opcodes tau raug xaiv tsis tu ncua, thiab txhua qhov puag ncig ntawm qhov kev xaiv tsa muaj ib zaug tam sim no MSecs tus nqi. Yog tias koj xav tau Runtime kwv, koj yuav zaum pib koj qhov txuas nrog:

chav kawm EXTENSIONCLASS {

constructor (runtime) {this.runtime = runtime …} …}

Txhua qhov txheej txheem txheej txheem qhov rai khoom tuaj yeem siv tau hauv qhov txuas ntxiv tsis tau. Thaum kawg, koj qhov txuas ntxiv uas tsis yog lub thawv yuav tsum xaus nrog qhov me ntsis ntawm cov lej khawv koob:

(muaj nuj nqi () {

var extensionInstance = EXTENSIONCLASS tshiab (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo ().id, serviceName))

qhov twg koj yuav tsum hloov EXTENSIONCLASS nrog koj chav kawm txuas ntxiv.

Kauj Ruam 6: Sau ib qho Unsandboxed Extension: Gamepad Yooj Yim

Tam sim no cia ua qhov yooj yim gamepad txuas ntxiv uas muab ib qho xwm txheej ("lub kaus mom") thaiv rau thaum lub pob nyem lossis tso tawm.

Thaum lub sijhawm txhua qhov xwm txheej thaiv lub sijhawm pov npav, peb yuav khaws lub sijhawm sau tseg los ntawm cov khoom runtime, thiab yav dhau los thiab tam sim no gamepad xeev. Lub sijhawm siv sijhawm los lees paub yog tias peb muaj lub sijhawm xaiv tsa tshiab. Yog li, peb pib nrog:

chav kawm ScratchSimpleGamepad {

constructor (runtime) {this.runtime = runtime this.currentMSecs = -1 this.previousButtons = this.currentButtons = } …} Peb yuav muaj ib qho xwm txheej thaiv, nrog ob lub tswv yim-tus lej tus lej thiab cov ntawv qhia zaub mov los xaiv seb peb puas xav kom qhov xwm txheej tshwm sim ntawm kev nias lossis tso tawm. Yog li, ntawm no yog peb txoj kev

tauInfo () {

rov qab {"id": "SimpleGamepad", "name": "SimpleGamepad", "blocks": [{"opcode": "buttonPressedReleased", "blockType": "kaus mom", "text": "khawm [eventType] "," kev sib cav ": {" b ": {" hom ":" tus lej "," defaultValue ":" 0 "}," eventType ": {" hom ":" tus lej "," defaultValue ":" 1 "," menu ":" pressReleaseMenu "},},},]," menus ": {" pressReleaseMenu ": [{text:" press ", value: 1}, {text:" release ", value: 0}],}}; Ua; } Kuv xav tias qhov tseem ceeb hauv cov ntawv qhia zaub mov tseem tau dhau mus rau qhov ua haujlwm opcode ua cov hlua, txawm tias tau tshaj tawm ua lej. Yog li qhia meej sib piv lawv tawm tsam cov txiaj ntsig tau teev tseg hauv cov ntawv qhia zaub mov raws li xav tau. Peb tam sim no sau ib txoj hauv kev uas hloov kho lub xeev khawm thaum twg muaj xwm txheej tshwm sim kev xaiv tsa tshiab tshwm sim

hloov tshiab () {

yog (qhov no.runtime.currentMSecs == this.currentMSecs) rov qab // tsis yog lub sijhawm pov npav tshiab no.currentMSecs = this.runtime.currentMSecs var gamepads = navigator.getGamepads () yog (gamepads == null || gamepads.length = = 0 || gamepads [0] == null) {this.previousButtons = this.currentButtons = return} var gamepad = gamepads [0] yog (gamepad.buttons.length! = This.previousButtons.length) { // cov lej sib txawv ntawm cov nyees khawm, yog li gamepad tshiab no.previousButtons = rau (var i = 0; kuv <gamepad.buttons.length; i ++) this.previousButtons.push (cuav)} lwm {this.previousButtons = qhov no. currentButtons} this.currentButtons = rau (var i = 0; kuv <gamepad.buttons.length; i ++) this.currentButtons.push (gamepad.buttons .pressed)} Thaum kawg, peb tuaj yeem siv peb qhov xwm txheej thaiv, los ntawm kev hu xov tooj hloov tshiab () txoj hauv kev thiab tom qab ntawd tshawb xyuas yog tias lub pob uas xav tau nyuam qhuav raug nias lossis tso tawm, los ntawm kev sib piv lub xeev tam sim no thiab yav dhau los

buttonPressedReleased ({b, eventType}) {

this.update () yog (b <this.currentButtons.length) {yog (eventType == 1) {// nco ntsoov: qhov no yuav yog txoj hlua, yog li zoo dua los sib piv nws rau 1 dua li kho nws li Boolean yog (this.currentButtons &&! this.previousButtons ) {rov muaj tseeb}} ntxiv {yog (! this.currentButtons && this.previousButtons ) {rov muaj tseeb}} Thiab thaum kawg peb ntxiv peb cov txuj ci txuas ntxiv rau npe rau npe tom qab txhais cov chav kawm

(muaj nuj nqi () {

var extensionInstance = ScratchSimpleGamepad tshiab (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo (). id))

Koj tuaj yeem tau txais tus lej tag nrho ntawm no.

Kauj Ruam 7: Siv Unsandboxed Extension

Ib zaug ntxiv, tuav koj qhov txuas ntxiv rau qee qhov, thiab lub sijhawm no thauj nws nrog load_plugin = ntau dua li url = sib cav rau SheepTester's Scratch mod. Piv txwv li, rau kuv qhov Gamepad mod yooj yim, mus rau:

sheeptester.github.io/scratch-gui/?load_plugin=https://arpruss.github.io/simplegamepad.js

(Los ntawm txoj kev, yog tias koj xav tau gamepad ntau dua, tsuas yog tshem tawm "yooj yim" los ntawm qhov URL saum toj no, thiab koj yuav muaj kev sib cav thiab kev txhawb nqa piv txwv.)

Ib zaug ntxiv, qhov txuas ntxiv yuav tsum tshwm ntawm sab laug ntawm koj tus kws kos duab kos. Saum toj no yog qhov yooj yim heev Scratch program uas hais tias "nyob zoo" thaum koj nias lub pob 0 thiab "goodbye" thaum koj tso nws.

Kauj ruam 8: Dual-compatibility thiab Ceev

Kuv tau pom tias cov txuas txuas txuas ua qhov kev txiav txim ntawm qhov nrawm dua siv txoj hauv kev thauj khoom Kuv siv rau kev txuas ntxiv tsis txuas nrog. Yog li tshwj tsis yog koj saib xyuas qhov txiaj ntsig kev nyab xeeb ntawm kev ua haujlwm hauv Web Worker sandbox, koj cov cai yuav tau txais txiaj ntsig los ntawm kev thauj khoom nrog? Load_plugin = URL sib cav rau SheepTester's mod.

Koj tuaj yeem ua lub sandboxed txuas ntxiv nrog ob txoj hauv kev thauj khoom los ntawm kev siv cov cai hauv qab no tom qab txhais cov chav kawm txuas ntxiv (hloov CLASSNAME rau lub npe ntawm koj chav kawm txuas ntxiv):

(muaj nuj nqi () {

var extensionClass = CLASSNAME yog (typeof window === "undefined" ||! window.vm) {Scratch.extensions.register (tshiab extensionClass ())} lwm {var extensionInstance = tshiab extensionClass (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo (). id, serviceName)})) ()