Discuss Scratch

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/ (25 Supporters)
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508 (7 Supporters)
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/ (7 Supporters)
Find code easier: https://scratch.mit.edu/discuss/topic/144748/ (5 Supporters)
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:
function updatemouse() {
	mx = event.clientX; // <-- ReferenceError: event is not defined
	my = event.clientY;
}
It looks like in your HTML you have this code:
<div id="blocks" onmousemove="updatemouse()" >
Instead of using an inline event listener, you should use this JavaScript code:
// when the page is loaded...
document.getElementById("blocks").addEventListener("mousemove", updatemouse);
You should also change the updatemouse function:
function updatemouse(evt) { // Note this paramater
	mx = evt.clientX; // <-- is happy :)
	my = evt.clientY;
}
It looks pretty cool though!

202e-202e-202e-202e-202e UNI-CODE~~~~~
Wetbikeboy2500
Scratcher
100+ posts

ScriftJ - Making Scratch in JavaScript

liam48D wrote:

I get this error when I try to drag a block:
function updatemouse() {
	mx = event.clientX; // <-- ReferenceError: event is not defined
	my = event.clientY;
}
It looks like in your HTML you have this code:
<div id="blocks" onmousemove="updatemouse()" >
Instead of using an inline event listener, you should use this JavaScript code:
// when the page is loaded...
document.getElementById("blocks").addEventListener("mousemove", updatemouse);
You should also change the updatemouse function:
function updatemouse(evt) { // Note this paramater
	mx = evt.clientX; // <-- is happy :)
	my = evt.clientY;
}
It looks pretty cool though!
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

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/ (25 Supporters)
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508 (7 Supporters)
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/ (7 Supporters)
Find code easier: https://scratch.mit.edu/discuss/topic/144748/ (5 Supporters)
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.

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/ (25 Supporters)
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508 (7 Supporters)
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/ (7 Supporters)
Find code easier: https://scratch.mit.edu/discuss/topic/144748/ (5 Supporters)
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
DrKat123
Scratcher
1000+ posts

ScriftJ - Making Scratch in JavaScript

ChildCritic wrote:

I'm trying to do the exact opposite. It looks great, though!
First AT post XD
Javascript in Scratch?
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

ChildCritic wrote:

I'm trying to do the exact opposite. It looks great, though!
First AT post XD
Hope your project turns out great and thanks for the support I hope to make this even better

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/ (25 Supporters)
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508 (7 Supporters)
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/ (7 Supporters)
Find code easier: https://scratch.mit.edu/discuss/topic/144748/ (5 Supporters)
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/ (25 Supporters)
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508 (7 Supporters)
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/ (7 Supporters)
Find code easier: https://scratch.mit.edu/discuss/topic/144748/ (5 Supporters)
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
hiccup01
Scratcher
100+ posts

ScriftJ - Making Scratch in JavaScript

I can do some css for the editor as I am relatively good at it…

| git | kybs | I | Jag lära sig svenska.
Floorball is a fast indoor rink sport played with lightweight sticks with a strong plastic blade. On the rink there are 5 players + goalie (Me). Even though it requires fast reactions and quick thinking it's great for anybody wanting to have fun. Still want to get a taste for floorball? Watch this!
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:
var done = false;
setTimeout(100, function() { done = true });
while(!done);
// now go on
Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)
kvackkvack
Scratcher
500+ posts

ScriftJ - Making Scratch in JavaScript

Jonathan50 wrote:

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:
var done = false;
setTimeout(100, function() { done = true });
while(!done);
// now go on
Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)
I thought JavaScript only could have one thread?
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

kvackkvack wrote:

Jonathan50 wrote:

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:
var done = false;
setTimeout(100, function() { done = true });
while(!done);
// now go on
Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)
I thought JavaScript only could have one thread?
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.
…no?
setTimeout(0, function() {
  // new thread
});
kvackkvack
Scratcher
500+ posts

ScriftJ - Making Scratch in JavaScript

Jonathan50 wrote:

kvackkvack wrote:

Jonathan50 wrote:

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:
var done = false;
setTimeout(100, function() { done = true });
while(!done);
// now go on
Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)
I thought JavaScript only could have one thread?
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.
…no?
setTimeout(0, function() {
  // new thread
});
I'd still consider the callback function way being better code.
MathWizz
Scratcher
100+ posts

ScriftJ - Making Scratch in JavaScript

Jonathan50 wrote:

kvackkvack wrote:

Jonathan50 wrote:

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:
var done = false;
setTimeout(100, function() { done = true });
while(!done);
// now go on
Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)
I thought JavaScript only could have one thread?
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.
…no?
setTimeout(0, function() {
  // new thread
});
JavaScript is indeed single threaded. That code would only start the “new thread” when the current script yields.

running Chromium 42.0.2311.90 with Flash Player 15.0.0.189 on Arch Linux 3.19.5-1-ck
MathWizzJsScratch && sb.js & Amber (coming soon! maybe)
Wetbikeboy2500
Scratcher
100+ posts

ScriftJ - Making Scratch in JavaScript

kvackkvack wrote:

Jonathan50 wrote:

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:
var done = false;
setTimeout(100, function() { done = true });
while(!done);
// now go on
Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)
I thought JavaScript only could have one thread?
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.
That is so far the best way I could think of

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/ (25 Supporters)
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508 (7 Supporters)
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/ (7 Supporters)
Find code easier: https://scratch.mit.edu/discuss/topic/144748/ (5 Supporters)
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

Jonathan50 wrote:

This is really cool.
But on Firefox the inputs aren't working it's just transparent.
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

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/ (25 Supporters)
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508 (7 Supporters)
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/ (7 Supporters)
Find code easier: https://scratch.mit.edu/discuss/topic/144748/ (5 Supporters)
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

hiccup01 wrote:

I can do some css for the editor as I am relatively good at it…
That would be great for the css definitely needs to be cleaned up and improved

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/ (25 Supporters)
New Blocks for Displaying Text: https://scratch.mit.edu/discuss/topic/171508 (7 Supporters)
Sprite Folders: https://scratch.mit.edu/discuss/topic/171569/ (7 Supporters)
Find code easier: https://scratch.mit.edu/discuss/topic/144748/ (5 Supporters)
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

MathWizz wrote:

Jonathan50 wrote:

kvackkvack wrote:

Jonathan50 wrote:

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:
var done = false;
setTimeout(100, function() { done = true });
while(!done);
// now go on
Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)
I thought JavaScript only could have one thread?
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.
…no?
setTimeout(0, function() {
  // new thread
});
JavaScript is indeed single threaded. That code would only start the “new thread” when the current script yields.
…no.
Why do you think that?
BookOwl
Scratcher
1000+ posts

ScriftJ - Making Scratch in JavaScript

Jonathan50 wrote:

MathWizz wrote:

Jonathan50 wrote:

kvackkvack wrote:

Jonathan50 wrote:

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:
var done = false;
setTimeout(100, function() { done = true });
while(!done);
// now go on
Remember that this will block the thread, so be sure not to do it in the main thread (or the page will hang!!)
I thought JavaScript only could have one thread?
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.
…no?
setTimeout(0, function() {
  // new thread
});
JavaScript is indeed single threaded. That code would only start the “new thread” when the current script yields.
…no.
Why do you think that?
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!

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!

Powered by DjangoBB

Standard | Mobile