一个简单的javascript小球碰撞代码

一个简单的javascript小球碰撞代码，综合了键盘操作，canvas等知识了，javascript入门小游戏基础

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
    <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var width = canvas.width;
    var height = canvas.height;

    var circle = function (x, y, radius, fillCircle) {
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, Math.PI * 2, false);
      if (fillCircle) {
        ctx.fill();
        } else {
        ctx.stroke();
      }
    };

    // The Ball constructor
    var Ball = function () {
      this.x = width / 2;
      this.y = height / 2;
      this.xSpeed = 5;
      this.ySpeed = 0;
    };

    
    Ball.prototype.move = function () {
      this.x += this.xSpeed;
      this.y += this.ySpeed;

      if (this.x < 0) {
        this.x = width;
      } else if (this.x > width) {
        this.x = 0;
      } else if (this.y < 0) {
        this.y = height;
      } else if (this.y > height) {
        this.y = 0;
      }
    };

   
    Ball.prototype.draw = function () {
      circle(this.x, this.y, 10, true);
    };

   
    Ball.prototype.setDirection = function (direction) {
      if (direction === "up") {
        this.xSpeed = 0;
        this.ySpeed = -5;
      } else if (direction === "down") {
        this.xSpeed = 0;
        this.ySpeed = 5;
      } else if (direction === "left") {
        this.xSpeed = -5;
        this.ySpeed = 0;
      } else if (direction === "right") {
        this.xSpeed = 5;
        this.ySpeed = 0;
      } else if (direction === "stop") {
        this.xSpeed = 0;
        this.ySpeed = 0;
      }
    };

    // Create the ball object
    var ball = new Ball();

    // An object to convert keycodes into action names
    var keyActions = {
      32: "stop",
      37: "left",
      38: "up",
      39: "right",
      40: "down"
    };

   
    $("body").keydown(function (event) {
      var direction = keyActions[event.keyCode];
      ball.setDirection(direction);
    });

 
    setInterval(function () {
      ctx.clearRect(0, 0, width, height);

      ball.draw();
      ball.move();

      ctx.strokeRect(0, 0, width, height);
    }, 30);
    </script>
</body>
一个简单的javascript小球碰撞代码

猜你喜欢
