Question

我正在尝试使用Canvas元素创建一个基本的HTML游戏，但我遇到了麻烦。不幸的是，我不知道我的代码中的错误在哪里，所以我已经发布了我在下面工作的整个文档。

我的问题：运行HTML文档时画布没有显示。

这段代码基于（就像在几乎所有）w3schools使用Canvas的运动教程，可以在https://www.w3schools.com/graphics/tryit.asp?filename=trygame_movement_keyboard获得，但是在追逐变量名时我必须打破一些东西，因为看了几个小时之后，我无法弄清楚我错过了什么。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
  canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
  }
</style>
</head>
<body onload = "initial()">

<script>
var playerOne;

function initial() {
  playerOne = new canvasObject(30, 30, "red", 225, 225);
  gameArea.start();
}

var gameArea = {
  canvas : document.createElement("canvas");
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.frameNo = 0;
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('keydown', function (e) {
        e.preventDefault();
        gameArea.keys = (gameArea.keys || []);
        gameArea.keys[e.keyCode] = (e.type == "keydown");
    })
    window.addEventListener('keyup', function (e) {
        gameArea.keys[e.keyCode] = (e.type == "keydown");
    })
  },
  stop : function() {
      clearInterval(this.interval);
  },    
  clear : function() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

function canvasObject(width, height, color, x, y, type)
{
	this.type = type;
  this.width = width;
  this.height = height;
  this.speed = 0;
  this.angle = 0;
  this.moveAngle = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = gameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();    
  }
  this.newPos = function() {
  	this.angle += this.moveAngle * Math.PI / 180;
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  }
}

function updateGameArea() {
  gameArea.clear();
  playerOne.moveAngle = 0;
  playerOne.speed = 0;
  if (gameArea.keys && gameArea.keys[37]) {
  	playerOne.moveAngle = -1; 
  }
  if (gameArea.keys && gameArea.keys[39]) {
  	playerOne.moveAngle = 1; 
  	
  }
  if (gameArea.keys && gameArea.keys[38]) {
  	playerOne.speed= 1; 
  	
  }
  if (gameArea.keys && gameArea.keys[40]) {
  	playerOne.speed= -1; 
  	
  }
  playerOne.newPos();
  playerOne.update();
}

</script> 

</body>
</html>

＆＃13;

Answer 1

您遇到语法错误：

var gameArea = {
  canvas : document.createElement("canvas");
  ...
}

您已使用;代替,

Answer 2

gameArea是一个对象。对象属性由,分隔，而不是;。因此，在定义canvas之后会出现语法错误。

＆＃13;

var playerOne;

function initial() {
  playerOne = new canvasObject(30, 30, "red", 225, 225);
  gameArea.start();
}

var gameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.frameNo = 0;
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('keydown', function (e) {
        e.preventDefault();
        gameArea.keys = (gameArea.keys || []);
        gameArea.keys[e.keyCode] = (e.type == "keydown");
    })
    window.addEventListener('keyup', function (e) {
        gameArea.keys[e.keyCode] = (e.type == "keydown");
    })
  },
  stop : function() {
      clearInterval(this.interval);
  },    
  clear : function() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

function canvasObject(width, height, color, x, y, type)
{
	this.type = type;
  this.width = width;
  this.height = height;
  this.speed = 0;
  this.angle = 0;
  this.moveAngle = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = gameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();    
  }
  this.newPos = function() {
  	this.angle += this.moveAngle * Math.PI / 180;
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  }
}

function updateGameArea() {
  gameArea.clear();
  playerOne.moveAngle = 0;
  playerOne.speed = 0;
  if (gameArea.keys && gameArea.keys[37]) {
  	playerOne.moveAngle = -1; 
  }
  if (gameArea.keys && gameArea.keys[39]) {
  	playerOne.moveAngle = 1; 
  	
  }
  if (gameArea.keys && gameArea.keys[38]) {
  	playerOne.speed= 1; 
  	
  }
  if (gameArea.keys && gameArea.keys[40]) {
  	playerOne.speed= -1; 
  	
  }
  playerOne.newPos();
  playerOne.update();
}

＆＃13;

  canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
  }

＆＃13;

<body onload = "initial()">

＆＃13;

在基本HTML Canvas游戏中显示画布时出现问题

2 个答案: