的ball.js代码.的ball.js代码.

备注:本文后面的代码,如果加载了ball.js,那么要动这篇稿子[js高手之路]
html5 canvas动画教程 –
匀速运动的ball.js代码.

备注:本文后面的代码,如果加载了ball.js,那么请以就篇稿子[js高手之路]
html5 canvas动画教程 –
匀速运动的ball.js代码.

正文,我们若召开点有意思的机能,首先,来一个简易的疆界判断,所谓边界判断:就是把物体的走限定于一个克内.我们事先来一个概括的实例,在canvas上生成一个有点圆球,小球的初始位置是在canvas的刚好中间,然后通过键盘的前后左右来运动小球的职位,如果小球碰到canvas的左侧,那么不能够更向左运动,其他可行性与理.

正文,我们只要召开点有意思的法力,首先,来一个大概的疆界判断,所谓边界判断:就是把物体的走限定于一个限制内.我们先行来一个略的实例,在canvas上大成一个稍圆球,小球的开始位置是在canvas的刚好中间,然后经过键盘的内外左右来走小球的职位,如果小球碰到canvas的左侧,那么不克再次于左运动,其他可行性与理.

比方促成者效应,只待一个界判断,即可。

若兑现这作用,只待一个边界判断,即可。

 1 function checkBorder() {
 2     if ( ball.x < ball.radius ) { //碰到左边界
 3         ball.x = ball.radius;
 4     } else if ( ball.y < ball.radius ) { //碰到上边界
 5         ball.y = ball.radius;
 6     } else if ( ball.x > width - ball.radius ) { //碰到右边界
 7         ball.x = width - ball.radius;
 8     }else if ( ball.y > height - ball.radius ){
 9         ball.y = height - ball.radius;
10     }
11 }
 1 function checkBorder() {
 2     if ( ball.x < ball.radius ) { //碰到左边界
 3         ball.x = ball.radius;
 4     } else if ( ball.y < ball.radius ) { //碰到上边界
 5         ball.y = ball.radius;
 6     } else if ( ball.x > width - ball.radius ) { //碰到右边界
 7         ball.x = width - ball.radius;
 8     }else if ( ball.y > height - ball.radius ){
 9         ball.y = height - ball.radius;
10     }
11 }

不当边界:只要判断小球的圆心x
如果低于小球的半径,那必是遇到了错边界,我们就让小球的中心x等于小球的半径。

错误边界:只要判断小球的圆心x
如果低于小球的半径,那肯定是逢了左边界,我们就是受小球的中心x等于小球的半径。

右侧边界:只要判断小球的圆心x
如果盖canvas的增长率减去小球的半径,那必将是逢了右边界,我们即便吃小球的中心x等于canvas的宽窄减去小球的半径

右边边界:只要判断小球的圆心x
如果超出canvas的大幅度减去小球的半径,那必将是逢了右边界,我们虽叫小球的中心x等于canvas的升幅减去小球的半径

别上下边界和左右凡是同理。

另外上下边界及左右是同理。

整的实例代码:

完的实例代码:

 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script src="./ball.js"></script>
 9     <script>
10         window.onload = function () {
11             var oCanvas = document.querySelector("#canvas"),
12                 oGc = oCanvas.getContext('2d'),
13                 width = oCanvas.width, height = oCanvas.height,
14                 ball = new Ball(width / 2, height / 2);
15                 ball.fill( oGc );
16             addEventListener("keydown", function (ev) {
17                 oGc.clearRect(0, 0, width, height);
18                 var oEvent = ev || event;
19                 switch (oEvent.keyCode) {
20                     case 37:
21                         ball.x -= 5;
22                         checkBorder();
23                         ball.fill(oGc);
24                         break;
25                     case 39:
26                         ball.x += 5;
27                         checkBorder();
28                         ball.fill(oGc);
29                         break;
30                     case 38:
31                         ball.y -= 5;
32                         checkBorder();
33                         ball.fill(oGc);
34                         break;
35                     case 40:
36                         ball.y += 5;
37                         checkBorder();
38                         ball.fill(oGc);
39                         break;
40                 }
41             }, false);
42             function checkBorder() {
43                 if ( ball.x < ball.radius ) { //碰到左边界
44                     ball.x = ball.radius;
45                 } else if ( ball.y < ball.radius ) { //碰到上边界
46                     ball.y = ball.radius;
47                 } else if ( ball.x > width - ball.radius ) { //碰到右边界
48                     ball.x = width - ball.radius;
49                 }else if ( ball.y > height - ball.radius ){
50                     ball.y = height - ball.radius;
51                 }
52             }
53         }
54     </script>
55 </head>
56 
57 <body>
58     <canvas id="canvas" width="1200" height="600"></canvas>
59 </body>
 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script src="./ball.js"></script>
 9     <script>
10         window.onload = function () {
11             var oCanvas = document.querySelector("#canvas"),
12                 oGc = oCanvas.getContext('2d'),
13                 width = oCanvas.width, height = oCanvas.height,
14                 ball = new Ball(width / 2, height / 2);
15                 ball.fill( oGc );
16             addEventListener("keydown", function (ev) {
17                 oGc.clearRect(0, 0, width, height);
18                 var oEvent = ev || event;
19                 switch (oEvent.keyCode) {
20                     case 37:
21                         ball.x -= 5;
22                         checkBorder();
23                         ball.fill(oGc);
24                         break;
25                     case 39:
26                         ball.x += 5;
27                         checkBorder();
28                         ball.fill(oGc);
29                         break;
30                     case 38:
31                         ball.y -= 5;
32                         checkBorder();
33                         ball.fill(oGc);
34                         break;
35                     case 40:
36                         ball.y += 5;
37                         checkBorder();
38                         ball.fill(oGc);
39                         break;
40                 }
41             }, false);
42             function checkBorder() {
43                 if ( ball.x < ball.radius ) { //碰到左边界
44                     ball.x = ball.radius;
45                 } else if ( ball.y < ball.radius ) { //碰到上边界
46                     ball.y = ball.radius;
47                 } else if ( ball.x > width - ball.radius ) { //碰到右边界
48                     ball.x = width - ball.radius;
49                 }else if ( ball.y > height - ball.radius ){
50                     ball.y = height - ball.radius;
51                 }
52             }
53         }
54     </script>
55 </head>
56 
57 <body>
58     <canvas id="canvas" width="1200" height="600"></canvas>
59 </body>

边界穿透:

疆穿透:

倘小球向左运动,且全出乎左边界,我们就算让他从右边出来,如果小球向右侧走,且全超出右边界,我们不怕于他由左出来。上下方向同理

如若小球向左运动,且完全超过左边界,我们就算叫他自右侧出来,如果小球向右侧走,且完全盖右边界,我们尽管为他起左边出来。上下方向同理

 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script src="./ball.js"></script>
 9     <script>
10         window.onload = function () {
11             var oCanvas = document.querySelector("#canvas"),
12                 oGc = oCanvas.getContext('2d'),
13                 width = oCanvas.width, height = oCanvas.height,
14                 ball = new Ball(width / 2, height / 2);
15             ball.fill(oGc);
16             addEventListener("keydown", function (ev) {
17                 oGc.clearRect(0, 0, width, height);
18                 var oEvent = ev || event;
19                 switch (oEvent.keyCode) {
20                     case 37:
21                         ball.x -= 5;
22                         checkBorder();
23                         ball.fill(oGc);
24                         break;
25                     case 39:
26                         ball.x += 5;
27                         checkBorder();
28                         ball.fill(oGc);
29                         break;
30                     case 38:
31                         ball.y -= 5;
32                         checkBorder();
33                         ball.fill(oGc);
34                         break;
35                     case 40:
36                         ball.y += 5;
37                         checkBorder();
38                         ball.fill(oGc);
39                         break;
40                 }
41             }, false);
42             function checkBorder() {
43                 if (ball.x < -ball.radius) { //完全超出左边界
44                     ball.x = width + ball.radius; //让球从右边出来
45                 } else if (ball.y < -ball.radius) { //完全超出上边界
46                     ball.y = height + ball.radius;//让球从下面出来
47                 } else if (ball.x > width + ball.radius) { //完全超出右边界
48                     ball.x = -ball.radius;//让球从左边出来
49                 } else if (ball.y > height + ball.radius) {//完全超出下边界
50                     ball.y = -ball.radius; //让球从上边出来
51                 }
52             }
53         }
54     </script>
55 </head>
56 
57 <body>
58     <canvas id="canvas" width="1200" height="600"></canvas>
59 </body>
 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script src="./ball.js"></script>
 9     <script>
10         window.onload = function () {
11             var oCanvas = document.querySelector("#canvas"),
12                 oGc = oCanvas.getContext('2d'),
13                 width = oCanvas.width, height = oCanvas.height,
14                 ball = new Ball(width / 2, height / 2);
15             ball.fill(oGc);
16             addEventListener("keydown", function (ev) {
17                 oGc.clearRect(0, 0, width, height);
18                 var oEvent = ev || event;
19                 switch (oEvent.keyCode) {
20                     case 37:
21                         ball.x -= 5;
22                         checkBorder();
23                         ball.fill(oGc);
24                         break;
25                     case 39:
26                         ball.x += 5;
27                         checkBorder();
28                         ball.fill(oGc);
29                         break;
30                     case 38:
31                         ball.y -= 5;
32                         checkBorder();
33                         ball.fill(oGc);
34                         break;
35                     case 40:
36                         ball.y += 5;
37                         checkBorder();
38                         ball.fill(oGc);
39                         break;
40                 }
41             }, false);
42             function checkBorder() {
43                 if (ball.x < -ball.radius) { //完全超出左边界
44                     ball.x = width + ball.radius; //让球从右边出来
45                 } else if (ball.y < -ball.radius) { //完全超出上边界
46                     ball.y = height + ball.radius;//让球从下面出来
47                 } else if (ball.x > width + ball.radius) { //完全超出右边界
48                     ball.x = -ball.radius;//让球从左边出来
49                 } else if (ball.y > height + ball.radius) {//完全超出下边界
50                     ball.y = -ball.radius; //让球从上边出来
51                 }
52             }
53         }
54     </script>
55 </head>
56 
57 <body>
58     <canvas id="canvas" width="1200" height="600"></canvas>
59 </body>

散弹效果:

散弹效果:

经canvas的着力点,不鸣金收兵的通向周围发射小球,形成散弹的力量. 

通过canvas的主导点,不歇的往四周发射小球,形成散弹的效益. 

我无明白你们来没发生这么的误区:不停止的通向周围发射小球,那是无是只要无歇的创办小球呢?如果您这么想,程序就算写出来了,肯定会卡死.

我弗知晓你们来无产生这般的误区:不停止的通往周围发射小球,那是未是一旦无歇的创始小球呢?如果您这样想,程序就算写出来了,肯定会卡死.

实则我们可仅开创,一定数量的小球,比如(
50, 60. …100
),然后当这些小球,完全超过的境界的早晚,再将这些小球的圆心( x, y
)设定及极致初步之职位,再次随机x和y方向的速,就足以达标目的了,
说白了不畏,那个完全超过边界的小球,我们给他再也回到最初的地方,只是改变了他的水彩与速,给丁感觉到就是蛮发射小球的地方源源不断的以放小球

实际上我们好单独开创,一定数额之小球,比如(
50, 60. …100
),然后当这些小球,完全超过的鄂的时节,再将这些小球的圆心( x, y
)设定及最好开始之岗位,再次随机x和y方向的进度,就可上目的了,
说白了就算,那个完全超过边界的小球,我们受他重新赶回最初的地方,只是改变了外的颜料及进度,给人感到就是是好发射小球的地方源源不断的于放小球

bet365娱乐场官网 1

bet365娱乐场官网 2

整体的散弹效果:

整的散弹bet365娱乐场官网效果:

 

 

 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script src="./ball.js"></script>
 9     <script>
10         window.onload = function () {
11             var oCanvas = document.querySelector("#canvas"),
12                 oGc = oCanvas.getContext('2d'),
13                 width = oCanvas.width, height = oCanvas.height,
14                 balls = [], n = 50;
15             function getRandColor() {
16                 return '#' + ( function( color ){
17                     return ( color += '0123456789abcdef' [Math.floor( Math.random() * 16 )] ) && ( color.length == 6 ) ? color : arguments.callee( color );
18                 } )( '' );
19             }
20             for( var i = 0; i < n; i++ ) {
21                 var ball = new Ball( width / 2, height / 2, 20, getRandColor() );
22                 ball.vx = ( Math.random() * 2 - 1 ) * 5;
23                 ball.vy = ( Math.random() * 2 - 1 ) * 5;
24                 balls.push( ball );
25             }
26             (function move(){
27                 oGc.clearRect( 0, 0, width, height );
28                 balls.forEach( function( ball ){
29                     if ( ball.x < -ball.radius
30                         || ball.x > width + ball.radius
31                         || ball.y < -ball.radius
32                         || ball.y > height + ball.radius ) {
33                             ball.x = width / 2;
34                             ball.y = height / 2;
35                             ball.vx = ( Math.random() * 2 - 1 ) * 5;
36                             ball.vy = ( Math.random() * 2 - 1 ) * 5;
37                     }
38                     ball.x += ball.vx;
39                     ball.y += ball.vy;
40                     ball.fill( oGc );
41                 } );
42                 requestAnimationFrame( move );
43             })();
44         }
45     </script>
46 </head>
47 <body>
48     <canvas id="canvas" width="1200" height="600"></canvas>
49 </body>
 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script src="./ball.js"></script>
 9     <script>
10         window.onload = function () {
11             var oCanvas = document.querySelector("#canvas"),
12                 oGc = oCanvas.getContext('2d'),
13                 width = oCanvas.width, height = oCanvas.height,
14                 balls = [], n = 50;
15             function getRandColor() {
16                 return '#' + ( function( color ){
17                     return ( color += '0123456789abcdef' [Math.floor( Math.random() * 16 )] ) && ( color.length == 6 ) ? color : arguments.callee( color );
18                 } )( '' );
19             }
20             for( var i = 0; i < n; i++ ) {
21                 var ball = new Ball( width / 2, height / 2, 20, getRandColor() );
22                 ball.vx = ( Math.random() * 2 - 1 ) * 5;
23                 ball.vy = ( Math.random() * 2 - 1 ) * 5;
24                 balls.push( ball );
25             }
26             (function move(){
27                 oGc.clearRect( 0, 0, width, height );
28                 balls.forEach( function( ball ){
29                     if ( ball.x < -ball.radius
30                         || ball.x > width + ball.radius
31                         || ball.y < -ball.radius
32                         || ball.y > height + ball.radius ) {
33                             ball.x = width / 2;
34                             ball.y = height / 2;
35                             ball.vx = ( Math.random() * 2 - 1 ) * 5;
36                             ball.vy = ( Math.random() * 2 - 1 ) * 5;
37                     }
38                     ball.x += ball.vx;
39                     ball.y += ball.vy;
40                     ball.fill( oGc );
41                 } );
42                 requestAnimationFrame( move );
43             })();
44         }
45     </script>
46 </head>
47 <body>
48     <canvas id="canvas" width="1200" height="600"></canvas>
49 </body>

咱俩可于前头的基本功及,加上重力的熏陶,实现喷泉的功能

咱们好在之前的根基及,加上重力的熏陶,实现喷泉的功力

bet365娱乐场官网 3

bet365娱乐场官网 4

顿时张图,看在是勿是重如喷泉?

当时张图,看正在是不是还如喷泉?

bet365娱乐场官网 5

bet365娱乐场官网 6

 

 

 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script src="./ball.js"></script>
 9     <script>
10         window.onload = function () {
11             var oCanvas = document.querySelector("#canvas"),
12                 oGc = oCanvas.getContext('2d'),
13                 width = oCanvas.width, height = oCanvas.height,
14                 balls = [], n = 50, gravity = 0.2;
15             function getRandColor() {
16                 return '#' + (function (color) {
17                     return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
18                 })('');
19             }
20             for (var i = 0; i < n; i++) {
21                 var ball = new Ball(width / 2, height / 2, 20, getRandColor());
22                 ball.vx = (Math.random() * 2 - 1) * 5;
23                 ball.vy = (Math.random() * 2 - 1) * 10;
24                 balls.push(ball);
25             }
26             (function move() {
27                 oGc.clearRect(0, 0, width, height);
28                 balls.forEach(function (ball) {
29                     if (ball.x < -ball.radius
30                         || ball.x > width + ball.radius
31                         || ball.y < -ball.radius
32                         || ball.y > height + ball.radius) {
33                         ball.x = width / 2;
34                         ball.y = height / 2;
35                         ball.vx = (Math.random() * 2 - 1) * 5;
36                         ball.vy = (Math.random() * 2 - 1) * 10;
37                     }
38                     ball.x += ball.vx;
39                     ball.y += ball.vy;
40                     ball.vy += gravity;
41                     ball.fill(oGc);
42                 });
43                 requestAnimationFrame(move);
44             })();
45         }
46     </script>
47 </head>
48 
49 <body>
50     <canvas id="canvas" width="1200" height="600"></canvas>
51 </body>
 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script src="./ball.js"></script>
 9     <script>
10         window.onload = function () {
11             var oCanvas = document.querySelector("#canvas"),
12                 oGc = oCanvas.getContext('2d'),
13                 width = oCanvas.width, height = oCanvas.height,
14                 balls = [], n = 50, gravity = 0.2;
15             function getRandColor() {
16                 return '#' + (function (color) {
17                     return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
18                 })('');
19             }
20             for (var i = 0; i < n; i++) {
21                 var ball = new Ball(width / 2, height / 2, 20, getRandColor());
22                 ball.vx = (Math.random() * 2 - 1) * 5;
23                 ball.vy = (Math.random() * 2 - 1) * 10;
24                 balls.push(ball);
25             }
26             (function move() {
27                 oGc.clearRect(0, 0, width, height);
28                 balls.forEach(function (ball) {
29                     if (ball.x < -ball.radius
30                         || ball.x > width + ball.radius
31                         || ball.y < -ball.radius
32                         || ball.y > height + ball.radius) {
33                         ball.x = width / 2;
34                         ball.y = height / 2;
35                         ball.vx = (Math.random() * 2 - 1) * 5;
36                         ball.vy = (Math.random() * 2 - 1) * 10;
37                     }
38                     ball.x += ball.vx;
39                     ball.y += ball.vy;
40                     ball.vy += gravity;
41                     ball.fill(oGc);
42                 });
43                 requestAnimationFrame(move);
44             })();
45         }
46     </script>
47 </head>
48 
49 <body>
50     <canvas id="canvas" width="1200" height="600"></canvas>
51 </body>

还足以经决定小球的vx,
vy,就是x方向及y方向的快慢,来界定小球朝某一个势头发射,下面的事例,我们只吃小球朝着x轴的右边发射

尚好透过决定小球的vx,
vy,就是x方向与y方向的速度,来界定小球朝某一个方向发射,下面的例子,我们只有为小球朝着x轴的下手发射

 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script src="./ball.js"></script>
 9     <script>
10         window.onload = function () {
11             var oCanvas = document.querySelector("#canvas"),
12                 oGc = oCanvas.getContext('2d'),
13                 width = oCanvas.width, height = oCanvas.height,
14                 balls = [], n = 50;
15             function getRandColor() {
16                 return '#' + ( function( color ){
17                     return ( color += '0123456789abcdef' [Math.floor( Math.random() * 16 )] ) && ( color.length == 6 ) ? color : arguments.callee( color );
18                 } )( '' );
19             }
20             for( var i = 0; i < n; i++ ) {
21                 var ball = new Ball( width / 2, height / 2, 20, getRandColor() );
22                 ball.vx = Math.abs( ( Math.random() * 2 - 1 ) * 5 );
23                 ball.vy = ( Math.random() * 2 - 1 ) * 5;
24                 balls.push( ball );
25             }
26             (function move(){
27                 oGc.clearRect( 0, 0, width, height );
28                 balls.forEach( function( ball ){
29                     if ( ball.x < -ball.radius
30                         || ball.x > width + ball.radius
31                         || ball.y < -ball.radius
32                         || ball.y > height + ball.radius ) {
33                             ball.x = width / 2;
34                             ball.y = height / 2;
35                             ball.vx = Math.abs( ( Math.random() * 2 - 1 ) * 5 );
36                             ball.vy = ( Math.random() * 2 - 1 ) * 5;
37                     }
38                     ball.x += ball.vx;
39                     ball.y += ball.vy;
40                     ball.fill( oGc );
41                 } );
42                 requestAnimationFrame( move );
43             })();
44         }
45     </script>
46 </head>
47 <body>
48     <canvas id="canvas" width="1200" height="600"></canvas>
49 </body>
 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script src="./ball.js"></script>
 9     <script>
10         window.onload = function () {
11             var oCanvas = document.querySelector("#canvas"),
12                 oGc = oCanvas.getContext('2d'),
13                 width = oCanvas.width, height = oCanvas.height,
14                 balls = [], n = 50;
15             function getRandColor() {
16                 return '#' + ( function( color ){
17                     return ( color += '0123456789abcdef' [Math.floor( Math.random() * 16 )] ) && ( color.length == 6 ) ? color : arguments.callee( color );
18                 } )( '' );
19             }
20             for( var i = 0; i < n; i++ ) {
21                 var ball = new Ball( width / 2, height / 2, 20, getRandColor() );
22                 ball.vx = Math.abs( ( Math.random() * 2 - 1 ) * 5 );
23                 ball.vy = ( Math.random() * 2 - 1 ) * 5;
24                 balls.push( ball );
25             }
26             (function move(){
27                 oGc.clearRect( 0, 0, width, height );
28                 balls.forEach( function( ball ){
29                     if ( ball.x < -ball.radius
30                         || ball.x > width + ball.radius
31                         || ball.y < -ball.radius
32                         || ball.y > height + ball.radius ) {
33                             ball.x = width / 2;
34                             ball.y = height / 2;
35                             ball.vx = Math.abs( ( Math.random() * 2 - 1 ) * 5 );
36                             ball.vy = ( Math.random() * 2 - 1 ) * 5;
37                     }
38                     ball.x += ball.vx;
39                     ball.y += ball.vy;
40                     ball.fill( oGc );
41                 } );
42                 requestAnimationFrame( move );
43             })();
44         }
45     </script>
46 </head>
47 <body>
48     <canvas id="canvas" width="1200" height="600"></canvas>
49 </body>

 bet365娱乐场官网 7

 bet365娱乐场官网 8

相关文章