每次我添加 <!DOCTYPE html> 它破坏了我的代码

Question

adding makes it so the cat spawns all the way to the left and cant move it also breaks the moveguydown function. 添加它使得猫一直向左生成并且无法移动它也会破坏moveguydown功能。 It pretty much breaks everything 它几乎打破了一切

Look at what other people did to fix this, they added px to width and height attributes but im pretty sure i did that to everything that needs it 看看其他人做了什么来解决这个问题，他们将px添加到宽度和高度属性但是我非常确定我对所有需要它的人都这样做了

<script language = "JavaScript">
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"); 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));
}


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();
        }
}

Answer 1

A few issues here: 这里有几个问题：

1 - You are not closing the script tag. 1 - 您没有关闭脚本标记。 You should add </script> after your javascript code. 你应该在你的javascript代码后添加</script> 。

2 - The // operator is meant for single-line comments , while you are using it for: 2 - //运算符用于单行注释 ，而您用于：

//This function is the initial setup for the game aka score, sound, 
monster spawn

Which is a multi-line comment. 这是一个多行评论。 For multi-line comments, use /* some comment */ instead. 对于多行注释，请使用/* some comment */ 。

3 - When defining a string, you should do so in a single line (at least when you are using a script tag in an HTML file, like in your case). 3 - 定义字符串时，您应该在一行中完成 （至少在HTML文件中使用脚本标记时，就像在您的情况下一样）。 Or, you can replace the quotation marks with backticks (`) . 或者，您可以用反引号（`）替换引号 。 Eg, replace: 例如，替换：

document.all.coolscore.innerHTML=
    "GAME OVER<br><span onClick='location.reload();'>Click to restart! 
    </span><br>SCORE: "+score+
    "

by 通过

document.all.coolscore.innerHTML=
    `GAME OVER<br><span onClick='location.reload();'>Click to restart! 
    </span><br>SCORE: "+score+
    `

每次我添加 <!DOCTYPE html> 它破坏了我的代码

问题描述

1 个解决方案

解决方案1
0 2019-05-09 19:52:58

每次我添加 <!DOCTYPE html> 它破坏了我的代码

问题描述

1 个解决方案

解决方案1 0 2019-05-09 19:52:58

解决方案1
0 2019-05-09 19:52:58