我加 <!DOCTYPE html> 它破壞了我的代碼，沒有它，它會完美地工作

Question

每次我在頂部添加老鼠時都不會掉下來。 我看到其他人有這個問題，這與在某些事情上添加px有關。 我在某些代碼中有這個提示，但是我不知道還有什么地方需要它。

的CSS

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>

<title>Balloons Toss</title>
<meta charset="utf-8" />

<meta name="Author" content="Tyler Chretien" />
<meta name="Author" content="Karishma" />
<meta name="Author" content="Eric Nguygen" />

<meta name="robots" content="noindex, nofollow" />
<style>


#SPAN_1:hover{color:blue;}
#SPAN_1{color:black;}

#SPAN_2:hover{color:blue;}
#SPAN_2{color:black;}

table.center {
margin-left:auto; 
margin-right:auto;
width: 560px;
text-align: center;
}


@font-face{
font-family: memes;
src: url(DeterminationSansWeb.woff);
}

body{
font-family: memes, sans-serif;
background-color: black;
}

.blackbox{
color: white;
width: 300px;
}

td{
height: 900px;
}

img, body{
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}

img {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
}
</style>

的JavaScript

<script>
var numberOfMonster= 0, setupScore, setupMonster, names=["rat.gif"],             
catleft = 325, catright= 250, ratleft, ratright, countElement, howfast= 
10, score = 0;

/*This function is the initial setup for the game aka score, sound,     
monster spawn */
function myFunction()
{
spawntheMonster( 0 );
document.all.coolscore.innerHTML= 0;
setupScore=setInterval(function(){score++;             
document.all.coolscore.innerHTML=score;}, 1000 );
setupMonster=setInterval(function(){spawntheMonster( 0 );}, 3000 );
document.getElementById('sound').play();
}

 /*Next four function are deticated for moving the cat and setting 
 boundaries */
 function leftArrowPressed()
 {
  var element = document.getElementById("cat"); 

  if(parseInt(element.style.right.substring(element.style.right.length 
- 2 , 0 )) > 0 ) {
        element.style.right = parseInt(element.style.right) - 
20 + 'px';          
  }

 }         

 function rightArrowPressed() 
 {
   var element = document.getElementById("cat");


  if(parseInt(element.style.right.substring(element.style.right.length - 
  2 
  , 0 )) < 480 ) {
          element.style.right = parseInt(element.style.right) 
  + 20 + 'px';
     }
  }

function upArrowPressed() 
 {
    var element = document.getElementById("cat");

    if(parseInt(element.style.top.substring(element.style.top.length - 2 
, 
   0 )) > 0 ) {
           element.style.top = parseInt(element.style.top) - 
   20 + 'px';
    }
   }

   function downArrowPressed() 
   {
    var element = document.getElementById("cat");


   if(parseInt(element.style.top.substring(element.style.top.length - 2 , 
   0 )) < 740 ) {
           element.style.top = parseInt(element.style.top) + 
   20 + 'px';
    }
    }

   /* connects the id's of arrow keys and w,a,s,d to the previous 
  functions to be able to move  */  
  function movetheguy(event){
switch (event.keyCode) {
       case 39:
         leftArrowPressed();
         break;

       case 37:
         rightArrowPressed();
         break;

       case 38:
          upArrowPressed();
          break;

       case 40:
          downArrowPressed();
          break;

       case 68:
          leftArrowPressed();
          break;

       case 65:
          rightArrowPressed();
          break;

        case 87:
           upArrowPressed();
           break;

        case 83:
           downArrowPressed();
           break;
}
}

 /* sets spawn, attributes, and clickablity of the rats */
 function spawntheMonster(monster){

var widthrandom = Math.floor(Math.random() * 112 )* 5 - 20;
widthrandom     = "position:absolute; right: "+widthrandom+"; top: 
 000;";
var z           = document.createElement("IMG"); 

z.setAttribute("src", names[monster]);
z.setAttribute("style", widthrandom);
z.setAttribute("width", "40");
z.setAttribute("height", "54");
z.setAttribute("id", numberOfMonster+"mon");
z.setAttribute("onLoad", "setInterval(moveguydown, 100, this);");
z.setAttribute("onClick", "this.style.top=parseInt(this.style.top)-75;");

document.getElementById("back1").appendChild(z);
numberOfMonster++;
 }

/* moves the rats */
function moveguydown(moveMonster){

if(parseInt(moveMonster.style.top)>= 900 ){
    moveMonster.style.top= -500;
    moveMonster.style.right=Math.floor(Math.random() * 112 )* 5 - 
  20;  //check this
}
else
    moveMonster.style.top=parseInt(moveMonster.style.top)+howfast;
    overlap(moveMonster);
 }

  /* randomly spawns the rats */
 function randomspawn(){

spawntheMonster(Math.floor(Math.random() * names.length));
}


  /* This function displays the end screen and resets game*/
   function die(){
var highscore=document.all.coolscore.innerHTML;
var count;
for(count= 0 ; count<numberOfMonster; count++){
    countElement=document.getElementById(count+"mon");
    document.getElementById("back1").removeChild(countElement);
}

numberOfMonster = 0;
document.all.coolscore.innerHTML=
"GAME OVER<br><span onClick='location.reload();'>Click to restart! 
  </span><br>SCORE: "+score+
"<font size='5'><br>Thanks to<br>Cat By: PRguitarman<br>Sound By: Jay 
   Man<br>Rats By: Yacht Club Games";
clearInterval(setupScore);
clearInterval(setupMonster);
 }

 /* Compares hit boxes and checks to see if you die */
 function overlap(obj){
catleft =parseInt(cat.style.right)+ 75;
catright=parseInt(cat.style.right);
ratleft =parseInt(obj.style.right)+parseInt(obj.width);
ratright=parseInt(obj.style.right);

cattop =parseInt(cat.style.top);
catbot=parseInt(cat.style.top)+ 150;
rattop =parseInt(obj.style.top)+parseInt(obj.height);
ratbottom=parseInt(obj.style.top);  

 if(rattop<catbot && ratbottom>cattop && ratright<catleft && 
ratleft>catright)

    die();


}

 /* Switches difficulty and sound */
 function twospeeds(){

if(howfast== 30 ){//fast
        back1.style.backgroundImage="url('large0.gif')";
        howfast= 10;}
if(howfast== 10){//WAY too fast
        back1.style.backgroundImage="url('large2.gif')";
        howfast= 30;
        document.getElementById('sound').src="sun.mp3";
        document.getElementById('sound').play();
        }
  }

 </script>
 </head>

html

<body onKeyDown="" onkeyup="movetheguy(event);" >

<table class="center" style="position: relative;">
 <tbody><tr>
 <td id="back1"  style="vertical-align: text-top; font-size:400%; 
 background- 
image: url('large0.gif'); position: relative;">

    <div class = "no-copy" id="coolscore">
        <span onclick="myFunction();" id="SPAN_1">CLICK HERE 
 TO START</span>
        <span onclick="twospeeds();" id="SPAN_2" style="font- 
 size:42px;">Click here for Insane mode</span>
        <span style="font-size:24px;"><br>Use the Arrow Keys 
  or WASD to move<br>Click on the rats to move them up</span>
    </div>


<br><br><br><br><img alt = "cat" src="cat.gif" width="75" height="150" 
  id="cat" style="position: absolute; right: 250px; top: 500px">

</td>
</tr>
</tbody>
</table>

<audio id="sound" hidden src="sound.mp3" >
</audio>
<audio id="sound2" hidden src="sun.mp3" >
</audio>
<footer style="border-top: 1px solid blue">
 <a href="http://elvis.rowan.edu/~chretient7/"
title="Link to my home page">
Tyler Chretien
</a>

<span style="float: right;">
<a href="http://validator.w3.org/check/referer">HTML5</a> /
<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">
CSS3 </a>
</span>
</footer>
</body>
</html>

https://github.com/Crouton18/game/blob/master/balloon.html

您可以通過刪除代碼中的來檢查其應如何工作。 但是總的來說，老鼠需要掉下來，當貓被打時，游戲結束。

Answer 1

因為HTML標記是XHTML。 請改用以下文檔類型：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

我加 <!DOCTYPE html> 它破壞了我的代碼，沒有它，它會完美地工作

問題描述

1 個解決方案

解決方案1
2 2019-05-10 01:04:51

我加 <!DOCTYPE html> 它破壞了我的代碼，沒有它，它會完美地工作

問題描述

1 個解決方案

解決方案1 2 2019-05-10 01:04:51

解決方案1
2 2019-05-10 01:04:51