<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<html>
<body>
<canvas id='canvas'></canvas>
<div id="write"></div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
//画布
var c=document.getElementById('canvas');
var ctx=c.getContext('2d');
//画布尺寸
var h=650;
var w=800;
c.width=w;
c.height=h;
//背景数量
var num=100;
//大红尺寸
var gh=h/num;
var gw=w/num;
//小绿尺寸
var gamex=40;
var gamey=30;
//背景布置
function bk(){
for(var x=0;x<num;x++){
for(var y=0;y<num;y++){
ctx.fillStyle="green";
ctx.fillRect(10*(x-1)+x,10*(y-1)+y,gw,gh);
}
}
}
//定义小绿数量
var sts=new Array();
//定义小红数量
var drs=new Array();
//小红小绿范围内相遇删除对方
function dels(){
if(sts.length>0){
for(var i=0;i<sts.length;i++){
//范围大小
var a=sts[i]['x']+20;
var b=sts[i]['x']-20;
var aa=sts[i]['y']+20;
var bb=sts[i]['y']-20;
$('#write').text(a+'---'+b);
for(var s=0;s<drs.length;s++){
//判断是否在范围内
if((drs[s]['x']<a && drs[s]['x']>b) && (drs[s]['y']<aa && drs[s]['y']>bb)){
//sts.splice(i,1);//删除小绿
drs.splice(s,1);//删除小红
}
}
}
}
}
//小红数量循环
function drss(){
var dr=new Array();
dr['x']=Math.floor((Math.random()*w)+1);
dr['y']=0;
//dr['y']=Math.floor((Math.random()*h)+1);
drs.push(dr);
if(drs.length>0){
for(var i=0;i<drs.length;i++){
if(drs[i]['y']>h){
drs.splice(i,1);
}else{
drs[i]['y']+=1;
}
ctx.fillStyle="orange";
ctx.fillRect(drs[i]['x'],drs[i]['y'],gw,gh);
}
}
}
//小绿数量循环
function st(){
ctx.fillStyle="black";
var st=new Array();
st['x']=10*(gamex-1)+gamex+10;
st['y']=10*(gamey-1)+gamey-10;
sts.push(st);
ctx.fillRect(10*(gamex-1)+gamex+10,10*(gamey-1)+gamey-10,gw,gh);
}
//小绿移动
function stsup(){
if(sts.length>0){
for(var i=0;i<sts.length;i++){
if(sts[i]['y']<0){
sts.splice(i,1);
}else{
sts[i]['y']-=1;
}
ctx.fillStyle="red";
ctx.fillRect(sts[i]['x'],sts[i]['y'],gw,gh);
}
}
}
//大红位置移动
function game(gamex,gamey){
ctx.fillStyle="red";
//ctx.fillRect(10*(gamex-1)+gamex,10*(gamey-1)+gamey,gw,gh);
ctx.fillRect(10*(gamex-1)+gamex,10*(gamey-1)+gamey,20,20);
}
bk();
game(gamex,gamey);
//时间戳
setInterval(function(){
//按键判断
document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e.keyCode=='37'){
gamex=gamex-1;
}
else if(e.keyCode=='38'){
gamey=gamey-1;
}
else if(e.keyCode=='39'){
gamex=gamex+1;
}
else if(e.keyCode=='40'){
gamey=gamey+1;
}
if(e.keyCode=='32'){
st();
}
}
//清空画布
c.width=w;
c.height=h;
bk();
game(gamex,gamey);
drss();
stsup();
dels();
},10);
</script>
本文暂时没有评论，来添加一个吧(●'◡'●)