Discuss Scratch
- Discussion Forums
- » Advanced Topics
- » ScriftJ - Making Scratch in JavaScript
- Wetbikeboy2500
- Scratcher
100+ posts
ScriftJ - Making Scratch in JavaScript
ScriftJ Version 12 on GitHub but a newer version is in the works
What is ScriftJ?
ScriftJ is a project I have been working on since the beginning of the summer of 2015. ScriftJ is trying to remake/rethink Scratch in Javascript. The reason I started this was because I wanted to do something in Javascript and so I started this project of mine. Feel free to make changes or suggestions about the code.
Where can you find it?
Currently, you can find the code for version 12 on the Github page for ScriftJ or go to https://wetbikeboy2500.github.io/ScriftJ/ to see the code in action. You can also check out the stable version(version 11.2.5) on my site here. Make sure you do a hard refresh on all of the pages if you have gone to the site before(If you don't know how then go here http://wiki.scratch.mit.edu/wiki/Hard_Refresh)
How can I get the source files?
You can go here to find the most recent release of ScriftJ or here for the most recent code
You can also go here to see most of the previous versions in the zip files I keep on google drive including versions that I never shared
What is new?
I have moved the project over to Github.
Version 12 was a rewrite of it which offers new features but is going to need to change a lot.
Note
Version 12 is still a WIP and isn't the most stable. That is why I plan on making a newer version but will take some time.
Last edited by Wetbikeboy2500 (Dec. 21, 2017 19:54:18)
Scratch Made In JavaScript: https://scratch.mit.edu/discuss/topic/171842
Scratch Browser: https://scratch.mit.edu/discuss/topic/285957/
SB2Downloader: https://scratch.mit.edu/discuss/topic/295425/
Multiple work stations: https://scratch.mit.edu/discuss/topic/122484/
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/
Find code easier: https://scratch.mit.edu/discuss/topic/144748/
A Support Button or No support Button: https://scratch.mit.edu/discuss/topic/181154/
I want Scratch grow and become a better place for everyone to come and use. So Scratch needs to expand and have more options for everyone.Scratch needs to break the boundaries and not be trapped by what is familiar to Scratch community
- liam48D
- Scratcher
1000+ posts
ScriftJ - Making Scratch in JavaScript
I get this error when I try to drag a block:
It looks like in your HTML you have this code:
Instead of using an inline event listener, you should use this JavaScript code:
You should also change the updatemouse function:
It looks pretty cool though!
function updatemouse() { mx = event.clientX; // <-- ReferenceError: event is not defined my = event.clientY; }
<div id="blocks" onmousemove="updatemouse()" >
// when the page is loaded... document.getElementById("blocks").addEventListener("mousemove", updatemouse);
function updatemouse(evt) { // Note this paramater mx = evt.clientX; // <-- is happy :) my = evt.clientY; }
202e-202e-202e-202e-202e UNI-CODE~~~~~
- Wetbikeboy2500
- Scratcher
100+ posts
ScriftJ - Making Scratch in JavaScript
Thanks for the help I will be sure to fix that. Also this is actually my first JavaScript project so some things I don't catch or know so thanks for the help and hopefully I won't make those mistake in the future I get this error when I try to drag a block:It looks like in your HTML you have this code:function updatemouse() { mx = event.clientX; // <-- ReferenceError: event is not defined my = event.clientY; }Instead of using an inline event listener, you should use this JavaScript code:<div id="blocks" onmousemove="updatemouse()" >You should also change the updatemouse function:// when the page is loaded... document.getElementById("blocks").addEventListener("mousemove", updatemouse);It looks pretty cool though!function updatemouse(evt) { // Note this paramater mx = evt.clientX; // <-- is happy :) my = evt.clientY; }
Scratch Made In JavaScript: https://scratch.mit.edu/discuss/topic/171842
Scratch Browser: https://scratch.mit.edu/discuss/topic/285957/
SB2Downloader: https://scratch.mit.edu/discuss/topic/295425/
Multiple work stations: https://scratch.mit.edu/discuss/topic/122484/
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/
Find code easier: https://scratch.mit.edu/discuss/topic/144748/
A Support Button or No support Button: https://scratch.mit.edu/discuss/topic/181154/
I want Scratch grow and become a better place for everyone to come and use. So Scratch needs to expand and have more options for everyone.Scratch needs to break the boundaries and not be trapped by what is familiar to Scratch community
- Wetbikeboy2500
- Scratcher
100+ posts
ScriftJ - Making Scratch in JavaScript
Version 10.1.4 is out!!
This update has focused on svg for the blocks no longer use divs and is only svg. Also a lot of the code has been revised and improved. Also there is a new block called shape, this block can change the main sprite to a rectangle or a square. Also minor bug fixes like how the editor didn't re-size. If you have any issues please tell me and I will try to fix it as soon as possible. Another thing is that if you have gone to this site before on both pages do a hard refresh(click this link to find out how http://wiki.scratch.mit.edu/wiki/Hard_Refresh ) for sometimes the js files don't update.
This update has focused on svg for the blocks no longer use divs and is only svg. Also a lot of the code has been revised and improved. Also there is a new block called shape, this block can change the main sprite to a rectangle or a square. Also minor bug fixes like how the editor didn't re-size. If you have any issues please tell me and I will try to fix it as soon as possible. Another thing is that if you have gone to this site before on both pages do a hard refresh(click this link to find out how http://wiki.scratch.mit.edu/wiki/Hard_Refresh ) for sometimes the js files don't update.
Last edited by Wetbikeboy2500 (Jan. 15, 2016 20:02:11)
Scratch Made In JavaScript: https://scratch.mit.edu/discuss/topic/171842
Scratch Browser: https://scratch.mit.edu/discuss/topic/285957/
SB2Downloader: https://scratch.mit.edu/discuss/topic/295425/
Multiple work stations: https://scratch.mit.edu/discuss/topic/122484/
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/
Find code easier: https://scratch.mit.edu/discuss/topic/144748/
A Support Button or No support Button: https://scratch.mit.edu/discuss/topic/181154/
I want Scratch grow and become a better place for everyone to come and use. So Scratch needs to expand and have more options for everyone.Scratch needs to break the boundaries and not be trapped by what is familiar to Scratch community
- ChildCritic
- Scratcher
500+ posts
ScriftJ - Making Scratch in JavaScript
I'm trying to do the exact opposite. It looks great, though!
First AT post XD
First AT post XD
Wings.io!!! Challenge. Contest! How much like me are you? Fall damage Collab Songtrack Crush damage experiment My 100th post! My 250th post! My 500th post!
kumquat poison. Don't try to eat this signature.
- DrKat123
- Scratcher
1000+ posts
ScriftJ - Making Scratch in JavaScript
Javascript in Scratch? I'm trying to do the exact opposite. It looks great, though!
First AT post XD
Welcome to the ATs
Fun fact: ATers can go offtopic at their own will, and i just did m8
Moving from Scratch? Don't learn C or Java, try Snap!
it haz OOP
DrKat McKatFace
First of all I'm 100% human and humans does not have a cat face
and second, the Boaty McBoatFace/Parsey McParseFace madness has just begun
λ
Sharp, my new Scratch mod
Is my post/siggy worthy for an internet?
- Wetbikeboy2500
- Scratcher
100+ posts
ScriftJ - Making Scratch in JavaScript
Hope your project turns out great and thanks for the support I hope to make this even better I'm trying to do the exact opposite. It looks great, though!
First AT post XD
Scratch Made In JavaScript: https://scratch.mit.edu/discuss/topic/171842
Scratch Browser: https://scratch.mit.edu/discuss/topic/285957/
SB2Downloader: https://scratch.mit.edu/discuss/topic/295425/
Multiple work stations: https://scratch.mit.edu/discuss/topic/122484/
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/
Find code easier: https://scratch.mit.edu/discuss/topic/144748/
A Support Button or No support Button: https://scratch.mit.edu/discuss/topic/181154/
I want Scratch grow and become a better place for everyone to come and use. So Scratch needs to expand and have more options for everyone.Scratch needs to break the boundaries and not be trapped by what is familiar to Scratch community
- Wetbikeboy2500
- Scratcher
100+ posts
ScriftJ - Making Scratch in JavaScript
Version 11.0.5 is out with some new fetures so I hope you enjoy!
Scratch Made In JavaScript: https://scratch.mit.edu/discuss/topic/171842
Scratch Browser: https://scratch.mit.edu/discuss/topic/285957/
SB2Downloader: https://scratch.mit.edu/discuss/topic/295425/
Multiple work stations: https://scratch.mit.edu/discuss/topic/122484/
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/
Find code easier: https://scratch.mit.edu/discuss/topic/144748/
A Support Button or No support Button: https://scratch.mit.edu/discuss/topic/181154/
I want Scratch grow and become a better place for everyone to come and use. So Scratch needs to expand and have more options for everyone.Scratch needs to break the boundaries and not be trapped by what is familiar to Scratch community
- Jonathan50
- Scratcher
1000+ posts
ScriftJ - Making Scratch in JavaScript
This is really cool.
But on Firefox the inputs aren't working it's just transparent.
Btw, if you do not know how to wait (blocking) like for the "say [] for []" block, here's how you can do it:
Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)
But on Firefox the inputs aren't working it's just transparent.
Btw, if you do not know how to wait (blocking) like for the "say [] for []" block, here's how you can do it:
var done = false; setTimeout(100, function() { done = true }); while(!done); // now go on
Not yet a Knight of the Mu Calculus.
- kvackkvack
- Scratcher
500+ posts
ScriftJ - Making Scratch in JavaScript
I thought JavaScript only could have one thread? This is really cool.
But on Firefox the inputs aren't working it's just transparent.
Btw, if you do not know how to wait (blocking) like for the "say [] for []" block, here's how you can do it:Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)var done = false; setTimeout(100, function() { done = true }); while(!done); // now go on
In either case, the best way is to treat the waiting blocks is as asynchronous, with a callback function for when you want to continue - just like how actual Scratch does it, IIRC.
Last edited by kvackkvack (Feb. 26, 2016 07:24:51)
- Jonathan50
- Scratcher
1000+ posts
ScriftJ - Making Scratch in JavaScript
…no?I thought JavaScript only could have one thread? This is really cool.
But on Firefox the inputs aren't working it's just transparent.
Btw, if you do not know how to wait (blocking) like for the "say [] for []" block, here's how you can do it:Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)var done = false; setTimeout(100, function() { done = true }); while(!done); // now go on
In either case, the best way is to treat the waiting blocks is as asynchronous, with a callback function for when you want to continue - just like how actual Scratch does it, IIRC.
setTimeout(0, function() { // new thread });
Not yet a Knight of the Mu Calculus.
- kvackkvack
- Scratcher
500+ posts
ScriftJ - Making Scratch in JavaScript
I'd still consider the callback function way being better code.…no?I thought JavaScript only could have one thread? This is really cool.
But on Firefox the inputs aren't working it's just transparent.
Btw, if you do not know how to wait (blocking) like for the "say [] for []" block, here's how you can do it:Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)var done = false; setTimeout(100, function() { done = true }); while(!done); // now go on
In either case, the best way is to treat the waiting blocks is as asynchronous, with a callback function for when you want to continue - just like how actual Scratch does it, IIRC.setTimeout(0, function() { // new thread });
- MathWizz
- Scratcher
100+ posts
ScriftJ - Making Scratch in JavaScript
JavaScript is indeed single threaded. That code would only start the “new thread” when the current script yields.…no?I thought JavaScript only could have one thread? This is really cool.
But on Firefox the inputs aren't working it's just transparent.
Btw, if you do not know how to wait (blocking) like for the "say [] for []" block, here's how you can do it:Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)var done = false; setTimeout(100, function() { done = true }); while(!done); // now go on
In either case, the best way is to treat the waiting blocks is as asynchronous, with a callback function for when you want to continue - just like how actual Scratch does it, IIRC.setTimeout(0, function() { // new thread });
running Chromium 42.0.2311.90 with Flash Player 15.0.0.189 on Arch Linux 3.19.5-1-ck
MathWizz — JsScratch && sb.js & Amber (coming soon! maybe)
- Wetbikeboy2500
- Scratcher
100+ posts
ScriftJ - Making Scratch in JavaScript
That is so far the best way I could think ofI thought JavaScript only could have one thread? This is really cool.
But on Firefox the inputs aren't working it's just transparent.
Btw, if you do not know how to wait (blocking) like for the "say [] for []" block, here's how you can do it:Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)var done = false; setTimeout(100, function() { done = true }); while(!done); // now go on
In either case, the best way is to treat the waiting blocks is as asynchronous, with a callback function for when you want to continue - just like how actual Scratch does it, IIRC.
Last edited by Wetbikeboy2500 (Feb. 26, 2016 17:33:26)
Scratch Made In JavaScript: https://scratch.mit.edu/discuss/topic/171842
Scratch Browser: https://scratch.mit.edu/discuss/topic/285957/
SB2Downloader: https://scratch.mit.edu/discuss/topic/295425/
Multiple work stations: https://scratch.mit.edu/discuss/topic/122484/
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/
Find code easier: https://scratch.mit.edu/discuss/topic/144748/
A Support Button or No support Button: https://scratch.mit.edu/discuss/topic/181154/
I want Scratch grow and become a better place for everyone to come and use. So Scratch needs to expand and have more options for everyone.Scratch needs to break the boundaries and not be trapped by what is familiar to Scratch community
- Wetbikeboy2500
- Scratcher
100+ posts
ScriftJ - Making Scratch in JavaScript
Just went and fixed that in Firefox. It didn't show because you have to state the size of the foreignobject so hopefully it works now and remember to do a hard refresh if they don't show up at first This is really cool.
But on Firefox the inputs aren't working it's just transparent.
Scratch Made In JavaScript: https://scratch.mit.edu/discuss/topic/171842
Scratch Browser: https://scratch.mit.edu/discuss/topic/285957/
SB2Downloader: https://scratch.mit.edu/discuss/topic/295425/
Multiple work stations: https://scratch.mit.edu/discuss/topic/122484/
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/
Find code easier: https://scratch.mit.edu/discuss/topic/144748/
A Support Button or No support Button: https://scratch.mit.edu/discuss/topic/181154/
I want Scratch grow and become a better place for everyone to come and use. So Scratch needs to expand and have more options for everyone.Scratch needs to break the boundaries and not be trapped by what is familiar to Scratch community
- Wetbikeboy2500
- Scratcher
100+ posts
ScriftJ - Making Scratch in JavaScript
That would be great for the css definitely needs to be cleaned up and improved I can do some css for the editor as I am relatively good at it…
Scratch Made In JavaScript: https://scratch.mit.edu/discuss/topic/171842
Scratch Browser: https://scratch.mit.edu/discuss/topic/285957/
SB2Downloader: https://scratch.mit.edu/discuss/topic/295425/
Multiple work stations: https://scratch.mit.edu/discuss/topic/122484/
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/
Find code easier: https://scratch.mit.edu/discuss/topic/144748/
A Support Button or No support Button: https://scratch.mit.edu/discuss/topic/181154/
I want Scratch grow and become a better place for everyone to come and use. So Scratch needs to expand and have more options for everyone.Scratch needs to break the boundaries and not be trapped by what is familiar to Scratch community
- Jonathan50
- Scratcher
1000+ posts
ScriftJ - Making Scratch in JavaScript
…no.JavaScript is indeed single threaded. That code would only start the “new thread” when the current script yields.…no?I thought JavaScript only could have one thread? This is really cool.
But on Firefox the inputs aren't working it's just transparent.
Btw, if you do not know how to wait (blocking) like for the "say [] for []" block, here's how you can do it:Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)var done = false; setTimeout(100, function() { done = true }); while(!done); // now go on
In either case, the best way is to treat the waiting blocks is as asynchronous, with a callback function for when you want to continue - just like how actual Scratch does it, IIRC.setTimeout(0, function() { // new thread });
Why do you think that?
Not yet a Knight of the Mu Calculus.
- BookOwl
- Scratcher
1000+ posts
ScriftJ - Making Scratch in JavaScript
Did you try that code? It shouldn't work, because the function given to setTimeout won't run until the current function yields, which won't happen until the function given to setTimeout runs, which means you have a deadlock!…no.JavaScript is indeed single threaded. That code would only start the “new thread” when the current script yields.…no?I thought JavaScript only could have one thread? This is really cool.
But on Firefox the inputs aren't working it's just transparent.
Btw, if you do not know how to wait (blocking) like for the "say [] for []" block, here's how you can do it:Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)var done = false; setTimeout(100, function() { done = true }); while(!done); // now go on
In either case, the best way is to treat the waiting blocks is as asynchronous, with a callback function for when you want to continue - just like how actual Scratch does it, IIRC.setTimeout(0, function() { // new thread });
Why do you think that?
who needs signatures
- __init__
- Scratcher
1000+ posts
ScriftJ - Making Scratch in JavaScript
I like it! The only bug I found is that the say ___ for ___ block doesn't actually wait at all. But it's really cool!
thisandagain pls explain
- Discussion Forums
- » Advanced Topics
- » ScriftJ - Making Scratch in JavaScript