- <html>
- <head>
- <meta charset="utf-8"/>
- <title>小飞龙的跳球</title>
- </head>
- <body onload="init()">
- <canvas id="game" width="400" height="400" style="border:1px solid #c3c3c3">
- 你的游览器不支持html5的画布元素,请升级到IE9+或使用firefox、chrome这类高级的智能游览器!
- </canvas>
- <script>
- var canvas = document.getElementById('game');
- var ctx = canvas.getContext('2d');
- var grad;
- //盒子的起始位置和大小以及球的半径
- var box = {x:20,y:20,w:350,h:350,r:20};
- //球的中心位置和偏移位置
- var inbox = {//box内的限制范围
- bx:(box.w+box.x-box.r),
- by:(box.h+box.y-box.r),
- ix:box.x+(box.r*2),
- iy:box.y+(box.r*2)
- };
- //球的初始位置和变化位置
- var ball = {x:50,y:50,vx:4,vy:8};
- var img = new Image();
- img.src = 'images/qiuqiu.png';
- var hue = [[255,0,0],[255,255,0],[0,255,0],[0,255,255],[0,0,255],[255,0,0]];
- function init(){
- grad = ctx.createLinearGradient(box.x,box.y,box.w,box.h);
- for(var i=0;i<hue.length;i++){
- var color = 'rgb('+hue[i][0]+','+hue[i][1]+','+hue[i][2]+')';
- grad.addColorStop(i/hue.length,color);
- }
- ctx.lineWidth = box.r;
- ctx.fillStyle = 'rgb(200,0,50)';
- ctx.fillStyle = grad;
- moveBall();
- setInterval(moveBall,50);
- }
- //碰撞检测并重新确定球的位置
- function moveBallEndCheck(){
- var nx = ball.x + ball.vx;
- var ny = ball.y + ball.vy;
- if(nx > inbox.bx){//当前x大于上边框边界
- ball.vx = -ball.vx;//球的变化x坐标当前当前变化x坐标的负数
- nx = inbox.bx;//当前位置为上边框的位置
- }
- if(nx < inbox.ix){//当前位置小于下边框
- nx = inbox.ix;//当前位置为下边框的x
- ball.vx = -ball.vx;//球的变化x坐标翻转取负
- }
- if(ny > inbox.by){
- ny = inbox.by;
- ball.vy = -ball.vy;
- }
- if(ny < inbox.iy){
- ny = inbox.iy;
- ball.vy = -ball.vy;
- }
- ball.x = nx;
- ball.y = ny;
- }
- function moveBall(){
- ctx.clearRect(box.x,box.y,box.w,box.h);
- moveBallEndCheck();
- ctx.beginPath();
- //console.log(ball.x+"\\t"+ball.y+"\\t"+ball.vx+"\\t"+ball.vy+"\\t"+(ball.x-box.r)+"\\t"+(ball.y-box.r));
- ctx.drawImage(img,(ball.x-box.r),(ball.y-box.r));
- ctx.fillRect(box.x,box.y,box.r,box.h);
- ctx.fillRect((box.x+box.w-box.r),box.y,box.r,box.h);
- ctx.fillRect(box.x,box.y,box.w,box.r);
- ctx.fillRect(box.x,(box.y+box.h-box.r),box.w,box.r);
- ctx.closePath();
- ctx.fill();
- }
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/0203201511815.html
来源: http://www.codesnippet.cn/detail/0203201511815.html