2017-05-31 7 views
1

Ich versuche, zwei Quadrate nebeneinander zu machen, eine, die eine zufällige Position wählt, und eine andere mit einer festen Position. Ich mache das, indem ich zwei Komponentenfunktionen mit jeweils unterschiedlichen Eigenschaften mache. Wenn ich jedoch versuche, die component2-Funktion hinzuzufügen, wird ein Fehler angezeigt, der das unerwartete Ende der Eingabe zum Ende meines Codes sagt. Dies verhindert, dass ich den Code ausführe. Was kann ich tun, um das zu beheben?Machen Sie zwei Quadrate mit zwei verschiedenen Funktionen, (JavaScript)

<html> 
 
\t <head> 
 
\t 
 
\t \t 
 
\t </head> 
 
<body> 
 

 
<p> Click Start Game to play </p> 
 
<div id="start">Start Game</div> 
 
<div id="hi">Hi</div> 
 

 

 

 

 
<script> 
 

 

 

 

 
function component(width, height, color, x, y, type) { 
 
    this.type = type; 
 
    if (type == "image"){ 
 
\t this.image = new Image(); 
 
\t this.image.src = color; 
 
    } 
 
    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.color=color; 
 
    this.update = function() { 
 
     random = Math.floor((Math.random()*200) + 1); 
 
     random2 = Math.floor((Math.random()*200) + 1); 
 
     function getRandomColor() { 
 
      var letters = 'ABCDEF'; 
 
      var color = '#'; 
 
      for (var i = 0; i < 6; i++) { 
 
       color += letters[Math.floor(Math.random() * 16)]; 
 
      } 
 
      return color; 
 
     } 
 
     randcolor=getRandomColor(); 
 
     ctx = myGameArea.context; 
 
     if (this.type == "image"){ 
 
\t  ctx.drawImage(this.image, random, random2, random,random2); 
 
     } else { 
 
      ctx.fillStyle = randcolor; 
 
      ctx.fillRect(random, random2, 50, 50); 
 
     } 
 
     this.x=random; 
 
     this.y=random2; 
 
     this.width=50; 
 
     this.height=50; 
 
     this.color=randcolor; 
 
    } 
 

 
} 
 

 

 
function component2(width, height, color, x, y, type) { 
 
    this.type = type; 
 
    if (type == "image"){ 
 
\t this.image = new Image(); 
 
\t this.image.src = color; 
 
    } 
 
    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 == "image"){ 
 
\t  ctx.drawImage(this.image,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.x = this.x + this.speedX; 
 
     this.y = this.y + this.speedY; 
 
\t //removed hitting rock bottom because the background and other pieces will be off screen. 
 
\t 
 
    } 
 
    this.hitBottom = function() { 
 
     var rockbottom = myGameArea.canvas.height - this.height; 
 
     if (this.y > rockbottom) { 
 
      this.y = rockbottom; 
 
      this.gravitySpeed = 0; 
 
\t  board =1; 
 
     } 
 
    } 
 
    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 startGame() { 
 
\t random = Math.floor((Math.random()*100) + 1); 
 

 

 
\t random2 = Math.floor((Math.random()*100) + 1); 
 

 

 
\t square = new component(50, 50, "green", random, random2); 
 
\t myGamePiece = new component(30, 40, "greenhorn.gif", 220, 120,"image"); 
 
myGameArea.start(); 
 
return square \t \t 
 
} 
 

 

 

 
var myGameArea = { 
 
    canvas : document.createElement("canvas"), 
 
    start : function() { 
 
\t 
 
     this.canvas.width = 450; 
 
     this.canvas.height = 270; 
 
     this.context = this.canvas.getContext("2d"); 
 
     document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
 
     
 
     this.interval = setInterval(updateGameArea, 1000); 
 
     }, 
 
    clear : function() { 
 
     this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
 
    } 
 
} 
 

 

 

 
function updateGameArea() { 
 
    
 
    myGameArea.clear(); 
 
    square.update(); 
 

 
} 
 

 

 

 

 
document.getElementById("start").addEventListener('click', startGame); 
 
</script> 
 
</body> 
 

 

 
</html>

+1

Sie jemals die 'component2' Funktion nicht schließen. add '' '' wo immer Sie es schließen wollen (ich werde vor 'startGame' gehen) – George

Antwort

1

Sie benötigen eine zusätzliche schließende geschweiften Klammer nach

 return crash; 
    } 
} // this is missing 

function component(width, height, color, x, y, type) { 
 
    this.type = type; 
 
    if (type == "image") { 
 
     this.image = new Image(); 
 
     this.image.src = color; 
 
    } 
 
    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.color = color; 
 
    this.update = function() { 
 
     random = Math.floor((Math.random() * 200) + 1); 
 
     random2 = Math.floor((Math.random() * 200) + 1); 
 
     function getRandomColor() { 
 
      var letters = 'ABCDEF'; 
 
      var color = '#'; 
 
      for (var i = 0; i < 6; i++) { 
 
       color += letters[Math.floor(Math.random() * 16)]; 
 
      } 
 
      return color; 
 
     } 
 
     randcolor = getRandomColor(); 
 
     ctx = myGameArea.context; 
 
     if (this.type == "image") { 
 
      ctx.drawImage(this.image, random, random2, random, random2); 
 
     } else { 
 
      ctx.fillStyle = randcolor; 
 
      ctx.fillRect(random, random2, 50, 50); 
 
     } 
 
     this.x = random; 
 
     this.y = random2; 
 
     this.width = 50; 
 
     this.height = 50; 
 
     this.color = randcolor; 
 
    } 
 

 
} 
 

 
function component2(width, height, color, x, y, type) { 
 
    this.type = type; 
 
    if (type == "image") { 
 
     this.image = new Image(); 
 
     this.image.src = color; 
 
    } 
 
    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 == "image") { 
 
      ctx.drawImage(this.image, 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.x = this.x + this.speedX; 
 
     this.y = this.y + this.speedY; 
 
     //removed hitting rock bottom because the background and other pieces will be off screen. 
 

 
    } 
 
    this.hitBottom = function() { 
 
     var rockbottom = myGameArea.canvas.height - this.height; 
 
     if (this.y > rockbottom) { 
 
      this.y = rockbottom; 
 
      this.gravitySpeed = 0; 
 
      board = 1; 
 
     } 
 
    } 
 
    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 startGame() { 
 
    random = Math.floor((Math.random() * 100) + 1); 
 
    random2 = Math.floor((Math.random() * 100) + 1); 
 
    square = new component(50, 50, "green", random, random2); 
 
    myGamePiece = new component(30, 40, "greenhorn.gif", 220, 120, "image"); 
 
    myGameArea.start(); 
 
    return square 
 
} 
 

 
var myGameArea = { 
 
    canvas: document.createElement("canvas"), 
 
    start: function() { 
 
     this.canvas.width = 450; 
 
     this.canvas.height = 270; 
 
     this.context = this.canvas.getContext("2d"); 
 
     document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
 
     this.interval = setInterval(updateGameArea, 1000); 
 
    }, 
 
    clear: function() { 
 
     this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
 
    } 
 
} 
 

 
function updateGameArea() { 
 
    myGameArea.clear(); 
 
    square.update(); 
 
} 
 

 
document.getElementById("start").addEventListener('click', startGame);
<p>Click Start Game to play</p> 
 
<div id="start">Start Game</div> 
 
<div id="hi">Hi</div>

+0

Weiß jemand, wie man die zweite Komponente funktioniert? – spencerryan02

+0

was sollte' component2' tun? btw, müssen Sie einige Variablen deklarieren und Sie benötigen einige öffentliche Variablen wie 'square', da der Callback für ein Ereignis nicht zurückkehrt. –

Verwandte Themen