2017-05-26 60 views
0

在变量平方中,我将其定义为50x50大小,然后给它一个随机定位。它也有随机的颜色。尽管如此,它的尺寸每次都不会相同。我能做些什么来解决这个问题?为什么广场不会相同? (JavaScript)

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

 
<p> Click Start Game to play </p> 
 
<div id="start">Start Game</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()*100) + 1); 
 
     random2 = Math.floor((Math.random()*100) + 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, random, random2); 
 
     } 
 
     this.x=random; 
 
     this.y=random2; 
 
     this.width=random; 
 
     this.height=random2; 
 
     this.color=randcolor; 
 
    } 
 

 
} 
 
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); 
 
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(); 
 

 
} 
 

 
function userPiece() { 
 
userSquare = new component(50,50, "green", 200,50); 
 
return userSquare 
 

 

 
} 
 

 

 

 
document.getElementById("start").addEventListener('click', startGame); 
 

 
</script> 
 
</body> 
 

 

 
</html>

回答

1

你绘制随机尺寸的矩形。你需要做的画这样ctx.fillRect(random, random2, 50, 50);

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

 
<p> Click Start Game to play </p> 
 
<div id="start">Start Game</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()*100) + 1); 
 
     random2 = Math.floor((Math.random()*100) + 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 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); 
 
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(); 
 

 
} 
 

 
function userPiece() { 
 
userSquare = new component(50,50, "green", 200,50); 
 
return userSquare 
 

 

 
} 
 

 

 

 
document.getElementById("start").addEventListener('click', startGame); 
 

 
</script> 
 
</body> 
 

 

 
</html>

+0

感谢@Maciej Szpyra – spencerryan02

+1

他应该做的,而'fillRect(this.x,this.y,this.width,this.height)'和摆脱'this.width = random; this.height = random2;'。 –

相关问题