Taneb wrote:
Also, CSS is used for positioning (don't see how it could be done with just HTML and Javascript), and I thought PHP was being used for the file upload.
_____________________________________
W00T! 44 PAGES!!
Last edited by comp500 (2011-04-30 09:53:07)
Offline
Taneb wrote:
What makes you think people can drag img tags? Clicking and dragging doesn't change their location.
But... they can copy them and also it gets in the way of normal clicking and dragging in scratch. eg:
[blocks]
<when green flag clicked>
<forever>
<if> mouse down
<go to[ mouse-pointer
<end>
<end>
[/blocks]
So if someone wants to drag something, like in an OS, it'll get all messed up...
Offline
Well, I can't help much with this project because I no one knows how to do any of this, but as an experienced web developer / student, I have some tips:
A popup keyboard would make iOS lag at an inhuman level.
Canvas is incredibly stable and fast, and a single canvas with javascript would be your best bet.
Moving image tags with javascript and css would be unbearably slow.
Offline
Taneb wrote:
Makes sense...
But how about the Sprite is touching sprite block? I would have done that with image maps, I don't think divs would work... But prove me wrong, why don't you?
how would you do the code for [blocks]<touching[ sprite [/blocks] anyway?
Offline
midnightleopard wrote:
Well, I can't help much with this project because I no one knows how to do any of this, but as an experienced web developer / student, I have some tips:
A popup keyboard would make iOS lag at an inhuman level.
Canvas is incredibly stable and fast, and a single canvas with javascript would be your best bet.
Moving image tags with javascript and css would be unbearably slow.
is not. wonder what v8 will think of this (chrome's javascript engine...)
Offline
A example of a game.
Using only HTML5 (canvas) and Javascript.
Don't use IE to view it.
Offline
Lets start it off simple, first try and display this project.
As it only has 2 costumes and 2 blocks it should be a good starting point.
Offline
how do you read .sb files in JS?
I could help alot if I knew how
Last edited by midnightleopard (2011-05-01 07:49:32)
Offline
johnnydean1 wrote:
A example of a game.
Using only HTML5 (canvas) and Javascript.
Don't use IE to view it.
Instead of using "OnKeyPress" (which I assume you're using), a method I have found to smoother is this:
Make a list called "Buttons" and make is as long as the number of buttons you want.
If the first item will be the "A" key, then make it so that whenever A is pressed, set the first element (element 0) to "true". When A is released, set the first element to "false". Then, just access the list every "frame" with a function.
<HEAD>
<SCRIPT type="text/javascript">
var InputArray=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
function Keydown()
{
if (event.keyCode==32)
{
InputArray[37]=1;
}
var kp=String.fromCharCode(event.keyCode);
if (kp=="a")
{
InputArray[1]=1;
}
else if(kp=="b")
{
InputArray[2]=1;
}
else if(kp=="c")
{
InputArray[3]=1;
}
else if(kp=="d")
{
InputArray[4]=1;
}
else if(kp=="e")
{
InputArray[5]=1;
}
else if(kp=="f")
{
InputArray[6]=1;
}
else if(kp=="g")
{
InputArray[7]=1;
}
else if(kp=="h")
{
InputArray[8]=1;
}
else if(kp=="i")
{
InputArray[9]=1;
}
else if(kp=="j")
{
InputArray[10]=1;
}
else if(kp=="k")
{
InputArray[11]=1;
}
else if(kp=="l")
{
InputArray[12]=1;
}
else if(kp=="m")
{
InputArray[13]=1;
}
else if(kp=="n")
{
InputArray[14]=1;
}
else if(kp=="o")
{
InputArray[15]=1;
}
else if(kp=="p")
{
InputArray[16]=1;
}
else if(kp=="q")
{
InputArray[17]=1;
}
else if(kp=="r")
{
InputArray[18]=1;
}
else if(kp=="s")
{
InputArray[19]=1;
}
else if(kp=="t")
{
InputArray[20]=1;
}
else if(kp=="u")
{
InputArray[21]=1;
}
else if(kp=="v")
{
InputArray[22]=1;
}
else if(kp=="w")
{
InputArray[23]=1;
}
else if(kp=="x")
{
InputArray[24]=1;
}
else if(kp=="y")
{
InputArray[25]=1;
}
else if(kp=="z")
{
InputArray[26]=1;
}
else if(kp=="1")
{
InputArray[27]=1;
}
else if(kp=="2")
{
InputArray[28]=1;
}
else if(kp=="3")
{
InputArray[29]=1;
}
else if(kp=="4")
{
InputArray[30]=1;
}
else if(kp=="5")
{
InputArray[31]=1;
}
else if(kp=="6")
{
InputArray[32]=1;
}
else if(kp=="7")
{
InputArray[33]=1;
}
else if(kp=="8")
{
InputArray[34]=1;
}
else if(kp=="9")
{
InputArray[35]=1;
}
else if(kp=="0")
{
InputArray[36]=1;
}
}
function Keyup()
{
if(event.keyCode==32)
{
InputArray[37]=0;
}
var kpu = String.fromCharCode(event.keyCode);
if (kpu=="A")
{
InputArray[1]=0;
}
else if(kpu=="B")
{
InputArray[2]=0;
}
else if(kpu=="C")
{
InputArray[3]=0;
}
else if(kpu=="D")
{
InputArray[4]=0;
}
else if(kpu=="E")
{
InputArray[5]=0;
}
else if(kpu=="F")
{
InputArray[6]=0;
}
else if(kpu=="G")
{
InputArray[7]=0;
}
else if(kpu=="H")
{
InputArray[8]=0;
}
else if(kpu=="I")
{
InputArray[9]=0;
}
else if(kpu=="J")
{
InputArray[10]=0;
}
else if(kpu=="K")
{
InputArray[11]=0;
}
else if(kpu=="L")
{
InputArray[12]=0;
}
else if(kpu=="M")
{
InputArray[13]=0;
}
else if(kpu=="N")
{
InputArray[14]=0;
}
else if(kpu=="O")
{
InputArray[15]=0;
}
else if(kpu=="P")
{
InputArray[16]=0;
}
else if(kpu=="Q")
{
InputArray[17]=0;
}
else if(kpu=="R")
{
InputArray[18]=0;
}
else if(kpu=="S")
{
InputArray[19]=0;
}
else if(kpu=="T")
{
InputArray[20]=0;
}
else if(kpu=="U")
{
InputArray[21]=0;
}
else if(kpu=="V")
{
InputArray[22]=0;
}
else if(kpu=="W")
{
InputArray[23]=0;
}
else if(kpu=="X")
{
InputArray[24]=0;
}
else if(kpu=="Y")
{
InputArray[25]=0;
}
else if(kpu=="Z")
{
InputArray[26]=0;
}
else if(kpu=="1")
{
InputArray[27]=0;
}
else if(kpu=="2")
{
InputArray[28]=0;
}
else if(kpu=="3")
{
InputArray[29]=0;
}
else if(kpu=="4")
{
InputArray[30]=0;
}
else if(kpu=="5")
{
InputArray[31]=0;
}
else if(kpu=="6")
{
InputArray[32]=0;
}
else if(kpu=="7")
{
InputArray[33]=0;
}
else if(kpu=="8")
{
InputArray[34]=0;
}
else if(kpu=="9")
{
InputArray[35]=0;
}
else if(kpu=="0")
{
InputArray[36 ]=0;
}
}
function Input(key)
{
var answer=0;
if(key=="mouse")
{
if(InputArray[0]==1)
{
answer=1;
}
}
else if(key=="a")
{
if(InputArray[1]==1)
{
answer=1;
}
}
else if(key=="b")
{
if(InputArray[2]==1)
{
answer=1;
}
}
else if(key=="c")
{
if(InputArray[3]==1)
{
answer=1;
}
}
else if(key=="d")
{
if(InputArray[4]==1)
{
answer=1;
}
}
else if(key=="e")
{
if(InputArray[5]==1)
{
answer=1;
}
}
else if(key=="f")
{
if(InputArray[6]==1)
{
answer=1;
}
}
else if(key=="g")
{
if(InputArray[7]==1)
{
answer=1;
}
}
else if(key=="h")
{
if(InputArray[8]==1)
{
answer=1;
}
}
else if(key=="i")
{
if(InputArray[9]==1)
{
answer=1;
}
}
else if(key=="j")
{
if(InputArray[10]==1)
{
answer=1;
}
}
else if(key=="k")
{
if(InputArray[11]==1)
{
answer=1;
}
}
else if(key=="l")
{
if(InputArray[12]==1)
{
answer=1;
}
}
else if(key=="m")
{
if(InputArray[13]==1)
{
answer=1;
}
}
else if(key=="n")
{
if(InputArray[14]==1)
{
answer=1;
}
}
else if(key=="o")
{
if(InputArray[15]==1)
{
answer=1;
}
}
else if(key=="p")
{
if(InputArray[16]==1)
{
answer=1;
}
}
else if(key=="q")
{
if(InputArray[17]==1)
{
answer=1;
}
}
else if(key=="r")
{
if(InputArray[18]==1)
{
answer=1;
}
}
else if(key=="s")
{
if(InputArray[19]==1)
{
answer=1;
}
}
else if(key=="t")
{
if(InputArray[20]==1)
{
answer=1;
}
}
else if(key=="u")
{
if(InputArray[21]==1)
{
answer=1;
}
}
else if(key=="v")
{
if(InputArray[22]==1)
{
answer=1;
}
}
else if(key=="w")
{
if(InputArray[23]==1)
{
answer=1;
}
}
else if(key=="x")
{
if(InputArray[24]==1)
{
answer=1;
}
}
else if(key=="y")
{
if(InputArray[25]==1)
{
answer=1;
}
}
else if(key=="z")
{
if(InputArray[26]==1)
{
answer=1;
}
}
else if(key=="1")
{
if(InputArray[27]==1)
{
answer=1;
}
}
else if(key=="2")
{
if(InputArray[28]==1)
{
answer=1;
}
}
else if(key=="3")
{
if(InputArray[29]==1)
{
answer=1;
}
}
else if(key=="4")
{
if(InputArray[30]==1)
{
answer=1;
}
}
else if(key=="5")
{
if(InputArray[31]==1)
{
answer=1;
}
}
else if(key=="6")
{
if(InputArray[32]==1)
{
answer=1;
}
}
else if(key=="7")
{
if(InputArray[33]==1)
{
answer=1;
}
}
else if(key=="8")
{
if(InputArray[34]==1)
{
answer=1;
}
}
else if(key=="9")
{
if(InputArray[35]==1)
{
answer=1;
}
}
else if(key=="0")
{
if(InputArray[36]==1)
{
answer=1;
}
}
else if(key=="space")
{
if(InputArray[37]==1)
{
answer=1;
}
}
if(answer==1)
{
answer=true;
}
else
{
answer=false;
}
return answer;
}
var Stop;
var Frame=0;
function Update()
{
Frame++;
if(Input("a")) // If key A is down
{
// Do an action
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="Start(); Stop=setInterval(Update,20);" onKeypress="Keydown(event);" onKeyup="Keyup(event);" >
</BODY>
</HTML>Offline
MoreGamesNow wrote:
johnnydean1 wrote:
A example of a game.
Using only HTML5 (canvas) and Javascript.
Don't use IE to view it.Instead of using "OnKeyPress" (which I assume you're using), a method I have found to smoother is this:
Make a list called "Buttons" and make is as long as the number of buttons you want.
If the first item will be the "A" key, then make it so that whenever A is pressed, set the first element (element 0) to "true". When A is released, set the first element to "false". Then, just access the list every "frame" with a function.Code:
<HEAD> <SCRIPT type="text/javascript"> var InputArray=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; function Keydown() { if (event.keyCode==32) { InputArray[37]=1; } var kp=String.fromCharCode(event.keyCode); if (kp=="a") { InputArray[1]=1; } else if(kp=="b") { InputArray[2]=1; } else if(kp=="c") { InputArray[3]=1; } else if(kp=="d") { InputArray[4]=1; } else if(kp=="e") { InputArray[5]=1; } else if(kp=="f") { InputArray[6]=1; } else if(kp=="g") { InputArray[7]=1; } else if(kp=="h") { InputArray[8]=1; } else if(kp=="i") { InputArray[9]=1; } else if(kp=="j") { InputArray[10]=1; } else if(kp=="k") { InputArray[11]=1; } else if(kp=="l") { InputArray[12]=1; } else if(kp=="m") { InputArray[13]=1; } else if(kp=="n") { InputArray[14]=1; } else if(kp=="o") { InputArray[15]=1; } else if(kp=="p") { InputArray[16]=1; } else if(kp=="q") { InputArray[17]=1; } else if(kp=="r") { InputArray[18]=1; } else if(kp=="s") { InputArray[19]=1; } else if(kp=="t") { InputArray[20]=1; } else if(kp=="u") { InputArray[21]=1; } else if(kp=="v") { InputArray[22]=1; } else if(kp=="w") { InputArray[23]=1; } else if(kp=="x") { InputArray[24]=1; } else if(kp=="y") { InputArray[25]=1; } else if(kp=="z") { InputArray[26]=1; } else if(kp=="1") { InputArray[27]=1; } else if(kp=="2") { InputArray[28]=1; } else if(kp=="3") { InputArray[29]=1; } else if(kp=="4") { InputArray[30]=1; } else if(kp=="5") { InputArray[31]=1; } else if(kp=="6") { InputArray[32]=1; } else if(kp=="7") { InputArray[33]=1; } else if(kp=="8") { InputArray[34]=1; } else if(kp=="9") { InputArray[35]=1; } else if(kp=="0") { InputArray[36]=1; } } function Keyup() { if(event.keyCode==32) { InputArray[37]=0; } var kpu = String.fromCharCode(event.keyCode); if (kpu=="A") { InputArray[1]=0; } else if(kpu=="B") { InputArray[2]=0; } else if(kpu=="C") { InputArray[3]=0; } else if(kpu=="D") { InputArray[4]=0; } else if(kpu=="E") { InputArray[5]=0; } else if(kpu=="F") { InputArray[6]=0; } else if(kpu=="G") { InputArray[7]=0; } else if(kpu=="H") { InputArray[8]=0; } else if(kpu=="I") { InputArray[9]=0; } else if(kpu=="J") { InputArray[10]=0; } else if(kpu=="K") { InputArray[11]=0; } else if(kpu=="L") { InputArray[12]=0; } else if(kpu=="M") { InputArray[13]=0; } else if(kpu=="N") { InputArray[14]=0; } else if(kpu=="O") { InputArray[15]=0; } else if(kpu=="P") { InputArray[16]=0; } else if(kpu=="Q") { InputArray[17]=0; } else if(kpu=="R") { InputArray[18]=0; } else if(kpu=="S") { InputArray[19]=0; } else if(kpu=="T") { InputArray[20]=0; } else if(kpu=="U") { InputArray[21]=0; } else if(kpu=="V") { InputArray[22]=0; } else if(kpu=="W") { InputArray[23]=0; } else if(kpu=="X") { InputArray[24]=0; } else if(kpu=="Y") { InputArray[25]=0; } else if(kpu=="Z") { InputArray[26]=0; } else if(kpu=="1") { InputArray[27]=0; } else if(kpu=="2") { InputArray[28]=0; } else if(kpu=="3") { InputArray[29]=0; } else if(kpu=="4") { InputArray[30]=0; } else if(kpu=="5") { InputArray[31]=0; } else if(kpu=="6") { InputArray[32]=0; } else if(kpu=="7") { InputArray[33]=0; } else if(kpu=="8") { InputArray[34]=0; } else if(kpu=="9") { InputArray[35]=0; } else if(kpu=="0") { InputArray[36 ]=0; } } function Input(key) { var answer=0; if(key=="mouse") { if(InputArray[0]==1) { answer=1; } } else if(key=="a") { if(InputArray[1]==1) { answer=1; } } else if(key=="b") { if(InputArray[2]==1) { answer=1; } } else if(key=="c") { if(InputArray[3]==1) { answer=1; } } else if(key=="d") { if(InputArray[4]==1) { answer=1; } } else if(key=="e") { if(InputArray[5]==1) { answer=1; } } else if(key=="f") { if(InputArray[6]==1) { answer=1; } } else if(key=="g") { if(InputArray[7]==1) { answer=1; } } else if(key=="h") { if(InputArray[8]==1) { answer=1; } } else if(key=="i") { if(InputArray[9]==1) { answer=1; } } else if(key=="j") { if(InputArray[10]==1) { answer=1; } } else if(key=="k") { if(InputArray[11]==1) { answer=1; } } else if(key=="l") { if(InputArray[12]==1) { answer=1; } } else if(key=="m") { if(InputArray[13]==1) { answer=1; } } else if(key=="n") { if(InputArray[14]==1) { answer=1; } } else if(key=="o") { if(InputArray[15]==1) { answer=1; } } else if(key=="p") { if(InputArray[16]==1) { answer=1; } } else if(key=="q") { if(InputArray[17]==1) { answer=1; } } else if(key=="r") { if(InputArray[18]==1) { answer=1; } } else if(key=="s") { if(InputArray[19]==1) { answer=1; } } else if(key=="t") { if(InputArray[20]==1) { answer=1; } } else if(key=="u") { if(InputArray[21]==1) { answer=1; } } else if(key=="v") { if(InputArray[22]==1) { answer=1; } } else if(key=="w") { if(InputArray[23]==1) { answer=1; } } else if(key=="x") { if(InputArray[24]==1) { answer=1; } } else if(key=="y") { if(InputArray[25]==1) { answer=1; } } else if(key=="z") { if(InputArray[26]==1) { answer=1; } } else if(key=="1") { if(InputArray[27]==1) { answer=1; } } else if(key=="2") { if(InputArray[28]==1) { answer=1; } } else if(key=="3") { if(InputArray[29]==1) { answer=1; } } else if(key=="4") { if(InputArray[30]==1) { answer=1; } } else if(key=="5") { if(InputArray[31]==1) { answer=1; } } else if(key=="6") { if(InputArray[32]==1) { answer=1; } } else if(key=="7") { if(InputArray[33]==1) { answer=1; } } else if(key=="8") { if(InputArray[34]==1) { answer=1; } } else if(key=="9") { if(InputArray[35]==1) { answer=1; } } else if(key=="0") { if(InputArray[36]==1) { answer=1; } } else if(key=="space") { if(InputArray[37]==1) { answer=1; } } if(answer==1) { answer=true; } else { answer=false; } return answer; } var Stop; var Frame=0; function Update() { Frame++; if(Input("a")) // If key A is down { // Do an action } } </SCRIPT> </HEAD> <BODY onLoad="Start(); Stop=setInterval(Update,20);" onKeypress="Keydown(event);" onKeyup="Keyup(event);" > </BODY> </HTML>
but we're not making canvas games here...
Offline
Sorry; thanks to whichever moderator put that into a code tag.
Last edited by MoreGamesNow (2011-05-01 18:01:46)
Offline
I vote for #1! Also I would make it open source!
Offline
Taneb wrote:
That's already been sorted hasn't it? Someone wrote a script to go through all the bytes and get all the stuff out of them.
Yes. However I would prefer to make the project in sections then put them together, so we can use the code - it just needs to be separated.
Offline
You could use a tool like Google Swiffy to convert the flash player to html5.
Offline
Bsteward wrote:
You could use a tool like Google Swiffy to convert the flash player to html5.
Nice. I tried it (there is a way of downloading the flash player) and it completely failed. It had so many errors that it just came up with a black screen!
Oh, and http://scratch.mit.edu/forums/viewtopic … 48&p=1 - we will continue...
Last edited by whizzer (2011-07-14 11:03:16)
Offline
And WebOS!
Offline
Bsteward wrote:
You could use a tool like Google Swiffy to convert the flash player to html5.
Finding the .swf file is the hard part. I couldn't

Offline
whizzer wrote:
Bsteward wrote:
You could use a tool like Google Swiffy to convert the flash player to html5.
Nice. I tried it (there is a way of downloading the flash player) and it completely failed. It had so many errors that it just came up with a black screen!
Oh, and http://scratch.mit.edu/forums/viewtopic … 48&p=1 - we will continue...
+ bump
Offline