我是计算机科学的新手，我现在开始制作一个基本的弹球游戏。我的让脚蹼移动的计划是通过按左箭头键将图像从向上位置中的一个更改为向下位置中的一个。
这是我的代码（代码的一部分是从以前的游戏中删除的，目前尚未使用）
var flipper = new flipperClass(0, 400, 200, 200, "paddleL.png");
// This class is for the user-controlled flipper object
function flipperClass(flipperX, flipperY, flipperWidth, flipperHeight, flipperImg) {
// Constructor
this.x = flipperX;
this.y = flipperY;
this.width = flipperWidth;
this.height = flipperHeight;
this.img = new Image();
this.img.src = flipperImg;
// Movement methods - don't let flipper move off the screen
this.moveLeft = function() {
if (this.x > 5) {
this.x -= 5;
}
}
// Draw method
this.draw = function() {
c.drawImage(this.img, this.x, this.y, this.width, this.height);
}
}
// This class is for the ball object
function ballClass() {
// Constructor
this.x = 50;
this.y = 100;
this.width = 40;
this.height = 40;
// dx and dy represent the ball object's speed in
// the x- and y-direction respectively
this.dx = 7;
this.dy = 7;
this.img = new Image();
this.img.src = "ball.png";
// This function returns true if this ball intersects "obj", where "obj" is
// either a bumper object or a flipper object. Returns false otherwise.
this.intersects = function(obj) {
if (this.x < obj.x + obj.width &&
this.x + this.width > obj.x &&
this.y < obj.y + obj.height &&
this.y + this.height > obj.y) {
return true;
} else {
return false;
}
}
// Main update function for ball, takes care of:
// 1. ball movement
// 2. edge logic (bounce off of edges, die at the bottom edge)
// 3. bounce off of flipper
// 4. eliminate bumper that we hit
this.update = function() {
// Move
this.x += this.dx;
this.y += this.dy;
// Bounce off of left wall
if (this.x < 0 && this.dx < 0) {
this.dx *= -1;
}
// Bounce off of right wall
if (this.x + this.width > cWidth && this.dx > 0) {
this.dx *= -1;
}
// Bounce off of top
if (this.y < 0 && this.dy < 0) {
this.dy *= -1;
}
// Bottom edge: ball dies, start new ball
if (this.y + this.height > cHeight && this.dy > 0) {
lives -= 1;
if (lives == 0) {
gameState = "gameover";
}
ball.x = 50;
ball.y = 100;
sndKick.currentTime = 0;
sndKick.play();
}
// bounce off of flipper
if (this.intersects(flipper)) {
this.dy *= -1
sndTop.currentTime = 0;
sndTop.play();
}
// eliminate bumper that we hit
for (i = 0; i < 16; i++) {
if (tomatoArray[i].bVisible == true &&
this.intersects(tomatoArray[i])) {
score += 10;
tomatoArray[i].bVisible = false;
if (this.dy < 0) {
this.dy *= -1;
}
sndSnare.currentTime = 0;
sndSnare.play();
}
}
}
// Draw method
this.draw = function() {
c.drawImage(this.img, this.x, this.y, this.width, this.height);
}
}
// This class is for the on-screen bumper objects
function tomatoClass(x, y) {
// Constructor
this.x = x;
this.y = y;
this.width = 40;
this.height = 40;
this.bVisible = true; // tomatoes start off being visible
this.img = new Image();
this.img.src = "hitBall.png";
// Draw method
this.draw = function() {
if (this.bVisible) {
c.drawImage(this.img, this.x, this.y, this.width, this.height);
}
}
}
// Canvas context; used to call Canvas methods
var c;
// Canvas width and height.
var cWidth, cHeight;
// Stores the current keyboard state
var curkeys = [];
// Stores keys that have been newly pressed since last update
var newkeys = [];
// Our global variables (flipper, ball, tomatoes)
var flipper, ball;
var tomatoArray = [];
// The current game state, can be one of: "play", "gameover"
var gameState = "instructions";
var score = 0;
var lives = 3;
var sndCymbal = new Audio('cymbal.wav');
var sndKick = new Audio('buzzer.wav');
var sndSnare = new Audio('hit.mp3');
var sndTop = new Audio('jump.mp3');
var flipperDirection = "down";
// Initializes entire game framework. This method should only be called
// once, by the body onload event handler.
function gameFrameworkInit()
{
// Initialize key arrays
for (i = 0; i < 256; i++) {
curkeys[i] = false;
newkeys[i] = false;
}
// Initialize global variables for canvas
c = myCanvas.getContext('2d');
cWidth = myCanvas.width;
cHeight = myCanvas.height;
// Initialize global variables for our game
flipper = new flipperClass();
ball = new ballClass();
// Populate tomatoArray[] with 16 tomatoes spread out near the top of the canvas
for (i = 0; i < 16; i++) {
tomatoArray[i] = new tomatoClass(50 * i, 20);
}
// Start listeners for getting keyboard state
window.addEventListener('keydown',
function(e) {
if (!curkeys[e.keyCode]) {
curkeys[e.keyCode] = true;
newkeys[e.keyCode] = true;
}
}
);
window.addEventListener('keyup',
function(e) {
curkeys[e.keyCode] = false;
}
);
// Schedule the update function to be called right before the next repaint.
// (At the end of the update function, it will schedule itself to be called
// again before the NEXT repaint, and so on.
window.requestAnimationFrame(gameUpdate);
}
// Main update loop for the entire game
function gameUpdate() {
if (gameState == "play") {
ball.update();
flipper.update();
if (curkeys[37] == true) {
flipperPosition = "up";
flipper.img.src = "ball.png";
}
if (curkeys[37] == false) {
flipperPosition = "down";
flipper.img.src = "paddleL.png";
}
if (curkeys[39] == true) {
flipper.x += 5;
}
if (curkeys[40] == true) {
flipper.y += 5;
}
if (curkeys[38] == true) {
flipper.y -= 5;
}
}
if (gameState == "gameover") {
if (newkeys[13]) {
location.reload();
}
}
if (gameState == "instructions") {
if (newkeys[13]) {
gameState = "play"
}
}
// Reset newkeys
for (i = 0; i < 256; i++) {
newkeys[i] = false;
}
// At the end of the update function, repaint the screen
gameDraw();
// Last thing the update function does is to schedule itself to be called
// again before the next repaint
window.requestAnimationFrame(gameUpdate);
}
// Main draw loop for the entire game
function gameDraw() {
// Clear the canvas before we draw the current frame
c.clearRect(0, 0, cWidth, cHeight);
// Draw flipper/ball/bumper
if (gameState == "play") {
flipper.draw();
ball.draw();
for (i = 0; i < 16; i++) {
tomatoArray[i].draw();
}
c.font = "14px Arial";
c.fillText("Your Score is: " + score, 680, 10);
c.fillText("Lives: " + lives, 600, 10);
}
if (gameState == "instructions") {
c.font = "20px orbitron";
c.fillText("Welcome To Virtual Pinball", 250, 300);
c.fillText("Use The Arrow Keys to Move The Flippers", 250, 325);
c.fillText("Move the Flippers to hit ball", 250, 350);
c.fillText("Try to hit the ball around the playfield!", 250, 375);
}
if (gameState == "gameover") {
c.font = "17px Arial";
c.fillText("Game Over", 250, 300);
c.fillText("Your Score is: " + score, 250, 400);
c.fillText("Press Enter to Play Again", 250, 425)
}
}<html>
<head>
<style>
canvas {
background-image: url("wood.png");
}
</style>
</head>
<body onload="gameFrameworkInit()">
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<html>
<head>
<style>
canvas{
background-image: url("wood.png");
}
</style>
<script>
var flipper = new flipperClass(0, 400, 200, 200, "paddleup.png");
// This class is for the user-controlled flipper object
function flipperClass(flipperX, flipperY, flipperWidth, flipperHeight, flipperImg)
{
// Constructor
this.x = flipperX;
this.y = flipperY;
this.width = flipperWidth;
this.height = flipperHeight;
this.img = new Image();
this.img.src = flipperImg;
// Movement methods - don't let flipper move off the screen
this.moveLeft = function()
{
if (this.x > 5)
{
this.x -= 5;
}
}
// Draw method
this.draw = function()
{
c.drawImage(this.img, this.x, this.y, this.width, this.height);
}
}
// This class is for the ball object
function ballClass()
{
// Constructor
this.x = 50;
this.y = 100;
this.width = 40;
this.height = 40;
// dx and dy represent the ball object's speed in
// the x- and y-direction respectively
this.dx = 7;
this.dy = 7;
this.img = new Image();
this.img.src = "ball.png";
// This function returns true if this ball intersects "obj", where "obj" is
// either a bumper object or a flipper object. Returns false otherwise.
this.intersects = function(obj)
{
if (this.x < obj.x + obj.width &&
this.x + this.width > obj.x &&
this.y < obj.y + obj.height &&
this.y + this.height > obj.y)
{
return true;
}
else
{
return false;
}
}
// Main update function for ball, takes care of:
// 1. ball movement
// 2. edge logic (bounce off of edges, die at the bottom edge)
// 3. bounce off of flipper
// 4. eliminate bumper that we hit
this.update = function()
{
// Move
this.x += this.dx;
this.y += this.dy;
// Bounce off of left wall
if (this.x < 0 && this.dx < 0)
{
this.dx *= -1;
}
// Bounce off of right wall
if (this.x + this.width > cWidth && this.dx > 0)
{
this.dx *= -1;
}
// Bounce off of top
if (this.y < 0 && this.dy < 0)
{
this.dy *= -1;
}
// Bottom edge: ball dies, start new ball
if (this.y + this.height > cHeight && this.dy > 0)
{
lives -= 1;
if (lives == 0)
{
gameState = "gameover";
}
ball.x = 50;
ball.y = 100;
sndKick.currentTime = 0;
sndKick.play();
}
// bounce off of flipper
if (this.intersects(flipper))
{
this.dy *= -1
sndTop.currentTime = 0;
sndTop.play();
}
// eliminate bumper that we hit
for (i = 0; i < 16; i++)
{
if (tomatoArray[i].bVisible == true &&
this.intersects(tomatoArray[i]))
{
score += 10;
tomatoArray[i].bVisible = false;
if (this.dy < 0)
{
this.dy *= -1;
}
sndSnare.currentTime = 0;
sndSnare.play();
}
}
}
// Draw method
this.draw = function()
{
c.drawImage(this.img, this.x, this.y, this.width, this.height);
}
}
// This class is for the on-screen bumper objects
function tomatoClass(x, y)
{
// Constructor
this.x = x;
this.y = y;
this.width = 40;
this.height = 40;
this.bVisible = true; // tomatoes start off being visible
this.img = new Image();
this.img.src = "hitBall.png";
// Draw method
this.draw = function()
{
if (this.bVisible)
{
c.drawImage(this.img, this.x, this.y, this.width, this.height);
}
}
}
// Canvas context; used to call Canvas methods
var c;
// Canvas width and height.
var cWidth, cHeight;
// Stores the current keyboard state
var curkeys = [];
// Stores keys that have been newly pressed since last update
var newkeys = [];
// Our global variables (flipper, ball, tomatoes)
var flipper, ball;
var tomatoArray = [];
// The current game state, can be one of: "play", "gameover"
var gameState = "instructions";
var score = 0;
var lives = 3;
var sndCymbal = new Audio('cymbal.wav');
var sndKick = new Audio('buzzer.wav');
var sndSnare = new Audio('hit.mp3');
var sndTop = new Audio('jump.mp3');
var flipperDirection = "down";
// Initializes entire game framework. This method should only be called
// once, by the body onload event handler.
function gameFrameworkInit()
{
// Initialize key arrays
for (i = 0; i < 256; i++){
curkeys[i] = false;
newkeys[i] = false;
}
// Initialize global variables for canvas
c = myCanvas.getContext('2d');
cWidth = myCanvas.width;
cHeight = myCanvas.height;
// Initialize global variables for our game
flipper = new flipperClass();
ball = new ballClass();
// Populate tomatoArray[] with 16 tomatoes spread out near the top of the canvas
for (i = 0; i < 16; i++){
tomatoArray[i] = new tomatoClass(50*i, 20);
}
// Start listeners for getting keyboard state
window.addEventListener('keydown',
function(e){
if (!curkeys[e.keyCode]){
curkeys[e.keyCode] = true;
newkeys[e.keyCode] = true;
}
}
);
window.addEventListener('keyup',
function(e){ curkeys[e.keyCode] = false; }
);
// Schedule the update function to be called right before the next repaint.
// (At the end of the update function, it will schedule itself to be called
// again before the NEXT repaint, and so on.
window.requestAnimationFrame(gameUpdate);
}
// Main update loop for the entire game
function gameUpdate()
{
if (gameState == "play")
{
ball.update();
flipper.update();
if(curkeys[37]== true)
{
flipperPosition = "up";
flipper.img.src = "paddleup.png";
}
if(curkeys[37]== false)
{
flipperPosition = "down";
flipper.img.src = "paddledown.png";
}
if(curkeys[39]== true)
{
flipper.x += 5;
}
if(curkeys[40]== true)
{
flipper.y += 5;
}
if(curkeys[38]== true)
{
flipper.y -= 5;
}
}
if (gameState == "gameover")
{
if (newkeys[13])
{
location.reload();
}
}
if (gameState == "instructions")
{
if (newkeys[13])
{
gameState = "play"
}
}
// Reset newkeys
for (i = 0; i < 256; i++)
{
newkeys[i] = false;
}
// At the end of the update function, repaint the screen
gameDraw();
// Last thing the update function does is to schedule itself to be called
// again before the next repaint
window.requestAnimationFrame(gameUpdate);
}
// Main draw loop for the entire game
function gameDraw()
{
// Clear the canvas before we draw the current frame
c.clearRect(0, 0, cWidth, cHeight);
// Draw flipper/ball/bumper
if (gameState == "play" )
{
flipper.draw();
ball.draw();
for (i = 0; i < 16; i++)
{
tomatoArray[i].draw();
}
c.font = "14px Arial";
c.fillText("Your Score is: " + score, 680, 10);
c.fillText("Lives: " + lives, 600, 10);
}
if (gameState == "instructions")
{
c.font = "20px orbitron";
c.fillText("Welcome To Virtual Pinball", 250, 300 );
c.fillText("Use The Arrow Keys to Move The Flippers", 250, 325);
c.fillText("Move the Flippers to hit ball", 250, 350);
c.fillText("Try to hit the ball around the playfield!", 250, 375);
}
if (gameState == "gameover")
{
c.font = "17px Arial";
c.fillText("Game Over", 250, 300);
c.fillText("Your Score is: " + score, 250, 400);
c.fillText("Press Enter to Play Again", 250, 425)
}
}
</script>
</head>
<body onload="gameFrameworkInit()">
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
答案 0 :(得分：1)
这是我第一眼看到的问题：
您需要声明myCanvas：
var myCanvas = document.getElementById("myCanvas");
您需要在某个地方拨打gameFrameworkInit();，否则您的游戏将无法初始化且无法启动。
<script>块移动到<body>标记下方<canvas>的末尾，或使用任何其他方法延迟JavaScript执行，直到<canvas> DOM元素可以可以从脚本中访问。答案 1 :(得分：0)
此代码是我的同学在我们的项目中使用的代码（lol），并将其发布到了某个地方，虽然还需要进行一些调整，但非常有用。上部是一个javascript btw，您继续使用自己的html
// This class is for the user-controlled flipper object
function flipperClass(flipperX, flipperY, flipperWidth, flipperHeight, flipperImg) {
// Constructor
this.x = flipperX;
this.y = flipperY;
this.width = flipperWidth;
this.height = flipperHeight;
this.img = new Image();
this.img.src = flipperImg;
// Movement methods - don't let flipper move off the screen
this.moveLeft = function() {
if (this.x > 5) {
this.x -= 5;
}
}
// Draw method
this.draw = function() {
c.drawImage(this.img, this.x, this.y, this.width, this.height);
}
}
// This class is for the ball object
function ballClass() {
// Constructor
this.x = 50;
this.y = 100;
this.width = 40;
this.height = 40;
// dx and dy represent the ball object's speed in
// the x- and y-direction respectively
this.dx = 7;
this.dy = 7;
this.img = new Image();
this.img.src = "ball.png";
// This function returns true if this ball intersects "obj", where "obj" is
// either a bumper object or a flipper object. Returns false otherwise.
this.intersects = function(obj) {
if (this.x < obj.x + obj.width &&
this.x + this.width > obj.x &&
this.y < obj.y + obj.height &&
this.y + this.height > obj.y) {
return true;
} else {
return false;
}
}
// Main update function for ball, takes care of:
// 1. ball movement
// 2. edge logic (bounce off of edges, die at the bottom edge)
// 3. bounce off of flipper
// 4. eliminate bumper that we hit
this.update = function() {
// Move
this.x += this.dx;
this.y += this.dy;
// Bounce off of left wall
if (this.x < 0 && this.dx < 0) {
this.dx *= -1;
}
// Bounce off of right wall
if (this.x + this.width > cWidth && this.dx > 0) {
this.dx *= -1;
}
// Bounce off of top
if (this.y < 0 && this.dy < 0) {
this.dy *= -1;
}
// Bottom edge: ball dies, start new ball
if (this.y + this.height > cHeight && this.dy > 0) {
lives -= 1;
if (lives == 0) {
gameState = "gameover";
}
ball.x = 50;
ball.y = 100;
sndKick.currentTime = 0;
sndKick.play();
}
// bounce off of flipper
if (this.intersects(flipper)) {
this.dy *= -1
sndTop.currentTime = 0;
sndTop.play();
}
// eliminate bumper that we hit
for (i = 0; i < 16; i++) {
if (tomatoArray[i].bVisible == true &&
this.intersects(tomatoArray[i])) {
score += 10;
tomatoArray[i].bVisible = false;
if (this.dy < 0) {
this.dy *= -1;
}
sndSnare.currentTime = 0;
sndSnare.play();
}
}
}
// Draw method
this.draw = function() {
c.drawImage(this.img, this.x, this.y, this.width, this.height);
}
}
// This class is for the on-screen bumper objects
function tomatoClass(x, y) {
// Constructor
this.x = x;
this.y = y;
this.width = 40;
this.height = 40;
this.bVisible = true; // tomatoes start off being visible
this.img = new Image();
this.img.src = "hitBall.png";
// Draw method
this.draw = function() {
if (this.bVisible) {
c.drawImage(this.img, this.x, this.y, this.width, this.height);
}
}
}
// Canvas context; used to call Canvas methods
var c;
// Canvas width and height.
var cWidth, cHeight;
// Stores the current keyboard state
var curkeys = [];
// Stores keys that have been newly pressed since last update
var newkeys = [];
// Our global variables (flipper, ball, tomatoes)
var flipper, ball;
var tomatoArray = [];
// The current game state, can be one of: "play", "gameover"
var gameState = "instructions";
var score = 0;
var lives = 3;
var sndCymbal = new Audio('cymbal.wav');
var sndKick = new Audio('buzzer.wav');
var sndSnare = new Audio('hit.mp3');
var sndTop = new Audio('jump.mp3');
var flipperDirection = "down";
// Initializes entire game framework. This method should only be called
// once, by the body onload event handler.
function gameFrameworkInit()
{
// Initialize key arrays
for (i = 0; i < 256; i++) {
curkeys[i] = false;
newkeys[i] = false;
}
// Initialize global variables for canvas
c = myCanvas.getContext('2d');
cWidth = myCanvas.width;
cHeight = myCanvas.height;
// Initialize global variables for our game
flipper = new flipperClass();
ball = new ballClass();
// Populate tomatoArray[] with 16 tomatoes spread out near the top of the canvas
for (i = 0; i < 16; i++) {
tomatoArray[i] = new tomatoClass(50 * i, 20);
}
// Start listeners for getting keyboard state
window.addEventListener('keydown',
function(e) {
if (!curkeys[e.keyCode]) {
curkeys[e.keyCode] = true;
newkeys[e.keyCode] = true;
}
}
);
window.addEventListener('keyup',
function(e) {
curkeys[e.keyCode] = false;
}
);
// Schedule the update function to be called right before the next repaint.
// (At the end of the update function, it will schedule itself to be called
// again before the NEXT repaint, and so on.
window.requestAnimationFrame(gameUpdate);
}
// Main update loop for the entire game
function gameUpdate() {
if (gameState == "play") {
ball.update();
flipper.update();
if (curkeys[37] == true) {
flipperPosition = "up";
flipper.img.src = "ball.png";
}
if (curkeys[37] == false) {
flipperPosition = "down";
flipper.img.src = "paddleL.png";
}
if (curkeys[39] == true) {
flipper.x += 5;
}
if (curkeys[40] == true) {
flipper.y += 5;
}
if (curkeys[38] == true) {
flipper.y -= 5;
}
}
if (gameState == "gameover") {
if (newkeys[13]) {
location.reload();
}
}
if (gameState == "instructions") {
if (newkeys[13]) {
gameState = "play"
}
}
// Reset newkeys
for (i = 0; i < 256; i++) {
newkeys[i] = false;
}
// At the end of the update function, repaint the screen
gameDraw();
// Last thing the update function does is to schedule itself to be called
// again before the next repaint
window.requestAnimationFrame(gameUpdate);
}
// Main draw loop for the entire game
function gameDraw() {
// Clear the canvas before we draw the current frame
c.clearRect(0, 0, cWidth, cHeight);
// Draw flipper/ball/bumper
if (gameState == "play") {
flipper.draw();
ball.draw();
for (i = 0; i < 16; i++) {
tomatoArray[i].draw();
}
c.font = "14px Arial";
c.fillText("Your Score is: " + score, 680, 10);
c.fillText("Lives: " + lives, 600, 10);
}
if (gameState == "instructions") {
c.font = "20px orbitron";
c.fillText("Welcome To Virtual Pinball", 250, 300);
c.fillText("Use The Arrow Keys to Move The Flippers", 250, 325);
c.fillText("Move the Flippers to hit ball", 250, 350);
c.fillText("Try to hit the ball around the playfield!", 250, 375);
}
if (gameState == "gameover") {
c.font = "17px Arial";
c.fillText("Game Over", 250, 300);
c.fillText("Your Score is: " + score, 250, 400);
c.fillText("Press Enter to Play Again", 250, 425)
}
}
<html>
<head>
<style>
canvas {
background-image: url("wood.png");
}
</style>
</head>
<body onload="gameFrameworkInit()">
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>