用於Canvas的面向對象的JavaScript

Question

我有這種迷你框架（場景，Actor）來構建我從這本JS書中獲得的構建遊戲。我會在這裏顯示的代碼後提出這樣的問題：

//-------------------------------SCENE CLASS------------------------------// 

function Scene(context, width, height, images) 
{ 
    this.context = context; 
    this.width = width; 
    this.height = height; 
    this.images = images; 
    this.actors = []; 
} 

Scene.prototype.register = function(actor) 
{ 
    this.actors.push(actor); 
} 

Scene.prototype.unregister = function(actor) 
{ 
    var index = this.actors.indexOf(actor); 
    if(index >= 0) 
    { 
     this.actors.splice(index,1); 
    } 
} 

Scene.prototype.draw = function() 
{ 
    this.context.clearRect(0, 0, this.width, this.height); 
    for(var i = 0;i < this.actors.length; i++) 
    { 
     this.actors[i].draw(); 
    } 
} 

//-------------------------------ACTOR CLASS-------------------------------// 

function Actor(scene, x, y) 
{ 
    this.scene = scene; 
    this.x = x; 
    this.y = y; 
    scene.register(this); 
} 

Actor.prototype.moveTo = function(x, y) 
{ 
    this.x = x; 
    this.y = y; 
    this.scene.draw(); 
} 

Actor.prototype.exit = function() 
{ 
    this.scene.unregister(this); 
    this.scene.draw(); 
} 

Actor.prototype.draw = function() 
{ 
    var image = this.scene.images[this.type]; // how does this work??? 
    this.scene.context.drawImage(image, this.x, this.y); 
} 

Actor.prototype.width = function() 
{ 
    return this.scene.images[this.type].width; 
} 

Actor.prototype.height = function() 
{ 
    return this.scene.images[this.type].height; 
} 

//-----------------------------SPACESHIP CLASS------------------------------// 

function Spaceship(scene, x, y) 
{ 
    Actor.call(this, scene, x, y); 
} 

Spaceship.prototype = Object.create(Actor.prototype); 

Spaceship.prototype.left = function() 
{ 
    this.moveTo(Math.max(this.x - 10, 0), this.y); 
} 

Spaceship.prototype.right = function() 
{ 
    var maxWidth = this.scene.width - this.width(); 
    this.moveTo(Math.min(this.x + 10, maxWidth), this.y); 
} 

Spaceship.prototype.type = "Spaceship"; 

我的問題是，你怎麼去堵在圖像進入現場施工的宇宙飛船例子或任何其他演員的對象中可能出現的？它在書中非常模糊地說要創建一個「數據表」，但我不知道該怎麼去做。如果我想利用這個課程，我想我將不得不這樣做：

var scene = new Scene(ctx,800,600, //not sure here) 
var spaceship = new Spaceship(scene,10,10); 
scene.draw(); 

謝謝！ :)

Answer 1

這似乎是你的演員構造函數缺少type字段。類型字段是您必須傳遞到場景中的圖像陣列的標識符。

換句話說，你需要一個從類型/ ids到圖像的映射。

Actor.prototype.draw = function() 
{ 
    var image = this.scene.images[this.type]; // how does this work??? 
    this.scene.context.drawImage(image, this.x, this.y); 
} 

上述函數通過訪問該actor的類型（這是一個唯一標識符）從圖像數組中獲取圖像數據。圖像數據然後傳遞給drawImage函數。

爲了這項工作，每個演員需要type，所以我改變了下面的構造函數：

// Added 'type' property to Actor 
function Actor(scene, type, x, y) 
{ 
    this.scene = scene; 
    this.type = type; 
    this.x = x; 
    this.y = y; 
    scene.register(this); 
} 

// Add the image type of this actor 
function Spaceship(scene, x, y) 
{ 
    Actor.call(this, 'spaceShipImageId', scene, x, y); 
} 

當設置你的場景，你需要在圖像數據的目的在於傳遞（但是圖像數據被存儲）。

下面是一個例子：

var imageData = {'spaceShipImageId': 'IMAGE_DATA...', 'planetImageId': 'DIFFERENT_IMAGE_DATA'}; 
var scene = new Scene(ctx, 800, 600, imageData); 
var spaceship = new Spaceship(scene, 10, 10); 
scene.draw(); 

每當一個新的演員創建​​它會自動註冊到一個特定的場景。 0123'方法只是繪製每個演員的圖像（基於它的type屬性）。

希望有所幫助。