Jquery中文網 www.2030036.live
Jquery中文網 >  前端編程  >  HTML5教程  >  正文 canvas實現彈球的代碼示例

canvas實現彈球的代碼示例

發布時間:2020-05-09   編輯:www.2030036.live
jquery中文網為您提供canvas實現彈球的代碼示例等資源,歡迎您收藏本站,我們將為您提供最新的canvas實現彈球的代碼示例資源

本篇文章給大家帶來的內容是關于canvas實現彈球的代碼示例,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

效果

4050576798-5c63384c6f19c_articlex.png


代碼

<!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>

思路

這就是倆對象,,一個依賴于另一個。。
碰撞檢測時實的坐標判斷,碰撞完成以后兩個速度分量為取反即可。
事件是左右事件。。移動即可。
需要時實刷新,即,幀的概念

以上就是canvas實現彈球的代碼示例的詳細內容,更多請關注jQuery中文網其它相關文章!

-->
  • 本文轉載于:segmentfault,如有侵犯,請聯系[email protected]刪除
  • 您可能感興趣的文章:
    jQuery中的val()示例應用
    javascript實例 js實現小球的自由移動
    jquery全選/全不選/反選另一種實現方法(配合原生js)
    基于HTML5&CSS3實現的Slideshow Slider.js
    jquery 3D球狀導航的文章分類
    jquery點擊頁面任何區域實現鼠標焦點十字效果
    jquery中的 $("#jb51")與document.getElementById("jb51") 的區別
    jquery 操作單選框,復選框,下拉列表實現代碼
    使用基于jquery的gamequery插件做JS乒乓球游戲
    jQuery點擊自身以外地方關閉彈出層的簡單實例

    [關閉]
    888棋牌金花app 3d过滤器苹果版app下载 黑龙江福彩36选7 临汾期货配资 广西快三大小单双计划 江苏体彩11选5号码查询 江苏11选5复式玩法 天津快乐十分中奖玩法 够力排列5app 陕西体彩11选5电子图 急速赛车计划软件