<html>
<head><title>HTML5OO模式 DIV往下落</title>
<script>
function start(){
var game=new Game();
}
function Game(){
// alert("Game");
var charA=new CharA();
time=setInterval(function(){
// alert("setInterval");
var canvas=document.getElementById("MyCanvas");
var context=canvas.getContext("2d");
context.clearRect(0,0,400,300);
charA.drawingDIV();
charA.moveDIV();
},500);
//charA.drawingDIV();
//charA.moveDIV();
}
function CharA(){
// alert("CharA");
var canvas;
var context;
left=50;
heightTOP=10;
width=20;
height=10;
this.drawingDIV=function(){
canvas=document.getElementById("MyCanvas");
context=canvas.getContext("2d");
context.strokeStyle="lime";
context.strokeRect(left,heightTOP,width,height);
context.stroke();
//alert("drawingDIV");
}
this.moveDIV=function(){
heightTOP+=1;
if(heightTOP==100){
heightTOP=10;
}
// alert("moveDIV");
}
}
</script>
</head>
<body>
<canvas id="MyCanvas" style="position:absolute;width:400;height:300;border:2px solid red;"> </canvas>
<br>
<button οnclick="start()" style="position:absolute;top:320;">start drwingRect</button>
</body>
<head><title>HTML5OO模式 DIV往下落</title>
<script>
function start(){
var game=new Game();
}
function Game(){
// alert("Game");
var charA=new CharA();
time=setInterval(function(){
// alert("setInterval");
var canvas=document.getElementById("MyCanvas");
var context=canvas.getContext("2d");
context.clearRect(0,0,400,300);
charA.drawingDIV();
charA.moveDIV();
},500);
//charA.drawingDIV();
//charA.moveDIV();
}
function CharA(){
// alert("CharA");
var canvas;
var context;
left=50;
heightTOP=10;
width=20;
height=10;
this.drawingDIV=function(){
canvas=document.getElementById("MyCanvas");
context=canvas.getContext("2d");
context.strokeStyle="lime";
context.strokeRect(left,heightTOP,width,height);
context.stroke();
//alert("drawingDIV");
}
this.moveDIV=function(){
heightTOP+=1;
if(heightTOP==100){
heightTOP=10;
}
// alert("moveDIV");
}
}
</script>
</head>
<body>
<canvas id="MyCanvas" style="position:absolute;width:400;height:300;border:2px solid red;"> </canvas>
<br>
<button οnclick="start()" style="position:absolute;top:320;">start drwingRect</button>
</body>
</html>
效果如下图: