Question

添加使得猫一直向左产卵并且不能移动它也破坏了moveguydown功能。它几乎破坏了一切

看看其他人如何解决此问题，他们在px的width和height属性中添加了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”）;

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

这里有几个问题：

1-您没有关闭脚本标签。您应该在JavaScript代码之后添加</script>。

2-{{1}}运算符用于单行注释，而您将其用于：

//

是多行注释。对于多行注释，请改用//This function is the initial setup for the game aka score, sound, monster spawn。

3-定义字符串时，应该以一行进行（至少在HTML文件中使用脚本标签时，例如您的情况）。 或者，您可以将引号替换为反引号（`）。例如，替换：

/* some comment */

通过

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

Answer 2

您在Quirks Mode中。

每个当前网页都必须具有doctype。没有一个人，您就处在"quirks mode"中，就像1999年一样。每个网页上要做的第一件事是doctype，它将设置页面的框模型。怪癖模式是过时的错误（我认为）。

最好的办法是从doctype重新开始，然后您将获得原本应该使用的页面。

https://hsivonen.fi/doctype/

在“怪癖”模式下，浏览器违反了当代Web格式规范以避免“破坏”根据到1990年代后期流行的做法。先前，不同的浏览器实现了不同的怪癖。特别是在 Internet Explorer 6、7、8和9，Quirks模式被有效冻结 IE 5.5 ...

除了在每个页面上正确实现doctype之外，做任何事情充其量都是黑客。

每次我添加它都会破坏我的代码

2 个答案: