HTML5's canvas + JavaScript to create a "greedy cake"

First on renderings:

HTML code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小游戏</title>
</head>
<br/>
<body style="text-align: center;padding: 20px">
</body>
<script src="1.js"></script>
</html>

JavaScript代码：

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 1200    ;
canvas.height = 600;
canvas.style="border:5px solid #000000;";
var val=0
var r_max=200
var keysDown = {};
var zd_zb=[]

addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;

    
    // console.log(keysDown)
    // console.log(Object.keys(keysDown).length==0)
}, false);

addEventListener("keyup", function (e) {
    if (e.keyCode==32){
        zd_zb.push([yuan.x,yuan.y])
    }


    delete keysDown[e.keyCode];
    // console.log(keysDown)
    // console.log(Object.keys(keysDown).length==0)//没按下
}, false);


var yuan= {
    x :canvas.width / 2,
    y : canvas.height / 2,
    r:12
};

function randomNum(minNum,maxNum){ 
    switch(arguments.length){ 
        case 1: 
            return parseInt(Math.random()*minNum+1,10); 
               break; 
        case 2: 
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
            break; 
        default: 
            return 0; 
            break; 
    } 
} 

var sw={
    x:randomNum(0,canvas.width),
    y:randomNum(0,canvas.height),
    zb:[]
}
for(var i=0;i<20;i++){
    sw.zb.push([randomNum(0,canvas.width),randomNum(0,canvas.height/2)])

    }


var update = function (xx=10) {

    if (38 in keysDown) { //  up
        yuan.y -= xx;
    }
    if (40 in keysDown) { // down
        yuan.y += xx;
    }
    if (37 in keysDown) { //  left
        yuan.x -=xx;
    }
    if (39 in keysDown) { // right
        yuan.x += xx;
    }
    if (32 in keysDown) { //  发射子弹
        // yuan.y -= xx;
        //自动
         //zd_zb.push([yuan.x,yuan.y])//注释掉这段即可关闭全自动模式
        //break
    }

        
        // console.log(zd_zb)
    
    if(yuan.x>canvas.width){
        yuan.x=canvas.width
    }
    if(yuan.x<0){
        yuan.x=0
    }
    if(yuan.y>canvas.height){
        yuan.y=canvas.height
    }
    if(yuan.y<0){
        yuan.y=0
    }
    if(Object.keys(keysDown).length==0){
        //自动

    }

for (var o = 0; o < sw.zb.length; o++) {
                sw_x=sw.zb[o][0]
                sw_y=sw.zb[o][1]
                sw.zb[o][1]+=1
                if(sw.zb[o][1]>canvas.height){
                        sw.zb.splice(o,1)
                        sw.zb.push([randomNum(0,canvas.width),randomNum(0,canvas.height/2)])
                        continue
                }
     var z = Math.abs(((sw_x-yuan.x)**2+(sw_y-yuan.y)**2)**0.5)-yuan.r

    if (z<10){
         // sw={
            // x:randomNum(0,canvas.width),
            // y:randomNum(0,canvas.height),
            //     }
        sw.zb.splice(o,1)
        sw.zb.push([randomNum(0,canvas.width),randomNum(0,canvas.height/2)])
        yuan.r += xx/8;
        val+=1
        //限制大小
        if(yuan.r>r_max){
            yuan.r=r_max
        }
    continue

    }
}


};
// for(var i=0;i<10;i++){
//             console.log("zd.zb")
//         }
var t=0
var render = function () {
        //清空画布
        canvas.height=canvas.height; //清空画布

        //显示子弹
        //
        t+=1
        //if(t==20){
            t=0
        flx=1
        for(var i=0;i<zd_zb.length;i++){
            t+=1
            zd_x=zd_zb[i][0]
            zd_y=zd_zb[i][1]
            zd_zb[i][1]-=5
             // if(zd_zb[i][1]<0){
             //     delete zd_zb[i]
             // }
             
            for (var o = 0; o < sw.zb.length; o++) {
                sw_x=sw.zb[o][0]
                sw_y=sw.zb[o][1]

            zd_z = Math.abs(((sw_x-zd_x)**2+(sw_y-zd_y)**2)**0.5)
            if (zd_z<10){
                 // sw={
                    // x:randomNum(0,canvas.width),
                    // y:randomNum(0,canvas.height),
                    // }
                sw.zb.splice(o,1)
                sw.zb.push([randomNum(0,canvas.width),randomNum(0,canvas.height/2)])
                zd_zb.splice(i,1)
                //continue
                //delete zd_zb。a.splice(1)[i]
                yuan.r += xx/8;
                val+=1
                //限制大小
                if(yuan.r>r_max){
                    yuan.r=r_max
                }
                flx=0
                continue

            }
            }
            if(flx==0){
                flx=1
                continue
            }
            if(zd_zb[i][1]>0){
                ctx.beginPath()//开始画
                ctx.fillStyle="#FF0000";//颜色
                ctx.arc(zd_x,zd_y,3,0,360);//画圆
                ctx.fill()//填充
                ctx.closePath()//画完
            }

        }
    //}
        ctx = canvas.getContext("2d");
        ctx.beginPath()
        ctx.arc(yuan.x,yuan.y,yuan.r,0,360);
        ctx.fillStyle="#000000";
        ctx.fill()
        ctx.closePath()

        ctx.beginPath()
        ctx.fillStyle="#FFFFFF";
        ctx.textBaseline="alphabetic";
        ctx.textAlign="center";  
        ctx.fillText(val,yuan.x,yuan.y+4)
        // ctx.measureText()
        ctx.closePath()

        for(var i=0;i<sw.zb.length;i++){
            ctx.beginPath()
            ctx.fillStyle="#FF0000";
            ctx.arc(sw.zb[i][0],sw.zb[i][1],10,0,360);
            ctx.fill()
            ctx.closePath()
    }
};
var main=function () {
        
        update(xx=5);
        render()
        requestAnimationFrame(main);
}
render()
main()
document.body.appendChild(canvas);

HTML5's canvas + JavaScript to create a "greedy cake"

Guess you like