<script> function component(width, height, col, x, y) { this.width = width; this

ID: 3873228 • Letter: #

Question

this.update = function()
{
ctx = myGameArea.context;
ctx.fillStyle = col;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}

function updateGameArea()
{
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
}

var context;
var x=100;
var y=200;
var dx=5;
var dy=5;

function init()
{
context= myCanvas.getContext('2d');
setInterval(draw,10);
}

function draw()
{
context.clearRect(0,0, 300,300);
context.beginPath();
context.fillStyle="#0000ff";
// Draws a circle of radius 20 at the coordinates 100,100 on the canvas
context.arc(x,y,20,0,Math.PI*2,true);
context.arc(x,y,20,0,Math.PI*2,true);

context.closePath();
context.fill();
// Boundary Logic
if( x<0 || x>300) dx=-dx;
if( y<0 || y>300) dy=-dy;
x+=dx;
y+=dy;
}

</script>
<body>
<canvas id="myCanvas" width="300" height="300" >
</canvas>
</body>

This code works fine if I put it in one html document, however i need to have two files, one that is only the html and the other being javascript. Can anyone separate the code into the two files, html and javascript in order for it to work properly?

Explanation / Answer

You can do it as very well

save the code that is inside <script></script> tag and save as .js

here i have save the code as testJS.js

//testJS.js

var context;
var x=100;
var y=200;
var dx=5;
var dy=5;
function init()
{
context= myCanvas.getContext('2d');
setInterval(draw,10);
}
function draw()
{
context.clearRect(0,0, 300,300);
context.beginPath();
context.fillStyle="#0000ff";
// Draws a circle of radius 20 at the coordinates 100,100 on the canvas
context.arc(x,y,20,0,Math.PI*2,true);
context.arc(x,y,20,0,Math.PI*2,true);
context.closePath();
context.fill();
// Boundary Logic
if( x<0 || x>300) dx=-dx;
if( y<0 || y>300) dy=-dy;
x+=dx;
y+=dy;
}

//Now want to use above js file in code

so there is tag

<script type="text/javascript" src="fileName.js"></script>

type ->specifies file type text/javascript

src ->specifies the name of file, if file is not in same directory as in html file then specify full location

now come to html file i am ssuming name of html file is testHTML.html and testJS.js in same directory

//testHTNL.html

in above code as u can see in the head section inside the script tag i have include the js file that i have saved as testJS.js

//Please do let me know if u have any concern...

Navigate

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

<script> function component(width, height, col, x, y) { this.width = width; this

Question

Explanation / Answer

Related Questions

Navigate