Программирование холста на html и javascript ⇐ Html

[Anonymous]

Я пытаюсь запрограммировать игру на html и javascript, для этого я решил использовать холст, так как это облегчит разработку. Однако, когда я пытаюсь внедрить другой объект в холст, код, кажется, ломается. Я возился с кодом, чтобы увидеть проблему, однако пока безуспешно. Код можно найти ниже:

Код: Выделить всё

Game Prototype 1






var character;

function startGame(){
gameArea.start();
character = new character(30, 30, "red", 10, 120);
}
var gameArea = {
canvas:
document.getElementById("canvas");
start : function() {
this.canvas.width = 1000;
this.canvas.height = 800;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas,document.body.childNodes[0]);
}
function character(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx = gameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.width, this.height, this.x, this.y);
}

Вывод кода следующий:




На этом этапе я больше не уверен, заключается ли проблема в том, какая символьная переменная и, следовательно, символ не отображается, или в холсте, поскольку холст имеет неправильные размеры. не совсем понимаю, почему холст меняет размеры (если прямоугольник, отображаемый на экране, является холстом). Вот что я имею в виду под взломом кода.

Подробнее здесь: https://stackoverflow.com/questions/533 ... javascript