不循環嗎？ HTML5和JavaScript
[英]Not Looping? HTML5 and JavaScript
問題描述
我不知道為什么這段代碼不會循環。 我很激動，希望有人可以幫我。 這是我第一次嘗試進入HTML5和JavaScript世界，也是我的第一篇StackOverflow文章。 我的背景是Java，因此應該解釋我代碼中的怪癖。 順便說一句，如果您運行代碼，畫布和球將顯示出來，只是不會移動。
首先，這是HTML5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ChainReaction5</title>
<script type="text/javascript" src="chain_reaction.js"></script>
</head>
<body>
<body onLoad="init();">
<canvas id="myCanvas" width="500" height="400">
Your browser dosen't support the HTML5 canvas.</canvas><br />
</body>
</html>
其次是js
//gobal vars
var context;
var box;
var balls;
var defaultBallX=240;
var defaultBallY=190;
var defaultBallRad=6;
var defaultBallV=5;
var defaultNumBalls=10;
//box class
function Box() {
var boxx=20;
var boxy=20;
var boxWidth=460;
var boxHeight=360;
this.getX = function() {return boxx;}
this.getY = function() {return boxy;}
this.getWidth = function() {return boxWidth;}
this.getHeight = function() {return boxHeight;}
this.getBalls = function() {return ball;}
this.paintMe = function() {
context.fillStyle = "black";
context.strokeRect(boxx, boxy, boxWidth, boxHeight);
}
}
/* Box Class
* this class is sloppy but more memory efficent
*/
function Ball(x, y, radius, vx, vy, color) {
this.x=x;
this.y=y;
this.radius=radius;
this.vx=vx;
this.vy=vy;
this.color=color;
this.paintMe = function() {
context.beginPath();
context.arc(this.x, this.y, radius, 0, 2*Math.PI, true);
context.fillStyle = this.color;
context.fill();
}
}
Array.prototype.appendBalls = new function(array) {}
Array.prototype.clearBalls = new function() {}
Array.prototype.appendBalls = function(array) {
for (var i = 0; i < array.length; i++) {
balls.push(array[i]);
}
}
Array.prototype.clearBalls = function() {
balls = new Array();
}
// begin program
function init() {
context = document.getElementById("myCanvas").getContext("2d");
box = new Box();
balls = new Array();
balls.appendBalls(createBalls(box, defaultNumBalls));
setInterval(moveBall(balls, box), 100);
}
function createBalls(box, numBalls) {
var locBalls = new Array(numBalls);
for (var i = 0; i < numBalls; i++) {
var randx = randp(50, 400)
var randy = randp(50, 300);
var randr = Math.random()*defaultBallRad+1;
var randvx = randv();
var randvy = randv();
var randc = randColor();
locBalls[i] = new Ball(randx, randy, randr, randvx, randvy, randc);
}
return locBalls;
function randv() {
var neg = 1;
if (Math.random()>.5) neg = -neg;
return Math.random()*defaultBallV*neg;
}
function randp(low, hight) {
if (low < 0) low = 0;
var p = -1;
while (p > hight || p < low) {
p = Math.random()*hight;
}
return p;
}
function randColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
}
function moveBall(balls, box) {
clear(this.box);
this.box.paintMe();
for (var i = 0; i < this.balls.length; i++) {
moveAndCheck(this.balls[i], this.box);
}
}
function moveAndCheck(b, box) {
if ((b.x+b.vx+b.radius-1)>(this.box.boxWidth+this.box.boxx) || b.x+b.vx-b.radius<this.box.boxx+1) {
b.vx = -b.vx;
}
if ((b.y+b.vy+b.radius-1)>(this.box.boxHeight+this.box.boxy) || b.y+b.vy-b.radius<this.box.boxy+1) {
b.vy = -b.vy;
}
b.x += b.vx;
b.y += b.vy;
b.paintMe();
}
function clear(box) {
context.clearRect(this.box.boxx, this.box.boxy,
this.box.boxWidth, this.box.boxHeight);
}
2 個解決方案
解決方案1
0 2011-10-07 00:01:06
第一次嘗試運行它時，我在Firebug控制台中得到了以下內容：
無用的setInterval調用（是否缺少引號引號？）[發生此錯誤時中斷] setInterval（moveBall（balls，box），100）;
在“ moveBalls（balls，box）”周圍加上引號可以使事情動起來。
順便說一句，您可以使用原型繼承來使您的函數更有效，Box中的方法將分配給每個實例。 要讓它們繼承方法，請將它們放在構造函數的原型上：
Box.prototype = {
getX: function() {return this.boxx;},
getY: function() {return this.boxy;},
getWidth: function() {return this.boxWidth;},
getHeight: function() {return this.boxHeight;},
getBalls: function() {return this.ball;},
paintMe: function() {
context.fillStyle = "black";
context.strokeRect(this.boxx, this.boxy, this.boxWidth, this.boxHeight);
}
};
請注意，在javascript中，函數的this關鍵字是通過調用設置的，而不是通過聲明函數的方式設置的（盡管您可以使用ES5 bind ，但是尚不廣泛支持）。
其他一些提示：
在Box構造函數中，您正在制作局部變量，但您確實想將它們分配給新的Box實例，因此請使用此變量代替var ：
function Box() {
this.boxx=20;
this.boxy=20;
this.boxWidth=460;
this.boxHeight=360;
}
在clearBox函數中，如果未在調用中設置它，則使用此函數，因此它引用window 。 擺脫它，將box傳遞給函數，以便直接引用它：
function clear(box) {
context.clearRect(box.boxx, box.boxy,
box.boxWidth, box.boxHeight);
}
同樣適用於moveBall和moveAndCheck功能，只是擺脫這種 （我認為你應該做的是如何在JavaScript的處理一些研究，也有它的文章，這是相當不同的到Java）。 現在，這些球將在盒子內反彈。
解決方案2
0 已采納 2011-10-17 17:34:29
我要感謝為我的問題做出貢獻的人們，它對解決問題非常有幫助，我選擇的答案在某種程度上是最新的，但由於不同的原因它解決了問題。
不正確：
在“ moveBalls（balls，box）”周圍加上引號可以使事情動起來。
真正解決問題的方法是從對moveball函數的調用中刪除參數和括號。 我在按照發布者的建議重寫代碼的其他部分時發現了這一點。
因此，如果您需要刪除參數並使用包裝函數或全局變量，以備將來通知其他有類似問題的人。
HTML5音頻Javascript循環，但是
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.