HTML5 Canvas API如何制作简单的猜字游戏

这篇“HTML5 Canvas API如何制作简单的猜字游戏”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“HTML5 Canvas API如何制作简单的猜字游戏”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。

先上效果图以及源代码~

HTML代码

你的浏览器不支持HTML5Canvas


;

JS代码

/**
*@authorRafael
*/
window.addEventListener("load",eventWindowLoaded,false);
varDebugger=function(){
};
Debugger.log=function(message){
try{
console.log(message);
}catch(exception){
return;
}
}
functioneventWindowLoaded(){
canvasApp();
}
functioncanvasSupport(){
returnModernizr.canvas;
}
functioncanvasApp(){
varguesses=0;
varmessage="GuessTheLetterFroma(lower)toz(higher)";
varletters=["a","b","c","d","e","f","g","h","i","j","k","l",
"m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
vartoday=newDate();
varletterToGuess="";
varhigherOrLower="";
varletterGuessed=[];
vargameOver=false;
if(!canvasSupport()){
return;
}
vartheCanvas=document.getElementById("canvas_guess_the_letter");
varcontext=theCanvas.getContext("2d");
initGame();
functioninitGame(){
varletterIndex=Math.floor(Math.random()*letters.length);
letterToGuess=letters[letterIndex];
guesses=0;
lettersGuessed=[];
gameOver=false;
window.addEventListener("keyup",eventKeyPressed,true);
varformElement=document.getElementById("createImageData");
formElement.addEventListener('click',createImageDataPressed,false);
drawScreen();
}
functioneventKeyPressed(e){
if(!gameOver){
varletterPressed=String.fromCharCode(e.keyCode);
letterPressed=letterPressed.toLowerCase();
guesses++;
letterGuessed.push(letterPressed);
if(letterPressed==letterToGuess){
gameOver=true;
}else{
letterIndex=letters.indexOf(letterToGuess);
guessIndex=letters.indexOf(letterPressed);
if(guessIndex<0){
higherOrLower="请输入正确的字符";
}elseif(guessIndex
从游戏名称可以看出，该游戏是猜字游戏。每局系统都会自动生成一个字母，玩家会按键盘来猜测该字母是哪一个。
例如生成的是s，玩家按了h，则游戏就会提示《小了》，因为英文字母当中h的索引比s的索引更靠前。
案例当中涉及的变量。
guesses：猜测次数message：文字提示，指导用户如何玩该游戏letters：文字数组，存放我们要猜测的文字的集合。这个例子用的是a到ztoday：今天的日期letterToGuess：要猜测的文字higherOrLower：是《大了》还是《小了》letterGuessed：已经猜测过得文字gameOver：游戏是否结束，是布尔变量，开始的时候是false，猜对后设为true
变量的声明
varguesses=0;
varmessage="GuessTheLetterFroma(lower)toz(higher)";
varletters=["a","b","c","d","e","f","g","h","i","j","k","l",
"m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
vartoday=newDate();
varletterToGuess="";
varhigherOrLower="";
varletterGuessed=[];
vargameOver=false;
初始化游戏
functioninitGame(){
varletterIndex=Math.floor(Math.random()*letters.length);
letterToGuess=letters[letterIndex];
guesses=0;
lettersGuessed=[];
gameOver=false;
window.addEventListener("keyup",eventKeyPressed,true);
varformElement=document.getElementById("createImageData");
formElement.addEventListener('click',createImageDataPressed,false);
drawScreen();
}
通过使用Math的random()函数和floor()函数，根据文字的数组生成要猜测的文字。
并且当用户按键盘的时候监听《keyup》事件，根据传递过来的event，生成按下的键值。
因猜测游戏对大小写不敏感，为防止用户按大写字母，我们需要把值转换成小写形式。
猜测次数+1
猜测出来的文字添加到已经猜测的文字数组当中
varletterPressed=String.fromCharCode(e.keyCode);
letterPressed=letterPressed.toLowerCase();
guesses++;
letterGuessed.push(letterPressed);
剩下的就只有判断 大和小了。
通过indexOf函数 我们可以判断要猜测的文字和我们输入的文字在字符集上面的索引值。
如果我们输入的更靠前则提示《小了》反之《大了》
最终用户猜对了要猜测的文字 我们会在中央用大号字体显示《你猜对了》
letterIndex=letters.indexOf(letterToGuess);
guessIndex=letters.indexOf(letterPressed);
if(guessIndex<0){
higherOrLower="请输入正确的字符";
}elseif(guessIndex
以上是“HTML5 Canvas API如何制作简单的猜字游戏”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！