站长资讯网
最全最丰富的资讯网站

canvas实现弹球的代码示例

本篇文章给大家带来的内容是关于canvas实现弹球的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

效果

canvas实现弹球的代码示例

代码

<!DOCTYPE html> <html lang="zh_CN"> <head>     <meta charset="UTF-8">     <title>弹球</title>     <script src="https://code.jquery.com/jquery-3.3.1.js"></script> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script>     // 全局canvas     let canvas = document.getElementById("canvas");     let context = canvas.getContext("2d");     // 弹球对象     class Ball{         x = 100;         y = 40;         xSpeed = -2;         ySpeed = -2;         constructor(){};         getX(){             return this.x;         }         getY(){             return this.y;         }         setX(x){             this.x = x;         }         setY(y){             this.y = y;         }         getXSpeed(){             return this.xSpeed;         }         setXSpeed(xSpeed){             this.xSpeed = xSpeed;         }         getYSpeed(){             return this.ySpeed;         }         setYSpeed(ySpeed){             this.ySpeed = ySpeed;         }         // 绘制小球的方法         draw = () => {             context.beginPath();             context.arc(this.x, this.y, 10, 0, Math.PI * 2, false);             context.strokeRect(0, 0, 400, 400);             context.fill();         };         // 移动操作         move = () => {             this.x = this.x + this.xSpeed;             this.y = this.y + this.ySpeed;         };         // 边缘检测,碰撞检测         checkCanvas = (panel) => {             // 左右             if(this.x < 5 || this.x > 400 - 5){                 this.xSpeed = -this.xSpeed;             }             // 上方             if(this.y < 0){                 this.ySpeed = -this.ySpeed;             }             // 下方             // 碰到挡板              if(this.y > 390 - 10){                 if(this.x > panel.x && this.x < panel.xSize + panel.x){                     this.ySpeed = -this.ySpeed;                 }else{                     alert("游戏结束");                     this.x = 100;                     this.y = 10;                 }             }         }     }     // 增加一个挡板对象     class Panel{         constructor(){};         // 左x         x = 200;         // 左y         y = 390;         // 长度         xSize = 50;         // 宽度         ySize = 5;         draw(){             context.fillRect(this.x, this.y, this.xSize, this.ySize);         }     }     // 创建出一个小球对象     let ball = new Ball();     // 创建出挡板对象     let panel = new Panel();     // 每10秒为一帧     window.setInterval(() => {         // 清空画布         context.clearRect(0, 0, 400, 400);         // 画出小球         ball.draw();         // 画出挡板         panel.draw();         // 移动         ball.move();         // 进行边界判断         ball.checkCanvas(panel);     },10);     // 控制挡板     $("body").keydown((event) => {         if(event.keyCode == 37){             panel.x = panel.x - 5;             // 移出边界问题处理             if(panel.x < 0){                 panel.x = 0;             }         }         if(event.keyCode == 39){             panel.x = panel.x + 5;             // 移出边界处理             if(panel.x + panel.xSize > 400){                 panel.x = 400 - panel.xSize;             }         }     }) </script> </body> </html>

思路

这就是俩对象,,一个依赖于另一个。。
碰撞检测时实的坐标判断,碰撞完成以后两个速度分量为取反即可。
事件是左右事件。。移动即可。
需要时实刷新,即,帧的概念

赞(0)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号