Question

我目前正在从事太空侵略者游戏。但是，我偶然发现了一个问题，当我的画布加载要显示的精灵时，该精灵未显示。我检查了路径，它是正确的。我什至打开了检查器，它显示精灵文件在那里。 Sprite之类的某些功能已在文件中预定义。我正在通过tutorial

完成此操作

 var screen, input, frames;
  var alSprite, taSprite, ciSprite;
  var aliens, dir, tank, bullets, cities;

  function main () {
  	screen = new Screen(510, 600);
  	input = new InputHandler();

  	var img = new Image();
  	img.addEventListener("load", function(){

  		alSprite = [
  		[new Sprite(this, 10, 10, 22, 15), new Sprite(this, 0, 16, 22, 16)],
  		[new Sprite(this, 22, 16, 15), new Sprite(this, 22, 15, 16, 16)],
  		[new Sprite(this, 38, 0, 24, 16), new Sprite(this, 38, 16, 24, 16)]

  		];
  		taSprite = new Sprite(this);
  		ciSprite = new Sprite(this);

  		init();
  		run();
  	});
  	img.src = "res/invaders.png";
  };

  function init() {};
  function run() {

  	var loop = function(){
  		update();
  		render();
  		window.requestAnimationFrame(loop, screen.canvas);
  	};
  };
  function update() {};
  function render() {

  	screen.drawSprite(alSp[0][0], 10, 10);
  };

canvas{
			background-color: #000;
			display: block;
			position: absolute;
			margin: auto;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0
		}

<!DOCTYPE html>
<html>
<head>
<script src="js/helper.js"></script>
	<title></title>
</head>
<body onload="main()">
</body>
</html>

我还包括了helper.js文件。

//Helper function

//Screen
function Screen(width, height){
	this.canvas = document.createElement("canvas");
	this.canvas.width = this.width = width;
	this.canvas.height = this.height = height;
	this.ctx = this.canvas.getContext("2d");

	document.body.appendChild(this.canvas);

};

Screen.prototype.drawSprite = function(sp, x, y){
	this.ctx.drawImage(sp, img, sp.x, sp.y, sp.w, sp.h, x, y, sp.w, sp.h);


};
//Sprite
function Sprite(img, x, y, w, h){
	this.img = img;
	this.x = x;
	this.y = y;
	this.w = w;
	this.h = h;

};


//InputHandler
function InputHandler() {
	this.down = {};
	this.pressed = {};

	var _this = this;
	document.addEventListener("keydown", function(evt){
		_this.down[evt.keyCode];

	});
	document.addEventListener("keyup", function(evt){
		delete _this.down[evt.keyCode];
		delete _this.pressed[evt.keyCode];

	});

};

InputHandler.prototype.isDown = function(code){
	return this.down[code];

};

InputHandler.prototype.isPressed = function(code){
	if(this.pressed[code]) {
		return false;
	} else if (this.down[code]) {
		return this.pressed[code] = true;
	}
	return false;

};

Answer 1

您的代码中存在多个语法错误，就像@Kaiido指出的那样：
drawSprite(alSp[0][0]...

在drawSprite中也应该是：
this.ctx.drawImage(sp.img,

您必须缩小问题的规模，否则它们将使您不知所措。
这是朝正确方向的推动。我确实将图像转换为base64，因此所有内容都在代码段中运行。

function Screen(width, height) {
    this.canvas = document.createElement("canvas");
    this.canvas.width = this.width = width;
    this.canvas.height = this.height = height;
    this.ctx = this.canvas.getContext("2d");
    document.body.appendChild(this.canvas);
  };

  Screen.prototype.drawSprite = function(sp, x, y) {
    this.ctx.drawImage(sp.img, sp.x, sp.y, sp.w, sp.h, x, y, sp.w, sp.h);
  };

  function Sprite(img, x, y, w, h) {
    this.img = img;
    this.x = x;    this.y = y;
    this.w = w;    this.h = h;
  };

  var screen, frames, alSprite;
  function main() {
    screen = new Screen(510, 600);
    var img = new Image();
    img.addEventListener("load", function() {
      alSprite = [
        [new Sprite(this, 10, 10, 22, 15), new Sprite(this, 0, 16, 22, 16)],
      ];
      run();
    });
    img.src = "data:image/png;base64,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";
  };

  function run() {
    screen.drawSprite(alSprite[0][0], 10, 10);
    window.requestAnimationFrame(run, screen.canvas);
  };

<body onload="main()"></body>

画布加载时精灵未显示

1 个答案: