先上效果图：
HTML代码：
<!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);
原文地址：https://www.cnblogs.com/ksxh/p/11330760.html
时间： 2024-07-31 18:45:10