我加 <!DOCTYPE html> 它破坏了我的代码，没有它，它会完美地工作

Question

Every time i add the rats at the top dont fall down. 每次我在顶部添加老鼠时都不会掉下来。 I saw other people had this problem and it had to do with adding px to certain things. 我看到其他人有这个问题，这与在某些事情上添加px有关。 i have that in some of my code but i have no clue where else it needs it. 我在某些代码中有这个提示，但是我不知道还有什么地方需要它。

CSS 的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 的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 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 https://github.com/Crouton18/game/blob/master/balloon.html

You can check by removing the in the code how it suppose to work. 您可以通过删除代码中的来检查其应如何工作。 But in general the rats need to be falling down and when the cat gets hit the game ends. 但是总的来说，老鼠需要掉下来，当猫被打时，游戏结束。

Answer 1

Because the HTML tag is XHTML. 因为HTML标记是XHTML。 Use this doctype instead: 请改用以下文档类型：

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