Question: Javascript Beginner Moving objects assignment. Please, help me modify my code to a random set moving points. Where should I add this new code in

Javascript Beginner Moving objects assignment. Please, help me modify my code to a random set moving points. Where should I add this new code in my work so I don't lose the function flow? Here is what need to be added: 2- Change the javascript so that instead of the bug following the cursor, the bug appears to go to set points on the screen. Below is what I have so far:

var beginBugX = 200;

var beginBugY = 200; // bug position before time ticking.

var curBugX, curBugY; // Current bug position.

var fractBugX, fractBugY; // Fractional bug computed positions.

var posTick; // Keep track of how many times the timer fired.

var tmrBugSlider; // Timer used to move the bug.

window.onload = initAll;

// This function makes all general initilizations and gets everything

// running.

function initAll() {

curBugX = beginBugX;

curBugY = beginBugY;

document.getElementById("bug").style.left = curBugX;

document.getElementById("bug").style.top = curBugY;

document.onmousemove = mouseHandler;

}

// This function gets called whenever the mouse moves.

function mouseHandler(evt) {

if (!evt) { // for IE

evt = window.event;

}

document.getElementById("xCoord").innerHTML = "X = " + evt.clientX;

document.getElementById("yCoord").innerHTML = "Y = " + evt.clientY;

moveBug(evt.clientX, evt.clientY);

}

// This function is called everytime the cursor changed poition.

// when the cursor changes position, a new bug path needs to be computed.

function moveBug(cursorX, cursorY) {

clearInterval(tmrBugSlider);

beginBugX = curBugX;

beginBugY = curBugY;

var xDistance = cursorX - curBugX;

var yDistance = cursorY - curBugY;

var distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);

document.getElementById("distance").innerHTML = "distance = " + distance;

var angle = Math.atan2(yDistance, xDistance);

var degrees = (angle * 180 / Math.PI) + 90; // need to add 90 degrees as image is due north.

document.getElementById("angle").innerHTML = "angle = " + angle;

document.getElementById("degrees").innerHTML = "degrees = " + degrees;

var direction = "rotate(" + degrees + "deg)"; // rotate (135 degrees)

posTick = 1;

tmrBugSlider = setInterval(function () {

if (distance > 30) {

document.getElementById("bug").style.transform = direction;

// Every unit of time, move one unit in distance.

// Compute X and Y based on the hpotenuse(is the longest leg in a triangle).

fractBugX = Math.cos(angle) * posTick;

fractBugY = Math.sin(angle) * posTick;

curBugX = beginBugX + Math.floor(fractBugX);

curBugY = beginBugY + Math.floor(fractBugY);

document.getElementById("bug").style.left = (curBugX - 19) + "px";

document.getElementById("bug").style.top = (curBugY - 19) + "px";

xDistance = cursorX - curBugX;

yDistance = cursorY - curBugY;

distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);

document.getElementById("distance").innerHTML = "distance = " + distance;

posTick++;

} else {

clearInterval(tmrBugSlider);

beginBugX = curBugX;

beginBugY = curBugY;

}

}, 10);

}

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!