javascript - HTML 基本弹球游戏

Question

我对计算机科学非常陌生，目前我正在开始制作一个基本的弹球游戏。我让脚蹼移动的计划只是通过按向左箭头键将图像从向上位置的图像更改为向下位置的图像。

这是我的代码(一些代码是以前游戏留下的，目前没有使用)

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>

Answer 1

这是我乍一看发现的问题:

• 您需要声明myCanvas :

  var myCanvas = document.getElementById("myCanvas");
  

• 您需要调用gameFrameworkInit();某处，否则你的游戏将无法初始化并且无法启动。

• 您应该移动 <script> block 到 <body> 的末尾低于<canvas>标记或使用任何其他方式延迟 JavaScript 执行，直到 <canvas>可以从脚本内访问 DOM 元素。