Question

我正在尝试开发游戏，我开始将我的脚趾浸入HTML <canvas>标记并将其与javascript一起使用。我的程序是我正在进行的PONG克隆工作。我设法添加了两个没有错误的拨片但是因为我添加了Ball功能，它只是拒绝在屏幕上绘制任何内容，因此我得到一个黑色的页面。

可能因为我正在使用课程吗？

以下是代码：

// ctx.fillStyle = 'rgba(red, green, blue, alpha)';
// ctx.fillRect(x, y, width, height);

var canvas;
var ctx;
var dx = 5;
var dy = 5;

//Class Definitions
function Game(width, height, colour) {
	this.width = width;
	this.height = height;
	this.colour = colour;
}

function Player(width, height, colour, x, y, up, down) {
	this.width = width;
	this.height = height;
	this.colour = colour;
	this.x = x;
	this.y = y;
	this.up = up;
	this.down = down;
	this.move = function(ny) {
		this.y = this.y + ny;
		ctx.fillStyle = this.colour;
		ctx.fillRect(this.x, this.y, this.width, this.height);
				
	};
}

function Ball(width, height, colour, x , y, isTouched, isInGoal) {
	this.width = width;
	this.height = height;
	this.colour = colour;
	this.x = x;
	this.y = y;
	this.isTouched = isTouched;
	this.isInGoal = isInGoal;
	this.move = function() {
		clear();
		this.x = this.x + 1;
		ctx.fillStyle = this.colour;
		ctx.fillRect(this.x, this.y, this.width, this.height);
	};
}

//Creating new Classes

var gameStage = new Game((window.innerWidth), (window.innerHeight), 'rgb(0,0,0)');
var paddleOne = new Player(10, 150, 'rgb(255,255,255)', (gameStage.width/10), (gameStage.height/2), 38, 40);
var paddleTwo = new Player(10, 150, 'rgb(255,255,255)', (gameStage.width/1.1), (gameStage.height/2), 87, 83);
var ball = new Ball(20, 20, 'rgb(255,255,255)', (gameStage.width/2), (gameStage.height/2), 0, 0);

//Initialisation

function init(){
	canvas = document.getElementById('game');
	canvas.setAttribute('width', gameStage.width);
	canvas.setAttribute('height', gameStage.height);
	canvas.setAttribute('tabindex', 0);
	if (game.getContext){
		ctx = canvas.getContext('2d');

		return setInterval(ball.move, 10);
		return setInterval(draw, 10);
	}

}

//Canvas Functions

function clear(){
	ctx.clearRect(0, 0, gameStage.width, gameStage.height);
}

function draw() {
	clear();
	ctx.fillStyle = gameStage.colour;
	ctx.fillRect(0, 0, gameStage.width, gameStage.height);
		
	ctx.fillStyle = paddleOne.colour;
	ctx.fillRect(paddleOne.x, paddleOne.y, paddleOne.width, paddleOne.height);

	ctx.fillStyle = paddleTwo.colour;
	ctx.fillRect(paddleTwo.x, paddleTwo.y, paddleTwo.width, paddleTwo.height);

	console.log("PlayerOne Y Coordinate: " + paddleOne.y + "\n");
	console.log("PlayerTwo Y Coordinate: " + paddleTwo.y + "\n");
}

//Player Control

function doKeyDown(e) {
	if (e.keyCode == paddleOne.up){
		paddleOne.move(-5);
	} else if (e.keyCode == paddleOne.down) {
		paddleOne.move(5);
	} else if (e.keyCode == paddleTwo.up) {
		paddleTwo.move(-5);
	} else if (e.keyCode == paddleTwo.down) {
		paddleTwo.move(5);
	}
}

//For HTML

function beginStuff(){
	init();
	window.addEventListener('keydown', doKeyDown, true);
}

* { margin: 0; padding: 0;}

body, html {height: 100%;}


#game {
    position: absolute;
    width:100%;
    height:100%;
	background-color: #000000;
}

<!DOCTYPE HTML>
<htmL>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>A game</title>
	<script type="text/javascript" src="game.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body onload="beginStuff();" >
    <canvas id="game">
      Please upgrade your browser to support HTML5. <br/>
    </canvas>
  </body>
</htmL>

Answer 1

这对我来说不对：

return setInterval(ball.move, 10);
return setInterval(draw, 10);

首先，你获得了2次回报。其次，您已经失去了对move方法的约束力：

return setInterval(ball.move.bind(ball), 10);

如果这还没有解决，我建议逐行调试，确保一切都按照您的预期完成。

Answer 2

在@skirtle的帮助下，我将ball.move();移至draw()功能，并从clear()功能中移除了ball.move()来电。

使用javascript和canvas在页面上绘制任何内容

2 个答案: