Question

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

Uptil现在我创建了两个画布 - 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 Arial"; //changed to whatever you want
  ctx.fillText("Hello World!",10,50); //in a for loop change hello world with letter 
                                      //the two number correspends to x and y
                                      //do some math and you will find how to fit the letters in the canvas

对于测试，我认为最好存储用于打印字母的x和y以及用户点击的位置，找出鼠标的x和y并进行测试

抱歉英语：s

使用javascript在HTML5画布上创建单词搜索网格

1 个答案: