当前位置：首页 > news >正文

JS 面向对象例题

news 来源：原创 2024/5/13 1:12:01

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小球碰到返回</title>
</head>

<style>
#canvas{
    border: 1px dashed #999;
    box-shadow:0px 4px 40px #233;
    /*background: black;*/
}
</style>

<body>

<canvas id="canvas" width="800" height="600"></canvas>

<script type="text/javascript">
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    var maxWidth=canvas.width;
    var maxHeight=canvas.height;
    var colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]

    //随机数
    function random(min,max){
        return Math.floor(Math.random()*(max-min)+min)
    }

    //构造函数
    function Ball(){
        this.a=true;
        this.b=true;
        this.r=random(10,30);
        this.ballColor={color: colors[Math.floor(Math.random() * colors.length)]}
        this.vx=random(30,maxWidth-30);
        this.vy=random(30,maxHeight-30);
        this.ispeed=random(1,10);
        this.ispeed2=random(1,10);
    }

    // 面向对象
    Ball.prototype.moveBall=function(){
        context.beginPath();
        if (this.a) {
            this.vx += this.ispeed;
            if (this.vx>=maxWidth-this.r) {    
                this.a = false;
            }
        } else {
            this.vx -= this.ispeed;
            if (this.vx <= this.r) {
                this.a = true;
            }
        }

        if (this.b) {
            this.vy+= this.ispeed2;
            if (this.vy >= maxHeight-this.r) {
                this.b = false;
            }

        } else {
            this.vy -= this.ispeed2;
            if (this.vy <= this.r) {
                this.b = true;
            }
        }

        context.fillStyle=this.ballColor.color;
        context.arc(this.vx,this.vy,this.r,0,Math.PI*2,false);
        context.fill();
    }

    var Aball=[];
    for(var i=0;i<100;i++){
        Aball[i]=new Ball();
    }

    setInterval(function(){
        context.clearRect(0,0,canvas.width,canvas.height)
        for(var i=0;i<100;i++){
            Aball[i].moveBall();
        }
        
    },30)

</script>

</body>
</html>

cava小球

2.冒泡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            html,body{width: 100%;
                    height: 100%;
                    overflow: hidden;
                    background: #000;
            }
        </style>
    </head>
    <body>

        <script>
            var canvas=document.createElement("canvas")
            var ctx=canvas.getContext("2d")
            var w=window.innerWidth;
            var h=window.innerHeight;
            init()
            function init(){
                canvas.width=w;
                canvas.height=h;
                document.body.appendChild(canvas)
                setInterval(loop,30)
            }
            function Yuan(x,y,color){
                this.x=x;
                this.y=y;
                this.xval=0;
                this.yval=-9;
                this.gro=0.1;
                this.color=color;
                this.yuan=function(){
                    ctx.beginPath()
                    ctx.fillStyle=this.color
                    ctx.arc(this.x,this.y,10,0,Math.PI*2)
                    ctx.fill()
                    ctx.closePath()
                }
                this.weizi=function(){
                    this.yval+=this.gro
                    this.x+=this.xval
                    this.y+=this.yval
                    
                }
                
            }
            var arr=[];
            function loop(){
                var x=w*0.5
                var y=h*0.8
                ctx.clearRect(0,0,w,h)
                var col=sColor()
                var yuan=new Yuan(x,y,col)
                    yuan.xval=Math.random()*4
                arr.push(yuan)
                //console.log(arr.length)
                for(var i in arr){
                    arr[i].yuan()
                    arr[i].weizi()
                }
                if(arr.length>500){
                    arr.shift()
                }        
            }
            function sColor(){
                return "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",1)"
            }
        </script>
    </body>
</html>