Scratch

midnightleopard · 2011-10-16 14:18:15

Hey Scratch,
Lately I have been playing around with the HTML 5 Canvas element. It is a great new way to create games on the internet without flash or java. Long story short, I decided to port my first scratch project into Canvas.

Here is my first scratch project (click the image):

and here is the HTML 5 project:

Canvas Grave Keeper

I am working on writing a tutorial on porting Scratch projects into Canvas.
Questions? Comments?

Last edited by midnightleopard (2011-10-16 14:19:31)

midnightleopard · 2011-10-16 17:39:06

bump

rookwood101 · 2011-10-16 17:41:59

cool! it works really well!

midnightleopard · 2011-10-16 17:52:55

rookwood101 wrote:
cool! it works really well!

Thanks! I am working on porting some more old games and making some new games.

rookwood101 · 2011-10-16 17:54:14

midnightleopard wrote:
rookwood101 wrote:
cool! it works really well!
Thanks! I am working on porting some more old games and making some new games.

well good luck, I'm sure it's a difficult thing to do.

ohaiderstudios · 2011-10-16 18:13:57

I like it! I love canvas and I'm glad that people are using it to port games made in scratch.

djdolphin · 2011-11-26 09:07:12

Cool! How did you do you port it to html5?

Last edited by djdolphin (2011-11-26 09:10:02)

flashgocrazy · 2011-11-26 15:20:53

Tell Us How To Do It

cocolover76 · 2011-11-26 20:46:53

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

flashgocrazy · 2011-11-26 21:00:44

my favorite part of the code:

Code:

function init(){
    canvas = document.getElementById("poop");
    ctx = canvas.getContext("2d");
    skeletonobj.x = randomX();
    skeletonobj.y = randomY();
    score = 0;
    setInterval(function(){
    clear();
    draw();
    drive();
    }, 15);
    }

look at line 2 in the code i posted :p XD lol

scratchisthebest · 2011-11-27 12:11:00

Just started using Canvas. I'm sad. I can't figure out how to make a ing animation loop.

::(

Last edited by scratchisthebest (2011-11-27 12:11:33)

Dawgles · 2011-11-27 12:33:34

...Why did you name your canvas element "poop"?

jurk · 2011-11-27 12:41:18

This is Epic big_smile

ohaiderstudios · 2011-11-27 15:48:19

Dawgles wrote:
...Why did you name your canvas element "poop"?

+1
I was wondering the sane thing

midnightleopard · 2011-11-27 17:36:03

Oh hi!
I forgot about this thread because I had to bump it so much.
I forgot about the canvas name...

Long Story:
I started out with that whole thing as just a quick test, but it later evolved into a sophisticated port of grave keeper.

Short Story:
I'm immature.

midnightleopard · 2011-11-27 17:38:24

scratchisthebest wrote:
Just started using Canvas. I'm sad. I can't figure out how to make a http://scratch.mit.edu/img/pages/credit … bullet.gifing animation loop.

:

What are you trying to say with the cat face?
Anyways, you can make a loop with the setInterval(function, interval-in-milliseconds) function and make three functions for drawing, updating variables, and erasing. I used
draw();
drive();
clear();

It looked like this:

Code:

setInterval(function(){
clear();
draw();
drive();
}, 15);

MoreGamesNow · 2011-11-27 17:57:11

Oh!!! Kind of off topic, but I'd rather ask in a pre-existing thread than make a new one, and you said the word "setInterval" so I'm asking here: I've used setInterval successfully before, but now I'm trying to use it to run some AJAX, but it won't work. Is this because I'm running AJAX, or should I keep debugging?.

P.S. Right know I'm using a make-shift "setInterval" that basically runs itself every time a marque text finishes its cycle. big_smile

midnightleopard · 2011-11-28 08:02:42

MoreGamesNow wrote:
Oh!!! Kind of off topic, but I'd rather ask in a pre-existing thread than make a new one, and you said the word "setInterval" so I'm asking here: I've used setInterval successfully before, but now I'm trying to use it to run some AJAX, but it won't work. Is this because I'm running AJAX, or should I keep debugging?.

P.S. Right know I'm using a make-shift "setInterval" that basically runs itself every time a marque text finishes its cycle.

Um... Well I don't really understand how AJAX could stop an interval loop, but I do know that that function is very delicate as in lots of things can stop it from working.

flashgocrazy · 2011-11-29 16:57:59

midnightleopard wrote:
MoreGamesNow wrote:
Oh!!! Kind of off topic, but I'd rather ask in a pre-existing thread than make a new one, and you said the word "setInterval" so I'm asking here: I've used setInterval successfully before, but now I'm trying to use it to run some AJAX, but it won't work. Is this because I'm running AJAX, or should I keep debugging?.

P.S. Right know I'm using a make-shift "setInterval" that basically runs itself every time a marque text finishes its cycle.
Um... Well I don't really understand how AJAX could stop an interval loop, but I do know that that function is very delicate as in lots of things can stop it from working.

HOW DO YOU DO THAT?

midnightleopard · 2011-11-29 17:00:19

flashgocrazy wrote:
midnightleopard wrote:
MoreGamesNow wrote:
Oh!!! Kind of off topic, but I'd rather ask in a pre-existing thread than make a new one, and you said the word "setInterval" so I'm asking here: I've used setInterval successfully before, but now I'm trying to use it to run some AJAX, but it won't work. Is this because I'm running AJAX, or should I keep debugging?.

P.S. Right know I'm using a make-shift "setInterval" that basically runs itself every time a marque text finishes its cycle.
Um... Well I don't really understand how AJAX could stop an interval loop, but I do know that that function is very delicate as in lots of things can stop it from working.
HOW DO YOU DO THAT?

do what?

flashgocrazy · 2011-11-29 17:14:28

midnightleopard wrote:
flashgocrazy wrote:
midnightleopard wrote:

Um... Well I don't really understand how AJAX could stop an interval loop, but I do know that that function is very delicate as in lots of things can stop it from working.
HOW DO YOU DO THAT?
do what?

DA CANVAS PORTING

midnightleopard · 2011-11-30 15:49:37

flashgocrazy wrote:
midnightleopard wrote:
flashgocrazy wrote:

HOW DO YOU DO THAT?
do what?
DA CANVAS PORTING

Ok. The post you quoted is irrelevant to your reply. Don't do that. If enough people want, I can make a tutorial.

flashgocrazy · 2011-11-30 16:14:29

midnightleopard wrote:
flashgocrazy wrote:
midnightleopard wrote:

do what?
DA CANVAS PORTING
Ok. The post you quoted is irrelevant to your reply. Don't do that. If enough people want, I can make a tutorial.

SERIOUSLY, I NEED A TUT FOR HOW TO DO IT

danieltpt · 2011-12-01 08:38:58

i would like to know how to convert scratch to HTML5 also.

Please do create a tutorial to teach us.

thanks a lot.<move( )steps>

scratchisthebest · 2011-12-01 15:36:21

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==

Scratch

archived forums

#1 2011-10-16 14:18:15

Scratch Canvas Porting

#2 2011-10-16 17:39:06

Re: Scratch Canvas Porting

#3 2011-10-16 17:41:59

Re: Scratch Canvas Porting

#4 2011-10-16 17:52:55

Re: Scratch Canvas Porting

rookwood101 wrote:

#5 2011-10-16 17:54:14

Re: Scratch Canvas Porting

midnightleopard wrote:

rookwood101 wrote:

#6 2011-10-16 18:13:57

Re: Scratch Canvas Porting

#7 2011-11-26 09:07:12

Re: Scratch Canvas Porting

#8 2011-11-26 15:20:53

Re: Scratch Canvas Porting

#9 2011-11-26 20:46:53

Re: Scratch Canvas Porting

#10 2011-11-26 21:00:44

Re: Scratch Canvas Porting

Code:

#11 2011-11-27 12:11:00

Re: Scratch Canvas Porting

#12 2011-11-27 12:33:34

Re: Scratch Canvas Porting

#13 2011-11-27 12:41:18

Re: Scratch Canvas Porting

#14 2011-11-27 15:48:19

Re: Scratch Canvas Porting

Dawgles wrote:

#15 2011-11-27 17:36:03

Re: Scratch Canvas Porting

#16 2011-11-27 17:38:24

Re: Scratch Canvas Porting

scratchisthebest wrote:

Code:

#17 2011-11-27 17:57:11

Re: Scratch Canvas Porting

#18 2011-11-28 08:02:42

Re: Scratch Canvas Porting

MoreGamesNow wrote:

#19 2011-11-29 16:57:59

Re: Scratch Canvas Porting

midnightleopard wrote:

MoreGamesNow wrote:

#20 2011-11-29 17:00:19

Re: Scratch Canvas Porting

flashgocrazy wrote:

midnightleopard wrote:

MoreGamesNow wrote:

#21 2011-11-29 17:14:28

Re: Scratch Canvas Porting

midnightleopard wrote:

flashgocrazy wrote:

midnightleopard wrote:

#22 2011-11-30 15:49:37

Re: Scratch Canvas Porting

flashgocrazy wrote:

midnightleopard wrote:

flashgocrazy wrote:

#23 2011-11-30 16:14:29

Re: Scratch Canvas Porting

midnightleopard wrote:

flashgocrazy wrote:

midnightleopard wrote:

#24 2011-12-01 08:38:58

Re: Scratch Canvas Porting

#25 2011-12-01 15:36:21

Re: Scratch Canvas Porting

Board footer