好玩的吃豆人确定不来玩玩么

我们要做一个好玩的吃豆人先需要的是给出一个画布给出我们的背景大小

<div class="cc">

        <canvas width="1000" height="200"></canvas>

    </div>

加上背景

.cc{

            margin: 150px 500px;

        }

        canvas{

            background-color: #d55555;

           

        }

给我们的背景变成画布获得画笔

 var canvas = document.getElementsByTagName('canvas')[0];

        // 获取画笔

        var ctx = canvas.getContext('2d');

画出我们的豆豆

 ctx.beginPath();

        ctx.arc(300, 100, 15, 0, Math.PI * 2 , 0);

        ctx.fillStyle="green"

        ctx.fill();

        ctx.stroke();

       

        ctx.beginPath();

        ctx.arc(450, 100, 15, 0, Math.PI * 2 , 0);

        ctx.fillStyle="green"

        ctx.fill();

        ctx.stroke();

       

        ctx.beginPath();

        ctx.arc(600, 100, 15, 0, Math.PI * 2 , 0);

        ctx.fillStyle="green"

        ctx.fill();

        ctx.stroke();

     

        ctx.beginPath();

        ctx.arc(750, 100, 15, 0, Math.PI * 2 , 0);

        ctx.fillStyle="green"

        ctx.fill();

        ctx.stroke();

画出我们的吃豆人

var x=parseInt(Math.random()*950)

        var y=parseInt(Math.random()*800)

       

        console.log(x,y)

        ctx.arc(100, 100, 50, 0, Math.PI * 7 / 4, 0);

        ctx.lineTo(100, 100);

        ctx.closePath();

        ctx.stroke();

        var y=100;    

        var x=100

        var z=20;

        var q = true;

给豆人进行移动

setInterval(function(){

        if(x+50>950){

            z=0

        }

        if(x<100){

            z=20

        }

        ctx.clearRect(x-55,y-55,120,150);  

        x+=z;

        ctx.beginPath();

        ctx.arc(x, y, 50, 0, Math.PI * 7 / 4, 0);

        ctx.lineTo(x, y);

        ctx.closePath();

        ctx.fillStyle="#008c8c"

        ctx.fill();

        ctx.stroke();

        ctx.beginPath();

        if (q) {

            ctx.arc(x, y, 50, 0, Math.PI * 7 / 4, 0);

            q = false

        } else {

            ctx.arc(x, y, 50, 0, Math.PI * 2, 0);

            q = true

        }

        ctx.lineTo(x, y);

        ctx.closePath();

        ctx.fillStyle = "#EA450D"

        ctx.fill();

        ctx.stroke();

        }, 100);

标签：ctx,玩玩,确定,arc,var,100,PI,好玩,Math
来源： https://blog.csdn.net/dxiaofanb/article/details/122032540