html5
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

canvas实现弹球的代码示例

发布时间：2022-05-17 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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>

思路

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

以上就是canvas实现弹球的代码示例的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的canvas实现弹球的代码示例全部内容，希望文章能够帮你解决canvas实现弹球的代码示例所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的html5相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程
热门html5教程