<HTML>
<head>
</head>
<Body>
<canvas id="MyCanvas" height="300" width="300" style="Border:1px solid
red"></canvas>
<input type="button" value="->" onclick="Right()">
<input type="button" value="<-" onclick="Left()">
<input type="button" value="^" onclick="Up()" >
<input type="button" value="v" onclick="Down()">
<script>
x=0
y=0
var c=document.getElementById("MyCanvas")
var ctx=c.getContext("2d");
ctx.fillRect(x,y,50,50);
function Right()
{
if(x+50<c.width){
x=x+10;
ctx.fillRect(x,y,50,50);
ctx.clearRect(0,0,x,y+50);
}
}
function Left()
{
if(x>0){
x=x-10;
ctx.fillRect(x,y,50,50);
ctx.clearRect(x+50,y,10,50);
}
}
function Down()
{
if(y+50<c.width){
y=y+10;
ctx.fillRect(x,y,50,50);
ctx.clearRect(x,0,50,y);
}
}
function Up()
{
if(y>0){
y=y-10;
ctx.fillRect(x,y,50,50);
ctx.clearRect(x,y+50,50,10);
}
}
document.onkeydown = function(e) {
e = e || window.event;
switch(e.which || e.keyCode) {
case 37:{Left();break;}
case 38:{Up();break;}
case 39:{Right();break;}
case 40:{Down();break;}
}
}
</script>
</Body>
</html>
<head>
</head>
<Body>
<canvas id="MyCanvas" height="300" width="300" style="Border:1px solid
red"></canvas>
<input type="button" value="->" onclick="Right()">
<input type="button" value="<-" onclick="Left()">
<input type="button" value="^" onclick="Up()" >
<input type="button" value="v" onclick="Down()">
<script>
x=0
y=0
var c=document.getElementById("MyCanvas")
var ctx=c.getContext("2d");
ctx.fillRect(x,y,50,50);
function Right()
{
if(x+50<c.width){
x=x+10;
ctx.fillRect(x,y,50,50);
ctx.clearRect(0,0,x,y+50);
}
}
function Left()
{
if(x>0){
x=x-10;
ctx.fillRect(x,y,50,50);
ctx.clearRect(x+50,y,10,50);
}
}
function Down()
{
if(y+50<c.width){
y=y+10;
ctx.fillRect(x,y,50,50);
ctx.clearRect(x,0,50,y);
}
}
function Up()
{
if(y>0){
y=y-10;
ctx.fillRect(x,y,50,50);
ctx.clearRect(x,y+50,50,10);
}
}
document.onkeydown = function(e) {
e = e || window.event;
switch(e.which || e.keyCode) {
case 37:{Left();break;}
case 38:{Up();break;}
case 39:{Right();break;}
case 40:{Down();break;}
}
}
</script>
</Body>
</html>
No comments:
Post a Comment