HTML5+JS游戏开发模块----canvas图片拖放

最新推荐文章于 2024-06-17 14:58:27 发布

miao淼

最新推荐文章于 2024-06-17 14:58:27 发布

阅读量1.9k

点赞数

分类专栏： HTML5+JS游戏开发练习笔记文章标签： html5 javascript canvas 游戏开发

本文链接：https://blog.csdn.net/wujimiao/article/details/52669408

版权

本文介绍了如何在HTML5 canvas中实现图片的拖放功能，适用于塔防类游戏。难点包括记录鼠标坐标、判断鼠标是否在图片上、模拟拖动及图片放置。通过HTML5的draggable等标签结合canvas，解决了拖放问题。尽管在处理鼠标事件和类属性时遇到了挑战，但已成功实现基本功能。后续将面临子弹移动、寻路算法等更多挑战。

摘要由CSDN通过智能技术生成

边学边做笔记，现在游戏开发进入下一个阶段，canvas图片拖放模块，如果要做塔防类游戏，少不了拖放炮塔之类的。HTML5提供拖放标签，draggable，ondrop，ondragover,ondragup等标签实现元素拖放，但是，canvas内部图片是无法使用这种方式的。

canvas拖放难点：

1.鼠标移动到canvas上，记录鼠标坐标

2.怎样确定鼠标是否在图片上

3.怎样让图片跟随鼠标移动（模拟拖图片过程）

4.怎样让图片落到指定方块内

首先，鼠标移动到canvas上记录坐标，这个简单，只需要注意下兼容就好

if(e.offSetX||e.layerX){//兼容浏览器
		this.mx=e.offSetX==undefined?e.layerX:e.offSetX;
		this.my=e.offSetY==undefined?e.layerY:e.offSetY;
	}

鼠标是否在图片上，需要增加范围判断，然后在给个变量赋值this.isDown=true;，作为是否让图片跟随依据

//对比坐标位置，是否点击图片
	if(this.mx<X+W&&this.mx>X){
		if(this.my<Y+H&&this.my>Y){
			this.isDown=true;
		}
	}else{
		this.isDown=false;
	}

鼠标点击了图片，那么接下来就要图片跟随鼠标运动，原理就是鼠标的xy坐标作为绘画点，插入绘制图片的函数中去，然后不断的清理屏幕，重新画图

//如果isDown为真
	if(this.isDown){
		X=this.mx-W/2;//图片跟随鼠标移动
		Y=this.my-H/2;
	}

清理屏幕，画图函数就不说了

然后就是确定图片落在那个方块中

if(X<parseInt(X/50)*50+W&&X>parseInt(X/50)*50){
		if(Y<parseInt(Y/50)*50+H&&Y>parseInt(Y/50)*50){
			if(X<500&&Y<500&&X>0&&Y>0){
				X=parseInt(X/50)*50; //