一般的网页游戏，都是用<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中，成为一个整数数组。
<script>
draw_pos=[<%=data %>];
drawbg();
drawgame(draw_pos);
</script>
代码下载地址：
链接: https://pan.baidu.com/s/1DlRYpNqGcwbhLvflaq0wrg 提取码: 4wcf 复制这段内容后打开百度网盘手机App，操作更方便哦