借助HTML5 Canvas API制作一个简单的猜字游戏

var higherOrLower = "";   
var letterGuessed = [];   
var gameOver = false;  

初始化游戏

JavaScript Code复制内容到剪贴板

function initGame() {   
        var letterIndex = Math.floor(Math.random() * letters.length);   
        letterToGuess = letters[letterIndex];   
        guesses = 0;   
        lettersGuessed = [];   
        gameOver = false;   
        window.addEventListener("keyup", eventKeyPressed, true);   
        var formElement = document.getElementById("createImageData");   
        formElement.addEventListener(‘click’, createImageDataPressed, false);   
        drawScreen();   
    }  

通过使用Math的random()函数和floor()函数，根据文字的数组生成要猜测的文字。

并且当用户按键盘的时候监听《keyup》事件，根据传递过来的event，生成按下的键值。

因猜测游戏对大小写不敏感，为防止用户按大写字母，我们需要把值转换成小写形式。

猜测次数+1

猜测出来的文字添加到已经猜测的文字数组当中

JavaScript Code复制内容到剪贴板

var letterPressed = String.fromCharCode(e.keyCode);   
letterPressed = letterPressed.toLowerCase();   
guesses++;   
letterGuessed.push(letterPressed);   

剩下的就只有判断 大和小了。

通过indexOf函数 我们可以判断要猜测的文字和我们输入的文字在字符集上面的索引值。

如果我们输入的更靠前则提示《小了》反之《大了》

最终用户猜对了要猜测的文字 我们会在中央用大号字体显示《你猜对了》

JavaScript Code复制内容到剪贴板

letterIndex = letters.indexOf(letterToGuess);   
guessIndex = letters.indexOf(letterPressed);   
if(guessIndex < 0) {   
    higherOrLower = "请输入正确的字符";   
} else if(guessIndex < letterIndex) {   
    higherOrLower = "小了";   
} else {