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
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started