Canvas画布之实现百球大战

这一次我们来实现一个百球大战的效果,一百个球在canavs画布中来回弹跳,是不是觉得非常有趣呢,
相信各位已经迫不及待想看它是怎么实现的吧!话不多说,开始吧。

Quick Start

Create a new html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百球大战</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <canvas id="canvas">
         您的浏览器不支持canvas,请更换主流浏览器
    </canvas>
</body>
<script src="index.js></script>
</html>

Create a new index.css

*{
    margin:0;
    padding:0;
}
#canvas{
    display: block;
    margin:0 auto;
    border:1px red solid;
}

Create a new index.js

这里才是这段程序的难点,这里我们采用构造函数的方式来编写

  var canvas = document.querySelector("#canvas");
        canvas.width = 800;
        canvas.height = 600;
        var onOff = false;
        var ctx = canvas.getContext("2d");
        function Arc(){
            this.x = x;
            this.y = y;
            this.r = r;
            this.color = color;
            this.speedX = speedX;
            this.speedY = speedY;
        }
        Arc.prototype.drawArc = function(){
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2)
            ctx.fill();
            ctx.closePath();
            ctx.restore();
        }
        Arc.prototype.move = function(){
            if(this.x+this.speedX+this.r > canvas.width || this.x+this.speedX-this.r < 0){
                this.speedX = -this.speedX;
            }
            if(this.y+this.speedY+this.r > canvas.height || this.y+this.speedY-this.r < 0){
                this.speedY = - this.speedY;
            }
            this.x += this.speedX;
            this.y += this.speedY;
        }
        var arr = [];
        for(var i = 0;i<100;i++){
           var x = random(50,750);
           var y = random(50,550);
           var r = random(10,30);
           var speedX = random(3,10);
           var speedY = random(3,10);
           //ES6写法
           var color = `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
//   ES5写法 var color = "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
           var obj = new Arc(x,y,r,color,speedX,speedY)
            arr.push(obj);
        }
        var timer = null;
        function ani(){
            ctx.clearRect(0,0,canvas.width,canvas.height)
            for(var i = 0;i<arr.length;i++){
                arr[i].drawArc();
                arr[i].move();
            }
            timer = window.requestAnimationFrame(ani);
        }
        ani();
        document.onclick = function(){
            onOff = !onOff;
            if(onOff){
                window.cancelAnimationFrame(timer);
            }else{
                ani();
            }
        }
        function random(a,b){
            return Math.ceil(Math.random() * (b-a)+a+1);
        }

注意:

canvas的宽高,要在行间或这js里面书写,不要在css样式里面写,在css里设置宽高是对内容设置的,相反则是canvas的宽高;请参考网址

如果对构造函数不熟的同学可以参考这一篇博客

喜欢就点个赞吧

2016-10-12