-2
Ich bin mir nicht sicher, was los ist. Der JavaScript-Code funktioniert nicht auf meiner HTML-Webseite. Ich bin neu in Javascript, also würde ich wirklich etwas Hilfe schätzen.Dies ist ein Mini-Spiel, das ich meiner Webseite hinzufügen möchte, aber ich kann nicht herausfinden, was schief geht
Also ich denke, dass dieser Bereich der Bereich ist, den ich vermasselt habe, bin ich mir nicht sicher.
<body onload="startGame()">
<script>
var myGamePiece;
var myObstacles = [];
var myScore;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myGamePiece.gravity = 0.05;
myScore = new component("30px", "Conslas", "black", 280, 40, "text");
my GameArea.start();
}
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);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.score = 0;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.gravity = 0;
this.gravitySpeed = 0;
this.update = function() {
ctx = myGameArea.context;
if (this.type == "text") {
ctx.font= this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height;
if (this.y > rockbottom) {
this.y = rockbottom;
this.gravitySpeed = 0;
}
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
for (i = 0, i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10, height, "green", x, 0));
myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
myScore.text="SCORE: " + myGameArea.frameNo;
myScore.update();
myGamePiece.newPos();
myGamePiece.update();
}
function everyinterval(n) {
if ((myGameArea.frameNo/n) % 1 == 0) {return true;}
return false;
}
function accelerate(n) {
myGamePiece.gravity = n;
}
</script>
<br>
<button onmousedown="accelerate(-0.2)"
onmouseup="accelerate(0.5)">ACCELERATE<button>
<p>In order to stay in the air use the ACCELERATE button</p>
<p>HOW LONG CAN YOU STAY ALIVE?</p>
</body>
</html>
eine nützliche Ausgabe in der Konsole ** developer ** tools, die möglicherweise auf einen Fehler in Ihrem Code hinweisen könnte? –
zB 'my GameArea.start();' Syntaxfehler, 'var otherleft otherobj.x;' ein anderer, 'für (i = 0, i
das 'if ((myGameArea.frameNo/n)% 1 == 0) {return true }} ist ein * interessantes * Stück Code - es scheint, als könnte es umgeschrieben werden 'if ((myGameArea.frameNo% n) == 0) {return true;} '- aber noch besser, diese Funktion ist nur' Funktion everyinterval (n) { zurück! (myGameArea.frameNo% n); } ' –