Я все еще изучаю 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
27 Окт 2019 в 16:44
2 ответа
Я просматривал свой код и пытался следовать ему, как это делал бы компьютер, и обнаружил, что в строке 126 есть лишнее}. Я не знаю, почему я не получил ошибку, потому что я думаю, что это вызовет неожиданную ошибку токена, как это было раньше. Спасибо всем, кто пытался помочь мне с моим кодом.
0
Steven Motz
28 Окт 2019 в 01:56
Также: "unction ObjectCollisionFunction () {"
– Jon P
28 Окт 2019 в 03:24
Похоже, что ваш тег скрипта неправильно ссылается на файл Javascript, если вы не получаете предупреждения при загрузке страницы. Если оба файла находятся на одном уровне каталога, попробуйте использовать следующее:
<script src="./MissileSurvivalScript.js" type="text/javascript></script>
-1
Quentin
27 Окт 2019 в 17:03
В HTML нет
– base, поэтому добавление ./ не имеет значения.
Quentin
27 Окт 2019 в 17:02
1
Добавление
– type="text/javascript (а) активно вредно, потому что вы забыли ", (б) бессмысленно, потому что браузеры по умолчанию обрабатывают скрипты как JS, (в) рискованно (поскольку опечатка может нарушить его, см. ( a)) и (d) не рекомендуется спецификацией HTML. Так что не делай этого.
Quentin
27 Окт 2019 в 17:03
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.
HTMLи файлJavaScriptв одном каталоге?