This is a read-only archive of the old Scratch 1.x Forums.
Try searching the current Scratch discussion forums.

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

midnightleopard
Scratcher
Registered: 2007-09-13
Posts: 1000+

Scratch Canvas Porting

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):
http://scratch.mit.edu/static/projects/midnightleopard/36200_sm.png

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)


http://pwp.wizards.com/5103673563/Scorecards/Landscape.png

Offline

 

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

midnightleopard
Scratcher
Registered: 2007-09-13
Posts: 1000+

Re: Scratch Canvas Porting

bump


http://pwp.wizards.com/5103673563/Scorecards/Landscape.png

Offline

 

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

rookwood101
Scratcher
Registered: 2011-07-29
Posts: 500+

Re: Scratch Canvas Porting

cool! it works really well!


http://i.imgur.com/zeIZW.png

Offline

 

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

midnightleopard
Scratcher
Registered: 2007-09-13
Posts: 1000+

Re: Scratch Canvas Porting

rookwood101 wrote:

cool! it works really well!

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


http://pwp.wizards.com/5103673563/Scorecards/Landscape.png

Offline

 

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

rookwood101
Scratcher
Registered: 2011-07-29
Posts: 500+

Re: Scratch Canvas Porting

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.


http://i.imgur.com/zeIZW.png

Offline

 

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

ohaiderstudios
Scratcher
Registered: 2010-10-31
Posts: 100+

Re: Scratch Canvas Porting

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


Fork Clamor on GitHub!

Offline

 

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

djdolphin
Scratcher
Registered: 2010-03-23
Posts: 100+

Re: Scratch Canvas Porting

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

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

Offline

 

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

flashgocrazy
Scratcher
Registered: 2011-01-12
Posts: 500+

Re: Scratch Canvas Porting

Tell Us How To Do It


◕‿◕

Offline

 

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

cocolover76
Scratcher
Registered: 2011-10-09
Posts: 500+

Re: Scratch Canvas Porting

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


http://i.imgur.com/HfEPZ.gifhttp://i.imgur.com/pvKb6.png

Offline

 

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

flashgocrazy
Scratcher
Registered: 2011-01-12
Posts: 500+

Re: Scratch Canvas Porting

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


◕‿◕

Offline

 

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

scratchisthebest
Scratcher
Registered: 2009-02-08
Posts: 500+

Re: Scratch Canvas Porting

Just started using Canvas. I'm sad. I can't figure out how to make a http://scratch.mit.edu/img/pages/credits/cat-face-bullet.gifing animation loop.

::(

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


bye 1.4, we all loved you. but we all outgrew the site. 2.0 is a welcome change.
http://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.png

Offline

 

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

Dawgles
Scratcher
Registered: 2011-07-29
Posts: 100+

Re: Scratch Canvas Porting

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

Offline

 

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

jurk
Scratcher
Registered: 2010-05-06
Posts: 100+

Re: Scratch Canvas Porting

This is Epic  big_smile


http://dl.dropbox.com/u/54228408/cool.png

Offline

 

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

ohaiderstudios
Scratcher
Registered: 2010-10-31
Posts: 100+

Re: Scratch Canvas Porting

Dawgles wrote:

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

+1
I was wondering the sane thing


Fork Clamor on GitHub!

Offline

 

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

midnightleopard
Scratcher
Registered: 2007-09-13
Posts: 1000+

Re: Scratch Canvas Porting

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.


http://pwp.wizards.com/5103673563/Scorecards/Landscape.png

Offline

 

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

midnightleopard
Scratcher
Registered: 2007-09-13
Posts: 1000+

Re: Scratch Canvas Porting

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.

: sad

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);

http://pwp.wizards.com/5103673563/Scorecards/Landscape.png

Offline

 

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

MoreGamesNow
Scratcher
Registered: 2009-10-12
Posts: 1000+

Re: Scratch Canvas Porting

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


http://images2.layoutsparks.com/1/218929/rubiks-cube-animated-rotating.gif
"Cogito ergo sum" --  I think, therefore I am

Offline

 

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

midnightleopard
Scratcher
Registered: 2007-09-13
Posts: 1000+

Re: Scratch Canvas Porting

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.   big_smile

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.


http://pwp.wizards.com/5103673563/Scorecards/Landscape.png

Offline

 

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

flashgocrazy
Scratcher
Registered: 2011-01-12
Posts: 500+

Re: Scratch Canvas Porting

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.   big_smile

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?


◕‿◕

Offline

 

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

midnightleopard
Scratcher
Registered: 2007-09-13
Posts: 1000+

Re: Scratch Canvas Porting

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.   big_smile

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?


http://pwp.wizards.com/5103673563/Scorecards/Landscape.png

Offline

 

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

flashgocrazy
Scratcher
Registered: 2011-01-12
Posts: 500+

Re: Scratch Canvas Porting

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


◕‿◕

Offline

 

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

midnightleopard
Scratcher
Registered: 2007-09-13
Posts: 1000+

Re: Scratch Canvas Porting

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.


http://pwp.wizards.com/5103673563/Scorecards/Landscape.png

Offline

 

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

flashgocrazy
Scratcher
Registered: 2011-01-12
Posts: 500+

Re: Scratch Canvas Porting

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


◕‿◕

Offline

 

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

danieltpt
New Scratcher
Registered: 2011-11-21
Posts: 1

Re: Scratch Canvas Porting

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>

Offline

 

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

scratchisthebest
Scratcher
Registered: 2009-02-08
Posts: 500+

Re: Scratch Canvas Porting

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


bye 1.4, we all loved you. but we all outgrew the site. 2.0 is a welcome change.
http://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.pnghttp://scratch.mit.edu/img/Pico3-med.png

Offline

 

Board footer