站長資訊網
        最全最豐富的資訊網站

        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號
        主站蜘蛛池模板: 国产玖玖玖九九精品视频| 久久这里只有精品视频99| 久久久久亚洲精品天堂久久久久久 | 91久久精品无码一区二区毛片| 正在播放酒店精品少妇约| 国产成人精品久久综合| 国产精品久久毛片完整版| 久久久久女人精品毛片| 亚洲av无码国产精品色在线看不卡| 国产精品九九九| 欧美精品一区二区三区在线| 国产成人A人亚洲精品无码| 乱色精品无码一区二区国产盗| 亚洲国产婷婷综合在线精品| 精品国产黑色丝袜高跟鞋| 亚洲精品高清久久| 久久er热视频在这里精品| 国产精品无码AV一区二区三区| 无码国产精品一区二区免费16 | 99久久精品国产麻豆| 人妻少妇精品无码专区二区 | 久久久久亚洲精品天堂久久久久久 | 日韩福利视频精品专区| 国产一区二区三区在线观看精品 | 国产天天综合永久精品日| 亚洲愉拍自拍欧美精品| 国产精品一在线观看| 97精品国产91久久久久久| 国产成人精品无码免费看 | 亚洲国产精品13p| 亚洲国产精品成人网址天堂| 亚洲精品综合久久| 亚洲精品视频免费| 亚洲线精品一区二区三区| 自拍偷在线精品自拍偷无码专区| 无码AⅤ精品一区二区三区| 久久精品亚洲男人的天堂| 久久精品三级视频| 亚洲精品和日本精品| 无码人妻精品一区二区三| 乱色精品无码一区二区国产盗|