<!doctype html>
<html>
<head>
/* SPOTS */
/* style for ALL spots */
.spot{
height: 35px;
width: 35px;
background-color: none;
position: absolute;
display: none;
background-image: url("images/white_ball.png");
background-size: 100% 100%;
}
<!-- import external JS libraries -->
<script src="scripts/TweenLite.min.js"></script>
<script src="scripts/CSSPlugin.min.js"></script>
<script src="scripts/BezierPlugin.min.js"></script>
<!-- declare global variables so you can use them in any function -->
<script>
var timeoutID_1;
var timeoutID_2;
var first_spot;
var second_spot;
var four;
var five;
var kNum = [];
var numArray = [];
var n1, n2, n3, n4, n5;
var generatedNums;
var chosenNums = [];
var winningNum;
var randomX;
var randomY;
var pointAX;
var pointAY;
var pointBX;
var pointBY;
var kNumIterator = 0;
var s1, s2, s3, s4, s5;
var spot_holder;
var intervalID;
var intervalID2;
var orderedNums;
var b;
// determines pointAX and pointAY - starting point of spot animation
// alter numbers here based on dimension of #container old dimensions were width = 1280 height = 640
// new dimensions are width = 640 height = 333
function chooseRandomNums() {
// each time this function is called, create a new randomX and randomY
randomX = Math.ceil(Math.random() * 125);
randomY = Math.ceil(Math.random() * 125);
// creates random pointA positions. If ending position (pointB) is on one side of the screen,
// pointA should be a the other side to ensure animation across the screen.
if (kNum[chosenNums[kNumIterator]].x < 320) {
pointAX = randomX + 640;
//alert("right");
} else if (kNum[chosenNums[kNumIterator]].x >= 320) {
pointAX = randomX * -1;
//alert("left");
}
if (kNum[chosenNums[kNumIterator]].y < 166) {
pointAY = randomY + 333;
//alert("bottom");
} else if (kNum[chosenNums[kNumIterator]].y >= 166) {
//alert("top");
pointAY = randomY * -2;
}
}// end chooseRandomNums()
// generate spot -
function createSpot() {
// get random pointA values
chooseRandomNums();
// get X and Y values for PointB
pointBX = kNum[chosenNums[kNumIterator]].x;
pointBY = kNum[chosenNums[kNumIterator]].y;
// turn on visibility of this particular spot
spot_holder[kNumIterator].style.display = "block";
// Tween this spot from pointA to pointB
TweenLite.fromTo(spot_holder[kNumIterator], 2, {left:pointAX, top:pointAY}, {left:pointBX, top:pointBY, immediateRender:false});
// Iterate kNumInterator
kNumIterator++;
</body>
</html>