Javascript homework help

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

11-Mar-17 19:00
I'm at the point of pulling my hair out over this assignment, any help is appreciated.

"This code is broken. Currently, when you load the website in a web browser, it appears to do nothing. It’s JavaScript file is crippled by a single ‘bug’ or programming error. You must de-bug the script by finding and fixing that error. If you do, when you load the webpage in a browser, you will see something cool (ie. visually interesting) as your reward.

The JavaScript is actually fundamentally okay. In fact, nothing that is currently in the JavaScript needs to be removed or even modified to make it work. You need only add some new JavaScript to fix everything."
Here's the script below



// ** initializations

// reference the canvas element
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// initialize variables
var blobArray = [];



// ** functions

function Init() {

for (x = 0; x<100; x++) {

var blob = {
x: canvas.width/2,
y: canvas.height/2,
size: Math.random() * 50,
xSpeed: Math.random() * 10 - Math.random() * 10,
ySpeed: Math.random() * 10 - Math.random() * 10,
color: '#' + Math.floor(Math.random()*16777215).toString(16)
}

blobArray.push(blob);
}

}


function MainLoop() {

// update the canvas
DrawCanvas();

// repeat this function every 10 microseconds
window.setTimeout(MainLoop, 10);

}


function DrawCanvas() {

context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < blobArray.length; i++) {

blob = blobArray[i];
context.fillStyle = blob.color;
context.fillRect(blob.x, blob.y, blob.size, blob.size);

blob.x = blob.x + blob.xSpeed;
blob.y = blob.y + blob.ySpeed;

if (blob.x > canvas.width || blob.x < 0 || blob.y > canvas.height || blob.y < 0) {
blob.x = canvas.width/2;
blob.y = canvas.height/2;
blob.xSpeed = Math.random() * 10 - Math.random() * 10;
blob.ySpeed = Math.random() * 10 - Math.random() * 10;
}

}

}



// ** start

Init();

12-Mar-17 14:20
No idea, ... ....


... Does your HTML code have a 'canvas' element with an ID of myCanvas?????

Does it exist before the javascript is called???


Plus several other questions that you have not provided code or context for.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
12-Mar-17 20:05
Here's the CSS




.canvasBox{
width: 800px;
height: 500px;
margin: auto;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #888;
}


Here's the HTML



<!DOCTYPE HTML>

<html>



<head>

<title>Webpage Title</title>

<link rel="stylesheet" type="text/css" href="styles/styles.css" />

</head>



<body>

<div class="canvasBox">

<canvas id="myCanvas" width="800" height="500">
This text is displayed by browsers that do not support the HTML5 canvas.
</canvas>

</div>

<script src="scripts/scripts.js"></script>

</body>



</html>


 
New posts
Old posts

Follow Elated