Question

我正在尝试按照本教程https://www.smashingmagazine.com/2012/10/design-your-own-mobile-game/进行操作，但我仍然坚持第二部分。（2.空白画布）

我不确定将POP.Draw对象放在何处。它是否在创建其他对象的var POP {}括号内？我已经尝试将它保留在内部，外部和初始功能中，我认为这是不合理的。目的是在新的Draw对象中创建方法，以便稍后调用它们以在画布中创建图片。

这是我目前的代码。它与链接中的相同：

var POP = {
  //setting up initial values
  WIDTH: 320,
  HEIGHT: 480,
  // we'll set the rest of these
  //in the init function
  RATIO: null,
  currentWidth: null,
  currentHeight: null,
  canvas: null,
  ctx: null,

  init: function() {
    //the proportion of width to height
    POP.RATIO = POP.WIDTH / POP.HEIGHT;
    //these will change when the screen is resized
    POP.currentWidth = POP.WIDTH;
    POP.currentHeight = POP.HEIGHT;
    //this is our canvas element
    POP.canvas = document.getElementsByTagName('canvas')[0];
    //setting this is important
    //otherwise the browser will
    //default to 320x200
    POP.canvas.width = POP.WIDTH;
    POP.canvas.width = POP.HEIGHT;
    //the canvas context enables us to
    //interact with the canvas api
    POP.ctx = POP.canvas.getContext('2d');

    //we need to sniff out Android and iOS
    // so that we can hide the address bar in
    // our resize function
    POP.ua = navigator.userAgent.toLowerCase();
    POP.android = POP.ua.indexOf('android') > -1 ? true : false;
    POP.ios = (POP.ua.indexOf('iphone') > -1 || POP.ua.indexOf('ipad') > -1) ? true : false;

    //we're ready to resize
    POP.resize();
    POP.Draw.clear();
    POP.Draw.rect(120, 120, 150, 150, 'green');
    POP.Draw.circle(100, 100, 50, 'rgba(225,0,0,0.5)');
    POP.Draw.text('Hello WOrld', 100, 100, 10, "#000");

  },

  resize: function() {
    POP.currentHeight = window.innerHeight;
    //resize the width in proportion to the new height
    POP.currentWidth = POP.currentHeight * POP.RATIO;
    //this will create some extra space on the page
    //allowing us to scroll past the address bar thus hiding it
    if (POP.android || POP.ios) {
      document.body.style.height = (window.innerHeight + 50) + 'px';
    }

    //set the new canvas style width and height note:
    //our canvas is still 320 x 400 but we're essentially scaling it with css
    POP.canvas.style.width = POP.currentWidth + 'px';
    POP.canvas.style.height = POP.currentHeight + 'px';

    //we use a timeout here because some mobile browsers
    //don't fire if there is not a short delay
    window.selfTimeout(function() {
      window.scrollTo(0, 1);
    })

    //this will create some extra space on the page
    //enabling us to scroll past the address bar
    //thus hiding it
    if (POP.android || POP.ios) {
      document.body.style.height = (window.innerHeight + 50) + 'px';
    }

  }

};
window.addEventListener('load', POP.init, false);
window.addEventListener('resize', POP.resize, false);

//abstracts various canvas operations into standalone functions
POP.Draw = {
  clear: function() {
    POP.ctx.clearRect(0, 0, POP.WIDTH, POP.HEIGHT);
  },

  rect: function(x, y, w, h, col) {
    POP.ctx.fillStyle = col;
    POP.ctx.fillRect(x, y, w, h);
  },

  circle: function(x, y, r, col) {
    POP.ctx.fillStyle = col;
    POP.ctx.beginPath();
    POP.ctx.arc(x + 5, y + 5, r, 0, Math.PI * 2, true);
    POP.ctx.closePath();
    POP.ctx.fill();
  },

  text: function(string, x, y, size, col) {
    POP.ctx.font = 'bold' + size + 'px Monospace';
    POP.ctx.fillStyle = col;
    POP.ctx.fillText(string, x, y);
  }
};

Answer 1

解决

我没有意识到，但已完成的代码在网页上。我下载了它并查看了示例以获得答案。

我通过在调用POP.resize（）方法之前放置POP.Draw.clear，POP.Draw.rect方法解决了这个问题。我不确定订单的重要性，但确实如此。

如何使用多种方法创建新对象？

1 个答案: