<script>不能在HTML文件中工作

我是js的noob，但是我對它的工作方式有一些體面的理解... 反正我找到了這段代碼並試圖把它發佈到我的網站上annane.us/games/阻止作爲測試並且腳本無響應。當我去我的域名主機的文件管理器，我發現編輯的代碼<script>不能在HTML文件中工作

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
 
<style> 
 
canvas { 
 
    border:1px solid #000000; 
 
    background-color: #000000; 
 
} 
 
</style> 
 
</head> 
 
<body onload="startGame()"> 
 
<script> 
 

 
var myGamePiece; 
 
var myObstacles = []; 
 
var myScore; 
 

 
function startGame() { 
 
    myGamePiece = new component(30, 30, "red", 10, 120); 
 
    myGamePiece.gravity = 0.05; 
 
    myScore = new component("30px", "Consolas", "Red", 280, 40, "text"); 
 
    myGameArea.start(); 
 
} 
 

 
var myGameArea = { 
 
    canvas : document.createElement("canvas"), 
 
    start : function() { 
 
     this.canvas.width = 480; 
 
     this.canvas.height = 270; 
 
     this.context = this.canvas.getContext("2d"); 
 
     document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
 
     this.frameNo = 0; 
 
     this.interval = setInterval(updateGameArea, 20); 
 
     }, 
 
    clear : function() { 
 
     this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
 
    } 
 
} 
 

 
function component(width, height, color, x, y, type) { 
 
    this.type = type; 
 
    this.score = 0; 
 
    this.width = width; 
 
    this.height = height; 
 
    this.speedX = 0; 
 
    this.speedY = 0;  
 
    this.x = x; 
 
    this.y = y; 
 
    this.gravity = 0; 
 
    this.gravitySpeed = 0; 
 
    this.update = function() { 
 
     ctx = myGameArea.context; 
 
     if (this.type == "text") { 
 
      ctx.font = this.width + " " + this.height; 
 
      ctx.fillStyle = color; 
 
      ctx.fillText(this.text, this.x, this.y); 
 
     } else { 
 
      ctx.fillStyle = color; 
 
      ctx.fillRect(this.x, this.y, this.width, this.height); 
 
     } 
 
    } 
 
    this.newPos = function() { 
 
     this.gravitySpeed += this.gravity; 
 
     this.x += this.speedX; 
 
     this.y += this.speedY + this.gravitySpeed; 
 
     this.hitBottom(); 
 
    } 
 
    this.hitBottom = function() { 
 
     var rockbottom = myGameArea.canvas.height - this.height; 
 
     if (this.y > rockbottom) { 
 
      this.y = rockbottom; 
 
      this.gravitySpeed = 0; 
 
     } 
 
    } 
 
    this.crashWith = function(otherobj) { 
 
     var myleft = this.x; 
 
     var myright = this.x + (this.width); 
 
     var mytop = this.y; 
 
     var mybottom = this.y + (this.height); 
 
     var otherleft = otherobj.x; 
 
     var otherright = otherobj.x + (otherobj.width); 
 
     var othertop = otherobj.y; 
 
     var otherbottom = otherobj.y + (otherobj.height); 
 
     var crash = true; 
 
     if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) { 
 
      crash = false; 
 
     } 
 
     return crash; 
 
    } 
 
} 
 

 
function updateGameArea() { 
 
    var x, height, gap, minHeight, maxHeight, minGap, maxGap; 
 
    for (i = 0; i < myObstacles.length; i += 1) { 
 
     if (myGamePiece.crashWith(myObstacles[i])) { 
 
      return; 
 
     } 
 
    } 
 
    myGameArea.clear(); 
 
    myGameArea.frameNo += 1; 
 
    if (myGameArea.frameNo == 1 || everyinterval(150)) { 
 
     x = myGameArea.canvas.width; 
 
     minHeight = 20; 
 
     maxHeight = 200; 
 
     height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight); 
 
     minGap = 50; 
 
     maxGap = 200; 
 
     gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap); 
 
     myObstacles.push(new component(10, height, "red", x, 0)); 
 
     myObstacles.push(new component(10, x - height - gap, "red", x, height + gap)); 
 
    } 
 
    for (i = 0; i < myObstacles.length; i += 1) { 
 
     myObstacles[i].x += -1; 
 
     myObstacles[i].update(); 
 
    } 
 
    myScore.text="SCORE: " + myGameArea.frameNo; 
 
    myScore.update(); 
 
    myGamePiece.newPos(); 
 
    myGamePiece.update(); 
 
} 
 

 
function everyinterval(n) { 
 
    if ((myGameArea.frameNo/n) % 1 == 0) {return true;} 
 
    return false; 
 
} 
 

 
function accelerate(n) { 
 
    myGamePiece.gravity = n; 
 
} 
 
</script> 
 
<br> 
 
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.1)">UP</button> 
 
<p>Use the UP button to stay in the air</p> 
 
<p>How long can you stay alive?</p> 
 
<p>Refresh your page to restart the game</p> 
 
</body> 
 
</html>

到

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
 
<style> 
 
canvas { 
 
    border:1px solid #000000; 
 
    background-color: #000000; 
 
} 
 
</style> 
 
</head> 
 
<body onload="startGame()"> 
 
<p> 
 
<script>// <![CDATA[ 
 
var myGamePiece; 
 
var myObstacles = []; 
 
var myScore; 
 

 
function startGame() { 
 
    myGamePiece = new component(30, 30, "red", 10, 120); 
 
    myGamePiece.gravity = 0.05; 
 
    myScore = new component("30px", "Consolas", "Red", 280, 40, "text"); 
 
    myGameArea.start(); 
 
} 
 

 
var myGameArea = { 
 
    canvas : document.createElement("canvas"), 
 
    start : function() { 
 
     this.canvas.width = 480; 
 
     this.canvas.height = 270; 
 
     this.context = this.canvas.getContext("2d"); 
 
     document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
 
     this.frameNo = 0; 
 
     this.interval = setInterval(updateGameArea, 20); 
 
     }, 
 
    clear : function() { 
 
     this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
 
    } 
 
} 
 

 
function component(width, height, color, x, y, type) { 
 
    this.type = type; 
 
    this.score = 0; 
 
    this.width = width; 
 
    this.height = height; 
 
    this.speedX = 0; 
 
    this.speedY = 0;  
 
    this.x = x; 
 
    this.y = y; 
 
    this.gravity = 0; 
 
    this.gravitySpeed = 0; 
 
    this.update = function() { 
 
     ctx = myGameArea.context; 
 
     if (this.type == "text") { 
 
      ctx.font = this.width + " " + this.height; 
 
      ctx.fillStyle = color; 
 
      ctx.fillText(this.text, this.x, this.y); 
 
     } else { 
 
      ctx.fillStyle = color; 
 
      ctx.fillRect(this.x, this.y, this.width, this.height); 
 
     } 
 
    } 
 
    this.newPos = function() { 
 
     this.gravitySpeed += this.gravity; 
 
     this.x += this.speedX; 
 
     this.y += this.speedY + this.gravitySpeed; 
 
     this.hitBottom(); 
 
    } 
 
    this.hitBottom = function() { 
 
     var rockbottom = myGameArea.canvas.height - this.height; 
 
     if (this.y > rockbottom) { 
 
      this.y = rockbottom; 
 
      this.gravitySpeed = 0; 
 
     } 
 
    } 
 
    this.crashWith = function(otherobj) { 
 
     var myleft = this.x; 
 
     var myright = this.x + (this.width); 
 
     var mytop = this.y; 
 
     var mybottom = this.y + (this.height); 
 
     var otherleft = otherobj.x; 
 
     var otherright = otherobj.x + (otherobj.width); 
 
     var othertop = otherobj.y; 
 
     var otherbottom = otherobj.y + (otherobj.height); 
 
     var crash = true; 
 
     if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) { 
 
      crash = false; 
 
     } 
 
     return crash; 
 
    } 
 
} 
 

 
function updateGameArea() { 
 
    var x, height, gap, minHeight, maxHeight, minGap, maxGap; 
 
    for (i = 0; i < myObstacles.length; i += 1) { 
 
     if (myGamePiece.crashWith(myObstacles[i])) { 
 
      return; 
 
     } 
 
    } 
 
    myGameArea.clear(); 
 
    myGameArea.frameNo += 1; 
 
    if (myGameArea.frameNo == 1 || everyinterval(150)) { 
 
     x = myGameArea.canvas.width; 
 
     minHeight = 20; 
 
     maxHeight = 200; 
 
     height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight); 
 
     minGap = 50; 
 
     maxGap = 200; 
 
     gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap); 
 
     myObstacles.push(new component(10, height, "red", x, 0)); 
 
     myObstacles.push(new component(10, x - height - gap, "red", x, height + gap)); 
 
    } 
 
    for (i = 0; i < myObstacles.length; i += 1) { 
 
     myObstacles[i].x += -1; 
 
     myObstacles[i].update(); 
 
    } 
 
    myScore.text="SCORE: " + myGameArea.frameNo; 
 
    myScore.update(); 
 
    myGamePiece.newPos(); 
 
    myGamePiece.update(); 
 
} 
 

 
function everyinterval(n) { 
 
    if ((myGameArea.frameNo/n) % 1 == 0) {return true;} 
 
    return false; 
 
} 
 

 
function accelerate(n) { 
 
    myGamePiece.gravity = n; 
 
} 
 
// ]]></script> 
 
</p> 
 
<p><br /> <button>UP</button></p> 
 
<p>Use the UP button to stay in the air</p> 
 
<p>How long can you stay alive?</p> 
 
<p>Refresh your page to restart the game</p> 
 
</body> 
 
</html>

如果有人可以幫助我解決這個這將不勝感激

來源

2017-04-01 Aden Annane

您是否試過將腳本移動到頭部？你在加載之前調用函數... – Squeakasaur

你有什麼瀏覽器有問題？這兩個片段在我的瀏覽器上工作正常（linux上的firefox） – Icepickle

@Squeakasaur他從onload運行代碼，然後它只會在所有東西都加載後運行（body屬性不需要委託，如你所見[這裏]） https://www.w3schools.com/tags/ev_onload.asp） – Icepickle

你把你的腳本代碼在身體的一部分，但你應該把你的腳本在你的腦袋標籤：

<html> 
    <head> 
    <script> 
    ----add your script here---- 
    </script> 
    </head> 


    <body> 
    <form> 
    ----- your contents----- 
    </form> 
    </body> 
    </html>

您收到此錯誤的原因是，你在錯誤的代碼按鈕標籤。你應該更換你的按鈕標籤：

<form> <button>UP</button></form> //replace this with below command and its working

按鈕標籤將onmousedown事件和刪除標記，因爲JavaScript的作品在DOM屬性，所以你不能把一個額外的標籤。

<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.1)">UP</button>

來源

2017-04-01 19:27:08

<script>不能在HTML文件中工作

回答

相關問題