scratch vm

รอยขีดข่วน-vm

Scratch VM เป็นไลบรารีสำหรับการนำเสนอ เรียกใช้ และรักษาสถานะของโปรแกรมคอมพิวเตอร์ที่เขียนโดยใช้ Scratch Blocks

การติดตั้ง

สิ่งนี้ต้องการให้คุณติดตั้ง Git และ Node.js

หากต้องการติดตั้งเป็นการพึ่งพาสำหรับแอปพลิเคชันของคุณเอง:

npm install scratch-vm

วิธีตั้งค่าสภาพแวดล้อมการพัฒนาเพื่อแก้ไข scratch-vm ด้วยตนเอง:

git clone https://github.com/scratchfoundation/scratch-vm.git
cd scratch-vm
npm install

เซิร์ฟเวอร์การพัฒนา

สิ่งนี้จำเป็นต้องติดตั้ง Node.js

เพื่อความสะดวก เราได้รวมเซิร์ฟเวอร์การพัฒนาเข้ากับ VM บางครั้งอาจมีประโยชน์เมื่อทำงานในสภาพแวดล้อมที่กำลังโหลดทรัพยากรระยะไกล (เช่น SVG จากเซิร์ฟเวอร์ Scratch) หากคุณต้องการใช้ VM ที่แก้ไขแล้วกับ Scratch 3.0 GUI แบบเต็ม ให้ทำตามคำแนะนำเพื่อเชื่อมโยง VM กับ GUI

ใช้งานเซิร์ฟเวอร์การพัฒนา

เปิด Command Prompt หรือ Terminal ในพื้นที่เก็บข้อมูลแล้วเรียกใช้:

npm start

สนามเด็กเล่น

หากต้องการดู Playground ตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์ dev ทำงานอยู่ และไปที่ http://localhost:8073/playground/ - คุณจะถูกนำไปที่ Playground ซึ่งสาธิตเครื่องมือต่างๆ และสถานะภายใน

สร้างแบบสแตนด์อโลน

npm run build

 < script src =" /path/to/dist/web/scratch-vm.js " > </ script >
< script >
    var vm = new window . VirtualMachine ( ) ;
    // do things
</ script > 

วิธีรวมไว้ในแอป Node.js

สำหรับตัวอย่างการตั้งค่าเพิ่มเติม โปรดดูไดเร็กทอรี /src/playground ซึ่งมีอินสแตนซ์ VM ที่ทำงานเต็มรูปแบบ

 var VirtualMachine = require ( 'scratch-vm' ) ;
var vm = new VirtualMachine ( ) ;

// Block events
Scratch . workspace . addChangeListener ( vm . blockListener ) ;

// Run threads
vm . start ( ) ; 

ต้นไม้ไวยากรณ์นามธรรม

ภาพรวม

Virtual Machine สร้างและรักษาสถานะของ Abstract Syntax Tree (AST) โดยการฟังเหตุการณ์ที่ปล่อยออกมาจากพื้นที่ทำงาน scratch-blocks ผ่านทาง blockListener แต่ละเป้าหมาย (ออบเจ็กต์ที่ทำงานด้วยโค้ด เช่น สไปรท์) จะเก็บ AST ไว้สำหรับบล็อก สถานะปัจจุบันของ AST สามารถดูได้ตลอดเวลาโดยการตรวจสอบอ็อบเจ็กต์ vm.runtime.targets[...].blocks

กายวิภาคของบล็อก

การแสดงบล็อกของ VM ประกอบด้วยข้อมูลที่สำคัญทั้งหมดสำหรับการดำเนินการและการจัดเก็บ ต่อไปนี้คือตัวอย่างที่แสดงถึงสคริปต์ "เมื่อกดปุ่ม" บนพื้นที่ทำงาน:

{
  "_blocks" : {
    "Q]PK~yJ@BTV8Y~FfISeo" : {
      "id" : " Q]PK~yJ@BTV8Y~FfISeo " ,
      "opcode" : " event_whenkeypressed " ,
      "inputs" : {
      },
      "fields" : {
        "KEY_OPTION" : {
          "name" : " KEY_OPTION " ,
          "value" : " space "
        }
      },
      "next" : null ,
      "topLevel" : true ,
      "parent" : null ,
      "shadow" : false ,
      "x" : -69.333333333333 ,
      "y" : 174
    }
  },
  "_scripts" : [
    " Q]PK~yJ@BTV8Y~FfISeo "
  ]
}

การทดสอบ

npm test 

npm run coverage

การเผยแพร่ไปยังหน้า GitHub

npm run deploy

การดำเนินการนี้จะผลักดัน Playground ที่สร้างขึ้นในปัจจุบันไปยังสาขา gh-pages ของรีโมทที่ติดตามในปัจจุบัน หากคุณต้องการเปลี่ยนตำแหน่งที่จะกดให้เพิ่มอาร์กิวเมนต์ repo url:

npm run deploy -- -r < your repo url > 

บริจาค

เราให้บริการ Scratch ฟรี และต้องการให้เป็นเช่นนั้น! โปรดพิจารณาบริจาคเพื่อสนับสนุนความพยายามด้านวิศวกรรม การออกแบบ ชุมชน และการพัฒนาทรัพยากรอย่างต่อเนื่องของเรา ยินดีบริจาคทุกขนาด ขอบคุณ!