Javascript 鳍状肢y+=5； } if（curkeys[38]==true）{ 鳍状肢y-=5； } } 如果（游戏状态=“游戏结束”）{ 如果（新键[13]）{ location.reload（）； } } 如果（游戏状态=“指令”）{ 如果（新键[13]）{ gameState=“play” } } //重置新键 对于（i=0；i

这里是我第一眼看到的问题：

• 您需要声明

  myCanvas

  ：

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

• 您需要调用

  gameFrameworkInit（）在某个地方，否则您的游戏将无法初始化且无法启动
  

• 您应该将
  块移动到
  标记下方的
  末尾，或者使用任何其他方法延迟JavaScript执行，直到可以从脚本中访问
  DOM元素

---

这段代码是我的同学在我们的项目（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>

//此类用于用户控制的翻转器对象
函数flipperClass（flipperX、flipperY、flipperWidth、flipperHeight、flipperImg）{
//建造师
这个.x=flipperX；
这个。y=轻率；
this.width=flipperWidth；
this.height=flipperHeight；
this.img=新图像（）；
this.img.src=flipperImg；
//移动方法-不要让脚蹼离开屏幕
this.moveLeft=函数（）{
如果（this.x>5）{
这个.x-=5；
} 
} 
//画法
this.draw=函数（）{
c、 drawImage（this.img，this.x，this.y，this.width，this.height）；
} 
} 
//此类用于ball对象
函数ballClass（）{
//建造师
这个x=50；
这个y=100；
这个宽度=40；
这个高度=40；
//dx和dy表示球对象在中的速度
//x方向和y方向分别为
这是1.dx=7；
这个.dy=7；
this.img=新图像（）；
this.img.src=“ball.png”；
//如果此球与“obj”相交，则此函数返回true，其中“obj”为
//保险杠对象或翻转器对象。否则返回false。
this.intersects=函数（obj）{
如果（此.xobj.x&&
此.yobj.y）{
返回true；
}否则{
返回false；
} 
} 
//球的主要更新功能，负责：
//1.球的运动
//2.边缘逻辑（边缘反弹，底部边缘模具）
//3.脚蹼反弹
//4.消除我们撞到的保险杠
this.update=函数（）{
//移动
this.x+=this.dx；
this.y+=this.dy；
//从左墙反弹
如果（this.x<0&&this.dx<0）{
这是1.dx*=-1；
} 
//从右墙反弹
如果（this.x+this.width>cWidth&&this.dx>0）{
这是1.dx*=-1；
} 
//从顶部反弹
如果（this.y<0&&this.dy<0）{
这是1.dy*=-1；
} 
//底边：球模，开始新球
如果（this.y+this.height>cHeight&&this.dy>0）{
寿命-=1；
如果（生命==0）{
gameState=“gameover”；
} 
球x=50；
球y=100；
sndKick.currentTime=0；
sndKick.play（）；
} 
//脚蹼弹跳
如果（this.intersects（flipper））{
这是1.dy*=-1
sndTop.currentTime=0；
sndTop.play（）；
} 
//消除我们撞到的保险杠
对于（i=0；i<16；i++）{
if（tomotarray[i].bVisible==true&&
此.intersects（tomatoArray[i]）{
分数+=10分；
tomatoArray[i].bVisible=false；
如果（this.dy<0）{
这是1.dy*=-1；
} 
sndSnare.currentTime=0；
sndSnare.play（）；
} 
} 
} 
//画法
this.draw=函数（）{
c、 drawImage（this.img，this.x，this.y，this.width，this.height）；
} 
} 
//此类用于屏幕上的保险杠对象
类（x，y）{
//建造师
这个.x=x；
这个。y=y；
这个宽度=40；
这个高度=40；
this.bVisible=true；//番茄开始可见
this.img=新图像（）；
this.img.src=“hitBall.png”；
//画法
this.draw=函数（）{
如果（this.bVisible）{
c、 drawImage（this.img，this.x，this.y，this.width，this.height）；
} 
} 
} 
//画布语境；用于调用画布方法
var c；
//画布宽度和高度。
var cWidth，cHeight；
//存储当前键盘状态
var curkeys=[]；
//存储自上次更新以来新按下的键
var newkeys=[]；
//我们的全局变量（flip）