javascript - Canvas简单游戏DRY重构

Question

我是这个网站的日常读者，但不经常成为作家。由于我学习 JavaScript 已有几周时间，因此我基于一些对象制作了一个小型 Canvas /JS 跨游戏游戏，并且正在尝试改进它。游戏非常简单:您可以在这里查看完整的代码并玩:https://jsfiddle.net/vhrqb5xb/1/在这里:http://codepen.io/Pggo/pen/NGyQXK

    // The car variable 
    var Car = {}

    // How I create it
    var resetCar = function () {

      Car.x = 300 + (Math.random() * (canvas.width-600));
      Car.y = -10

    };


    // How it's drawn
    function drawCar(){

      ctx.beginPath();
      ctx.rect(Car.x,Car.y,32,32);
      ctx.fillStyle = 'white';
      ctx.fill();
      Car.y += Math.random() * 80

      if (Car.y > canvas.height){
        resetCar();
      };

    }


    // How game is reseit if player touch car
    function drawTouchCar(){

    // Evaluate coordonates of both objects, reset of touch
    if (
      player.x <= (Car.x + 32)
      && Car.x <= (player.x + 10)
      && player.y <= (Car.y + 30) &&
      Car.y <= (player.y + 10)
      ){
    ++numberOfDeaths; // +1 Die
    resetPlayer();
    }
    // if player pass arival line
    if(player.x > (canvas.width - 170 )){
      resetPlayer();
    ++numberOfWins; // +1 Win
    }
    }

现在，我使用的技巧是我有一个很快的汽车速度来渲染它，速度如此之快，以至于看起来有不止一个，但我的游戏只依赖于一个对象，即汽车。我希望能够动态添加更多汽车(而不是通过自己创建 car2 对象)。我已经进行了研究和多次尝试，以便使用原型(prototype)来创建我的对象，我能够轻松创建更多对象，但我的问题是我无法访问它们的 x 和 y 属性来使用它我的碰撞函数。

所以，问题来了，我该如何实现实际对象汽车的原型(prototype)，它可以动态创建新的汽车对象并返回它们的 x 和 y 属性，以便我可以在碰撞函数中重复使用它。实际上，我来这里只是为了理解，因为我陷入了困境，但我并不是在寻找开箱即用的工作解决方案。

预先感谢您的回复，祝您一切顺利

Answer 1

创建对象的方法有很多种。每种方法都有其优点和缺点。

最快的方法是使用对象工厂根据需要添加临时对象来创建未命名的对象。此方法创建最快的代码。

var drawCar = function () { // function to draw a car;
    ctx.beginPath();
    // "this" is the car object and should be bound to a car object
    ctx.rect(this.x, this.y, 32, 32);
    ctx.fillStyle = 'red';
    ctx.fill();
    // do your test to see if car is over the line
    // and call
    this.reset(); // to reset the car
}

var resetCar = function () {
    // car reset function TODO add your reset code
}

var carFactory = function () { // creates add hoc unnamed car objects
    var car = {}; // create a new object;
    car.x = 0; // give it properties
    car.y = 0;
    // add the reset function to the car and bind it to the new car
    car.reset = resetCar.bind(car);
    car.draw = drawCar.bind(car); // same for draw
    car.reset(); // reset the car ready to go;
    return car; // return the new car
}

var testCar = function (car) { // function to test if car hits player
    if (
        player.x <= (car.x + 32) // access the car position by its x and y properties
         && car.x <= (player.x + 10)
         && player.y <= (car.y + 30) &&
        car.y <= (player.y + 10)) {
        ++numberOfDeaths; // +1 Die
        resetPlayer();
    }
}

var car1 = carFactory(); // create a new car
var car2 = carFactory(); // and another;

var mainLoop() { // called once every frame
    car1.draw();
    car2.draw();
    testCar(car1);
    testCar(car2);
    // TODO the other stuff
}

接下来是正式方法，它稍微慢一些，因为在幕后发生了更多的事情(可以这么说)

function Car() {
    // "this" is bound automatic to the car object with the call new Car()
    // the car also is a named type in Javascript
    this.x = 0;
    this.y = 0;
    this.reset(); // reset the new car

    // "this" is returned here automatically like in the factory but in this 
    // case you dont have to type it in 
}

// add draw to the car prototype
Car.prototype.draw = function () { // function to draw a car;
    ctx.beginPath();
    ctx.rect(this.x, this.y, 32, 32);
    ctx.fillStyle = 'red';
    ctx.fill();
    // this.reset(); // to reset the car
}

// add reset to the car prototype
Car.prototype.reset = function () {
    // car reset function TODO add your reset code }
}

var testCar = function (car) { // function to test if car hits player
    if (
        player.x <= (car.x + 32) // access the car position by its x and y properties
         && car.x <= (player.x + 10)
         && player.y <= (car.y + 30) &&
        car.y <= (player.y + 10)) {
        ++numberOfDeaths; // +1 Die
        resetPlayer();
    }
}
var car1 = new Car(); // create a new car
var car2 = new Car(); // and another;


var mainLoop() { // called once every frame
    car1.draw();
    car2.draw();
    testCar(car1);
    testCar(car2);
}

您还可以使用 class 在 ECMAScript 6 中创建汽车。您还可以在 Car 函数中声明所有原型(prototype)，从而允许您使用闭包添加隐藏属性。创建新车稍微慢一些，但运行新车稍微快一些..

如果你想要绝对控制，你可以直接使用对象方法，允许你创建具有可写、可枚举、可配置选项的属性，你可以创建 getter 和 setter，你可以卡住对象和整个堆。就我个人而言，我把这些事情留给了专家们。

希望这有帮助。