HTML5-canvars人物移动

最新推荐文章于 2023-10-24 00:49:57 发布

原创最新推荐文章于 2023-10-24 00:49:57 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas实现的游戏人物动画绘制示例。通过键盘输入控制游戏人物的方向和移动，利用JavaScript的drawImage方法从雪碧图中截取不同状态的人物图像并绘制到Canvas上。实现了上下左右移动及动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
    window.onload=function(){
		let cans=document.getElementById("cans");
		let ctx=cans.getContext("2d");
		let oImg=new Image();
		oImg.src="game.jpg";//h获取图片雪碧图
		let n=0;
		oImg.onload=function(){
			let dir="l";
			let x=100,y=100;
			const speed = 15;
//			ctx.
//			第一种用法(元素,起点x,起点y)
//			ctx.drawImage(oImg,0,0);
//                      第二种用法(元素sx,sy,sw,sh,dx,dy,dw,dh)source
			setInterval(function(){
			    document.onkeydown=function(ev){
					let keyCodes={37:"l",38:"u",39:"r",40:"d"};
					dir=keyCodes[ev.keyCode]||dir;
					 ev.preventDefault();
                                         }
					//下左右上
				let rows={"d":0,"l":1,"r":2,"u":3};
//				ctx.clearRect(0,0,cans.width,cans.height);
				ctx.drawImage(oImg,33+31*n,49*rows[dir],32,48,x,y,64,96);
				 n++;
				 if(dir=="d"){
				     y+=speed;
				     if(y>=cans.height){
				     	y=cans.height-49;}//移动到画布最下停住
				     }else if(dir=="l"){
				     	x-=speed;
				     	if(x<=0){
				             x=0;
				     	}//移动到画布最左边停住
				     }else if(dir=="r"){
				     	x+=speed;
				         if(x>=cans.width){
				     	    x=cans.width-49;
				     	    }//移动到画布最右边停住
				     }else{
				     	y-=speed;
				        if(y<=0){
				     	   y=0;
				     	}
				     }//移动到画布最上边停住
				     if(n==3){
				     	n=0;
				     }
					},120)
			 }
			}
		</script>

	<body>
		<canvas id="cans" width="800" height="600"></canvas>
	</body>