应用错误收集

JavaScript游戏引擎 - 编辑器中的代码RUNS :) Inspector中的错误？

时间：2015-03-26 15:38:24

标签： javascript html html5 compiler-errors game-engine

编辑器中的代码RUNS :) 6 Inspector中的错误??

开发游戏后，该文档能够在Dreamweaver和TacoHTML中运行。当文档加载到w3 Inspector中时，标记样式和“px”属性有6个错误。

一旦CSS3和HTML5的错误被纠正，没有什么会运行！为什么？ :( 如果有人可以修复这些错误并发布答案，引擎可以免费使用：

谢谢

<head> 
<title> Matador </title> 

<style>
#container {background-color:#FC3; position: absolute; width:1024px;     
height:600px; left:0px; top:0px;}
</style>

</head>

<body style="background-color:#F00;">
<div id="container">

<img src="matador.png" id="matador" style="position:absolute; top:200; 
left:100; width:60; height:60;" />

<img src="bull.jpg" id="bull" style="position:absolute; top:300; left:20;   
width:90; height:90;" />

<img id="matadorLife" src="matadorLife.png" style="position:absolute; 
top:605; left:960; width:60; height:60;" />

<div id="scoreId" style="position:absolute; top: 30; left: 30; font-family:    
impact; color:red; font-size: 50; text-shadow: -2px 2px 0 #FFFFFF, 2px -2px   
0 #FFFFFF, 2px 2px 0 #FFFFFF, -2px -2px 0 #FFFFFF;"> </div>

<button type="button" onClick="MoveLeft();" style="position:absolute;   
top:600; left:0; width:150; height:60; font-family: impact; color:red; font-
size: 40; text-shadow: -2px 2px 0 #FFFFFF, 2px -2px 0 #FFFFFF, 2px 2px 0 
#FFFFFF, -2px -2px 0 #FFFFFF; background-color:#FC3; text-align: center;"> 
LEFT </button>


<button type="button" onClick="MoveRight();" style="position:absolute;  
top:600; left:180; width:150; height:60; font-family: impact; color:red; 
font-size: 40; text-shadow: -2px 2px 0 #FFFFFF, 2px -2px 0 #FFFFFF, 2px 2px 
0 #FFFFFF, -2px -2px 0 #FFFFFF; background-color:#FC3; text-align: center;"> 
RIGHT </button>


<button type="button" onClick="MoveDown();" style="position:absolute;   
top:600; left:360; width:150; height:60; font-family: impact; color:red;  
font-size: 40; text-shadow: -2px 2px 0 #FFFFFF, 2px -2px 0 #FFFFFF, 2px 2px 
0 #FFFFFF, -2px -2px 0 #FFFFFF; background-color:#FC3; text-align: center;"> 
DOWN </button>


<button type="button" onClick="MoveUp();" style="position:absolute; top:600;  
left:540; width:150; height:60; font-family: impact; color:red; font-size: 
40; text-shadow: -2px 2px 0 #FFFFFF, 2px -2px 0 #FFFFFF, 2px 2px 0 #FFFFFF, 
-2px -2px 0 #FFFFFF; background-color:#FC3; text-align:center;"> UP 
</button>

</div>

<script>

var matadorObj = document.getElementById("matador").style;
var xMatador = 0;
var yMatador = 0;

var bullObj = document.getElementById("bull").style;
var xBull = 0;
var yBull = 200;

var xSpeed = 10;
var ySpeed = 10;

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 > 970 - 50)
   xMatador = 970 - 50;

   if (yMatador > 550 - 50)
   yMatador = 550 - 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 > 970 - 50)
   xMatador = 970 - 50;

   if (yMatador > 550 - 50)
   yMatador = 550 - 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 > 970 - 50)
   xMatador = 970 - 50;

   if (yMatador > 550 - 50)
   yMatador = 550 - 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 > 970 - 50)
   xMatador = 970 - 50;

   if (yMatador > 550 - 50)
   yMatador = 550 - 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 > 970 - 50)
   xMatador = 970 - 50;

   if (yMatador > 550 - 50)
   yMatador = 550 - 50;

   if (xMatador < 40)
    xMatador = 40;

    if (yMatador < 150)
   yMatador = 150;}


var timerA;
window.onload = moveBull();
function moveBull(){

   if (xBull + xSpeed > 970 - 50)
   xSpeed = -5 * Math.random() - 5 - speedInc;

   if (xBull + xSpeed < 0)
   xSpeed = 5 * Math.random() + 5 + speedInc;

   if (yBull + ySpeed > 550 - 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>

引擎结束

1 个答案:

答案 0 :(得分：0)

<!DOCTYPE HTML>
<html>

<head lang="en"> 
<title> Matador </title> 

<meta name="viewport" content="width=device-width, minimum-scale=1.0, 
maximum-scale=1.0"> 

<meta name="apple-mobile-web-app-capable" content="yes"/> 

<style type="text/css">
#container {background-color:#FC3; position: absolute; width:960px;  
height:600px; left:0px; top:0px;}
</style>

</head>

<body style="background-color:#F00;">
<div id="container">

<img src="matador.png" id="matador" alt="Matador"   
style="position:absolute; top:120px; left:40px; width:50px; height:50px;"/>

<img src="bull.png" id="bull" alt="Bull" style="position:absolute; 
top:250px; left:400px; width:50px; height:50px;"/>

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

<img id="matadorLife" src="matadorLife.png" style="position:absolute;  
top:605px; left:840px; width:50px; height:50px;" alt="MatadorLife"/>


<button type="button" onClick="MoveLeft();" style="position:absolute;   
top:600px; left:40px; width:150px; height:60px; font-family: impact; 
color:red; font-size: 40px; text-shadow: -2px 2px 0 #FFFFFF, 2px -2px 0 
#FFFFFF, 2px 2px 0 #FFFFFF, -2px -2px 0 #FFFFFF; background-color:#FC3;  
text-align: center;"> LEFT </button>

<button type="button" onClick="MoveRight();" style="position:absolute;   
top:600px; left:240px; 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:440px; 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:640px; 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>

</div>

<script type="text/javascript">
var matadorObj = document.getElementById("matador").style;
var xMatador = 0;
var yMatador = 0;

var bullObj = document.getElementById("bull").style;
var xBull = 0;
var yBull = 200;

var xSpeed = 10;
var ySpeed = 10;

var score = 0;
var speedInc = 0;

var lifeObj=document.getElementById("matadorLife").style;

function MoveRight()
{ matadorObj.left = xMatador;
   matadorObj.top = yMatador;
   xMatador = xMatador + 40 + 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 - 40 - 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 - 40 - 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 + 40 + 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 -"; 
      lifeObj.visibility="hidden"; }

   if (score == 61) {clearTimeout(timerB);
      document.getElementById("container").style.backgroundColor="red";
      matadorObj.src="matadorWon.png";
      bullObj.src="bullLost.png";}

   timerA = setTimeout("moveBull()", 20);}

var timerB;
window.onload = gameScore();
function gameScore() {  

   document.getElementById("scoreId").innerHTML = "MATADOR <br>" + score; 
   score++;
   timerB = setTimeout("gameScore()", 1000);}

</script>
</body>
</html>