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

本文主要是介绍好玩的吃豆人确定不来玩玩么，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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

这篇关于好玩的吃豆人确定不来玩玩么的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！