[面向對象的案例]在canvas畫布內實現小球的隨機移動

cnsworder 發布于2019-08-20 12:22 / 3170人閱讀

摘要：部分給畫布設置邊框添加畫布準備工作先確定所需要的屬性小球的起始坐標半徑顏色速度。創建球構造函數向原型鏈添加方法創建個小球使用定時器每個刷新屏幕

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

GPU云服務器云服務器 php的面向對象 java的面向對象 php的面向對象應用面向對象的編程語言

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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