-
Notifications
You must be signed in to change notification settings - Fork 0
/
BubbleCollisions - 2nd step.html
145 lines (108 loc) · 3.66 KB
/
BubbleCollisions - 2nd step.html
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<!------分------割------线------>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Author" content="Bruce Zhu">
<title>Bubble Collisions - 泡泡碰撞</title>
</head>
<style>
html,body {
margin: 0;
padding: 0;
}
canvas {
box-shadow: 0 0 40px black;
margin: 50px auto;
}
div {
width: 800px;
height: 600px;
margin: 0 auto;
}
</style>
<!------分------割------线------>
<body>
<div>
<canvas id="bubble" width="800px" height="600px">对不起！您的浏览器不支持Canvas</canvas>
</div>
</body>
<script type="text/javascript">
// 获取画布对象
var canvas = document.getElementById('bubble');
var ctx = canvas.getContext('2d');
// 蓝色泡泡的图片
var blueBubbleImg = new Image();
blueBubbleImg.src = "蓝泡.png";
// 红色泡泡的图片
var redBubbleImg = new Image();
redBubbleImg.src = "红泡.png";
// 创建泡泡对象
var bubble = function(x, y, bubbleWidth, bubbleHeight, whichBubble) {
this.x = x;
this.y = y;
this.bubbleWidth = bubbleWidth;
this.bubbleHeight = bubbleHeight;
this.whichBubble = whichBubble;
this.draw = function () {
// 保存当前环境状态
ctx.save();
ctx.drawImage(this.whichBubble, this.x, this.y, this.bubbleWidth, this.bubbleHeight);
}
}
// 蓝色泡泡随机函数
function blueRandom(min,max) {
return parseInt(Math.random()*(max - min) + min);
}
// 实例化红色泡泡对象
var redBubble = new bubble(centerX, centerY, 50, 50, redBubbleImg);
// 初始化小球出现的位置 PS：这两个声明不能放在实例化对象之前，会报错
var centerX = (canvas.width - redBubble.bubbleWidth)/2;
var centerY = (canvas.height - redBubble.bubbleHeight)/2;
// 在画布上绘制初始状态的泡泡
redBubbleImg.onload = function () {
redBubble.draw();
}
// 给画布设置监听事件，触发阶段默认为false冒泡阶段
canvas.addEventListener("mousemove", onMouseMove, false);
// 记录鼠标移动到的位置，初始化的值为正中心
var mouseX = centerX;
var mouseY = centerY;
// 保存碰壁瞬间状态的泡泡坐标，如果当泡泡触碰到了墙壁，则redBubble.x/y的值取这一状态的
var mouseTouchBorderX,mouseTouchBorderY;
function onMouseMove(evt){
// offset获取到canvas层中鼠标的位置，然后减去红色泡泡自身高度
mouseX = evt.offsetX - redBubble.bubbleWidth/2;
mouseY = evt.offsetY - redBubble.bubbleHeight/2;
}
// 刷新泡泡
function drawBubble() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重绘红球前的准备
if(redBubbleTouchBorder()){
// 如果碰壁的话，取碰壁时的值
redBubble.x = mouseTouchBorderX;
redBubble.y = mouseTouchBorderY;
} else {
// 更新泡泡的坐标
redBubble.x = mouseX;
redBubble.y = mouseY;
// 暂时保存这一状态的泡泡坐标，如果碰壁的话，此处不执行
mouseTouchBorderX = mouseX;
mouseTouchBorderY = mouseY;
}
// 重新绘制
redBubble.draw();
}
// 判断红泡泡是否触壁，判断触壁要用mouseX/Y而不能用redBubble.x/y，因为mouseX/Y是变化的。mouseX/Y < -3是因为泡泡的图片有3px的厚度（实测）
function redBubbleTouchBorder() {
return mouseX + redBubble.bubbleWidth > canvas.width || mouseY + redBubble.bubbleHeight > canvas.height || mouseX < 0 || mouseY < 0 ? true : false;
}
// 设置刷新时间，60帧/s的帧率是比较细腻的，所以用1s/60
setInterval(drawBubble, 1000/60);
</script>
<!------分------割------线------>
</html>