HTML5游戏引擎-JavaScript动画

Question

JavaScript Animation is not working at all! JavaScript动画根本不起作用！

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. 此HTML5游戏引擎应允许用户使用按钮移动图像元素“斗牛士”，以躲避另一个图像元素“牛”，该图像元素应在900px x 600px的容器中不断移动。

I am not sure what is going wrong in the JavaScript to keep the image elements from moving. 我不确定JavaScript到底出了什么问题来阻止图像元素移动。

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

Answer 1

yMatador = 0px is not valid. yMatador = 0px无效。 replace all such variables to something which look like these yMatador = 0 . 将所有此类变量替换为类似于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 无效，因为顶部和左侧需要'px'值，因此将上面的值替换为这些值

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

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

Here is the updated demo 这是更新的演示

Hope this helps 希望这可以帮助

Answer 2

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 :) 并且也使用0而不是0px :)

HTML5游戏引擎-JavaScript动画

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-03-30 02:48:10

解决方案2
0 2015-03-30 02:51:26

HTML5游戏引擎-JavaScript动画

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-03-30 02:48:10

解决方案2 0 2015-03-30 02:51:26

解决方案1
1 已采纳 2015-03-30 02:48:10

解决方案2
0 2015-03-30 02:51:26