Canvas制作 撞球游戏 简单易学

演示地址:

首先基本的canvas api 要掌握

核心代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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定义并且存储了一组画被撞方块的位置和大小信息。

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


首先 画一个圆

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

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

然后画托板

1
2
3
4
5
6
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了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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) {
1
2
3
4
5
6
7
    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接下啦就是让被撞的方块消失。

1
2
3
4
5
6
7
8
9
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!

很简单吧!


完!

豫ICP备19009686号
吕小鸣的前端博客正在使用PWA,是否安装到桌面?x