HTML5 游戏引擎 - JavaScript 动画

Question

JavaScript 动画根本不工作！

此 HTML5 游戏引擎应允许用户使用按钮移动图像元素 "matador" 以躲避另一个图像元素 "bull"，该元素应不断移动 900px 600 像素容器。

我不确定 JavaScript 中出现了什么问题以防止图像元素移动。

如果你能找出这些函数中的错误，你就是一个超级天才。 :)

 <!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 无效。将所有此类变量替换为类似 yMatador = 0.

的内容

这将导致

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

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

无效，因为顶部和左侧需要 'px' 值，所以用这些

替换上面的值

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

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

这是更新后的 demo

希望对您有所帮助

Answer 2

嗯，这一行

window.onload = gameScore();

应该是

window.onload = gameScore;

没有括号。如果它们在那里，它将执行该函数而不是引用它。这意味着将分配结果（未定义）而不是函数。现在应该工作了！并且还使用 0 而不是 0px :)

HTML5 游戏引擎 - JavaScript 动画

HTML5 Game Engine - JavaScript Animation

html

javascript

if-statement

game-engine