Frage von CarleyMagBanana, 79

Was mache ich in dem JavaScriptcode nur falsch (Snake)?

Guten Abend, Ich bin noch recht ein Anfänger in der Sprache, weswegen ich mich hier um Hilfe melde. Ich sitze bereits etwa 1 und einhalb Stunden daran um meinen Quellcode zu korrigieren, nun habe ich alles soweit korrigiert, jetzt finde ich keine Fehler mehr :(.

Weiss da jemand was ?

<!DOCTYPE html><HTML>
<head>
<meta charset="UTF-8">

<style type="text/css">
h1{
    color:green;
}
</style>

<title>Tutorial</title>


</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="<a href="http://code.jquery.com/jquery-2.1.0.js">http://code.jquery.com/jquery-2.1.0.js</a>"></script>


<script>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var breite = canvas.width;
var höche = canvas.height;

var blockgrösse = 10;
var breiteInBlöcken = breite/ blockgrösse;
var höheInBlöcken = höche/ blockgrösse;
var punktestand = 0;

var rahmenZeichnen = function(){
ctx.fillStyle="Grey";
ctx.fillRect(0, 0, breite, blockgrösse);
ctx.fillRect(0, höche - blockgrösse, breite, blockgrösse);
ctx.fillRect(0, 0, blockgrösse, höche);
ctx.fillRect(breite - blockgrösse, 0, blockgrösse, höche);
};

var PunktestandXML = function() {
ctx.font="15px Courier";
ctx.fillStyle="Red";
ctx.fillText("Spielstand = " + punktestand, 20, 10);
};

var gameOver = function(){
clearInterval(intervalid);
ctx.font="50px Courier";
ctx.textAlign="center";
ctx.fillStyle="Black";
ctx.fillText("Gameover",200 ,200);
};

var kreis = function(x, y, radius, kreisFüllen){
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    if(kreisFüllen){
        ctx.fill();
    }
    else{
        ctx.stroke();
    }
};

var block = function(Spalte, Zeile){
this.Spalte = Spalte;
this.Zeile = Zeile;
};

block.prototype.blockgrösseXML = function(farbe){
    var x = this.Spalte * blockgrösse;
    var y = this.Zeile * blockgrösse;
    
    ctx.fillStyle="Black";
    ctx.fillStyle = farbe;
    ctx.fillRect(x, y, 10, 10);
};

block.prototype.kreisZeichnen = function(farbe){
    var mittelpunktX = this.Spalte * blockgrösse;
    var mittelpunktY = this.Zeile * blockgrösse;
    
    ctx.fillStyle = "farbe";
    Kreis(mittelpunktX, mittelpunktY, blockgrösse/ 2, true);
};

block.prototype.equal = funktion(andererBlock){
    return this.Spalte === andererBlock.Spalte && this.Zeile === andererBlock.Zeile;
};

var Schlange = function(){
    this.segmente =[
    new block(7, 5),
    new block(6, 5),
    new block(5, 5)
    ];
    
    this.richtung="rechts";
    this.nächsteRichtung="rechts";
};

Schlange.prototype.draw = function(){
    for(var i = 0; i < this.segmente.length; i++){
        this.segmente[i].blockgrösseXML"Blue");
    }
};

Schlange.prototype.move = function(){
    var kopf = this.segmente[0];
    var neuerKopf;
    
    this.richtung = this.nächsteRichtung;
    
    if(this.richtung === "rechts"){
        neuerKopf = new block(kopf.Spalte +1, kopf.Zeile);
    }else if(this.richtung === "runter"){
        neuerKopf = new block(kopf.Spalte, kopf.Zeile +1);
    }else if(this.richtung === "links"){
        neuerKopf = new block(kopf.Spalte -1, kopf.Zeile);
    }else if(this.richtung === "hoch"){
        neuerKopf = new block(kopf.Spalte, kopf.

Antwort
von Dory1, 43

http://codepen.io/anon/pen/qbPyrw?editors=001

Kreis ist nicht definiert (Die Funktion wird klein geschrieben):

Kreis(mittelpunktX, mittelpunktY, blockgrösse/ 2, true);

Syntaxfehler: funktion anstatt function:

block.prototype.equal = funktion(andererBlock) {
Schlange.prototype.kollisionCheck = funktion(kopf) {
Apfel.prototype.draw = funktion() {

Hier fehlt eine Klammer:

this.segmente[i].blockgrösseXML"Blue");



Kommentar von Azasel ,

Sehr gute Arbeit :)

Antwort
von yerooke, 43
var blockgrösse = 10;
var breiteInBlöcken = breite/ blockgrösse;
var höheInBlöcken = höche/ blockgrösse;
Umlaute in den Variablen?
Antwort
von heilwigkenner, 36

Die Aussage "Hilfe, es funktioniert nicht!" ist so für uns in etwas so informativ, wie wenn du zum Doktor gehst und sagst "Herr Doktor, ich bin krank, was habe ich", ohne Symptome zu schildern.

Hast du schon gedebugged?

Antwort
von CarleyMagBanana, 43

Leider passte nicht alles drauf.

Das ist der rest:

if(this.kollisionCheck(neuerKopf)){
gameOver(true);
return;
}
this.segmente.unshift(neuerKopf);

if(neuerKopf.equal(apfel.position)){
punktestand++;
apfel.move();
}else {
this.segmente.pop();
}
};

Schlange.prototype.kollisionCheck = funktion(kopf){
var kollisionLinks = (kopf.Spalte === 0);
var kollisionOben = (kopf.Zeile === 0);
var kollisionRechts = (kopf.Spalte === breiteInBlöcken -1);
var kollisionUnten = (kopf.Zeile === höheInBlöcken -1);

var kollisionWand = kollisionLinks || kollisionOben || kollisionRechts || kollisionUnten;

var kollisionSelbst = false;
for(var i = 0; i < this.segmente.length; i++){
if(kopf.equal(this.segmente[i])){
kollisionSelbst = true;
}
}
return kollisionWand || kollisionSelbst;
};

Schlange.prototype.setDirection = function(neueRichtung){
if(this.richtung === "hoch" && neueRichtung === "runter"){
return;
}else if(this.richtung === "rechts" && neueRichtung === "links"){
return;
}else if(this.richtung === "runter" && neueRichtung === "hoch"){
return;
}else if(this.richtung === "links" && neueRichtung === "rechts"){
return;
}
this.nächsteRichtung = neueRichtung;
};

var Apfel = function(){
this.position = new block(10, 10);
};

Apfel.prototype.draw = funktion(){
this.position.kreisZeichnen("LimeGreen");
};

Apfel.prototype.move = function(){
var zufallSpalte = Math.floor(Math.random()*(breiteInBlöcken - 2)) +1;
var zufallZeile = Math.floor(Math.random()*(höheInBlöcken - 2)) +1;
this.position = new block(zufallSpalte, zufallZeile);
};

var schlange = new Schlange();
var apfel = new Apfel;

var intervalid = setInterval(function(){
ctx.clearRect(0,0,breite,höche);
PunktestandXML();
schlange.move();
schlange.draw();
apfel.draw();
rahmenZeichnen();
}, 100);

var richtungen = {
37: "links",
38: "hoch",
39: "rechts",
40: "runter"
};

$("body").keydown(function(event){
var neueRichtung = richtungen[event.keyCode];
if(neueRichtung !== undefined){
schlange.setDirection(neueRichtung);
}
});

Snake

Kommentar von Sarkophator ,

Kannst du deinen Code vielleicht vollständig auf einem Pastebin posten, bspw. http://pastebin.com/ ? Lässt sich hier kaum lesen. (und es fehlt auch scheinbar einiges)

Keine passende Antwort gefunden?

Fragen Sie die Community