Separating JavaScript from HTML doesn't work -
i trying separate javascript html, doesn't seem want work. here combined code:
<script type="text/javascript"> var width = 100; var height = 200; function ball(){ // random radius this.radius = math.floor(math.random()*(10-5+1))+5; // random x , y this.x = math.floor(math.random()*(width-this.radius+1))+this.radius; this.y = math.floor(math.random()*(width-this.radius+1))+this.radius; // random direction, +1 or -1 this.dx = math.floor(math.random()*2) * 2 - 1; this.dy = math.floor(math.random()*2) * 2 - 1; //random colour, r, g or b var rcol = math.floor(math.random()*3); this.col = rcol==0 ? "red" : rcol==1 ? "blue" : "green"; } // create array of balls numballs = 10; var balls = new array(numballs); for(i= 0 ; < numballs ; i++){ balls[i] = new ball(); } // draw balls on canvas function draw(){ var canvas = document.getelementbyid("mycanvas"); // check if supported if(canvas.getcontext){ var ctx=canvas.getcontext("2d"); //clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.globalalpha = 0.5; ctx.strokestyle="black"; // draw each ball for(i = 0; < numballs ; i++){ var ball = balls[i]; ctx.fillstyle=ball.col; ctx.beginpath(); // check bounds // change direction if hitting border if(ball.x<=ball.radius || ball.x >= (width-ball.radius)){ ball.dx *= -1; } if(ball.y<=ball.radius || ball.y >= (height-ball.radius)){ ball.dy *= -1; } // move ball ball.x += ball.dx; ball.y += ball.dy; // draw ctx.arc(ball.x, ball.y, ball.radius, 0, 2*math.pi, false); ctx.stroke(); ctx.fill(); } } else{ //canvas not supported } } // calls draw every 10 millis function bounce(){ setinterval(draw, 10); } </script> <canvas id="mycanvas" width="100" height="200" style="border-style:solid;border-width:1px" onclick="bounce()"> canvas not supported.</canvas> but when separate separate html , javascript files so:
<!doctype html> <html> <head> <title>nodejs, socket.io</title> <!-- reference jquery library --> <script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script> <!-- our javascript file --> <script type="text/javascript" src="./js/script.js"></script> <!-- our css file --> </head> <body> <canvas id="mycanvas" width="100" height="200" style="border-style:solid;border-width:1px"> canvas not supported.</canvas> </html> and:
$(document).ready(function() { var width = 100; var height = 200; function ball(){ // random radius this.radius = math.floor(math.random()*(10-5+1))+5; // random x , y this.x = math.floor(math.random()*(width-this.radius+1))+this.radius; this.y = math.floor(math.random()*(width-this.radius+1))+this.radius; // random direction, +1 or -1 this.dx = math.floor(math.random()*2) * 2 - 1; this.dy = math.floor(math.random()*2) * 2 - 1; //random colour, r, g or b var rcol = math.floor(math.random()*3); this.col = rcol==0 ? "red" : rcol==1 ? "blue" : "green"; } // create array of balls numballs = 10; var balls = new array(numballs); for(i= 0 ; < numballs ; i++){ balls[i] = new ball(); } // draw balls on canvas function draw(){ var canvas = document.getelementbyid("mycanvas"); // check if supported if(canvas.getcontext){ var ctx=canvas.getcontext("2d"); //clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.globalalpha = 0.5; ctx.strokestyle="black"; // draw each ball for(i = 0; < numballs ; i++){ var ball = balls[i]; ctx.fillstyle=ball.col; ctx.beginpath(); // check bounds // change direction if hitting border if(ball.x<=ball.radius || ball.x >= (width-ball.radius)){ ball.dx *= -1; } if(ball.y<=ball.radius || ball.y >= (height-ball.radius)){ ball.dy *= -1; } // move ball ball.x += ball.dx; ball.y += ball.dy; // draw ctx.arc(ball.x, ball.y, ball.radius, 0, 2*math.pi, false); ctx.stroke(); ctx.fill(); } } else{ //canvas not supported } } // calls draw every 10 millis function bounce(){ setinterval(draw, 10); } }); it doesn't work. appreciated!
the trouble used have canvas defined this:
<canvas id="mycanvas" width="100" height="200" style="border-style:solid;border-width:1px" onclick="bounce()"> canvas not supported.</canvas> and it's defined this:
<canvas id="mycanvas" width="100" height="200" style="border-style:solid;border-width:1px"> canvas not supported.</canvas> notice onclick="bounce()" missing new html file. that's not problem! it's better not attach event handlers inline. make script.js file work new html, change first few lines this:
$(document).ready(function() { $('#mycanvas').click(bounce); var width = 100; var height = 200; actually, better define functions ball(), draw() , bounce() outside $(document).ready() function. write this:
var width = 100, height = 200, numballs = 10, balls; $(document).ready(function() { $('#mycanvas').click(bounce); // create array of balls balls = new array(numballs); for(i = 0 ; < numballs ; i++){ balls[i] = new ball(); } }); here snippet containing whole javascript file revised suggest:
var width = 100, height = 200, numballs = 10, balls; $(document).ready(function() { $('#mycanvas').click(bounce); // create array of balls balls = new array(numballs); for(i = 0 ; < numballs ; i++){ balls[i] = new ball(); } }); function ball(){ // random radius this.radius = math.floor(math.random()*(10-5+1))+5; // random x , y this.x = math.floor(math.random()*(width-this.radius+1))+this.radius; this.y = math.floor(math.random()*(width-this.radius+1))+this.radius; // random direction, +1 or -1 this.dx = math.floor(math.random()*2) * 2 - 1; this.dy = math.floor(math.random()*2) * 2 - 1; //random colour, r, g or b var rcol = math.floor(math.random()*3); this.col = rcol==0 ? "red" : rcol==1 ? "blue" : "green"; } // draw balls on canvas function draw(){ var canvas = document.getelementbyid("mycanvas"); // check if supported if(canvas.getcontext){ var ctx=canvas.getcontext("2d"); //clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.globalalpha = 0.5; ctx.strokestyle="black"; // draw each ball for(i = 0; < numballs ; i++){ var ball = balls[i]; ctx.fillstyle=ball.col; ctx.beginpath(); // check bounds // change direction if hitting border if(ball.x<=ball.radius || ball.x >= (width-ball.radius)){ ball.dx *= -1; } if(ball.y<=ball.radius || ball.y >= (height-ball.radius)){ ball.dy *= -1; } // move ball ball.x += ball.dx; ball.y += ball.dy; // draw ctx.arc(ball.x, ball.y, ball.radius, 0, 2*math.pi, false); ctx.stroke(); ctx.fill(); } } else{ //canvas not supported } } // calls draw every 10 millis function bounce(){ setinterval(draw, 10); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <canvas id="mycanvas" width="100" height="200" style="border-style:solid;border-width:1px"> canvas not supported.</canvas>
Comments
Post a Comment