[面向对象的案例]在canvas画布内实现小球的随机移动

cnsworder 发布于2019-08-20 12:22 / 3173人阅读

摘要：部分给画布设置边框添加画布准备工作先确定所需要的属性小球的起始坐标半径颜色速度。创建球构造函数向原型链添加方法创建个小球使用定时器每个刷新屏幕

//css部分,给画布设置边框

//html 添加画布

准备工作
先确定所需要的属性
小球的起始xy坐标、R半径、颜色、速度speedXY。

//创建球构造函数
 function ball() {
        this.r = this.rand(20);
        this.x = this.r;
        this.y = this.r;
        this.speedX = this.rand(10);
        this.speedY = this.rand(10);
        this.width = 0;
        this.height = 0;
        this.canvas = {};
        this.color = "rgb("+this.rand(255)+","+this.rand(255)+","+this.rand(255)+")";
        this.init();
    }
//2.向原型链添加方法
ball.prototype = {
        init:function () {
            var game = document.getElementById("game");
            this.canvas = game.getContext("2d");
            this.width=game.width;
            this.height=game.height;
        },
        rand:function (num) {
            return Math.floor(Math.random() * num+1);
        },
        play:function () {
            this.x += this.speedX;
            this.y += this.speedY;
            if (this.x>this.width-this.r) {
                this.speedX = -this.speedX;
            }
            if (this.xthis.width-this.r) {
                this.speedY = -this.speedY;
            }
            if (this.y

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80943.html

[面向对象的案例]在canvas画布内实现小球的随机移动

摘要：部分给画布设置边框添加画布准备工作先确定所需要的属性小球的起始坐标半径颜色速度。创建球构造函数向原型链添加方法创建个小球使用定时器每个刷新屏幕 showImg(https://segmentfault.com/img/bVFJSK?w=360&h=326); //css部分,给画布设置边框 canvas { border:1px solid orange; ...

codeKK 2019-08-01 15:59 评论0 收藏0
WebAssembly Demo之Canvas中随机运动圆球

摘要：不过因为没有随机时间种子，所以，不管设定的时间间隔多短暂，这一个随机序列的每个值都是新鲜随机出来的，即与上一个随机值重复的概率仅等于随机范围分之一。作者：云荒杯倾 1、Demo功能介绍实现了一个圆球在800px * 600px画布内随机运动，固定时间间隔随机运动一次，运动方向由x和y轴组成的向量决定，这个向量是随机值（后面会称它为随机向量），从C语言代码中的随机函数获取，JS代码实...

时飞 2019-08-22 11:11 评论0 收藏0
一步步打造Canvas小球动画

摘要：我们需要使用到的方法有第一步绘制一个小球画布的宽画布的高定义圆心坐标定义圆心坐标定义半径清除画布开始绘制画圆圆的填充颜色闭合路径填充在线预览第二步让小球动起来让小球动起来的原理就是，不断地改变小球的坐标位置并进行重绘。我们需要使用到Canvas的方法有： context.arc(x, y, r, sAngle, eAngle, counterclockwise); 第一步：绘制一个小...

mrcode 2019-08-21 12:00 评论0 收藏0
HTML5中canvas实现小球击打小方块游戏

摘要：创建用于击打的小球定义一个用于移动和击打小方块的小球，该小球包含如下的属性，小球的做坐标位置，半径，在轴和轴的速度。源代码：http://download.csdn.net/detail/liumingm... 游戏开发流程： 1、创建画布：将画布放在div标签里面，这样可以控制画布居中的位置，再对div标签加上一些样式比如border和border-radius，这样...

余学文 2019-08-30 12:55 评论0 收藏0