使用 javascript 在 HTML5 画布上制作单词搜索网格

Question

我想开发一个单词搜索游戏比如[http://codecanyon.net/item/word-search-game/full_screen_preview/2708856]

到目前为止，我创建了两个画布- 1. 用于搜索的单词

function drawWords(words){
var c2 = document.getElementById("canvas2");
var ctx2 = c2.getContext("2d");
ctx2.fillStyle = "green";
ctx2.font = "bold 20px arial";
for(i=0,j=40; i< words.length; i++,j+=30)
{
ctx2.fillText(words[i], 70, j);
}
}

2.对于网格。网格是通过绘制小矩形覆盖整个画布来绘制的

function drawRect(){
var c1=document.getElementById("canvas1");
var ctx1 =c1.getContext('2d'),i,j;
for(i=0; i<405 ;i+=27)
{
for(j=0;j<405;j+=27)
{
    ctx1.rect(i,j,27,27);
    ctx1.stroke();

}
}
}

我已经使用 javascript 将单词和随机字母存储在网格 [15] [15] 数组中。但是我不知道如何在网格画布上打印这些单词以及如何将单词与该网格链接以了解正确选择。请帮忙

Answer 1

要将文本打印到画布上，您需要使用

ctx.font="20px 宋体"; //改成你想要的 ctx.fillText("Hello World!",10,50); //在for循环中用字母改变hello world //这两个数字对应于x和y //做一些数学运算，你会发现如何在画布中放置字母

对于测试，我认为存储 x 和 y 是个好主意，您使用它来打印字母并从用户单击的位置找出鼠标的 x 和 y 并进行测试

对不起英文：s