veggieman001 wrote:
I believe Coders' Shed will also allow users to share their programs &c.
Well we let you advertise, right now we're using a free host :b
fanofcena wrote:
scimonster wrote:
fanofcena wrote:
silvershine wrote:
shpeters wrote:
Does anyone know about a website that teaches javascript and a way to use it?
I've heard good things about Code Academy.
Dont go else where when there is the awesome mozilla documentation :-D , and you can always ask here or on stackoverflow .
Also in the stackoverflow developer room we talk about javascript that is a great resource for learning .Or on Coders' Shed.
fanofcena wrote:
Why ? .. I dont get coders' shed concept when there exists stackoverflow with a very vivid flavour or programmers and about a 100,000 pros over there? and not just pros but experienced prosCompetition.
We're just doing our own thing. We plan to have other features, too.Are you trying to say you wanna compete with SO ? and btw i promote SO as the upper and high experienced developers sitting there will help you
and by the way to all those for whom SO gets hard to understand you can ask the answering person in comment , can you please explain in brief ..
Just join CS, it's made by scratchers, that should be a shining feature
Yeah, it would be cool to compete with those guys. And we do have an experienced developer on CS.
CS, is a more understandable format, we have good moderation, active and friendly users.
(let's get back on topic )
Last edited by slinger (2012-06-07 15:08:57)
Offline
The whole 2nd page has been discussing other forums about programming languages. Can we please get back on topic and discuss actual Javascript?
Last edited by TorbyFork234 (2012-06-07 15:05:38)
Offline
silvershine wrote:
shpeters wrote:
Does anyone know about a website that teaches javascript and a way to use it?
I've heard good things about Code Academy.
Thank you!
Offline
fanofcena wrote:
trinary wrote:
Does anyone know how to calculate the distance between the mouse and an element in JavaScript?
There are many ways .. if you are doing that onclick and the position of the element is always going to remain constant then you can do
Code:
var ele = document.getElementById('elem_da_refer'); ele.addEventListener('mousedown',function(e){ var dx = ele.offsetLeft - e.clientX, dy = ele.offsetTop - e.clientY, /* Now do the distance formula*/ distance = Math.sqrt( dx*dx + dy*dy); /* Do the magic with distance */ });well the function is going to remain constant.
Qouting myself so that trinary can see this
Offline
fanofcena wrote:
fanofcena wrote:
trinary wrote:
Does anyone know how to calculate the distance between the mouse and an element in JavaScript?
There are many ways .. if you are doing that onclick and the position of the element is always going to remain constant then you can do
Code:
var ele = document.getElementById('elem_da_refer'); ele.addEventListener('mousedown',function(e){ var dx = ele.offsetLeft - e.clientX, dy = ele.offsetTop - e.clientY, /* Now do the distance formula*/ distance = Math.sqrt( dx*dx + dy*dy); /* Do the magic with distance */ });well the function is going to remain constant.
Qouting myself so that trinary can see this
Thank you.
I finally started learning it yesterday.
Offline
trinary wrote:
fanofcena wrote:
fanofcena wrote:
There are many ways .. if you are doing that onclick and the position of the element is always going to remain constant then you can doCode:
var ele = document.getElementById('elem_da_refer'); ele.addEventListener('mousedown',function(e){ var dx = ele.offsetLeft - e.clientX, dy = ele.offsetTop - e.clientY, /* Now do the distance formula*/ distance = Math.sqrt( dx*dx + dy*dy); /* Do the magic with distance */ });well the function is going to remain constant.
Qouting myself so that trinary can see this
Thank you.
I finally started learning it yesterday.
make an Stack Overflow Account :-D then and talk to us in the JavaScript Room , you can recognize me by the crazy picture :-D . and btw you will need atleast 20 rep on SO in order to be able to communicate in realtime [so consider asking some questions in SO ]
Offline
How do you replicate the
pen upand the
pen downin javascript?
Offline
TorbyFork234 wrote:
How do you replicate the
pen upand thepen downin javascript?
bump
Offline
I made a square able to move around in a box. First game-like thing I made in javascript.
Here's the code:
<html> <head> <style> #player { position:absolute; } #gameArea { position:absolute; border: solid 2px black; width:480px; height:360px; overflow:hidden; } </style> <script type="text/javascript"> var timer=0; var x = 240; var y = 180; var yVelocity=0; var xVelocity=0; function moveSquare(xParam,yParam) { // Change Square location using style player.style.left = xParam; player.style.top = yParam; } function toRad(deg) { return deg * Math.PI / 180; } function touchingEdge() { // game area minus square area return (x < 0 || x > 480-60 || y < 0 || y > 360-60); } function touchingBottom() { return (y>300); } function touchingBottomForJump(){ return (y>259); } function touchingLeftEdge() { return (x<1) } function touchingRightEdge() { return (x>419) } function movement(e) { if (e.keyCode == 39)//right arrow { if (e.keyCode == 38)//up arrow { if (touchingBottomForJump()) { yVelocity=(-15); y=y+yVelocity; } } xVelocity=xVelocity+2; x=x+xVelocity; } else if (e.keyCode == 38)//up arrow { if (e.keyCode == 39)//right arrow { xVelocity=xVelocity+2; x=x+xVelocity; } if (e.keyCode == 38)//up arrow { if (touchingBottomForJump()) { yVelocity=(-15); y=y+yVelocity; } } if (e.keyCode == 37)//left arrow { xVelocity=xVelocity-2; x=x+xVelocity; } } else if (e.keyCode == 37)//left arrow { if (e.keyCode == 38)//up arrow { if (touchingBottomForJump()) { yVelocity=(-15); y=y+yVelocity; } } xVelocity=xVelocity-2; x=x+xVelocity; } } function gameLoop(){ timer=timer+0.05; Varspace.innerText=" Time: "+Math.round(timer); if (!touchingBottom()) { yVelocity=yVelocity+1; y=y+yVelocity; } xVelocity=xVelocity*0.9; //friction if (touchingRightEdge()) { if (xVelocity>1) { xVelocity=xVelocity*(-1); } }if (touchingLeftEdge()) { if (xVelocity<1) { xVelocity=xVelocity*(-1); } } x=x+xVelocity; moveSquare(x,y); if (touchingBottom()){ yVelocity = 0; if (y>300){ y=y-2; } moveSquare(x,y); } } function load() { setInterval(gameLoop,50); } </script> </head> <body onload="load()"> <div id="gameArea"tabindex="0" onkeydown="movement(event)"> <img src="Square.png" id="player" /> </div> <p id="Varspace"></p> </body> <html>
Offline
TorbyFork234 wrote:
I made a square able to move around in a box. First game-like thing I made in javascript.
Here's the code:Code:
<html> <head> <style> #player { position:absolute; } #gameArea { position:absolute; border: solid 2px black; width:480px; height:360px; overflow:hidden; } </style> <script type="text/javascript"> var timer=0; var x = 240; var y = 180; var yVelocity=0; var xVelocity=0; function moveSquare(xParam,yParam) { // Change Square location using style player.style.left = xParam; player.style.top = yParam; } function toRad(deg) { return deg * Math.PI / 180; } function touchingEdge() { // game area minus square area return (x < 0 || x > 480-60 || y < 0 || y > 360-60); } function touchingBottom() { return (y>300); } function touchingBottomForJump(){ return (y>259); } function touchingLeftEdge() { return (x<1) } function touchingRightEdge() { return (x>419) } function movement(e) { if (e.keyCode == 39)//right arrow { if (e.keyCode == 38)//up arrow { if (touchingBottomForJump()) { yVelocity=(-15); y=y+yVelocity; } } xVelocity=xVelocity+2; x=x+xVelocity; } else if (e.keyCode == 38)//up arrow { if (e.keyCode == 39)//right arrow { xVelocity=xVelocity+2; x=x+xVelocity; } if (e.keyCode == 38)//up arrow { if (touchingBottomForJump()) { yVelocity=(-15); y=y+yVelocity; } } if (e.keyCode == 37)//left arrow { xVelocity=xVelocity-2; x=x+xVelocity; } } else if (e.keyCode == 37)//left arrow { if (e.keyCode == 38)//up arrow { if (touchingBottomForJump()) { yVelocity=(-15); y=y+yVelocity; } } xVelocity=xVelocity-2; x=x+xVelocity; } } function gameLoop(){ timer=timer+0.05; Varspace.innerText=" Time: "+Math.round(timer); if (!touchingBottom()) { yVelocity=yVelocity+1; y=y+yVelocity; } xVelocity=xVelocity*0.9; //friction if (touchingRightEdge()) { if (xVelocity>1) { xVelocity=xVelocity*(-1); } }if (touchingLeftEdge()) { if (xVelocity<1) { xVelocity=xVelocity*(-1); } } x=x+xVelocity; moveSquare(x,y); if (touchingBottom()){ yVelocity = 0; if (y>300){ y=y-2; } moveSquare(x,y); } } function load() { setInterval(gameLoop,50); } </script> </head> <body onload="load()"> <div id="gameArea"tabindex="0" onkeydown="movement(event)"> <img src="Square.png" id="player" /> </div> <p id="Varspace"></p> </body> <html>
Interesting.
Offline
trinary wrote:
TorbyFork234 wrote:
I made a square able to move around in a box. First game-like thing I made in javascript.
Here's the code:Code:
(Long Javascript)Interesting.
Thanks!
Offline
I'm creating a very simple timer with JavaScript and I need some help.
Here is what I have at the moment:
var count = 0;
var timer = setInterval(timerFunction, 1000);
var divrestart = document.getElementById("divrestart");
divrestart.onclick = moveHandler;
function timerFunction()
{
count = count + 1;
var t = document.getElementById("timer");
t.innerHTML = count;
}
function moveHandler(evt)
{
if (!evt)
{
evt = window.event;
}
count = 0;
}
and the HTML:
<!DOCTYPE html>
<html>
<head>
<title>a timer</title>
<script src="js.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<h1 id="timer">0</h1>
<div id="divrestart">restart</div>
</body>
</html>
However, while the black portion of the JavaScript works well, every time I try adding the red portion, it insists that divrestart is null and it does not seem to function.
If I try using js.js as a userscript it works perfectly, while if I link it in the HTML file, or put it between <script> and </script> elements, it does not.
Does anyone know why?
Last edited by trinary (2012-07-04 04:27:01)
Offline
trinary wrote:
I'm creating a very simple timer with JavaScript and I need some help.
Here is what I have at the moment:
var count = 0;
var timer = setInterval(timerFunction, 1000);
var divrestart = document.getElementById("divrestart");
divrestart.onclick = moveHandler;
function timerFunction()
{
count = count + 1;
var t = document.getElementById("timer");
t.innerHTML = count;
}
function moveHandler(evt)
{
if (!evt)
{
evt = window.event;
}
count = 0;
}
and the HTML:
<!DOCTYPE html>
<html>
<head>
<title>a timer</title>
<script src="js.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<h1 id="timer">0</h1>
<div id="divrestart">restart</div>
</body>
</html>
However, while the black portion of the JavaScript works well, every time I try adding the red portion, it insists that divrestart is null and it does not seem to function.
If I try using js.js as a userscript it works perfectly, while if I link it in the HTML file, or put it between <script> and </script> elements, it does not.
Does anyone know why?
Maybe you should make restart a button, and have inside the button an onclick which does the function. Or, maybe it's because you did the moveHandler function without passing on a value through the parantheses. I'm not really sure as I'm a beginner.
I've managed to make a javascript project where you start out with a square, and you press space to make another one and d to delete the most current one. You can also move the squares. Here is the complete HTML:
<!DOCTYPE html> <html> <head> </head> <body> <p id="demo"> </p> <canvas id="gameArea" tabindex="0" onkeydown="movement(event)">Your browser does not support canvas</canvas> </body> <style> #gameArea{ position:absolute; overflow:hidden; border-style:solid; border-width:2px; width:600px; height:360px; } </style> <script type="text/javascript"> var gravity=0.5; var friction=0.95; var jumpheight=8.7; var c=document.getElementById("gameArea"); var cxt=c.getContext("2d"); var startX=150; var startY=70; var para=document.getElementById("demo"); var hexcolors=new Array(); hexcolors[0]='#000000'; hexcolors[1]='#F00000'; hexcolors[2]='#FF0000'; hexcolors[3]='#FFF000'; hexcolors[4]='#00F000'; hexcolors[5]='#00FF00'; hexcolors[6]='#00FFF0'; hexcolors[7]='#0000F0'; hexcolors[8]='#0000FF'; hexcolors[9]='#F000FF'; hexcolors[10]='#FF000F'; function hexrandom(){ return (Math.round(10*Math.random())); } function hexColor(){ var hexColor=hexcolors[hexrandom()]; return (hexColor); } var startxVel=0; var startyVel=0; var i=0; function player(xpos,ypos,color,xVel,yVel) { this.xVel=startxVel; this.yVel=startyVel; this.x=xpos; this.y=ypos; this.color=color; } var players=new Array(); players[0]=new player(startX,startY,hexColor(),0,0); function gameLoop(){ var b=players.length+1; for (i=0;i<b;i++){ if (players[i]!=0){ if (players[i].y<139.5){ players[i].yVel+=gravity; } if (players[i].y>140){ players[i].yVel=-1; } players[i].y+=players[i].yVel; if (players[i].y>140){ players[i].y-=1; if (players[i].y>140){ players[i].y-=1; if (players[i].y>140){ players[i].y-=1; } } } players[i].xVel*=friction; if (players[i].x<1){ players[i].xVel*=-1; } if (players[i].x>290){ players[i].xVel*=-1; } players[i].x+=players[i].xVel; if (players[i].x>290){ players[i].xVel=-5; players[i].x+=players[i].xVel; } if (players[i].x<1){ players[i].xVel=-5; } } } } var ahg=0; function movement(e){ i=0; var thekey=e.keyCode; var z=players.length; if (thekey==32){ players[z]=new player(startX,startY,hexColor(),0,0); } if (thekey==68){ players[ahg]=0; } var b=players.length+1; for (i=0;i<b;i++){ if (thekey==39) { players[i].xVel+=2; } if (thekey==37){ players[i].xVel-=2; } if (thekey==38){ if (players[i].y>138){ players[i].yVel=jumpheight*(-1); } } } } function drawing(){ cxt.fillStyle="#FFFFFF"; cxt.fillRect(0,0,600,600); var xcvbn=0; var afd=players.length+1; for (xcvbn=0;xcvbn<afd;xcvbn++){ cxt.fillStyle=players[xcvbn].color; cxt.fillRect(players[xcvbn].x,players[xcvbn].y, 10,10); } } function deletinghelp(){ ahg=(players.length)-1; while (players[ahg]==0){ ahg-=1; } } function repeater(){ setInterval("gameLoop()", 25-(players.length/6)); setInterval("drawing()",25-(players.length/6)); setInterval("deletinghelp()",1); } repeater(); </script> </html>
I'm probably going to make it so that you can select which square you should move. And don't try to get the clones up at 30,000's, it lags up your computer.
Offline
Hey guys, I found this cool site where you can learn Javascript, HTML code, and CSS.
Here is the link: http://www.codecademy.com/
Offline
ilawson wrote:
Hey guys, I found this cool site where you can learn Javascript, HTML code, and CSS.
Here is the link: http://www.codecademy.com/
Cool! But I like echoecho.com better.
Offline
TorbyFork234 wrote:
I've managed to make a javascript project where you start out with a square, and you press space to make another one and d to delete the most current one. You can also move the squares. Here is the complete HTML:
Code:
<!DOCTYPE html> <html> <head> </head> <body> <p id="demo"> </p> <canvas id="gameArea" tabindex="0" onkeydown="movement(event)">Your browser does not support canvas</canvas> </body> <style> #gameArea{ position:absolute; overflow:hidden; border-style:solid; border-width:2px; width:600px; height:360px; } </style> <script type="text/javascript"> var gravity=0.5; var friction=0.95; var jumpheight=8.7; var c=document.getElementById("gameArea"); var cxt=c.getContext("2d"); var startX=150; var startY=70; var para=document.getElementById("demo"); var hexcolors=new Array(); hexcolors[0]='#000000'; hexcolors[1]='#F00000'; hexcolors[2]='#FF0000'; hexcolors[3]='#FFF000'; hexcolors[4]='#00F000'; hexcolors[5]='#00FF00'; hexcolors[6]='#00FFF0'; hexcolors[7]='#0000F0'; hexcolors[8]='#0000FF'; hexcolors[9]='#F000FF'; hexcolors[10]='#FF000F'; function hexrandom(){ return (Math.round(10*Math.random())); } function hexColor(){ var hexColor=hexcolors[hexrandom()]; return (hexColor); } var startxVel=0; var startyVel=0; var i=0; function player(xpos,ypos,color,xVel,yVel) { this.xVel=startxVel; this.yVel=startyVel; this.x=xpos; this.y=ypos; this.color=color; } var players=new Array(); players[0]=new player(startX,startY,hexColor(),0,0); function gameLoop(){ var b=players.length+1; for (i=0;i<b;i++){ if (players[i]!=0){ if (players[i].y<139.5){ players[i].yVel+=gravity; } if (players[i].y>140){ players[i].yVel=-1; } players[i].y+=players[i].yVel; if (players[i].y>140){ players[i].y-=1; if (players[i].y>140){ players[i].y-=1; if (players[i].y>140){ players[i].y-=1; } } } players[i].xVel*=friction; if (players[i].x<1){ players[i].xVel*=-1; } if (players[i].x>290){ players[i].xVel*=-1; } players[i].x+=players[i].xVel; if (players[i].x>290){ players[i].xVel=-5; players[i].x+=players[i].xVel; } if (players[i].x<1){ players[i].xVel=-5; } } } } var ahg=0; function movement(e){ i=0; var thekey=e.keyCode; var z=players.length; if (thekey==32){ players[z]=new player(startX,startY,hexColor(),0,0); } if (thekey==68){ players[ahg]=0; } var b=players.length+1; for (i=0;i<b;i++){ if (thekey==39) { players[i].xVel+=2; } if (thekey==37){ players[i].xVel-=2; } if (thekey==38){ if (players[i].y>138){ players[i].yVel=jumpheight*(-1); } } } } function drawing(){ cxt.fillStyle="#FFFFFF"; cxt.fillRect(0,0,600,600); var xcvbn=0; var afd=players.length+1; for (xcvbn=0;xcvbn<afd;xcvbn++){ cxt.fillStyle=players[xcvbn].color; cxt.fillRect(players[xcvbn].x,players[xcvbn].y, 10,10); } } function deletinghelp(){ ahg=(players.length)-1; while (players[ahg]==0){ ahg-=1; } } function repeater(){ setInterval("gameLoop()", 25-(players.length/6)); setInterval("drawing()",25-(players.length/6)); setInterval("deletinghelp()",1); } repeater(); </script> </html>I'm probably going to make it so that you can select which square you should move. And don't try to get the clones up at 30,000's, it lags up your computer.
That certainly looks very interesting! You seem quite competent with JavaScript.
Anyway, I tried using window.onload instead of document.onload, which fixed my problem above.
Offline
I started making a platformer in javascript, and it's going well. The only thing I can't work out is how to detect two (or three) keystrokes simultaneously. Right now, you have to press up, let go of up, press right to move right in midair. I want it to be able to sense that you're pressing up and right and go and do as it's supposed to. Can anyone help me with that?
Offline
TorbyFork234 wrote:
I started making a platformer in javascript, and it's going well. The only thing I can't work out is how to detect two (or three) keystrokes simultaneously. Right now, you have to press up, let go of up, press right to move right in midair. I want it to be able to sense that you're pressing up and right and go and do as it's supposed to. Can anyone help me with that?
Out of curiosity, are you using jQuery for it? Cause it makes it so much easier.
Offline
bobbybee wrote:
TorbyFork234 wrote:
I started making a platformer in javascript, and it's going well. The only thing I can't work out is how to detect two (or three) keystrokes simultaneously. Right now, you have to press up, let go of up, press right to move right in midair. I want it to be able to sense that you're pressing up and right and go and do as it's supposed to. Can anyone help me with that?
Out of curiosity, are you using jQuery for it? Cause it makes it so much easier.
I don't know what jQuery is... I'm coding it in an app called TextWrangler and I'm using a local server to run it.
Offline
TorbyFork234 wrote:
bobbybee wrote:
TorbyFork234 wrote:
I started making a platformer in javascript, and it's going well. The only thing I can't work out is how to detect two (or three) keystrokes simultaneously. Right now, you have to press up, let go of up, press right to move right in midair. I want it to be able to sense that you're pressing up and right and go and do as it's supposed to. Can anyone help me with that?
Out of curiosity, are you using jQuery for it? Cause it makes it so much easier.
I don't know what jQuery is... I'm coding it in an app called TextWrangler and I'm using a local server to run it.
Offline
I'm bumping this topic back up.
Also, programming apps using HTML5/Javascript.
Offline
trinary wrote:
I'm creating a very simple timer with JavaScript and I need some help.
Here is what I have at the moment:
var count = 0;
var timer = setInterval(timerFunction, 1000);
var divrestart = document.getElementById("divrestart");
divrestart.onclick = moveHandler;
function timerFunction()
{
count = count + 1;
var t = document.getElementById("timer");
t.innerHTML = count;
}
function moveHandler(evt)
{
if (!evt)
{
evt = window.event;
}
count = 0;
}
and the HTML:
<!DOCTYPE html>
<html>
<head>
<title>a timer</title>
<script src="js.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<h1 id="timer">0</h1>
<div id="divrestart">restart</div>
</body>
</html>
However, while the black portion of the JavaScript works well, every time I try adding the red portion, it insists that divrestart is null and it does not seem to function.
If I try using js.js as a userscript it works perfectly, while if I link it in the HTML file, or put it between <script> and </script> elements, it does not.
Does anyone know why?
function moveHandler(evt)
{
evt = evt || window.event ;
count = 0;
}
you know you can use the || operator straightway there. Secondly the javascript is executed as soon as the parser hits it . So as soon as the page hits the <script> tag it gets executed and hence its not working as at that time the lower part of the html document ur <body> is not parsed and it doesnot exist in the DOM.
You can wrap your whole code in a function like
window.onload = function(e){
/* Code here */
};
This function Will get executed when the window gets loaded , that is ur document is fully parsed and DOM is composed from it ..
And to all those who are learning javascript , please dont miss out the bitwise operators they are very useful in cases of binary reading and writing , but arent well documented anywhere.
Offline