我正在制作一个乒乓球游戏并将此指南用作模板：http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/
这是我的导师使用的模板，一旦我们在课程中走得太远就会让我们使用，我只是稍微提前一点。
记分板将按原样绘制，并将以新分数更新（我在DrawObjects（）末尾添加了LPaddle.score ++以进行测试）
但没有别的东西可以画出来，我在这里做错了什么？找不到语法错误。
这是.js：
//pong VERSION 2 based off of:
//http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/
///////////////////////////
//VARIABLES////////////////
///////////////////////////
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
//CONSTANTS and GLOBALS
var MAX_SCORE = 10;
var paused = false;
//style attributes
var ObjectLine = '6';
var fontLine = '1';
context.strokeStyle = 'black';
context.fillStyle = 'yellow';
context.lineWidth = ObjectLine;
context.font = '50px Palatino';
//shadow attributes
context.shadowColor = 'rgba(0,0,0,0.9)';
context.shadowOffsetX = 22;
context.shadowOffsetY = 50;
context.shadowBlur = 20;
//game objects
var LPaddle = {
speed: 200,
x:canvas.width/20,
y: canvas.height/20,
score: 0,
scoreX: canvas.width/7,
scoreY: canvas.height/1.01
};
var RPaddle = {
speed: 200,
x:canvas.width/1.1,
y: canvas.height/20,
score: 0,
scoreX: canvas.width/1.2,
scoreY: canvas.height/1.01,
//sets to get player input or use AI
isHuman: true
};
var Ball = {
speed: 200,
x:canvas.width/20,
y: canvas.height/20,
r: canvas.width/50,
SA: 0,
EA: 260
};
var Boundaries = {
};
///////////////////////////
///////FUNCTIONS///////////
///////////////////////////
// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
//reset game on win OR PLAYER INPUT
var reset = function() {
};
// Update game objects
var updatePaddles = function(modifier) {
//play/pause game
if (32 in keysDown) {
paused = !(paused);
}
//is player object within boundaries?
if (LPaddle.y > 0 && LPaddle.y < (canvas.height - LPaddle.height)) {
if (65 in keysDown) { // Player holding a its 65keycode or 97ascii
LPaddle.y -= LPaddle.speed * modifier;
}
if (90 in keysDown) { // Player holding z its 90key or 122ascii
LPaddle.y += LPaddle.speed * modifier;
}
}
//check right player input if 2player
if (RPaddle.isHuman) {
//is player within boundaries?
if (RPaddle.y > 0 && RPaddle.y < (canvas.height - RPaddle.height)) {
if (38 in keysDown) { // Player holding up
RPaddle.y -= RPaddle.speed * modifier;
}
if (40 in keysDown) { // Player holding down
RPaddle.y += RPaddle.speed * modifier;
}
}
}
};
// Draw individual objects
var ClearScreen = function() {
context.clearRect(0, 0, canvas.width, canvas.height);
};
var DrawPaddle = function(x, y, width, height) {
context.shadowColor = 'rgba(0,0,0,0.9)';
context.lineWidth = ObjectLine;
context.beginPath();
context.rect(x, y, width, height);
context.stroke();
context.fill();
context.closePath();
};
var DrawBall = function(x, y, radius, startAngle, endAngle) {
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle);
context.stroke();
context.fill();
context.closePath();
};
var DrawScoreBoard = function(lX, rX, y, LPScore, RPScore) {
context.shadowColor = undefined;
context.lineWidth = fontLine;
context.strokeText(LPScore,lX,y);
context.strokeText(RPScore,rX,y);
};
//DRAW ALL OBJECTS
var DrawObjects = function() {
ClearScreen();
DrawPaddle(LPaddle.x, LPaddle.y, LPaddle.width, LPaddle.height);
DrawPaddle(RPaddle.x, RPaddle.y, RPaddle.width, RPaddle.height);
DrawBall(Ball.x, Ball.y, Ball.radius, Ball.SA, Ball.EA);
DrawScoreBoard(LPaddle.scoreX,RPaddle.scoreX,LPaddle.scoreY,LPaddle.score,RPaddle.score);
};
//MAIN GAME LOOP FXN
// The main game loop
var main = function() {
var now = Date.now();
var delta = now - then;
updatePaddles(delta / 1000);
DrawObjects();
then = now;
// Request to do this again ASAP
requestAnimationFrame(main);
};
// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
// Let's play this game!
var then = Date.now();
reset();
main();
这是.html代码：
<!DOCTYPE html>
<html>
<head>
<title>JamesG WebDesign</title>
<meta charset='UTF-8'>
<style>
body {
background-color: salmon;
}
h1 {
text-align: center;
}
h2 {
text-align: center;
}
p {
text-align: center;
}
#toMain {
margin-left: auto;
margin-right: auto;
text-align: center;
}
a {
font-size: 150%;
}
#canvas {
display: block;
margin: 0 auto;
background: #ffffff;
border: thin inset #aaaaaa;
}
#ResetAboveCanvas {
margin: 20px 0px 20px 450px;
}
#menu {
position: absolute;
margin-left: auto;
margin-right: auto;
padding: 0px 20px 10px 10px;
background: rgba(0, 0, 0, 0.3);
border: thin solid rgba(0, 0, 0, 0.6);
color: #eeeeee;
font-family: Droid Sans, Arial, Helvetica, sans-serif;
font-size: 12px;
cursor: pointer;
-webkit-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
-moz-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
display: none;
}
#menu h2 {
font-weight: normal;
}
#menu .title {
font-size: 2em;
color: rgba(255, 255, 0, 0.8);
}
#menu a:hover {
color: yellow;
}
#menu a {
text-decoration: none;
color: #cccccc;
font-size: 3.5em;
}
#menu p {
margin: 10px;
color: rgba(65, 65, 220, 1.0);
font-size: 12pt;
font-family: Palatino, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h2>James Gossling Multimedia for Web Design Spring 2018 PONG v2</h2>
<p><strong>Press SPACE to Play/Pause. Left Paddle use A/Z to move Up/Down. Right Paddle use UP/DOWN to move Up/Down</strong>
</p>
<div id='ResetAboveCanvas'>
<input type='button' id='resetButton' value='Reset Game.'/>
</div>
<div id='menu'>
<h2 class='title'>Pong</h2>
<p>One hundred balls bouncing</p>
<a id='startButton'>Restart Game</a>
</div>
<canvas id='canvas' width='800' height='600'>
Canvas not supported
</canvas>
<script src='PONGV2.js'></script>
<br>
<div id="toMain">
<a href="http://webstudentwork.com/jgossling/MMWD/index.html">Back to Main</a>
</div>
</body>
</html>
答案 0 :(得分：0)
所以事实证明这只是一个粗心的错误：我使用了LPaddle.width和.height，但是还没有在桨状物体中定义它们，现在为了让球移动！