js打飞机

qqggcc

浏览: 20628 次
性别:
来自: 北京

最近访客更多访客>>

xiang3630

javasunnyboy

abc123

tanling8334

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js 大飞机

<!DOCTYPE html>
<html>
    <head>

       
    </head>
    <body style="background-image: url("./bg.jpg");background-repeat:repeat;" >
        <canvas id="gameArea" width="500" height="600" style="border:1px solid #c3c3c3"></canvas>

    </body>
</html>

<script>
        var canvas=document.getElementById('gameArea');
        var ctx=canvas.getContext('2d');
        var locate_x=100;
        var locate_y=300;
        document.onkeydown=function(e){ //键盘按下事件绑定
	 	    var e=window.event||e;
		 	switch(e.keyCode){
		 		case 37: //左
		 		{
                    ctx.rect(locate_x,locate_y,100,100);
                    ctx.fillStyle="white";
                    ctx.fill();
                    locate_x=locate_x-10;
                    drawImage("./p2.jpg",100,100,locate_x,locate_y);
                     break; 
                 }
		 		case 38: //上
		 		{
                    ctx.rect(locate_x,locate_y,100,100);
                    ctx.fillStyle="white";
                    ctx.fill();
                    locate_y=locate_y-10;
                    drawImage("./p2.jpg",100,100,locate_x,locate_y);
                    break;
                 }
		 		case 39:  //右
		 		{
                    ctx.rect(locate_x,locate_y,100,100);
                    ctx.fillStyle="white";
                    ctx.fill();
                    locate_x=locate_x+10;
                    drawImage("./p2.jpg",100,100,locate_x,locate_y);
                    break;	
                 }
                case 40:  //下
                {
                    ctx.rect(locate_x,locate_y,100,100);
                    ctx.fillStyle="white";
                    ctx.fill();
                    locate_y=locate_y+10;
                    drawImage("./p2.jpg",100,100,locate_x,locate_y);
                    break;
                }	 			
		 	}
	    }




       
        // ctx.fillStyle='#FF0000';
        // ctx.fillRect(0,0,80,100);
        // ctx.font="20px Georgia";
        // ctx.fillText("Hello World!",10,50);
        drawImage("./p2.jpg",100,100,locate_x,locate_y);
        drawImage("./d.jpg",100,100,60,10);
        drawImage("./d.jpg",100,100,100,10);
        drawImage("./d.jpg",100,100,140,10);
        drawImage("./d.jpg",100,100,180,10);
        drawImage("./d.jpg",100,100,220,10);
        ctx.font="italic small-caps bold 30px arial";
        ctx.fillText("打灰机!",100,200);
        drawImage("./p2.jpg",100,100,60,170);
        drawImage("./p2.jpg",100,100,200,170);
        function createImage(src,width,height){
            var img=document.createElement("image");
            img.getAttribute.src=src;
            img.width=width;
            img.height=height;
            return img;
        }

        function drawImage(src,width,height,x,y){
            //var img=createImage(src,width.height);
            var img = new Image();
            img.width=width;
            img.height=height;
            img.onload=function(){
                ctx.drawImage(img,x,y);
            }
            img.src=src;
            
        }
     </script>

</div>