将JavaScript游戏翻译为HTML

Question

我一直在尝试将JavaScript游戏翻译为HTML，而我尝试的任何内容都不会在HTML中显示我的对象。这里是我的JavaScript代码

/*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); 
    } 
}*/ 

var Beaver = function(x, y) { 
    this.x = x; 
    this.y = y; 
    this.img = getImage("https://www.kasandbox.org/third_party/javascript-khansrc/live-editor/build/images/creatures/Hopper-Happy.png"); 
    this.sticks = 0; 
}; 



//The Beaver Drawing Prototipe Function 
Beaver.prototype.draw = function() { 
    ctx = myGameArea.context; 
    ctx.fill(255, 0, 0); 
    this.y = constrain(this.y, 0, height - 50); 
    image(this.img, this.x, this.y, 40, 40); 
}; 

// Define Hop and Fall Functions 
Beaver.prototype.hop = function() { 
    this.img = getImage("https://www.kasandbox.org/third_party/javascript-khansrc/live-editor/build/images/creatures/Hopper-Jumping.png"); 
    this.y -= 5; 
}; 

Beaver.prototype.fall = function() { 
    this.img = getImage("https://www.kasandbox.org/third_party/javascript-khansrc/live-editor/build/images/creatures/Hopper-Happy.png"); 
    this.y += 5; 
}; 

//Stick Collecting Test Function 
/* Beaver.prototype.checkForStickGrab = function(stick) { 
    //Beaver shoud colide stick if: 
     //the stick's center x position is between the two sides of beaver 
     if ((stick.x >= this.x && stick.x <= (this.x + 40)) && 

     //the stick's center y position is between te top and the bottom of beaver 
      (stick.y >= this.y && stick.y <= (this.x + 40))) { 
       stick.y = -400; 
       this.sticks++; 
     } 
}; */ 

Beaver.prototype.checkForStickGrab = function(stick) { 
    if ((stick.x >= this.x && stick.x <= (this.x + 40)) && 
     (stick.y >= this.y && stick.y <= (this.y + 40))) { 
     stick.y = -400; 
     this.sticks++; 
    } 
}; 

//creating the stick oject 
var Stick = function (x, y) { 
    this.x = x; 
    this.y = y; 
}; 

//stick drawing function 
Stick.prototype.draw = function() { 
    fill(112, 81, 48); 
    //switch to a mode where the rect is drawn from the center and not in the upper left corner of coortinates x and y 
    rectMode(CENTER); 
    rect(this.x, this.y, 5, 40); 
}; 

//Inserting the Character into the Environment 
var beaver = new Beaver(200, 300); 

//init sticks 
var sticks = []; 
for (var i = 0; i < 40; i++) { 
    sticks.push(new Stick(i * 40 +300, random(20, 260))); 
} 



//Initializing initial position of the grass blocks 
var grassXs = []; 
for (var i = 0; i < 25; i++) { 
    grassXs.push(i*20); 
} 
//Forest Environment 
draw = function() { 
    //ctx = myGameArea.context; 

    //draws the sky 
    background(0, 115, 255); 

    ill(85, 255, 0); 
    text("Score: " +beaver.sticks, 20, 20); 
    if (beaver.sticks/sticks.length >= 0.90) { 
     text("YOU WIN!!!", width/2, height/2); 
     noLoop(); 

    } 

    //draws the ground 
    fill(130, 79, 43); 
    rectMode(CORNER); 
    rect(-1, height * 0.90, width + 1, 49); 


    //draw the grass 
    for (var i = 0; i < grassXs.length; i++) { 
     image(getImage("https://www.kasandbox.org/third_party/javascript-khansrc/live-editor/build/images/cute/GrassBlock.png"), grassXs[i], height*0.85, 20, 40); 
     grassXs[i] -= 1; 
     if (grassXs[i] <= -20) { 
      grassXs[i] = width; 
     } 
    } 

     for (var i = 0; i < sticks.length; i++) { 
     sticks[i].draw(); 
     beaver.checkForStickGrab(sticks[i]); 
     sticks[i].x -= 1; 
    } 
    //User interaction 
    if (keyIsPressed && keyCode === 0) { 
     beaver.hop(); 
    } else { 
     beaver.fall(); 
    } 
    //ctx = myGameArea.context; 
    beaver.draw(); 
}; 

https://codepen.io/SilviuIsidor/pen/VMxXww

有什么不我明白？我是否必须在HTML中创建元素，然后将它们分配给JavaScript？我不能从JavaScript转到HTML吗？

谢谢。

Answer 1

我看到你正在使用Processing.js通过可汗学院沙箱。为了使这项工作在HTML中，你需要包括图书馆。

您可以按照该程序中的说明查看分步说明以及它的工作原理。

https://www.khanacademy.org/cs/processingjs-inside-webpages-template/5157014494511104