-1
私はJavaScriptゲームをHTMLに翻訳しようとしています。試してみると、私のオブジェクトはHTMLで表示されません。ここに私のJavaScriptコードJavaScriptゲームをHTMLに翻訳する
/*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に移行できませんか?
ありがとうございました。
このスクリプトを別の.jsファイルとしてHTMLに含めていますか? そして、これをスクリプトとしてhtmlファイルに書いたのであれば、それをどこに入れましたか?
または? – Harman私はそれを別のjsファイルとして使用しています。しかし、私のHTMLに埋め込まれている場合、私はそれを
タグに含める必要があると思いますか? – ISSはい、正しく入力してください。依存関係へのリンクがなくなっていないかどうかを確認してください。あなたはあなたのhtmlも投稿できますか? – Harman