JS+JSP网页游戏辅助编辑器

最新推荐文章于 2020-09-16 20:17:13 发布

钢七连软件实战技术

最新推荐文章于 2020-09-16 20:17:13 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS JQuery Ajax 文章标签： js jsp javascript 游戏编辑器

本文链接：https://blog.csdn.net/weixin_42644456/article/details/101766935

JS JQuery Ajax 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用HTML <canvas>标签结合JSP的session处理开发网页游戏地图编辑器，包括简易字符拼图、地图编辑器坐标序列生成及实时刷新技术。

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

一般的网页游戏，都是用<canvas>标签做开发。我教JSP课程，网页<canvas>加上jsp的session处理，可以开发一些辅助工具，比如格子类的地图。

1. 简易的字符拼图案

关键代码：

function draw() {
    var x=50,y=100;
    var edge=25;
    
    var draw_pos=[0,0, 0,1, 0,2,  1,2];
    for(i=0;i< draw_pos.length/2;i++)
    {
        ctx.fillText("#", x+draw_pos[i*2] * edge, y+draw_pos[i*2+1]* edge);
    }
}
draw();

2. 用地图编辑器得到坐标序列，输出图案

效果：

关键代码：

function drawgame(draw_pos)
{
 for(i=0;i< draw_pos.length/2;i++)
	    {
	        ctx.fillText("#", x+draw_pos[i*2] * edgex, y+draw_pos[i*2+1]* edge);
	}
}
var draw_pos=[2,1, 2,2, 2,3, 2,4, 2,5, 4,1, 5,1, 6,1, 7,1, 8,1, 4,2, 8,2, 4,3, 5,3, 6,3, 7,3, 8,3, 8,4, 8,5, 7,5, 6,5, 5,5, 4,5, 10,1, 10,2, 10,2, 10,3, 10,4, 10,5, 11,5, 11,1, 12,1, 13,1, 14,1, 14,2, 14,3, 14,4, 14,5, 13,5, 12,5, 16,1, 17,1, 18,1, 19,1, 20,1, 20,2, 20,3, 20,4, 20,5];
drawgame(draw_pos);

draw_pos=[2,0, 2,1, 2,2, 2,3, 2,4, 4,0, 4,1, 4,2, 5,0, 6,0, 7,0, 8,0, 8,1, 8,2, 7,2, 6,2, 5,2, 8,3, 8,4, 7,4, 6,4, 5,4, 4,4, 10,0, 10,1, 10,2, 10,3, 10,4, 11,0, 12,0, 13,0, 14,0, 14,1, 14,2, 14,3, 14,4, 13,4, 12,4, 11,4, 16,0, 16,1, 16,2, 16,3, 16,4, 17,4, 18,4, 19,4, 20,4, 20,3, 20,2, 20,1, 20,0, 19,0, 18,0, 17,0, 17,2, 18,2, 19,2 ];
x=80,y=180;
drawgame(draw_pos);
x=0,y=350;
drawgame(draw_pos);

每个坐标，用编辑器制作。不可能是手动去数，去写。

3. 制作坐标序列的编辑器

坐标序列的输出：

编辑器截图：

编辑器使用JSP写的。每个位置，默认用减号表示。点击一个减号，添加一对坐标，用“#”表示。再次点击，删除该坐标。

点击clear，删除所有坐标。点击back，撤销上一次坐标。

编辑器做了修改，刷新gamejsa1.jsp，画面也会实时刷新。

关键技术：gamejsa1.jsp 从session获取数据，输出画面。

<% String data=(String)session.getAttribute("k1");
	if(data == null)
		data="";
	
	//如果有数据，去掉最后一个逗号
	//session中的数据：" 2,12, 2,11, 3,11, 4,11, 4,10,"
	if(data.length()>1)
	{
		data=data.substring(0, data.length()-1);
	}
%>

session取得的一个长字符串，去掉最后一个逗号，放到javascript中，成为一个整数数组。

draw_pos=[<%=data %>];

drawbg();
drawgame(draw_pos);
</script>

代码下载地址：

链接: https://pan.baidu.com/s/1DlRYpNqGcwbhLvflaq0wrg 提取码: 4wcf 复制这段内容后打开百度网盘手机App，操作更方便哦