我在识别某些变量之前已定义的函数时遇到了一些问题；他们应该是全球性的，但他们似乎并没有这样做。
var global = "Summat.";
function Function() {
alert(global); //alerts "undefined"
//some more code referencing similar variables
alert("Hey."); //doesn't display.
}
我不确定问题实际上是我认为全局变量的行为不像全局变量，但这就是我用我有限的故障排除能力缩小范围的原因。如果有帮助，我也很乐意发布并尝试解释完整/更多代码。
这是更扩展的版本：
<!DOCTYPE html>
<html>
<head>
<title>divMan: Canvas</title>
</head>
<body>
<canvas id="canvas" height="768px" width="1366px" style="position:fixed;top:0px;left:0px;"></canvas>
</body>
<script>
window.onload = drawFrame();
//----------------------------------------Global Variables-----------------------------//
var context = document.getElementById("canvas").getContext("2d");
//------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------Constructors-----------------------------------------------------------------------------------------------//
function Point(top,left) {this.top = top; this.left = left;}
function Stone(top,left,height,width) {//a seemingly functional constructor}
function Tree(top,left,trunkHeight,trunkWidth,crownHeight,crownWidth) {//a seemingly functional constructor}
function DivMan(top,left,headHeight,headWidth,bodyHeight,bodyWidth) {//a seemingly functional constructor}
function Sky(top,left,height,width) {//a seemingly functional constructor}
function Ground() {//a seemingly functional constructor}
function Grass(height,targetGround) {//a seemingly functional constructor}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------//
//----------------------------------------------Objects------------------------------------------------//
var sky = new Sky(0,0,538,1366); //the sky.
var ground = new Ground(); //the ground.
var grass = new Grass(38,ground); //the grass.
var stone = new Stone(418,228,75,75); //a stone.
var pedestal = new Stone(508,630,30,200); //a stone pedestal.
var tree0 = new Tree(138,1000,150,60,250,300); //a tree.
var tree1 = new Tree(83,73,300,40,100,300); //another tree.
var divMan = new DivMan(408,700,34,30,65,60); //divMan!!
//----------------------------------------------------------------------------------------------------//
function drawFrame() {
sky.Draw();
ground.Draw();
grass.Draw();
tree1.Draw();
stone.Draw();
pedestal.Draw();
divMan.Draw();
tree0.Draw();
}
这是现在完整的样子：
<!DOCTYPE html>
<html>
<head>
<title>divMan: Canvas</title>
</head>
<style>
* {-ms-touch-action:none;}
</style>
<body>
<canvas id="canvas" height="768px" width="1366px" style="position:fixed;top:0px;left:0px;"></canvas>
</body>
<script>
window.onload = drawFrame();
//window.onclick = walk(event);
//----------------------------------------Global Variables-----------------------------//
var context = document.getElementById("canvas").getContext("2d");
//var _walk = false;
/*var staticEquilibrium = true;
//--Kinematic Variables--//
var vSubX = 0;
var aSubX = 0;
var jSubX = 0;
var vSubY = 0;
var aSubY = 0;
var jSubY = 0;*/
// var deltaT = .001; //standard time interval.
// var interval; //a timing loop variable.
//------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------Constructors-----------------------------------------------------------------------------------------------//
function Point(top,left) {this.top = top; this.left = left;} //Parameters are numbers, to be used for pixel values.
function Stone(top,left,height,width) { //stones.
this.origin = new Point(top,left); //make sure to give this a curved top, eventually.
this.height = height;
this.width = width;
this.color = "#a0a0a0";
this.Draw = drawStone;
function drawStone() {
context.fillStyle = this.color;
context.fillRect(this.origin.left,this.origin.top,this.width,this.height);
}
}
function Tree(top,left,trunkHeight,trunkWidth,crownHeight,crownWidth) { //trees.
this.origin = new Point(top,left);
this.trunkHeight = trunkHeight;
this.trunkWidth = trunkWidth;
this.trunkColor = "#702000";
this.crownHeight = crownHeight;
this.crownWidth = crownWidth;
this.crownColor = "#40d030";
this.Draw = drawTree;
function drawTree() {
context.fillStyle = this.crownColor;
context.fillRect(this.origin.left,this.origin.top,this.crownWidth,this.crownHeight);
context.fillStyle = this.trunkColor;
context.fillRect(this.origin.left+(this.crownWidth-this.trunkWidth)/2,this.origin.top+this.crownHeight,this.trunkWidth,this.trunkHeight);
}
}
function DivMan(top,left,headHeight,headWidth,bodyHeight,bodyWidth) { //divMEN.
this.origin = new Point(top,left);
this.headHeight = headHeight;
this.headWidth = headWidth;
this.bodyHeight = bodyHeight;
this.bodyWidth = bodyWidth;
this.color = "#000000";
this.Draw = drawDivMan;
function drawDivMan() {
context.fillStyle = this.color;
context.fillRect(this.origin.left+(this.bodyWidth-this.headWidth)/2,this.origin.top,this.headWidth,this.headHeight);
context.fillRect(this.origin.left,this.origin.top+this.headHeight+1,this.bodyWidth,this.bodyHeight);
}
}
function Sky(top,left,height,width) { //skies.
this.origin = new Point(top,left);
this.height = height;
this.width = width;
this.color = "#98e8ff";
this.Draw = drawSky;
function drawSky() {
alert("Yorishomu.");
context.fillStyle = this.color;
context.fillRect(this.origin.left,this.origin.top,this.width,this.height);
}
}
function Ground() { //the ground.
this.origin = new Point(538,0);
this.hillStart = new Point(538,1);
this.hillTop1 = new Point(488,114);
this.hillTop2 = new Point(488,429);
this.hillEnd = new Point(538,543);
this.screenEnd = new Point(538,1366);
this.bottomRight = new Point(768,1366);
this.bottomLeft = new Point(768,0);
this.color = "#401000";
this.Draw = drawGround;
function drawGround() {
context.fillStyle = this.color;
context.beginPath();
context.moveTo(this.origin.left,this.origin.top);
context.lineTo(this.hillStart.left,this.hillStart.top);
context.lineTo(this.hillTop1.left,this.hillTop1.top);
context.lineTo(this.hillTop2.left,this.hillTop2.top);
context.lineTo(this.hillEnd.left,this.hillEnd.top);
context.lineTo(this.screenEnd.left,this.screenEnd.top);
context.lineTo(this.bottomRight.left,this.bottomRight.top);
context.lineTo(this.bottomLeft.left,this.bottomLeft.top);
context.closePath();
context.fill();
}
}
function Grass(height,targetGround) { //the grass.
this.color = "#10b030"
this.height = height;
this.targetGround = targetGround;
this.Draw = drawGrass;
function drawGrass() {
context.strokeStyle = this.color;
context.lineWidth = this.height;
context.beginPath();
context.moveTo(this.targetGround.origin.left,this.targetGround.origin.top); //it follows the ground.
context.lineTo(this.targetGround.hillStart.left,this.targetGround.hillStart.top);
context.lineTo(this.targetGround.hillTop1.left,this.targetGround.hillTop1.top);
context.lineTo(this.targetGround.hillTop2.left,this.targetGround.hillTop2.top);
context.lineTo(this.targetGround.hillEnd.left,this.targetGround.hillEnd.top);
context.lineTo(this.targetGround.screenEnd.left,this.targetGround.screenEnd.top);
context.stroke();
}
}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------//
//----------------------------------------------Objects------------------------------------------------//
var sky = new Sky(0,0,538,1366); //the sky.
var ground = new Ground(); //the ground.
var grass = new Grass(38,ground); //the grass.
var stone = new Stone(418,228,75,75); //a stone.
var pedestal = new Stone(508,630,30,200); //a stone pedestal.
var tree0 = new Tree(138,1000,150,60,250,300); //a tree.
var tree1 = new Tree(83,73,300,40,100,300); //another tree.
var divMan = new DivMan(408,700,34,30,65,60); //divMan!!
//----------------------------------------------------------------------------------------------------//
function drawFrame() {
context.fillStyle = "#000000";
context.fillRect(0,0,100,100);
alert("Yo." + sky + context);
sky.Draw();
alert("Hi.");
ground.Draw();
grass.Draw();
tree1.Draw();
stone.Draw();
pedestal.Draw();
divMan.Draw(); // <-- Here's divMan.
tree0.Draw();
alert("Hey.");
}
/*function walk(click) { //in future, walk in mini-hops.
_walk = true;
staticEquilibrium = false;
if (click.screenX > rSubX+30) {vSubX = 5;} else {vSubX = -5;}
update();
}
function update() {
interval = setInterval(function() {
for (i=0; i<1; i++) {
divMan.origin.left += vSubX*deltaT+aSubX*deltaT*deltaT/2;
divMan.origin.top += vSubY*deltaT+aSubY*deltaT*deltaT/2;
}
drawFrame();
if (false) {clearInterval(interval);}
}
}*/
</script>
</html>