使用canvas实现一个圆球的触壁反弹

HTML

<canvas id="canvas" width="500" height="500" style="border: 1px solid #FF0000;"></canvas>

JS

1.获取上下文

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

2.实现一个球类

 1     class circle {
 2         constructor() {
 3             this.x = 25,
 4             this.y = 25,
 5             this.mx = Math.random()*5,
 6             this.my = Math.random()*3,
 7             this.radius = 25,
 8             this.color = 'blue',
 9             this.draw = function () {
10                 ctx.beginPath();
11                 ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
12                 ctx.fillStyle = this.color;
13                 ctx.fill();
14             }
15         }
16 
17     };

3.new一个球

let ball = new circle();

4.实现动画函数

    const move = (function () {
        // 清除画布
        ctx.clearRect(0,0, canvas.width, canvas.height);
        
        // 重新绘制圆
        ball.draw();
        
        // 移动圆
        ball.x += ball.mx; // x坐标递增
        ball.y += ball.my; // y坐标递增
        
        // x轴坐标加移动的距离大于画布宽度(到达右边界) 或 x轴坐标加移动的距离等于0(到达左边界) 
        if (ball.x + ball.mx > canvas.width || ball.x + ball.mx < 0) {
            ball.mx = -ball.mx; // x轴坐标递减
        };
        // y轴坐标加移动的距离大于画布宽度(到达下边界) 或 y轴坐标加移动的距离等于0(到达上边界) 
        if (ball.y + ball.my > canvas.height || ball.y + ball.my < 0) {
            ball.my = -ball.my; // y轴坐标递减
        };
        
        // 递归调用当前方法
        window.requestAnimationFrame(arguments.callee);
    })();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏算法与数据结构

PTA 7-1 有序链表的插入(20 分)

已知一个递增有序链表L(带头结点,元素为整数),编写程序将一个新整数插入到L中,并保持L的有序性。 其中单链表的类型定义参考如下: typedef int el...

2568
来自专栏猿人谷

判断二叉树是不是平衡

平衡二叉树(Balanced Binary Tree)又被称为AVL树(有别于AVL算法),且具有以下性质:它是一 棵空树或它的左右两个子树的高度差的绝对值不超...

1826
来自专栏C/C++基础

数组中的逆序对

题目: 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对。输入一个数组,求出这个数组中的逆序对的总数。

611
来自专栏决胜机器学习

PHP数据结构(七) ——串与实现KMP算法

PHP数据结构(七)——串与实现KMP算法 (原创内容,转载请注明来源,谢谢) 一、定义 串是0个或多个字符组成的有限序列,任意连续字符组成的子序列称为子串,...

3569
来自专栏大闲人柴毛毛

剑指 offer代码解析——面试题39二叉树的深度

题目:输入一颗二叉树的根结点,求该树的深度。从根结点到叶结点一次经过的结点形成树的一条路径,最长路径的长度为树的深度。 分析:本题是一道典型的“分治法”。要...

2715
来自专栏Script Boy (CN-SIMO)

Codeforces Round #234A

Inna and choose option     题意: 一个由12个字符('O'或'X')组成的字符串,这12个字符可以排列成a*b(a*b=12)的...

2080
来自专栏北京马哥教育

Python字符编码全解析

字符编码是计算机编程中不可回避的问题,不管你用 Python2 还是 Python3,亦或是 C++, Java 等,我都觉得非常有必要厘清计算机中的字符编码概...

2606
来自专栏用户2442861的专栏

JavaScript 正则表达式上——基本语法

JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串

341
来自专栏菩提树下的杨过

javascript:算法笔记

入门级算法-线性查找-时间复杂度O(n)--相当于算法界中的HelloWorld //线性搜索(入门HelloWorld) //A为数组,x为要...

16410
来自专栏xingoo, 一个梦想做发明家的程序员

剑指OFFER之用两个栈实现队列(九度OJ1512)

题目描述: 用两个栈来实现一个队列,完成队列的Push和Pop操作。 队列中的元素为int类型。 输入: 每个输入文件包含一个测试样例。 对于每个测试样例,第一...

1815

扫描关注云+社区