Я все еще изучаю JavaScript, HTML и CSS, но я пытаюсь создать игру. Когда HTML запускается, он должен вызывать javascript, чтобы заставить изображения двигаться, но он вообще не подключается к нему.

Я пытался использовать окна предупреждений в начале кода, но они не запускаются, и я не получаю никаких сообщений об ошибках. Я также просмотрел все, что, по моему мнению, могло вызвать эту проблему.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="MissileSurvivalStyle.css" rel="stylesheet" type="text/css" />
  </head>
  <body  onload="setInterval(movePlayer, 10),  setInterval(PressRightFuction, 25), setInterval(PressLeftFuction, 25), setInterval(ObjectCollisionFunction,10), setInterval(MissileMoveFunction, 10), setInterval(Timer,1000);"  bgcolor = "DDDDDD" background="Grass.jpg">


<img id="PlayerTank" src="BlueTank.png" alt=""  width="50" height="50" Lo = "10" >


<img id="Wall1" alt = "" width = "50" Height "50" Lo = "10">
<img id="Wall2" alt = "" width = "50" Height "50" Lo = "10">
<img id="Wall3" alt = "" width = "50" Height "50" Lo = "10">
<img id="Wall4" alt = "" width = "50" Height "50" Lo = "10">
<img id="Wall5" alt = "" width = "50" Height "50" Lo = "10">
<img id="Wall6" alt = "" width = "50" Height "50" Lo = "10">
<img id="Wall7" alt = "" width = "50" Height "50" Lo = "10">
<img id="Wall8" alt = "" width = "50" Height "50" Lo = "10">
<img id="Wall9" alt = "" width = "50" Height "50" Lo = "10">
<img id="Wall10" alt = "" width = "50" Height "50" Lo = "10">

<img id="Missile1" src="Missile2.png" alt="" width = "30" height="50" Lo="10">
<img id="Missile2" src="Missile2.png" alt="" width = "30" height="50" Lo="10">
<img id="Missile3" src="Missile2.png" alt="" width = "30" height="50" Lo="10">
<img id="Missile4" src="Missile2.png" alt="" width = "30" height="50" Lo="10">
<img id="Missile5" src="Missile2.png" alt="" width = "30" height="50" Lo="10">
<img id="Missile6" src="Missile2.png" alt="" width = "30" height="50" Lo="10">
<img id="Missile7" src="Missile2.png" alt="" width = "30" height="50" Lo="10">
<img id="Missile8" src="Missile2.png" alt="" width = "30" height="50" Lo="10">
<img id="Missile9" src="Missile2.png" alt="" width = "30" height="50" Lo="10">

<img id="buttonBack" src ="ColorBack.jpg" alt ="" width = "200" height = "80" Lo="10" >

<button id="btnUp" type="button"  on-tap="mouseDown" on-release="mouseup">Up  </button>
<button id="btnDown" type="button"  on-tap="mouseDown" on-release="mouseup">Down  </button>
<button id="btnLeft" type="button"  on-tap="mouseDown" on-release="mouseup">Left  </button>
<button id="btnRight" type="button"  on-tap="mouseDown"  on-release="mouseup">Right  </button>

    <script src="MissileSurvivalScript.js">

    </script>
  </body>
</html>
alert("CONNECTED");
alert("In this game the player is trying to survive the missile attack for as long as possible.");

//Objects
var picPlayer = document.getElementById("PlayerTank");
var btnDown = document.querySelector("#btnDown");
var btnUp = document.querySelector("#btnUp");
var btnRight = document.querySelector("#btnRight");
var btnLeft = document.querySelector("#btnLeft");
  //Walls{
var picWall1 = document.getElementById("Wall1");
var picWall2 = document.getElementById("Wall2");
var picWall3 = document.getElementById("Wall3");
var picWall4 = document.getElementById("Wall4");
var picWall5 = document.getElementById("Wall5");
var picWall6 = document.getElementById("Wall6");
var picWall7 = document.getElementById("Wall7");
var picWall8 = document.getElementById("Wall8");
var picWall9 = document.getElementById("Wall9");
var picWall10 = document.getElementById("Wall10");
  //}
  //Missiles{
var picMissile1 = document.getElementById("Missile1");
var picMissile2 = document.getElementById("Missile2");
var picMissile3 = document.getElementById("Missile3");
var picMissile4 = document.getElementById("Missile4");
var picMissile5 = document.getElementById("Missile5");
var picMissile6 = document.getElementById("Missile6");
var picMissile7 = document.getElementById("Missile7");
var picMissile8 = document.getElementById("Missile8");
var picMissile9 = document.getElementById("Missile9");
  //}


//Varibles
var dblplayertop = 300.0;
var dblplayerleft = 200.0;
var dblSpeed = 0.0;
var dblangle = 0.0;
var blnSpinR = false;
var blnSpinL = false;
var blnGoForward = false;
var blnGoBack = false;
var dblMathAngle = 90;
var blnPlayerMove = true;
var intTime = 0;
var blnEnd = false;
  var dblLeftSpeed = 0.0;
  var dblTopSpeed = 0.0;

//Buttons ------------------------------------------------------

btnUp.addEventListener("mousedown", mouseDownU);
btnDown.addEventListener("mousedown", mouseDownD);
btnRight.addEventListener("mousedown", mouseDownR);
btnLeft.addEventListener("mousedown", mouseDownL);
btnUp.addEventListener("mouseup", mouseUpU);
btnDown.addEventListener("mouseup", mouseUpD);
btnRight.addEventListener("mouseup", mouseUpR);
btnLeft.addEventListener("mouseup", mouseUpL);


//Fuctions -------------------------------------------------------
 function PressRightFuction(){
   if (blnSpinR == true){
        dblangle += 1;
   document.getElementById("PlayerTank").style.transform = "rotate(" + dblangle + "deg)";
   dblMathAngle--;
   if (dblMathAngle == -1)
     dblMathAngle = 359;

   }

 }

function PressLeftFuction(){
  if (blnSpinL == true){
     dblangle -= 1;
   document.getElementById("PlayerTank").style.transform = "rotate(" + dblangle + "deg)";
   dblMathAngle++;
   if (dblMathAngle == 360)
   dblMathAngle = 0;
  }
}


function movePlayer() {
  var dblSpeedPerAngle = 0.0;
  var dblNewAngle = 0.0;

if (dblMathAngle >= 0 && dblMathAngle <= 90) {  // First Quad
dblNewAngle = 90 - dblMathAngle;
dblSpeedPerAngle = dblSpeed / 90;
dblLeftSpeed = dblSpeedPerAngle * dblNewAngle;
dblTopSpeed = (dblSpeed - dblLeftSpeed) * -1;
}else if (dblMathAngle >= 91 && dblMathAngle <= 180 ){ // Second Quad
dblNewAngle = 90 - dblMathAngle;
dblSpeedPerAngle = dblSpeed / 90;
dblLeftSpeed = dblSpeedPerAngle * dblNewAngle;
dblTopSpeed = (dblSpeed + dblLeftSpeed) * -1;
}else if (dblMathAngle >= 181 && dblMathAngle <= 270){ // Third Quad
dblNewAngle = 270 - dblMathAngle;
dblSpeedPerAngle = dblSpeed / 90;
dblLeftSpeed = dblSpeedPerAngle * dblNewAngle * -1;
dblTopSpeed = (dblSpeed + dblLeftSpeed);
}else{ // Forth Quad
dblNewAngle = 270 - dblMathAngle;
dblSpeedPerAngle = dblSpeed / 90;
dblLeftSpeed = dblSpeedPerAngle * dblNewAngle  * -1 ;
dblTopSpeed = (dblSpeed - dblLeftSpeed);

}

//console.log(dblplayerleft);
dblplayerleft +=  dblLeftSpeed/2;
dblplayertop += dblTopSpeed/2;
  document.getElementById("PlayerTank").style.top = dblplayertop + "px";
  document.getElementById("PlayerTank").style.left = dblplayerleft + "px";


}
////////////////////////////////////////



}
function mouseDownU(){
  if(blnPlayerMove == true){
blnGoForward = true;
dblSpeed = 5;
  }

}

function mouseDownD(){
  if (blnPlayerMove == true){
    blnGoBack = true;
dblSpeed = -5;
  }

}

function mouseDownR() {
 blnSpinR = true;
}

function mouseDownL() {
  blnSpinL = true;
}

function mouseUpU(){
blnGoForward = false;
dblSpeed = 0;
blnPlayerMove = true;
}
function mouseUpD(){
blnGoBack = false;
dblSpeed = 0;
blnPlayerMove = true;
}
function mouseUpR() {
 blnSpinR = false;
} 

function mouseUpL() {
 blnSpinL = false;
}
unction ObjectCollisionFunction(){

  if ((ObjectBounds(picWall1,picPlayer) == true)||(ObjectBounds(picWall2,picPlayer) == true)||(ObjectBounds(picWall3,picPlayer) == true)||(ObjectBounds(picWall4,picPlayer) == true)||(ObjectBounds(picWall5,picPlayer) == true)||(ObjectBounds(picWall6,picPlayer) == true)||(ObjectBounds(picWall7,picPlayer) == true)||(ObjectBounds(picWall8,picPlayer) == true)||(ObjectBounds(picWall9,picPlayer) == true)||(ObjectBounds(picWall10,picPlayer) == true)){
    dblplayerleft += (dblLeftSpeed * -1) ;
    dblplayertop += (dblTopSpeed * -1);

    document.getElementById("PlayerTank").style.top = dblplayertop + "px";
    document.getElementById("PlayerTank").style.left = dblplayerleft + "px";

    dblLeftSpeed = 0.0;
    dblTopSpeed = 0.0;


    blnPlayerMove = false;
  }
  if (blnEnd == false){
  if ((ObjectBounds(picPlayer,picMissile1) == true)||(ObjectBounds(picPlayer,picMissile2) == true)||(ObjectBounds(picPlayer,picMissile3) == true)||(ObjectBounds(picPlayer,picMissile4) == true)||(ObjectBounds(picPlayer,picMissile5) == true)||(ObjectBounds(picPlayer,picMissile6) == true)||(ObjectBounds(picPlayer,picMissile7) == true)||(ObjectBounds(picPlayer,picMissile8) == true)||(ObjectBounds(picPlayer,picMissile9) == true)){
    blnEnd = true;
    alert("Your Score was " + intTime );
    alert("please refresh the page to restart the game");

  }
  }

}
function Timer(){
intTime += 1;
}



function ObjectBounds( object1, object2){
  var blncheck = false;
const style1 = getComputedStyle(object1)
const style2 = getComputedStyle(object2)
const object1Top = parseInt(style1.top)
const object1Left = parseInt(style1.left)
const object1Height = parseInt(style1.height)
const object1Width = parseInt(style1.width)
const object2Top = parseInt(style2.top)
const object2Left = parseInt(style2.left)
const object2Height = parseInt(style2.height)
const object2Width = parseInt(style2.width)

    for (intCounter1 = 0; intCounter1 < object2Height; intCounter1++){
      for(intCounter2 = 0; intCounter2 < object2Width; intCounter2++){
        if (((intCounter1 + object2Top) >=   object1Top) && (intCounter1 + object2Top) <= (object1Height + object1Top) && ((intCounter2 + object2Left) >= object1Left && (intCounter2 + object2Left) <= object1Width + object1Left)){

           blncheck = true;

           }


      }
    }
return blncheck;
}
function MissileMoveFunction(){
MissileMovement(picMissile1);
MissileMovement(picMissile2);
MissileMovement(picMissile3);
MissileMovement(picMissile4);
MissileMovement(picMissile5);
MissileMovement(picMissile6);
MissileMovement(picMissile7);
MissileMovement(picMissile8);
MissileMovement(picMissile9);

}


function MissileMovement(object1){
  const style1 = getComputedStyle(object1);
var num = parseInt(style1.top) - 3;
var num2 = parseInt(style1.left) + 50;
object1.style.top = num + "px";
if (ObjectBounds(picWall1,object1) == true){
  object1.style.top = 910 + "px";
  object1.style.left = num2 + "px";
}
if (ObjectBounds(picWall4,object1) == true){
  object1.style.left = 50 + "px";
}
}

Я ожидаю, что HTML-код вызывает javascript и вызывает окно предупреждения, но он не вызывает javascript.

0
Steven Motz

2 ответа

Я просматривал свой код и пытался следовать ему, как это делал бы компьютер, и в строке 126 я обнаружил, что есть дополнительный код}. Я не знаю, почему я не получил ошибку, потому что думаю, что это вызовет неожиданную ошибку токена, как это было раньше. Спасибо всем, кто пытался помочь мне с моим кодом.

Похоже, ваш тег сценария неправильно ссылается на файл Javascript, если вы не получаете оповещения при загрузке страницы. Если оба файла находятся на одном уровне каталогов, попробуйте использовать ниже:

<script src="./MissileSurvivalScript.js" type="text/javascript></script>

58579961