[removed] Global variables don't seem to be lo

2019-07-18 16:59发布

站内问答 / JavaScript
633 1 5

I'm having some problems with a function recognizing that some variables have been previously defined; they are supposed to be global, but they don't seem to be acting like it.

var global = "Summat.";
function Function() {
    alert(global);    //alerts "undefined"
    //some more code referencing similar variables
    alert("Hey.");    //doesn't display.
    }

I'm not sure that the problem is actually what-I-believe-to-be-global variables aren't behaving like global variables, but that's what I've narrowed it down to with my limited troubleshooting abilities. I'd also be more than happy to post and try to explain the full/more code if that would help.

This is the more expanded version:

<!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();
        }

This is what the full thing looks like right now: 

<!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>

1条回答
够拽才男人
2楼-- · 2019-07-18 17:48

You think your code is running on page load, but it's not. Replace this:

window.onload = drawFrame();
// -------------- remove ^^
// the parentheses call function immediately
// and assign its return value to window.onload

with:

window.onload = drawFrame;
// now you're actually assigning the function
// itself to window.onload, as it should be

Then the context will be available, and everything will work.

http://jsbin.com/irezag/1/edit

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)