JavaScript Animation is not working at all!
This HTML5 Game Engine should allow a user to move an image element "matador" with buttons in order to dodge another image element "bull" which should be constantly moving across a 900px by 600px container.
I am not sure what is going wrong in the JavaScript to keep the image elements from moving.
If you can figure out the error in these functions, you are a super genius. :)
<!DOCTYPE html> <html>
<!-- PAGE TITLE -->
<head> <title> MATADOR </title> </head>
<!-- GAME ELEMENTS --> <body style="background-color:red;">
<div id="container" style="background-color:#FC3; position: absolute;
width:900px; height:600px; left:0px; top:0px;">
<img src="matador.png" id="matador" style="position:relative; top:200px;
left:100px; width:60px; height:60px;" />
<img src="bull.jpg" id="bull" style="position:absolute; top:300px;
left:20px; width:90px; height:90px;" />
<img id="matadorLife" src="matadorLife.png" style="position:absolute;
top:515px; left:800px; width:60px; height:60px;" />
<div id="scoreId" style="position:absolute; top: 30px; left: 30px; font-
family: impact; color:red; font-size: 50px; text-shadow: -2px 2px 0px
#FFFFFF, 2px -2px 0px #FFFFFF, 2px 2px 0px #FFFFFF, -2px -2px 0px #FFFFFF;">
</div>
<!-- Close "container" div -->
</div>
<!-- Button Elements -->
<button type="button" onClick="MoveLeft();" style="position:absolute;
top:600px; left:0px; width:150px; height:60px; font-family: impact;
color:red; font-size: 40px; text-shadow: -2px 2px 0px #FFFFFF, 2px -2px 0px
#FFFFFF, 2px 2px 0px #FFFFFF, -2px -2px 0px #FFFFFF; background-color:#FC3;
text-align: center;"> LEFT </button>
<button type="button" onClick="MoveRight();" style="position:absolute;
top:600px; left:180px; width:150px; height:60px; font-family: impact;
color:red; font-size: 40px; text-shadow: -2px 2px 0px #FFFFFF, 2px -2px 0px
#FFFFFF, 2px 2px 0px #FFFFFF, -2px -2px 0px #FFFFFF; background-color:#FC3;
text-align: center;"> RIGHT </button>
<button type="button" onClick="MoveDown();" style="position:absolute;
top:600px; left:360px; width:150px; height:60px; font-family: impact;
color:red; font-size: 40px; text-shadow: -2px 2px 0px #FFFFFF, 2px -2px 0px
#FFFFFF, 2px 2px 0px #FFFFFF, -2px -2px 0px #FFFFFF; background-color:#FC3;
text-align: center;"> DOWN </button>
<button type="button" onClick="MoveUp();" style="position:absolute;
top:600px; left:540px; width:150px; height:60px; font-family: impact;
color:red; font-size: 40px; text-shadow: -2px 2px 0px #FFFFFF, 2px -2px 0px
#FFFFFF, 2px 2px 0px #FFFFFF, -2px -2px 0px #FFFFFF; background-color:#FC3;
text-align:center;"> UP </button>
<!-- GAME ACTIONS -->
<script>
var matadorObj = document.getElementById("matador").style;
var xMatador = 0px; var yMatador = 0px;
var bullObj = document.getElementById("bull").style;
var xBull = 0px; var yBull = 200px;
var xSpeed = 10px; var ySpeed = 10px;
var score = 0; var speedInc = 0;
var lifeObj=document.getElementById("matadorLife").style;
document.onkeydown = KeyDownMoveIt;
function KeyDownMoveIt(e) {
if (e.keyCode == 37)
xMatador = xMatador - 10 - speedInc*10;
if (e.keyCode == 39)
xMatador = xMatador + 10 + speedInc*10;
if (e.keyCode == 38)
yMatador = yMatador - 10 - speedInc*10;
if (e.keyCode == 40)
yMatador = yMatador + 10 + speedInc*10;
if (xMatador > 900 - 50)
xMatador = 900 - 50;
if (yMatador > 600 - 50)
yMatador = 600 - 50;
if (xMatador < 40)
xMatador = 40;
if (yMatador < 150)
yMatador = 150;
matadorObj.left = xMatador;
matadorObj.top = yMatador;}
function MoveRight()
{ matadorObj.left = xMatador;
matadorObj.top = yMatador;
xMatador = xMatador + 60 + speedInc*10;
if (xMatador > 900 - 50)
xMatador = 900 - 50;
if (yMatador > 600 - 50)
yMatador = 600 - 50;
if (xMatador < 40)
xMatador = 40;
if (yMatador < 150)
yMatador = 150;}
function MoveLeft()
{ matadorObj.left = xMatador;
matadorObj.top = yMatador;
xMatador = xMatador - 60 - speedInc*10;
if (xMatador > 900 - 50)
xMatador = 900 - 50;
if (yMatador > 600 - 50)
yMatador = 600 - 50;
if (xMatador < 40)
xMatador = 40;
if (yMatador < 150)
yMatador = 150;}
function MoveUp()
{ matadorObj.left = xMatador;
matadorObj.top = yMatador;
yMatador = yMatador - 60 - speedInc*10;
if (xMatador > 900 - 50)
xMatador = 900 - 50;
if (yMatador > 600 - 50)
yMatador = 600 - 50;
if (xMatador < 40)
xMatador = 40;
if (yMatador < 150)
yMatador = 150;}
function MoveDown()
{ matadorObj.left = xMatador;
matadorObj.top = yMatador;
yMatador = yMatador + 60 + speedInc*10;
if (xMatador > 900 - 50)
xMatador = 900 - 50;
if (yMatador > 600 - 50)
yMatador = 600 - 50;
if (xMatador < 40)
xMatador = 40;
if (yMatador < 150)
yMatador = 150;}
var timerA;
window.onload = moveBull();
function moveBull(){
if (xBull + xSpeed > 900 - 50)
xSpeed = -5 * Math.random() - 5 - speedInc;
if (xBull + xSpeed < 0)
xSpeed = 5 * Math.random() + 5 + speedInc;
if (yBull + ySpeed > 600 - 50)
ySpeed = -5 * Math.random() - 5 - speedInc;
if (yBull + ySpeed < 0)
ySpeed = 5 * Math.random() + 5 + speedInc;
xBull = xBull + xSpeed;
yBull = yBull + ySpeed;
bullObj.left = xBull;
bullObj.top = yBull;
speedInc = score * 0.01;
if ((xMatador < xBull+50) && (xMatador+50 > xBull) && (yMatador <
yBull+50) && (yMatador+50 > yBull)) {
clearTimeout(timerB);
matadorObj.src="matadorLost.png";
bullObj.src="bullWon.png";
document.getElementById("scoreId").innerHTML = "- GAME OVER -";
document.getElementById("container").style.backgroundColor="red";
lifeObj.visibility="hidden"; }
if (score == 31) {clearTimeout(timerB);
document.getElementById("container").style.backgroundColor="yellow";
matadorObj.src="matadorWon.png";
bullObj.src="bullLost.png";
document.getElementById("scoreId").innerHTML = "- WINNER! -";}
timerA = setTimeout("moveBull()", 30);}
var timerB;
window.onload = gameScore();
function gameScore() {
document.getElementById("scoreId").innerHTML = "MATADOR <br>" + score;
score++;
timerB = setTimeout("gameScore()", 1000);}
</script>
</body> </html> <!-- END PROGRAM -->
Aucun commentaire:
Enregistrer un commentaire