Scratch

scratchisthebest · 2011-12-01 15:39:19

sry 4 dblpost but (Translation: Sorry for the double-post but...)

midnightleopard wrote:
...
It looked like this:
Code:
setInterval(function(){
clear();
draw();
drive();
}, 15);

Oh yayayayayayayay! It works!

midnightleopard · 2011-12-01 16:54:25

scratchisthebest wrote:
Well, there isn't a magic button to make a project into HTML5. You'll need to get your hands dirty in Canvas.

==Scratch to HTML5 Mini-Tutorial==
1. Go to the library and find a good JS Canvas book.
2. Use the tools presented in the book to make a copy of a Scratch project.
3. Share.
4. Profit!!!111!!1!
==End of Mini-Tutorial==

There aren't books about canvas yet because it is still in developement.

midnightleopard · 2011-12-01 16:56:35

I guess one question still remains...

flashgocrazy · 2011-12-01 17:05:41

midnightleopard wrote:
I guess one question still remains...
http://textspace.net/img/1322776553_002 … 776553.gif

MEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE!!!!!

Magnie · 2011-12-01 17:14:54

The most I can see from the project is that you coded everything in JS and made the screen with a variable called canvas. And the HTML5 element canvas.

Pretty cool.

Last edited by Magnie (2011-12-01 17:19:50)

ohaiderstudios · 2011-12-01 17:29:50

midnightleopard wrote:
I guess one question still remains...
http://textspace.net/img/1322776553_002 … 776553.gif

IIIIIIIII DDDDDDDOOOOOOOOOOOO!!!!!!!!!!!!!!!!!!! big_smile

MoreGamesNow · 2011-12-01 22:52:27

Magnie wrote:
The most I can see from the project is that you coded everything in JS and made the screen with a variable called canvas. And the HTML5 element canvas.

Pretty cool.

Canvas is actually a HTML tag, though you're correct in a certain sense, because you do have to set a variable to the tag (i.e. document.getElementById("CanvasId") )

Last edited by MoreGamesNow (2011-12-01 22:52:34)

Magnie · 2011-12-01 23:09:31

MoreGamesNow wrote:
Magnie wrote:
The most I can see from the project is that you coded everything in JS and made the screen with a variable called canvas. And the HTML5 element canvas.

Pretty cool.
Canvas is actually a HTML tag, though you're correct in a certain sense, because you do have to set a variable to the tag (i.e. document.getElementById("CanvasId") )

HTML "tag" and "element" are the same thing. tongue

Hardmath123 · 2011-12-02 05:53:56

Of course, you could document.write or body.innerHTML+= it and have almost NO html (except for the import statement).

scratchisthebest · 2011-12-02 15:41:52

midnightleopard wrote:
scratchisthebest wrote:
Well, there isn't a magic button to make a project into HTML5. You'll need to get your hands dirty in Canvas.

==Scratch to HTML5 Mini-Tutorial==
1. Go to the library and find a good JS Canvas book.
2. Use the tools presented in the book to make a copy of a Scratch project.
3. Share.
4. Profit!!!111!!1!
==End of Mini-Tutorial==
There aren't books about canvas yet because it is still in developement.

Then why do I have one? smile
It's called Foundation HTML5 Canvas for Games and Entertainment. I like it.

midnightleopard · 2011-12-02 16:18:25

scratchisthebest wrote:
midnightleopard wrote:
scratchisthebest wrote:
Well, there isn't a magic button to make a project into HTML5. You'll need to get your hands dirty in Canvas.

==Scratch to HTML5 Mini-Tutorial==
1. Go to the library and find a good JS Canvas book.
2. Use the tools presented in the book to make a copy of a Scratch project.
3. Share.
4. Profit!!!111!!1!
==End of Mini-Tutorial==
There aren't books about canvas yet because it is still in developement.
Then why do I have one?
It's called Foundation HTML5 Canvas for Games and Entertainment. I like it.

woa.

I taught myself canvas but I've got to get that.

nXIII · 2011-12-02 17:11:55

Magnie wrote:
HTML "tag" and "element" are the same thing.

Tag usually refers to a <>'d piece of the source code, like '<p class="important">'.
Element usually refers to a node in the DOM that represents a tag.

So in this case, the '<canvas...>' is a tag, and the corresponding element is retrieved in the script using the getElementById method.

MoreGamesNow · 2011-12-02 23:01:47

To expand to those of you who want to know (sorry midnightleopard for stealing your thunder tongue ), you have make a canvas element, give it an "id", and then you can use JavaScript to draw on the canvas. Here is some sample code (you have a Canvas Tag with the id of "cvs")

Code:

var c_cvs = document.getElementById("cvs");     // basically sets c_cvs to the canvas tag
var context = c_cvs.getContext("2d");                // you'll use this to draw to the canvas
context.fillRect(10,10,30,50);

/* the above script makes a rectangle,
with one corner at the coordinates 10,10,
and the coordinates of the second corner
at (10+30),(10+50).  It is basically
context.fillRect(x,y,width,height)
*/

Of course, there are tons of different keywords to learn. You can draw lines, past images, draw arcs, text, and many other cool things!

Last edited by MoreGamesNow (2011-12-02 23:02:13)

MathWizz · 2011-12-02 23:11:32

@MoreGamesNow you forgot that the canvas id is 'poop'. lol

MoreGamesNow · 2011-12-03 09:35:54

MathWizz wrote:
@MoreGamesNow you forgot that the canvas id is 'poop'.

I knew I forgot something! big_smile

cocolover76 · 2011-12-03 10:11:52

cocolover76 wrote:
You should switch to SVG, that way you don't have to use a separate element for the score.

There are books on SVG.
Thick ones.
There's even more support for SVG than Canvas.

MathWizz · 2011-12-04 13:54:00

And the reason you can't have text on a canvas is...?

scratchisthebest · 2011-12-04 16:27:39

MathWizz wrote:
And the reason you can't have text on a canvas is...?

WRONG!!!!!1!11!111 tongue
sorry... I had to do that.

Code:

var poopy = document.getElementById("poop");
var pen = poopy.getContext("2d");
var text = "Hello canvassssssssy";
var x = 40;
var y = 40;
pen.fillText(text, x, y);

MathWizz · 2011-12-04 17:28:31

It was a question. -.-

scratchisthebest · 2011-12-04 17:59:17

MathWizz wrote:
It was a question. -.-

oh. :::)

jji7skyline · 2011-12-04 19:00:28

Cool!

midnightleopard · 2011-12-04 19:40:16

Actually, you CAN have text in canvas and I knew that. I was just being lazy. Also there are compatibility issues with text in canvas, but there are work arounds.

I have seen SVG, but I love canvas to much to learn another.

Proanimation · 2013-01-27 22:53:09

Good job with making the port! Also I created a website just for HTML5 canvas games: www.html5gamer.weebly.com

Also stick with canvas because SVG doesn'tn support good fast drawing. I am currently trying to make a .exe file to convert .sb to HTML5.

nathanprocks · 2013-01-28 21:56:53

Necropost ^^
I don't remember if I have seen this before, but it would be awesome if someone wrote a JS library that uses Scratch-like commands!

Proanimation · 2013-02-11 19:57:18

nathanprocks wrote:
Necropost ^^
I don't remember if I have seen this before, but it would be awesome if someone wrote a JS library that uses Scratch-like commands!

Good idea, I am going to make that JS library!

Scratch

archived forums

#26 2011-12-01 15:39:19

Re: Scratch Canvas Porting

midnightleopard wrote:

Code:

#27 2011-12-01 16:54:25

Re: Scratch Canvas Porting

scratchisthebest wrote:

#28 2011-12-01 16:56:35

Re: Scratch Canvas Porting

#29 2011-12-01 17:05:41

Re: Scratch Canvas Porting

midnightleopard wrote:

#30 2011-12-01 17:14:54

Re: Scratch Canvas Porting

#31 2011-12-01 17:29:50

Re: Scratch Canvas Porting

midnightleopard wrote:

#32 2011-12-01 22:52:27

Re: Scratch Canvas Porting

Magnie wrote:

#33 2011-12-01 23:09:31

Re: Scratch Canvas Porting

MoreGamesNow wrote:

Magnie wrote:

#34 2011-12-02 05:53:56

Re: Scratch Canvas Porting

#35 2011-12-02 15:41:52

Re: Scratch Canvas Porting

midnightleopard wrote:

scratchisthebest wrote:

#36 2011-12-02 16:18:25

Re: Scratch Canvas Porting

scratchisthebest wrote:

midnightleopard wrote:

scratchisthebest wrote:

#37 2011-12-02 17:11:55

Re: Scratch Canvas Porting

Magnie wrote:

#38 2011-12-02 23:01:47

Re: Scratch Canvas Porting

Code:

#39 2011-12-02 23:11:32

Re: Scratch Canvas Porting

#40 2011-12-03 09:35:54

Re: Scratch Canvas Porting

MathWizz wrote:

#41 2011-12-03 10:11:52

Re: Scratch Canvas Porting

cocolover76 wrote:

#42 2011-12-04 13:54:00

Re: Scratch Canvas Porting

#43 2011-12-04 16:27:39

Re: Scratch Canvas Porting

MathWizz wrote:

Code:

#44 2011-12-04 17:28:31

Re: Scratch Canvas Porting

#45 2011-12-04 17:59:17

Re: Scratch Canvas Porting

MathWizz wrote:

#46 2011-12-04 19:00:28

Re: Scratch Canvas Porting

#47 2011-12-04 19:40:16

Re: Scratch Canvas Porting

#48 2013-01-27 22:53:09

Re: Scratch Canvas Porting

#49 2013-01-28 21:56:53

Re: Scratch Canvas Porting

#50 2013-02-11 19:57:18

Re: Scratch Canvas Porting

nathanprocks wrote:

Board footer