Car animations in Frogger on Javascript
- by Mijoro Nicolas Rasoanaivo
I have to finish a Frogger game in Javascript for my engineering school degree, but I don't know how to animate the cars. Right now I tried to manipulate the CSS, the DOM, I wrote a script with a setTimeout(), but none of them works.Can I have some help please? Here's my code and my CSS:
<html>
<head>
<title>Image défilante</title>
<link rel="stylesheet" type="text/css" href="map_style.css"/>
</head>
<body onload="start()">
<canvas id="jeu" width="800" height="450">
</canvas>
<img id="voiture" class="voiture" src="car.png" onload="startTimerCar()">
<img id="voiture2" class="voiture" src="car.png" onload="startTimerCar()">
<img id="voiture3" class="voiture" src="car.png" onload="startTimerCar()">
<img id="bigrig" class="bigrig" src="bigrig.png" onload="startTimerBigrig()">
<img id="bigrig2" class="bigrig" src="bigrig.png" onload="startTimerBigrig()">
<img id="bigrig3" class="bigrig" src="bigrig.png" onload="startTimerBigrig()">
<img id="hotrod" src="hotrod.png" onload="startTimerHotrod()">
<img id="hotrod2" src="hotrod.png" onload="startTimerHotrod()">
<img id="turtle" src="turtles_diving.png" onload="startTimerTurtle()">
<img id="turtle2" src="turtles_diving.png" onload="startTimerTurtle()">
<img id="turtle3" src="turtles_diving.png" onload="startTimerTurtle()">
<img id="small" src="log_small.png" onload="startTimerSmall()">
<img id="small2" src="log_small.png" onload="startTimerSmall()">
<img id="small3" src="log_small.png" onload="startTimerSmall()">
<img id="small4" src="log_small.png" onload="startTimerSmall()">
<img id="med" src="log_medium.png" onload="startTimerMedium()">
<img id="med2" src="log_medium.png" onload="startTimerMedium()">
<img id="med3" src="log_medium.png" onload="startTimerMedium()">
<script type="text/javascript">
var X = 1;
var timer;
function start(){
setInterval(init,10);
document.onkeydown = move;
var canvas = document.getElementById('jeu');
var context = canvas.getContext('2d');
var frog = document.getElementById('frog');
var posX_frog = 415;
var posY_frog = 400;
var voiture = [document.getElementById('voiture'),document.getElementById('voiture2'),document.getElementById('voiture3')];
var bigrig = [document.getElementById('bigrig'),document.getElementById('bigrig2'),document.getElementById('bigrig3')];
var hotrod = [document.getElementById('hotrod'),document.getElementById('hotrod2')];
var turtle = [document.getElementById('turtle'),document.getElementById('turtle2'),document.getElementById('turtle3')];
var small = [document.getElementById('small'),document.getElementById('small2'),document.getElementById('small3'),document.getElementById('small4')];
var med = [document.getElementById('med'),document.getElementById('med2'),document.getElementById('med3')];
function init() {
context.fillStyle = "#AEEE00";
context.fillRect(0,0,800,50);
context.fillRect(0,200,800,50);
context.fillRect(0,400,800,50);
context.fillStyle = "#046380";
context.fillRect(0,50,800,150);
context.fillStyle = "#000000";
context.fillRect(0,250,800,150);
var img= new Image();
img.src="./frog.png";
context.drawImage(img,posX_frog, posY_frog, 46, 38);
}
function move(event){
if (event.keyCode == 39){
if( posX_frog < 716 ){
posX_frog += 50;
}
}
if(event.keyCode == 37){
if( posX_frog >25 ){
posX_frog -= 50;
}
}
if (event.keyCode == 38){
if( posY_frog > 10 ){
posY_frog -= 50;
}
}
if(event.keyCode == 40){
if( posY_frog <400 ){
posY_frog += 50;
}
}
}
}
</script>
</body>
And my map_css:
#jeu{
z-index:10;
width: 800px;
height: 450px;
border: 2px black solid;
overflow: hidden;
position: relative;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
}
#voiture{
z-index: 100;
position: absolute;
top: 315px;
left: 48px;
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
}
#voiture2{
z-index: 100;
position: absolute;
top: 315px;
left: 144px;
}
#voiture3{
z-index: 100;
position: absolute;
top: 315px;
left: 240px;
}
#bigrig{
z-index: 100;
position: absolute;
top: 365px;
left: 200px;
}
#bigrig2{
z-index: 100;
position: absolute;
top: 365px;
left: 400px;
}
#bigrig3{
z-index: 100;
position: absolute;
top: 365px;
left: 600px;
}
#hotrod{
z-index: 100;
position: absolute;
top: 265px;
left: 200px;
}
#hotrod2{
z-index: 100;
position: absolute;
top: 265px;
left: 500px;
}
#hotrod3{
z-index: 100;
position: absolute;
top: 265px;
left: 750px;
}
#turtle{
z-index: 100;
position: absolute;
top: 175px;
left: 50px;
}
#turtle2{
z-index: 100;
position: absolute;
top: 175px;
left: 450px;
}
#turtle3{
z-index: 100;
position: absolute;
top: 175px;
left: 250px;
}
#small{
z-index: 100;
position: absolute;
top: 125px;
left: 20px;
}
#small2{
z-index: 100;
position: absolute;
top: 125px;
left: 220px;
}
#small3{
z-index: 100;
position: absolute;
top: 125px;
left: 420px;
}
#small4{
z-index: 100;
position: absolute;
top: 125px;
left: 620px;
}
#med{
z-index: 100;
position: absolute;
top: 75px;
left: 120px;
}
#med2{
z-index: 100;
position: absolute;
top: 75px;
left: 320px;
}
#med3{
z-index: 100;
position: absolute;
top: 75px;
left: 520px;
}
I had to say that I'm in the obligation to code in HTML5, CSS3, and Javascript but not jQuery, who is way more easier, I already created games in jQuery... It takes me too much time and too much code lines right here.
