Canvas制作 撞球游戏 简单易学

演示地址：

首先基本的canvas api 要掌握

核心代码：

var canvas = document.getElementById('canvas');  
var x = 50;  
var y = 50;  
var dx = 2;  
var dy = 4;  
var WIDTH;  
var HEIGHT;  
var ctx;  
var paddlex;  
var paddleh;  
var paddlew;  
var a;  
  
var rectee = {w:60,h:10,data:[{  
    x:10,  
    y:10  
},{  
    x:80,  
    y:10  
},{  
    x:150,  
    y:10  
},{  
    x:220,  
    y:10  
},{  
    x:10,  
    y:30  
},{  
    x:80,  
    y:30  
},{  
    x:150,  
    y:30  
},{  
    x:220,  
    y:30  
}]};  
function init_paddle() {  
  paddlex = WIDTH / 2;  
  paddleh = 10;  
  paddlew = 75;  
}  
function init() {  
  ctx = canvas.getContext("2d");  
  WIDTH = 300;  
  HEIGHT = 300;  
  canvas.addEventListener("mousemove",mouseMove)  
  a = setInterval(draw, 10);  
}  
function mouseMove (e) {  
    var rect = e.currentTarget.getBoundingClientRect();  
    var gravityPoint = {  
            x: e.clientX - rect.left,  
            y: e.clientY - rect.top  
          };  
    paddlex = gravityPoint.x - 30;  
}  
function circle(x,y,r) {  
  ctx.beginPath();  
  ctx.arc(x, y, r, 0, Math.PI*2, true);  
  ctx.closePath();  
  ctx.fill();  
}  
   
function rect(x,y,w,h) {  
  ctx.beginPath();  
  ctx.rect(x,y,w,h);  
  ctx.closePath();  
  ctx.fill();  
}  
   
function clear() {  
  ctx.clearRect(0, 0, WIDTH, HEIGHT);  
}  
   
function checkCollide(){  
    for (var i = 0; i < rectee.data.length ; i++) {  
        if (x <= (rectee.data[i].x + 60) && x >= (rectee.data[i].x) && rectee.data[i].y <= y && y <= (rectee.data[i].y + 10)) {  
            rectee.data.splice(i,1);  
            dy = -dy;  
        }  
      }  
      
}  
function draw() {  
  clear();  
  circle(x, y, 10);  
  rect(paddlex, 290, paddlew, paddleh);  
  for (var i = 0; i < rectee.data.length ; i++) {  
      rect(rectee.data[i].x, rectee.data[i].y, rectee.w, rectee.h);  
  }  
  if (rectee.data.length == 0) {  
      clearInterval(a);  
      alert("success!");  
  }  
  checkCollide();  
  if ((x + dx) > WIDTH || (x + dx) < 0 ) {  
      dx = -dx;  
  }  
  if ((y + dy) < 0) {  
      dy = -dy;  
  } else if ((y + dy) >= 290) {  
      if ((x + dx) >= paddlex && (x + dx) <= (paddlex + paddlew)) {  
          dy = -dy;  
      } else {  
          clearInterval(a);  
          alert("error!");  
      }  
  }  
    
  x += dx;  
  y += dy;  
    
}  
  
init();  
init_paddle();

rectee定义并且存储了一组画被撞方块的位置和大小信息。

每一项的初始值必须定义在外部，这样可以实时修改他们的信息。

首先 画一个圆

function circle(x,y,r) {  
  ctx.beginPath();  
  ctx.arc(x, y, r, 0, Math.PI*2, true);  
  ctx.closePath();  
  ctx.fill();  
}

很简单，直接调用这个方法。

然后画托板

function rect(x,y,w,h) {  
  ctx.beginPath();  
  ctx.rect(x,y,w,h);  
  ctx.closePath();  
  ctx.fill();  
}

注意的是这个托板只能在canvas底部移动，所以传的Y值要固定，为canvas的高度减去托板的高度，很好理解。

然后让小球，也就是刚才画的圆形，不断移动。

思路就是setInterval方法每次画出小球的位置，然后调用clearRect来清除上一次的内容。

再次期间每次改变小球的位置，x y 的值就可以了。

然后判断当x 或者 y在临界边缘时，反弹，也就是代码里的 dx 和 dy取反就OK了。

if ((x + dx) > WIDTH || (x + dx) < 0 ) {  
      dx = -dx;  
  }  
  if ((y + dy) < 0) {  
      dy = -dy;  
  } else if ((y + dy) >= 290) {  
      if ((x + dx) >= paddlex && (x + dx) <= (paddlex + paddlew)) {  
          dy = -dy;  
      } else {  
          clearInterval(a);  
          alert("error!");  
      }  
  }  
    
  x += dx;  
  y += dy;</pre>

然后，绑定mousemove事件给canvas，由于canvas内部的元素不支持绑定事件，所以只能通过给canvas绑定，然后判断canvas内元素的位置来决定是否触发事件。许多canvas的事件绑定就是根据这个原理来的。

mouseMove (e) {

    var rect = e.currentTarget.getBoundingClientRect();  
    var gravityPoint = {  
            x: e.clientX - rect.left,  
            y: e.clientY - rect.top  
          };  
    paddlex = gravityPoint.x - 30;  
}

其中getBoundingClientRect为常用的判断canvas元素相对于body位置坐标的方法，直接用即可！

ok接下啦就是让被撞的方块消失。

function checkCollide(){  
    for (var i = 0; i < rectee.data.length ; i++) {  
        if (x <= (rectee.data[i].x + 60) && x >= (rectee.data[i].x) && rectee.data[i].y <= y && y <= (rectee.data[i].y + 10)) {  
            rectee.data.splice(i,1);  
            dy = -dy;  
        }  
      }  
      
}

同理，先遍历方块，然后通过坐标来判断，OK!

很简单吧！

完！