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

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

<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);

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值