Exemple de code d'utilisation de Canvas pour implémenter le flipper

Le contenu de cet article concerne l'exemple de code pour implémenter le flipper sur toile. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Effet

Code

nbsp;html>


    <meta>
    <title>弹球</title>
    <script></script>


<canvas></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>

Idée

Ce sont deux objets, l'un dépendant de l'autre. .
Jugement des coordonnées en temps réel lors de la détection de collision. Une fois la collision terminée, les deux composantes de vitesse peuvent être inversées.
Les événements sont des événements de gauche et de droite. . Déplacez-le simplement.
Nécessite un rafraîchissement en temps réel, c'est-à-dire le concept de frames

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!