Scratch 3.0 өргөтгөлүүд: 8 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:00

Scratch өргөтгөлүүд нь Scratch дээр шинэ блокуудыг нэмж өгдөг Javascript кодын хэсгүүд юм. Scratch нь олон тооны албан ёсны өргөтгөлүүдтэй байдаг боловч хэрэглэгчийн хийсэн өргөтгөлүүдийг нэмэх албан ёсны механизм байдаггүй.

Би Minecraft -ийн Scratch 3.0 -ийн хяналтын өргөтгөлийг хийж байх үед эхлүүлэхэд хэцүү байсан. Энэхүү зааварчилгаа нь янз бүрийн эх сурвалжаас авсан мэдээллийг цуглуулдаг (ялангуяа энэ талаар), мөн миний олж мэдсэн хэдэн зүйлийг цуглуулдаг.

Та Javascript дээр хэрхэн програмчлах, вэбсайт дээр өөрийн Javascript -ийг хэрхэн байршуулахаа мэдэх хэрэгтэй. Сүүлчийн хувьд би GitHub Pages -ийг санал болгож байна.

Гол заль мэх бол өргөтгөлүүд болон залгаасуудыг ачаалах боломжийг олгодог SheepTester -ийн Scratch горимыг ашиглах явдал юм.

Энэхүү зааварчилгаа нь хоёр өргөтгөл хийхэд танд туслах болно.

• Татаж авах: URL -аас өгөгдлийг ачаалах, JSON хаягийг задлах, жишээлбэл цаг агаарын мэдээллийг ачаалах гэх мэт
• SimpleGamepad: Scratch дээр тоглоом хянагч ашиглах (илүү боловсронгуй хувилбар энд байна).

Алхам 1: Хоёр төрлийн өргөтгөл

Хоёр төрлийн өргөтгөл байдаг бөгөөд үүнийг би "хамгаалалтгүй хайрцаг", "хамгаалагдсан хязгаарлагдмал орчин" гэж нэрлэнэ. Хамгаалагдсан хязгаарлагдмал хамгаалалттай өргөтгөлүүд Вэб ажилчнаар ажилладаг бөгөөд үүний үр дүнд ихээхэн хязгаарлалттай байдаг.

• Вэб ажилчид цонхны объект дахь дэлхийн сүлжээнд нэвтрэх боломжгүй (үүний оронд тэд дэлхийн хэмжээний объекттой бөгөөд энэ нь илүү хязгаарлагдмал байдаг), тиймээс та тэдгээрийг тоглоомын талбарт нэвтрэх гэх мэт зүйлд ашиглах боломжгүй.
• Хамгаалагдсан хязгаарлагдмал хамгаалалттай өргөтгөлүүд нь Scratch ажиллах цагийн объектод хандах эрхгүй байдаг.
• Хамгаалагдсан хязгаарлагдмал хамгаалалттай өргөтгөлүүд илүү удаан байдаг.
• Хамгаалагдсан хамгаалалттай өргөтгөлүүдийн Javascript консолын алдааны мэдэгдэл нь Chrome дээр илүү нууцлаг байдаг.

Нөгөө талаас:

• Бусад хүмүүсийн хамгаалагдсан хязгаарлагдмал хамгаалалттай өргөтгөлүүдийг ашиглах нь илүү аюулгүй байдаг.
• Хамгаалагдсан хязгаарлагдмал хамгаалалттай өргөтгөлүүд нь албан ёсны өргөтгөл ачаалах албан ёсны дэмжлэгтэй ажиллах магадлал өндөр байдаг.
• Хамгаалагдсан хязгаарлагдмал хамгаалалттай өргөтгөлүүдийг вэб сервер рүү байршуулахгүйгээр өгөгдөлд кодлох замаар шалгаж болно: // URL.

Албан ёсны өргөтгөлүүд (Хөгжим, Үзэг гэх мэт) бүгд хайрцаггүй байдаг. Өргөтгөлийн бүтээгч нь Scratch -аас ажиллах цагийн объектыг авдаг бөгөөд цонхонд бүрэн нэвтрэх боломжтой байдаг.

Fetch өргөтгөл нь хамгаалагдсан хязгаарлагдмал орчинд байдаг, гэхдээ Gamepad нь цонхноос navigator объект хэрэгтэй болно.

Алхам 2: Элсэн хайрцагтай өргөтгөл бичих: I хэсэг

Өргөтгөл хийхийн тулд та энэ тухай мэдээллийг кодчилдог анги үүсгэж, дараа нь өргөтгөлийг бүртгэхийн тулд жаахан код нэмнэ үү.

Өргөтгөлийн ангийн гол зүйл бол шаардлагатай талбар бүхий объектыг буцаах getInfo () арга юм.

• id: өргөтгөлийн дотоод нэр нь өргөтгөл бүрийн хувьд өвөрмөц байх ёстой
• нэр: Scratch -ийн блокуудын жагсаалтад харагдах өргөтгөлийн ээлтэй нэр
• блокууд: шинэ захиалгат блокыг дүрсэлсэн объектуудын жагсаалт.

Мөн Fetch -д ашиглагддаггүй боловч Gamepad -д ашиглах нэмэлт цэсийн талбар байдаг.

Тиймээс, Fetch -ийн үндсэн загварыг энд оруулав.

анги ScratchFetch {

constructor () {} getInfo () {return {"id": "Fetch", "name": "Fetch", "block": [/* дараа нэмэх * /]}} / * блокуудын аргуудыг нэмэх * /} Scratch.extensions.register (шинэ ScratchFetch ())

Алхам 3: Элсэн хайрцагтай өргөтгөл бичих: II хэсэг

Одоо бид getInfo () объект дахь блокуудын жагсаалтыг гаргах хэрэгтэй. Блок бүрт дор хаяж дөрвөн талбар хэрэгтэй:

• opcode: энэ бол блокийн ажлыг хийх гэж нэрлэдэг аргын нэр юм

• blockType: энэ бол блокны төрөл; Өргөтгөлийн хамгийн түгээмэл зүйл бол:

  • "тушаал": ямар нэгэн зүйл хийдэг боловч утга буцаадаггүй
  • "сурвалжлагч": мөр эсвэл дугаарыг буцаана
  • "Boolean": логикийг буцаана (том үсгийг анхаарна уу)
  • "малгай": үйл явдал барих блок; Хэрэв таны Scratch код энэ блокыг ашигладаг бол Scratch -ийн ажиллах хугацаа нь тухайн арга хэрэг болсон эсэхийг хэлэх логик утгыг буцааж өгдөг холбогдох аргыг тогтмол санал болгодог.
• текст: энэ бол блокны нөхөрсөг тайлбар бөгөөд хаалтанд байгаа аргументууд, жишээлбэл, " -с өгөгдөл авах"

• аргументууд: энэ нь аргумент бүрт талбартай объект юм (жишээлбэл, дээрх жишээнд "url"); Энэ объект нь эргээд эдгээр талбаруудтай:

  • төрөл: "мөр" эсвэл "тоо"
  • defaultValue: урьдчилан бөглөх үндсэн утга.

Жишээлбэл, миний Fetch өргөтгөл дэх блокуудын талбар энд байна:

"блокууд": [{"opcode": "fetchURL", "blockType": "сурвалжлагч", "текст": "өгөгдлийг -аас авах", "аргументууд": {"url": {"төрөл": "мөр", "defaultValue ":" https://api.weather.gov/stations/KNYC/observations "},}}, {" opcode ":" jsonExtract "," blockType ":" reportyor "," text ":" extract [name] [өгөгдөл] "," аргументууд "-аас: {" нэр ": {" төрөл ":" мөр "," defaultValue ":" температур "}," өгөгдөл ": {" төрөл ":" мөр "," defaultValue ": '{"температур": 12.3}'},}},]

Энд бид fetchURL ба jsonExtract гэсэн хоёр блокыг тодорхойлсон. Хоёулаа сурвалжлагч. Эхнийх нь URL -аас өгөгдлийг татаж аваад буцааж өгдөг бөгөөд хоёр дахь нь JSON өгөгдлөөс талбарыг гаргаж авдаг.

Эцэст нь хэлэхэд та хоёр блок хийх аргуудыг оруулах хэрэгтэй. Арга бүр нь объектыг аргумент болгон авдаг бөгөөд объект нь бүх аргументийн талбарыг агуулдаг. Та аргумент дээрх буржгар хаалт ашиглан эдгээр кодыг тайлж болно. Жишээлбэл, энд нэг синхрон жишээ байна:

jsonExtract ({нэр, өгөгдөл}) {

var parsed = JSON.parse (data) if (name in parsed) {var out = parsed [name] var t = typeof (out) if (t == "string" || t == "number") буцах тохиолдолд (t == "boolean") буцах t? 1: 0 буцах JSON.stringify (out)} өөр {буцах ""}}

Код нь нэрийн талбарыг JSON өгөгдлөөс татаж авдаг. Хэрэв талбар нь мөр, тоо эсвэл логикийг агуулсан бол бид үүнийг буцааж өгнө. Үгүй бол бид талбарыг дахин JSONify хийнэ. Хэрэв нэр JSON -д байхгүй бол бид хоосон мөрийг буцаана.

Гэхдээ заримдаа та асинхрон API ашигладаг блок хийхийг хүсч магадгүй юм. FetchURL () арга нь асинхрон бус fetch API ашигладаг. Ийм тохиолдолд та өөрийн арга барилаас тухайн ажлыг гүйцэтгэдэг амлалтаа буцааж өгөх ёстой. Жишээлбэл:

fetchURL ({url}) {

буцаах (url). дараа нь (хариулт => хариулт.текст ())}

Ингээд л боллоо. Бүрэн өргөтгөл энд байна.

Алхам 4: Sandboxed өргөтгөл ашиглах

Хамгаалагдсан хамгаалалттай өргөтгөлийг ашиглах хоёр арга бий. Нэгдүгээрт, та үүнийг вэб серверт байршуулж, дараа нь SheepTester -ийн Scratch горимд ачаалж болно. Хоёрдугаарт, та үүнийг өгөгдлийн URL болгон кодчилж, Scratch mod руу ачаалж болно. Би өргөтгөлийн хуучин хувилбарууд сервер дээр кэш хийгдэхээс санаа зовдоггүй тул тест хийхдээ хоёр дахь аргыг бага зэрэг ашигладаг. Та JavaScript -ийг Github Pages -ээс байршуулах боломжтой боловч энгийн github репозитороос шууд хийх боломжгүй гэдгийг анхаарна уу.

Миний fetch.js -ийг https://arpruss.github.io/fetch.js хаягаар байрлуулсан болно. Эсвэл та өргөтгөлөө энд байршуулж өгөгдлийн URL болгон хөрвүүлж, дараа нь санах ойд хуулж болно. Өгөгдлийн URL бол бүхэл бүтэн файлыг агуулсан аварга том URL юм.

SheepTester -ийн Scratch mod руу очно уу. Зүүн доод буланд байгаа Өргөтгөл нэмэх товчийг дарна уу. Дараа нь "Өргөтгөл сонгоно уу" дээр дараад URL хаягаа оруулна уу (хэрэв та хүсвэл аварга том өгөгдлийн URL хаягийг бүхэлд нь оруулах боломжтой).

Хэрэв бүх зүйл сайн болсон бол Scratch дэлгэцийнхээ зүүн талд өргөтгөл оруулах оруулгатай болно. Хэрэв бүх зүйл сайн болоогүй бол та Javascript консолоо нээж (Chrome дахь shift-ctrl-J) асуудлыг шийдэхийг оролдох хэрэгтэй.

Дээрээс та АНУ -ын Цаг уурын үндэсний албаны KNYC (Нью -Йорк дахь) станцаас JSON өгөгдлийг авч, задлан шинжилж, спрайтийг салхи салхилж буйтай яг адилхан харуулах жишээ код олох болно. Миний хийсэн арга бол өгөгдлийг вэб хөтөч дээр татаж аваад дараа нь хаягийг олж тогтоох явдал байв. Хэрэв та өөр цаг уурын станц туршиж үзэхийг хүсч байвал, ойролцоох зип кодыг weather.gov хаягийн хайлтын талбарт оруулна уу, таны байршлын цаг агаарын хуудас танд дөрвөн үсэг бүхий станцын кодыг өгөх ёстой бөгөөд үүнийг KNYC -ийн оронд ашиглаж болно. код.

Та мөн "? Url =" аргумент нэмж SheepTester -ийн модны URL -д өөрийн хамгаалагдсан хязгаарлагдмал хамгаалалттай өргөтгөлийг оруулах боломжтой. Жишээлбэл:

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

Алхам 5: Sands хайрцаггүй өргөтгөл бичих: Танилцуулга

Багцгүй хайрцаггүй өргөтгөлийг бүтээгч нь Runtime объектоор дамждаг. Та үүнийг үл тоомсорлож эсвэл ашиглаж болно. Runtime объектын нэг хэрэглээ бол түүний одоогийн MSecs шинж чанарыг ашиглан үйл явдлыг синхрончлох явдал юм ("малгайны блокууд"). Миний хэлж байгаагаар бүх үйл явдлын блокийн кодуудыг тогтмол санал асуулгад хамруулдаг бөгөөд санал авах тойрог бүр нь нэг одоогийн MSecs утгатай байдаг. Хэрэв танд Runtime объект хэрэгтэй бол та өргөтгөлөө дараах байдлаар эхлүүлэх болно.

EXTENSIONCLASS анги {

бүтээгч (ажиллах хугацаа) {this.runtime = ажиллах хугацаа…}…}

Цонхны объектын бүх стандарт зүйлийг хайрцгийн хайрцгаас гадуур өргөтгөлд ашиглаж болно. Эцэст нь хэлэхэд, таны хайрцаггүй өргөтгөл энэ ид шидийн кодоор дуусах ёстой.

(функц () {

var extensionInstance = шинэ EXTENSIONCLASS (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo ()). id, service)

Энд та EXTENSIONCLASS -ийг өргөтгөлийн ангиар солих хэрэгтэй.

Алхам 6: Sands хайрцаггүй өргөтгөл бичих: Энгийн тоглоомын самбар

Одоо товчлуур дарах эсвэл суллахад нэг үйл явдал ("малгай") блок өгдөг энгийн gamepad өргөтгөл хийцгээе.

Үйл явдлын блок бүрийн санал асуулгын мөчлөгийн явцад бид ажлын цагийн объект, цагийн тоглоомын өмнөх болон одоогийн төлөвийг хадгалах болно. Цаг хугацааны тэмдгийг бид шинэ санал авах мөчлөгтэй эсэхийг тодорхойлоход ашигладаг. Тиймээс, бид эхэлж байна:

ангийн ScratchSimpleGamepad {

бүтээгч (ажиллах хугацаа) {this.runtime = runtime this.currentMSecs = -1 this.previousButtons = this.currentButtons = }…} Бид үйл явдлын товчлуур, цэс гэсэн хоёр оролттой нэг үйл явдлын блоктой байх болно. Тиймээс, бидний арга энд байна

мэдээлэл авах() {

буцах {"id": "SimpleGamepad", "name": "SimpleGamepad", "block": [{"opcode": "buttonPressedReleased", "blockType": "hat", "text": "button [eventType] "," arguments ": {" b ": {" type ":" number "," defaultValue ":" 0 "}," eventType ": {" type ":" number "," defaultValue ":" 1 "," цэс ":" pressReleaseMenu "},},},]," цэс ": {" pressReleaseMenu ": [{текст:" хэвлэх ", утга: 1}, {текст:" хувилбар ", утга: 0}],}}; } Унтраах цэс дэх утгууд нь тоогоор зарлагдсан байсан ч гэсэн opcode функц руу тэмдэгт мөр болгон дамжуулсаар байх болно гэж би бодож байна. Тиймээс тэдгээрийг шаардлагатай бол цэсэнд заасан утгуудтай харьцуулж үзээрэй. Одоо бид шинэ үйл явдлын санал авах мөчлөг болоход товчлуурыг шинэчилдэг аргыг бичдэг

шинэчлэх () {

if (this.runtime.currentMSecs == this.currentMSecs) буцах // шинэ санал авах мөчлөг биш this.currentMSecs = this.runtime.currentMSecs var gamepads = navigator.getGamepads () if (gamepads == null || gamepads.length = = 0 || тоглоомын талбар [0] == null) {this.previousButtons = this.currentButtons = return} var gamepad = gamepads [0] if (gamepad.buttons.length! = This.previousButtons.length) { // өөр өөр тооны товчлуурууд, тиймээс шинэ gamepad this.previousButtons = for (var i = 0; i <gamepad.buttons.length; i ++) this.previousButtons.push (false)} өөр {this.previousButtons = this. currentButtons} this.currentButtons = for (var i = 0; i <gamepad.buttons.length; i ++) this.currentButtons.push (gamepad.buttons . дарагдсан)} Эцэст нь бид update () аргыг дуудаж, шаардлагатай товчлуурыг дарсан эсвэл сулласан эсэхийг шалгахын тулд одоогийн болон өмнөх товчлуурын төлөвийг харьцуулж үйл явдлын блокоо хэрэгжүүлж чадна.

buttonPressedReleased ({b, eventType}) {

this.update () if (b <this.currentButtons.length) {if (eventType == 1) {// note: энэ нь мөр байх тул үүнийг логик гэж үзэхээс 1 -тэй харьцуулах нь дээр this.currentButtons &&! this.previousButtons ) {return true}} else {if (! this.currentButtons && this.previousButtons ) {return true}}} false false} Эцэст нь бид ангиа тодорхойлсны дараа ид шидийн өргөтгөлийн бүртгэлийн кодоо нэмж оруулав

(функц () {

var extensionInstance = шинэ ScratchSimpleGamepad (window.vm.extensionManager.runtime) var serviceName = window.vm.extensionManager._registerInternalExtension (extensionInstance) window.vm.extensionManager._loadedExtensions.set (extensionInstance.getInfo ()).)

Та бүрэн кодыг эндээс авах боломжтой.

Алхам 7: Unsandboxed өргөтгөлийг ашиглах

Дахин нэг удаа өргөтгөлөө хаа нэг газар байршуулаарай, энэ удаад SheepTester -ийн Scratch mod руу url = argument гэхээсээ илүү load_plugin = ачаална уу. Жишээлбэл, миний энгийн Gamepad модны хувьд дараах руу очно уу.

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

(Дашрамд хэлэхэд, хэрэв та илүү боловсронгуй тоглоомын самбар авахыг хүсч байвал дээрх URL -аас "энгийн" хаягийг арилгахад л чимээ шуугиан, аналог тэнхлэгийн дэмжлэг байх болно.)

Дахин хэлэхэд өргөтгөл нь Scratch засварлагчийн зүүн талд гарч ирэх ёстой. Дээрх нь маш энгийн Scratch програм бөгөөд 0 товчлуурыг дарахад "сайн уу", суллахад "баяртай" гэж хэлдэг.

Алхам 8: Хос нийцтэй байдал ба хурд

Өргөтгөлийн блокууд нь хайрцаггүй өргөтгөлүүдэд ашигладаг ачаалах аргыг ашиглан илүү хурдан дарааллаар ажилладаг болохыг би анзаарсан. Тиймээс, хэрэв та Web Worker -ийн хамгаалагдсан хязгаарлагдмал орчинд ажиллах аюулгүй байдлын давуу талыг анхаарч үзэхгүй бол таны код SheepTester -ийн модны? Load_plugin = URL аргументыг ачаалснаар ашиг тусаа өгөх болно.

Та өргөтгөлийн ангиллыг тодорхойлсны дараа дараах кодыг ашиглан ачаалах хоёр аргад нийцсэн хамгаалагдсан хязгаарлагдмал хамгаалалттай өргөтгөл хийх боломжтой (CLASSNAME -ийг өргөтгөлийн ангийнхаа нэрээр солино уу):

(функц () {

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