Ok, so I posted in my last shot what I did with my car assignment. Now my teacher wants me to upgrade it with if statements and loops. I want to get fancy and for every car that finishes gonig across the screen, I want to use a Math.random function to spew out a random car that's a different color out.
However, I have no idea how to swap to different images through javascript, but I'm PRETTY sure its doable without causing a 10 car pileup. It currently spews one image of a car and I want it to randomly pick the image, but the way how its set, it requires an image to be created.
My question is: how do I go about doing this, because I have NO idea where to start or how to word it properly. This is my code with each car already placed inside the CSS file. I commented out the other cars because they randomly popped up on my screen
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Car Object Animation with Callback</title>
<style type="text/css">
body {
background-color: #AADDCC;
background: url("background.png");
background-size: 1600px 770px;
background-repeat: no-repeat;
padding-top: 40px;
}
#lCar1 {
position:absolute;
right:253px;
bottom:243px;
z-index:-1;
}
#lCar2 {
position:absolute;
right:253px;
bottom:243px;
z-index:-1;
}
#lCar3 {
position:absolute;
right:253px;
bottom:243px;
z-index:-1;
}
#lCar4 {
position:absolute;
right:253px;
bottom:243px;
z-index:-1;
}
#lCar5 {
position:absolute;
right:253px;
bottom:243px;
z-index:-1;
}
#lCar6 {
position:absolute;
right:253px;
bottom:243px;
z-index:-1;
}
#rCar1 {
position:absolute;
left: 253px;
left:253px;
bottom:122px;
z-index:-1;
}
#rCar2 {
position:absolute;
left: 253px;
left:253px;
bottom:122px;
z-index:-1;
}
#rCar3 {
position:absolute;
left: 253px;
left:253px;
bottom:122px;
z-index:-1;
}
#rCar4 {
position:absolute;
left: 253px;
left:253px;
bottom:122px;
z-index:-1;
}
#rCar5 {
position:absolute;
left: 253px;
left:253px;
bottom:122px;
z-index:-1;
}
#rCar6 {
position:absolute;
left: 253px;
left:253px;
bottom:122px;
z-index:-1;
}
#clouds {
position:absolute;
right: 55px;
top:135px;
z-index:99;
}
#clouds2 {
position:absolute;
right: 55px;
top: 105px;
z-index:99;
}
#clouds3 {
position:absolute;
right: 55px;
top:155px;
z-index:99;
}
#clouds4 {
position:absolute;
right: 255px;
top:55px;
z-index:99;
}
</style>
</head>
<body style="overflow: hidden">
<audio autoplay loop>
<source src="026- Earthbound - Buy Somethin_ Will Ya!.mp3" type="audio/mpeg">
</audio>
<audio id="honk">
<source src="Car honk.mp3" type="audio/mpeg">
</audio>
<img alt="cloud" id="clouds" src="clouds.png" />
<img alt="cloud" id="clouds2" src="clouds.png" />
<img alt="cloud" id="clouds3" src="clouds.png" />
<img alt="cloud" id="clouds4" src="clouds.png" />
<!--
<img alt="lcar1" id="lCar1" src="leftCar1.png" />
<img alt="lcar2" id="lCar2" src="leftCar2.png" />
<img alt="lcar3" id="lCar3" src="leftCar3.png" />
<img alt="lcar4" id="lCar4" src="leftCar4.png" />
<img alt="lcar5" id="lCar5" src="leftCar5.png" />
-->
<img alt="lcar6" id="lCar6" src="leftCar6.png" />
<!--
<img alt="rcar1" id="rCar1" src="rightCar1.png" />
<img alt="rcar2" id="rCar2" src="rightCar2.png" />
<img alt="rcar3" id="rCar3" src="rightCar3.png" />
-->
<img alt="rcar4" id="rCar4" src="rightCar4.png" />
<!--
<img alt="rcar5" id="rCar5" src="rightCar5.png" />
<img alt="rcar6" id="rCar6" src="rightCar6.png" />
-->
<script>
function playAudio() {
honk.play();
}
// create Car factory using the constructor function
function CarsLeft(id) {
this.speed = Math.floor((Math.random() * 100) + 1); // generate a random number between 1 and 100 //prompt("Enter a number between one and 100", 75);
this.speed = 101 - this.speed;// inverse the speed to be used in the built in setTimeOut method
this.car = document.getElementById(id);//grab onto the image
this.carCounter = -254;// set the car counter which will control the pixel location
this.lapCounter = 0; // used to count the laps
// The Call back function is to count laps and to learn about Call back functions
this.callbackFun = function (car) {
alert(" Finished lap number " + car.lapCounter + " for car " + id);
}
// the moviit function changes the css right property and accepts a function
this.moveIt = function (callback) {
this.carCounter += 3;
this.car.style.right = this.carCounter + "px";
var _this = this;// Becase this is the this we want as it changes once inside the setTimeOut function
if (this.carCounter < (screen.width)) {
setTimeout(function () { _this.moveIt(callback) }, this.speed);// send moveIt the callback function as an argument
} else {
this.lapCounter++;// increment the lap Counter
//callback(this); // Call the call back function which gives alert for each lap
//Play the car honking when it reaches the end of the screen
playAudio();
//alert(" Lap number " + this.lapCounter);// visual display of the lab counter
this.carCounter = -254;// reset the car Counter back to -400
setTimeout(function () { _this.moveIt(callback) }, this.speed);
}
}// end of move it function
};
// create Car factory using the constructor function
function CarsRight(id) {
this.speed = Math.floor((Math.random() * 100) + 1); // generate a random number between 1 and 100 //prompt("Enter a number between one and 100", 75);
this.speed = 101 - this.speed;// inverse the speed to be used in the built in setTimeOut method
this.car = document.getElementById(id);//grab onto the image
this.carCounter = -254;// set the car counter which will control the pixel location
this.lapCounter = 0; // used to count the laps
// The Call back function is to count laps and to learn about Call back functions
this.callbackFun = function (car) {
alert(" Finished lap number " + car.lapCounter + " for car " + id);
}
// the moviit function changes the css right property and accepts a function
this.moveIt = function (callback) {
this.carCounter += 3;
this.car.style.left = this.carCounter + "px";
var _this = this;// Becase this is the this we want as it changes once inside the setTimeOut function
if (this.carCounter < (screen.width)) {
setTimeout(function () { _this.moveIt(callback) }, this.speed);// send moveIt the callback function as an argument
} else {
this.lapCounter++;// increment the lap Counter
//callback(this); // Call the call back function which gives alert for each lap
//Play the car honking when it reaches the end of the screen
playAudio();
//alert(" Lap number " + this.lapCounter);// visual display of the lab counter
this.carCounter = -254;// reset the car Counter back to -400
setTimeout(function () { _this.moveIt(callback) }, this.speed);
}
}// end of move it function
};
function Clouds(id) {
this.speed = Math.floor((Math.random() * 75) + 1); // generate a random number between 1 and 100 //prompt("Enter a number between one and 100", 75);
this.speed = 101 - this.speed;// inverse the speed to be used in the built in setTimeOut method
this.car = document.getElementById(id);//grab onto the image
this.carCounter = -100;// set the car counter which will control the pixel location
this.lapCounter = 0; // used to count the laps
// The Call back function is to count laps and to learn about Call back functions
this.callbackFun = function (car) {
alert(" FInished lap number " + car.lapCounter + " for car " + id);
}
// the moviit function changes the css right property and accepts a function
this.moveIt = function (callback) {
this.carCounter += 3;
this.car.style.right = this.carCounter + "px";
var _this = this;// Becase this is the this we want as it changes once inside the setTimeOut function
if (this.carCounter < (screen.width+100)) {
setTimeout(function () { _this.moveIt(callback) }, this.speed);// send moveIt the callback function as an argument
} else {
this.lapCounter++;// increment the lap Counter
//callback(this); // Call the call back function which gives alert for each lap
//alert(" Lap number " + this.lapCounter);// visual display of the lab counter
this.carCounter = -100;// reset the car Counter back to -400
setTimeout(function () { _this.moveIt(callback) }, this.speed);
}
}// end of move it function
};
var myCar1 = new CarsLeft('lCar6');
myCar1.moveIt(myCar1.callbackFun);
var myCar2 = new CarsRight('rCar4');
myCar2.moveIt(myCar2.callbackFun);
var cloud1 = new Clouds('clouds');
cloud1.moveIt(cloud1.callbackFun);
var cloud2 = new Clouds('clouds2');
cloud2.moveIt(cloud2.callbackFun);
var cloud3 = new Clouds('clouds3');
cloud3.moveIt(cloud3.callbackFun);
var cloud4 = new Clouds('clouds4');
cloud4.moveIt(cloud4.callbackFun);
</script>
</body>
</html>