基于JavaScript实现游戏Pong_艾孜尔江撰

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Pong/艾孜尔江撰/</title>
</head>
<script>

  //实现基于HTML的骨灰级神作Pong，和电脑的对战。

  function onload() {

    var leftArrowHit = false;
    var rightArrowHit = false;

    document.onkeydown = function (event) {
      console.log(event.keyCode);
      if (event.keyCode == 39) //键盘右方向键
      {
        rightArrowHit = true;
      }
      if (event.keyCode == 37) //键盘左键
      {
        leftArrowHit = true;

      }
      if (event.keyCode == 32) //空格键
      {
        spaceBarHit = true;

      }
    }

    var GAME_FPS = 60;
    var BACKGROUND_COLOR = '#dbdbdb';
    var PADDLE_WIDTH = 100;
    var PADDLE_HEIGHT = 10;
    var PADDLE_COLOR = '#000000';
    var BALL_COLOR = '#000000';
    var BALL_RADIUS = 10;

    var ball = new Object();
    var topPaddle = new Object();
    var bottomPaddle = new Object();


    var pointsPlayer = 0;
    var pointsComputer = 0;


    function initGameObjects() {
      ball['x'] = 40;
      ball['y'] = 240;
      ball['xspeed'] = 1;
      ball['yspeed'] = 3;

      topPaddle['x'] = 200 + Math.round(Math.random() * 20);
      topPaddle['y'] = 10; + Math.round(Math.random() * 20);
      bottomPaddle['x'] = 100;
      bottomPaddle['y'] = 460;

    }


    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    function drawScore() {
      if (pointsPlayer > 0 || pointsComputer > 0) {
        context.font = 'bold 15px Times';
        context.fillText("You:" + pointsPlayer + "  Computer:" + pointsComputer, 5, 12);
      }
    }

    //计算机智能游戏机制
    function computerAI() {
      if (ball.yspeed < 0) {
        if (ball.x < (topPaddle.x + PADDLE_WIDTH / 2)) {
          topPaddle.x--;
        } else {
          topPaddle.x++;
        }
      }

      if (topPaddle.x <= 0) {
        topPaddle.x = 0;
      }
      if (topPaddle.x >= (canvas.width - PADDLE_WIDTH)) {
        topPaddle.x = canvas.width - PADDLE_WIDTH;
      }

    }

    function keyboardEvents() {
      if (leftArrowHit) {
        bottomPaddle.x -= 3;
        leftArrowHit = false;
      }
      if (rightArrowHit) {
        bottomPaddle.x += 3;
        rightArrowHit = false;
      }
      if (bottomPaddle.x <= 0) {
        bottomPaddle.x = 0;
      }
      if (bottomPaddle.x >= (canvas.width - PADDLE_WIDTH)) {
        bottomPaddle.x = canvas.width - PADDLE_WIDTH;
      }
    }

    //碰撞检测
    function hitDetect() {

      if ((ball.y + BALL_RADIUS) >= (bottomPaddle.y)) {
        if (bottomPaddle.x <= ball.x && ball.x <= (bottomPaddle.x + PADDLE_WIDTH)) {
          console.log("bottomPaddle hit", ball.x, ball.y, bottomPaddle.x, bottomPaddle.y);
          ball.yspeed = ball.yspeed * -1;
          ball.y = bottomPaddle.y - BALL_RADIUS;
          return;
        }

      }


      if ((ball.y - BALL_RADIUS) <= (topPaddle.y + PADDLE_HEIGHT)) {
        if (topPaddle.x <= ball.x && ball.x <= (topPaddle.x + PADDLE_WIDTH)) {
          console.log("topPaddle hit", ball.x, ball.y, topPaddle.x, topPaddle.y);
          ball.yspeed = ball.yspeed * -1;
          ball.y = topPaddle.y + BALL_RADIUS + PADDLE_HEIGHT;
          return;
        }

      }

      if ((ball.x + BALL_RADIUS) >= canvas.width || (ball.x - BALL_RADIUS) <= 0) {
        ball.xspeed = ball.xspeed * -1;
      }


      if (ball.y > (canvas.height + BALL_RADIUS)) {
        pointsComputer++;
        initGameObjects();
        console.log("point for computer", pointsComputer);
      }

      if (ball.y < (0 - BALL_RADIUS)) {
        pointsPlayer++;
        initGameObjects();
        console.log("point for player", pointsPlayer);

      }

    }


    function drawBackground() {
      context.fillStyle = BACKGROUND_COLOR;  //对矩形的颜色设置
      context.fillRect(0, 0, canvas.width, canvas.height); //绘制矩形
    }

    function drawBall() {
      context.strokeStyle = BALL_COLOR;  //对球的颜色设置
      context.beginPath();  //绘制球的开始路径
      ball.x += (1 * ball.xspeed);
      ball.y += (1 * ball.yspeed);
      context.arc(ball.x, ball.y, BALL_RADIUS, 0, Math.PI * 2, true); // 绘制球
      context.fill(); //闭合对应的球的路径，绘制完毕


    }

    function drawTopPaddle() {
      context.fillStyle = PADDLE_COLOR;  //内部形状的颜色
      context.fillRect(topPaddle.x, topPaddle.y, PADDLE_WIDTH, PADDLE_HEIGHT); //绘制上方的板子 
    }

    function drawBottomPaddle() {
      context.fillStyle = PADDLE_COLOR;  //内部形状的颜色
      context.fillRect(bottomPaddle.x, bottomPaddle.y, PADDLE_WIDTH, PADDLE_HEIGHT); //绘制顶部的板子 
    }

    function pongGame() {

      keyboardEvents();
      computerAI();
      drawBackground();
      drawTopPaddle();
      drawBottomPaddle();
      drawBall();
      hitDetect();
      drawScore();

    }

    initGameObjects();
    window.setInterval(pongGame, 1000 / GAME_FPS); //开始一个游戏循环以进行循环绘制

  }


</script>

<body onload="onload()">
  <canvas id="canvas" width="320" height="480">用Pong和电脑的较量</canvas>
</body>

</html>
艾孜尔江
发布了36 篇原创文章 · 获赞 38 · 访问量 5397
私信关注
基于JavaScript实现游戏Pong_艾孜尔江撰

猜你喜欢
