htmlcanvas分辨率（html高级教程canvas操作简单易学）
htmlcanvas分辨率（html高级教程canvas操作简单易学）<script><script src="https://img.aigexing.comhttps://code.jquery.com/jquery-3.3.1.min.js"></script><div id="write"></div></body></html>
<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://img.aigexing.comhttps://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>
