在JavaScript中随机定位正方形？

Question

代码无效，我需要随机定位一个方形组件。我尝试运行一些代码，但没有任何反应。这是我的代码：

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

}
function startGame() {
	random = Math.floor((Math.random()*100) + 1);
	document.write(random);

	random2 = Math.floor((Math.random()*100) + 1);
	document.write(random2);

	square = new component(random, random2, "green", random, random2);
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, 1);
        },
    clear : function() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

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

}

由于某种原因，函数startGame无法正常工作。运行代码时没有任何反应。我也打开了控制台日志，没有注册语法错误。

Answer 1

您可以像这样应用代码来使代码工作，例如：

＆＃13;

＆＃13;

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()*100) + 1);
       random2 = Math.floor((Math.random()*100) + 1);
       function getRandomColor() {
           var letters = '0123456789ABCDEF';
           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, random, random2);
        }
        this.x=random;
        this.y=random2;
        this.width=random;
        this.height=random2;
        this.color=randcolor;
    }

}
function startGame() {
	random = Math.floor((Math.random()*100) + 1);


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


	square = new component(random, random2, "green", random, random2);
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, 1);
        },
    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)

＆＃13;

<div id="start">press to start</div>

＆＃13;

＆＃13;

＆＃13;

在这里我做了三件事：

• 我添加了一个可以点击的文字
• 我在此文本上添加了一个调用startGame()函数
的事件侦听器
• 我摆脱了document.write()陈述。我建立的是Jsfiddle，它不允许它，而且它considered bad practice无论如何。