Scratch 3.0 kengaytmalari: 8 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:22

Scratch kengaytmalari - bu Scratch -ga yangi bloklarni qo'shadigan Javascript kodining qismlari. Scratch ko'plab rasmiy kengaytmalar bilan birlashtirilgan bo'lsa-da, foydalanuvchi tomonidan yaratilgan kengaytmalarni qo'shishning rasmiy mexanizmi mavjud emas.

Men Scratch 3.0 uchun Minecraft boshqaruv kengaytmasini yaratganimda, ishga kirish qiyin kechdi. Bu ko'rsatma har xil manbalardan ma'lumotlarni to'playdi (ayniqsa, bu), shuningdek, men o'zim kashf qilgan ba'zi narsalar.

Siz Javascript -da dasturlashni va veb -saytingizda Javascript -ni joylashtirishni bilishingiz kerak. Ikkinchisi uchun men GitHub sahifalarini tavsiya qilaman.

Asosiy hiyla - bu SheepTester -ning Scratch rejimidan foydalanish, bu sizga kengaytmalar va plaginlarni yuklashga imkon beradi.

Ushbu ko'rsatma sizga ikkita kengaytmani yaratishga yordam beradi:

• Qabul qilish: ma'lumotlarni URL manzilidan yuklash va JSON teglarini chiqarish, masalan ob -havo ma'lumotlarini yuklash uchun
• SimpleGamepad: Scratch -da o'yin boshqaruvchisidan foydalanish (yanada murakkab versiya bu erda).

1 -qadam: kengaytmalarning ikki turi

Kengaytmalarning ikkita turi bor, ularni men "qutisi yo'q" va "himoyalangan joylar" deb atayman. Qum himoyalangan kengaytmalar veb -ishchilar sifatida ishlaydi va natijada sezilarli cheklovlar mavjud:

• Veb -ishchilar oyna ob'ektidagi global ma'lumotlarga kira olmaydilar (buning o'rniga ular global ob'ektga ega, bu ancha cheklangan), shuning uchun siz ularni geympadga kirish kabi narsalarda ishlata olmaysiz.
• Qum himoyalangan kengaytmalar Scratch ish vaqti ob'ektiga kira olmaydi.
• Sandbox kengaytmalari ancha sekin.
• Qum himoyalangan kengaytmalar uchun Javascript konsoli xato xabarlari Chrome -da ko'proq sirli.

Boshqa tarafdan:

• Boshqa odamlarning himoyalangan kengaytmalaridan foydalanish xavfsizroq.
• Qum qutisi kengaytmalari har qanday rasmiy kengaytmani yuklashda yordam beradi.
• Qum himoyalangan kengaytmalarni veb -serverga yuklamasdan, ma'lumotlarni kodlash orqali tekshirish mumkin: // URL.

Rasmiy kengaytmalar (masalan, Musiqa, Qalam va boshqalar) hammasi qutisiga qo'yilmagan. Kengaytma konstruktori Scratch -dan ish vaqti ob'ektini oladi va oynaga to'liq kirish mumkin.

Qabul qilish kengaytmasi himoyalangan, lekin Gamepadga navigator obyekti derazadan kerak.

2 -qadam: Sandbox kengaytmasini yozish: I qism

Kengaytmani yaratish uchun siz u haqidagi ma'lumotlarni kodlaydigan sinf yaratasiz va keyin kengaytmani ro'yxatdan o'tkazish uchun biroz kod qo'shasiz.

Kengaytma sinfidagi asosiy narsa - ob'ektni kerakli maydonlarga qaytaradigan getInfo () usuli:

• id: kengaytmaning ichki nomi har bir kengaytma uchun yagona bo'lishi kerak
• ism: Scratch bloklari ro'yxatida ko'rsatiladigan kengaytmaning qulay nomi
• bloklar: yangi maxsus blokni tavsiflovchi ob'ektlar ro'yxati.

Fetch -da ishlatilmaydigan, lekin Gamepad -da ishlatiladigan ixtiyoriy menyu maydoni mavjud.

Shunday qilib, olib kelish uchun asosiy shablon:

ScratchFetch sinf {

constructor () {} getInfo () {return {"id": "Get", "name": "Fetch", "blocks": [/* keyinroq qo'shish * /]}} / * bloklar uchun usullarni qo'shish * /} Scratch.extensions.register (yangi ScratchFetch ())

3 -qadam: Sandbox kengaytmasini yozish: II qism

Endi biz getInfo () ob'ektidagi bloklar ro'yxatini tuzishimiz kerak. Har bir blokga kamida to'rtta maydon kerak:

• opcode: bu blok ishini bajarish uchun chaqiriladigan usulning nomi

• blockType: bu blok turi; Kengaytmalar uchun eng keng tarqalganlari:

  • "buyruq": biror narsa qiladi, lekin qiymatni qaytarmaydi
  • "reportyor": satr yoki raqamni qaytaradi
  • "Boolean": mantiqiyni qaytaradi (bosh harfiga e'tibor bering)
  • "shlyapa": hodisani aniqlaydigan blok; Agar Scratch kodingiz ushbu blokdan foydalansa, Scratch ish vaqti muntazam ravishda voqea sodir bo'lganligini aytish uchun mantiqiy javob qaytaradigan bog'liq usulni so'roq qiladi.
• matn: bu blokning do'stona tavsifi, qavs ichidagi argumentlar bilan, masalan, " dan ma'lumotlarni olish"

• argumentlar: bu har bir argument uchun maydonga ega bo'lgan ob'ekt (masalan, yuqoridagi misolda "url"); bu ob'ekt o'z navbatida quyidagi maydonlarga ega:

  • turi: yoki "string" yoki "raqam"
  • defaultValue: oldindan to'ldiriladigan standart qiymat.

Misol uchun, bu erda "Fetch" kengaytmasidagi bloklar maydoni:

"bloklar": [{"opcode": "fetchURL", "blockType": "reportyor", "text": "ma'lumotlarni dan olish", "argumentlar": {"url": {"type": "string", "defaultValue) ":" https://api.weather.gov/stations/KNYC/observations "},}}, {" opcode ":" jsonExtract "," blockType ":" reportyor "," matn ":" ko'chirish [ism] [ma'lumotlar] "," argumentlar "dan: {" ism ": {" turdagi ":" satr "," defaultValue ":" harorat "}," ma'lumotlar ": {" tip ":" satr "," defaultValue ": '{"harorat": 12.3}'},}},]

Bu erda biz ikkita blokni aniqladik: fetchURL va jsonExtract. Ikkalasi ham jurnalist. Birinchisi, URL manzilidan ma'lumotlarni olib, qaytaradi, ikkinchisi esa JSON ma'lumotlaridan maydon chiqaradi.

Nihoyat, siz ikkita blok uchun usullarni kiritishingiz kerak. Har bir usul ob'ektni argument sifatida qabul qiladi, ob'ekt barcha argumentlar uchun maydonlarni o'z ichiga oladi. Siz ularni argumentlardagi jingalak qavslar yordamida hal qilishingiz mumkin. Masalan, bitta sinxron misol:

jsonExtract ({ism, ma'lumotlar}) {

var parsed = JSON.parse (ma'lumotlar) if (ismi ajratilgan holda) {var out = parsed [name] var t = typeof (out) if (t == "string" || t == "number") qaytadi, agar (t == "boolean") qaytish t? 1: 0 qaytish JSON.stringify (out)} else {return ""}}

Kod JSON ma'lumotlaridan nom maydonini chiqaradi. Agar maydonda satr, raqam yoki boolean bo'lsa, biz uni qaytaramiz. Aks holda, biz maydonni qayta JSONify qilamiz. Agar JSONda nom yo'q bo'lsa, biz bo'sh qatorni qaytaramiz.

Ba'zida, siz asenkron API ishlatadigan blokni yaratishni xohlashingiz mumkin. FetchURL () usuli asenkron bo'lgan fetch API -dan foydalanadi. Bunday holda, siz o'zingizning usulingizdan ishni bajaradigan va'dasini qaytarishingiz kerak. Masalan; misol uchun:

fetchURL ({url}) {

qaytish (url). keyin (javob => javob.text ())}

Bo'ldi shu. To'liq kengaytma bu erda.

4 -qadam: Sandbox kengaytmasidan foydalanish

Qum himoyalangan kengaytmani ishlatishning ikki yo'li mavjud. Birinchidan, siz uni veb -serverga yuklashingiz va keyin SheepTester -ning Scratch rejimiga yuklashingiz mumkin. Ikkinchidan, siz uni ma'lumotlarni URL manziliga kodlashingiz va uni Scratch rejimiga yuklashingiz mumkin. Men ikkinchi usulni sinab ko'rish uchun bir oz ishlataman, chunki u kengaytmaning eski versiyalari server tomonidan keshlanganidan xavotirlanmaydi. E'tibor bering, siz JavaScript -ni Github Pages -dan joylashtirishingiz mumkin, lekin siz buni oddiy github omboridan qila olmaysiz.

My fetch.js https://arpruss.github.io/fetch.js saytida joylashtirilgan. Yoki kengaytmani bu erga yuklash orqali ma'lumotlarni URL manziliga aylantirishingiz va keyin buferga nusxalashingiz mumkin. Ma'lumot URL manzili - bu butun faylni o'z ichiga olgan ulkan URL.

SheepTester -ning Scratch rejimiga o'ting. Pastki chap burchakda Kengaytmani qo'shish tugmasini bosing. Keyin "Kengaytmani tanlang" tugmachasini bosing va URL manzilingizni kiriting (agar xohlasangiz, ulkan ma'lumotlar URL manzilini joylashtirishingiz mumkin).

Agar hammasi yaxshi bo'lsa, siz skretch ekranining chap tomonida kengaytmani kiritishingiz mumkin. Agar ishlar yaxshi ketmasa, siz Javascript konsolini (Chrome-da shift-ctrl-J) ochishingiz va muammoni tuzatishga harakat qilishingiz kerak.

Yuqorida siz AQSh Milliy ob -havo xizmati KNYC (Nyu -Yorkda) stantsiyasidan JSON ma'lumotlarini oladigan va tahlil qiladigan va uni ko'rsatadigan, misol uchun, spritni shamol esayotgan tomonga qaragan misol kodini topasiz. Ma'lumotni veb -brauzerga yuklash, keyin teglarni aniqlash orqali men buni qildim. Agar siz boshqa ob -havo stantsiyasini sinab ko'rmoqchi bo'lsangiz, weather.gov manzilidagi qidiruv maydoniga yaqin atrofdagi pochta indeksini kiriting va sizning manzilingiz uchun ob -havo sahifasi sizga to'rt harfli stansiya kodini berishi kerak, siz uni KNYC o'rniga ishlatishingiz mumkin. kod

Siz "? Url =" argumentini qo'shib, himoyalangan kengaytmani SheepTester modining URL manziliga kiritishingiz mumkin. Masalan; misol uchun:

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

5 -qadam: Qutiga kirmagan kengaytmani yozish: kirish

Quti qutisi bo'lmagan kengaytma konstruktori Runtime ob'ektidan o'tadi. Siz uni e'tiborsiz qoldirishingiz yoki ishlatishingiz mumkin. Runtime ob'ektidan foydalanish hodisalardan sinxronizatsiya qilish uchun joriy MSecs xususiyatidan foydalanishdir ("shapka bloklari"). Aytishim mumkinki, voqealar blokining barcha opkodlari muntazam ravishda so'raladi va so'rovning har bir turida bitta joriy MSecs qiymati bo'ladi. Agar sizga Runtime obyekti kerak bo'lsa, ehtimol siz kengaytmani quyidagicha boshlaysiz:

EXTENSIONCLASS sinf {

konstruktor (ish vaqti) {this.runtime = ish vaqti…}…}

Qator qutisi bo'lmagan kengaytmada barcha standart oynali narsalar ishlatilishi mumkin. Nihoyat, qutisiz qutingiz kengaytmasi bu sehrli kod bilan tugashi kerak:

(funktsiya () {

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

bu erda EXTENSIONCLASSni kengaytmaning sinfiga almashtirish kerak.

6 -qadam: Qo'riqlanmagan kengaytmani yozish: oddiy geympad

Keling, tugma bosilganda yoki qo'yib yuborilganda bitta voqea ("shlyapa") blokini ta'minlaydigan oddiy gamepad kengaytmasini yarataylik.

Har bir hodisani blokirovka qilish jarayonida biz vaqt belgisini ish vaqti ob'ektidan, oldingi va joriy geympad holatidan saqlaymiz. Vaqt tamg'asi bizda yangi saylov tsikli bor yoki yo'qligini aniqlash uchun ishlatiladi. Shunday qilib, biz boshlaymiz:

ScratchSimpleGamepad klassi {

konstruktor (ish vaqti) {this.runtime = ish vaqti this.currentMSecs = -1 this.previousButtons = this.currentButtons = }…} Bizda bitta voqea bloki bo'ladi, ikkita kirish-tugma raqami va menyu voqeani ishga tushirishni xohlaymizmi yoki yo'qmi, tanlash uchun. Shunday qilib, bizning uslubimiz

getInfo () {

qaytish {"id": "SimpleGamepad", "name": "SimpleGamepad", "blocks": [{"opcode": "buttonPressedReleased", "blockType": "shapka", "text": "tugmasi [eventType] "," argumentlar ": {" b ": {" turi ":" raqam "," defaultValue ":" 0 "}," eventType ": {" tip ":" raqam "," defaultValue ":" 1 "," menyu ":" pressReleaseMenu "},},},]," menyular ": {" pressReleaseMenu ": [{matn:" press ", qiymat: 1}, {matn:" chiqarish ", qiymat: 0}],}}; } O'ylaymanki, ochiladigan menyudagi qiymatlar raqamlar deb e'lon qilinishiga qaramay, opcode funktsiyasiga satr sifatida uzatiladi. Shuning uchun ularni kerak bo'lganda menyuda ko'rsatilgan qiymatlar bilan aniq taqqoslang. Endi biz yangi voqea so'rovnomasi sodir bo'lganda tugma holatini yangilaydigan usulni yozamiz

yangilash () {

agar (this.runtime.currentMSecs == this.currentMSecs) qaytsa // yangi so'rov tsikli bo'lmasa = 0 || geympad [0] == null) {this.previousButtons = this.currentButtons = return} var gamepad = gamepad [0] if (gamepad.buttons.length! = This.previousButtons.length) { // turli tugmachalar soni, shuning uchun yangi gamepad this.previousButtons = for (var i = 0; i <gamepad.buttons.length; i ++) this.previousButtons.push (false)} else {this.previousButtons = this. currentButtons} this.currentButtons = for (var i = 0; i <gamepad.buttons.length; i ++) this.currentButtons.push (gamepad.tugmalar .siqilgan)} Nihoyat, biz yangilanish () usulini chaqirib, so'ng tugmachaning bosilgan yoki qo'yilganligini tekshirib, joriy va oldingi tugma holatlarini taqqoslab, tadbirlar blokini amalga oshirishimiz mumkin.

buttonPressedReleased ({b, eventType}) {

this.update () if (b <this.currentButtons.length) {if (eventType == 1) {// note: bu mag'lubiyat bo'ladi, shuning uchun uni mantiqiy deb hisoblashdan ko'ra, uni 1 bilan solishtirish yaxshiroq this.currentButtons &&! this.previousButtons ) {return true}} else {if (! this.currentButtons && this.previousButtons ) {return true}}} false false} Va nihoyat, biz sinfni aniqlagandan so'ng, sehrli kengaytmani ro'yxatga olish kodini qo'shamiz

(funktsiya () {

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

Siz bu erda to'liq kodni olishingiz mumkin.

7 -qadam: Qum qutisi bo'lmagan kengaytmani ishlatish

Yana bir bor, kengaytmani biror joyga joylashtiring va bu safar uni ShelTester -ning Scratch rejimiga url = argumenti o'rniga load_plugin = bilan yuklang. Masalan, mening oddiy Gamepad modim uchun quyidagi manzilga o'ting:

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

(Aytgancha, agar siz yanada murakkab geympadni xohlasangiz, yuqoridagi URLdan "oddiy" ni olib tashlang, shunda siz shovqin va analog o'qni qo'llab -quvvatlaysiz.)

Shunga qaramay, kengaytma Scratch muharririning chap tomonida paydo bo'lishi kerak. Yuqorida juda oddiy Scratch dasturi, 0 tugmachasini bosganingizda "salom" va qo'yib yuborganingizda "xayr" deyiladi.

8-qadam: Ikki tomonlama moslik va tezlik

Men sezdimki, kengaytmali bloklar men quti bo'lmagan kengaytmalar uchun ishlatilgan yuklash usuli yordamida tezroq ishlaydi. Agar siz Web Worker sandbox -da ishlashning xavfsizlik afzalliklari haqida qayg'urmasangiz, sizning kodingiz SheepTester modiga? Load_plugin = URL argumentini yuklashdan foyda ko'radi.

Kengaytma sinfini aniqlagandan so'ng, quyidagi kodni ishlatib, yuklashning ikkala usuliga mos keladigan himoyalangan kengaytmani yaratishingiz mumkin (CLASSNAMEni kengaytma sinfingiz nomiga o'zgartiring):

(funktsiya () {

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