stackoom
  简体   繁体   中英

HTML5 Game Engine - JavaScript Animation

 原文  2015-03-30 02:07:20  2   2    javascript/ html5/ if-statement/ game-engine

Question

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 -->

2 answers

solution1
 1 ACCPTED  2015-03-30 02:48:10

yMatador = 0px is not valid. replace all such variables to something which look like these yMatador = 0 .

This will result in 

matadorObj.left = xMatador; // matadorObj.left = 10;
matadorObj.top = yMatador; // matadorObj.top = 10;

bullObj.left = xBull; // bullObj.left = 10;
bullObj.top = yBull; // bullObj.top = 10;

which are not valid as top and left need 'px' values so replace the above with these 

matadorObj.left = xMatador + 'px';
matadorObj.top = yMatador + 'px';

bullObj.left = xBull + 'px';
bullObj.top = yBull + 'px';

Here is the updated demo

Hope this helps

solution2
 0  2015-03-30 02:51:26

Ay, this line 

window.onload = gameScore();

should be 

window.onload = gameScore;

without parenthesis. If they are there it will execute the function instead of referencing it. That means the result (undefined) will be assigned instead of function. Should work now! And also use 0 instead of 0px :)

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question HTML5/Javascript Game HTML5 Javascript game Html5/Javascript game lag 2D interactive animation engine in HTML5 HTML5 and Javascript game not working as expected calculate fps of html5 canvas game with javascript HTML5 Memory Game - JavaScript function Scrolling camera in HTML5 canvas game (with javascript) 'Gravity' not working properly in Javascript/HTML5 game “Background” Game animations with javascript and html5
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM