Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

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

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Fundamentals Of Database Systems

Authors: Ramez Elmasri, Shamkant B. Navathe

7th Edition Global Edition

1292097612, 978-1292097619

More Books

Students also viewed these Databases questions

Question

What is conservative approach ?

Answered: 1 week ago

Question

What are the basic financial decisions ?

Answered: 1 week ago

Question

Classify delivery styles by type.

Answered: 1 week ago