科技常识：html5 canvas-2.用canvas制作一个猜字母的小游戏

2021-04-06 21:22:49

•

科技

今天小编跟大家讲解下有关html5 canvas-2.用canvas制作一个猜字母的小游戏 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html5 canvas-2.用canvas制作一个猜字母的小游戏 的相关资料，希望小伙伴们看了有所帮助。

今天我们要用canvas制作一个猜字母的小游戏 先来张效果图。 游戏设计很简单 系统会随机从a-z的26个字母中选择一个保存起来 你键盘输入一个字母 系统会提示你正确字符比你当前输入字母小还是大 直到你输入正确的字母游戏才结束。 下面介绍js代码中需要用到的一些变量及其他们的含义 系统会在开始的时候初始化这些变量。 guesses：用户猜字母的次数； message：帮助玩家如何玩游戏的说明； letters：保存26个英文字母的数组； today：当前时间； letterToGuess：系统选中的字母 也就是你需要猜中的字母； higherOrLower：提示用户当前输入的字母比答案大还是小； lettersGuessed：用户已经猜过的字母； gameOver：游戏是否结束。 复制代码代码如下: var guesses = 0; var message = "Guess The Letter From a (lower) to z (higher)"; var letters = ["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"]; var today = new Date(); var letterToGuess = ""; var higherOrLower = ""; var lettersGuessed; var gameOver = false; 下面我们介绍响应键盘弹起的事件 用来判断用户输入的字母是否是正确答案： 复制代码代码如下: $(window).bind('keyup', eventKeyPressed); 复制代码代码如下: function eventKeyPressed(e) { //首先判断游戏是否结束 if (!gameOver) { //获取输入字母 var letterPressed = String.fromCharCode(e.keyCode); //做小写处理 letterPressed = letterPressed.toLowerCase(); //游戏次数加1 guesses++; //把输入字母保存到已猜字母数组 lettersGuessed.push(letterPressed); //判断输入字母和答案是否一致 一致则游戏结束 if (letterPressed == letterToGuess) { gameOver = true; } else { //获取答案在字母数组中的位置 var letterIndex = letters.indexOf(letterToGuess); //获取输入字母在字母数组中的位置 var guessIndex = letters.indexOf(letterPressed); Debugger.log(guessIndex); //判断大小 if (guessIndex < 0) { higherOrLower = "That is not a letter"; } else if (guessIndex > letterIndex) { higherOrLower = "Letter is Lower than you entered"; } else { higherOrLower = "Letter is Higher than you entered"; } } //重绘canvas drawScreen(); } } 这里需要注意的一点是 当我们需要对canvas中的图像做修改时 一般会重新绘制整个canvas对象。所以在我们每猜一次字母 都会执行drawScreen把整个canvas上的所有对象都绘制一遍。 下面我们看看drawScreen都干了什么。 复制代码代码如下: function drawScreen() { //background context.fillStyle = '#ffffaa'; context.fillRect(0, 0, 500, 300); //box context.strokeStyle = '#000000'; context.strokeRect(5, 5, 490, 290); context.textBaseLine = 'top'; //date context.fillStyle = '#000000'; context.font = '10px_sans'; context.fillText(today, 150, 20); //message context.fillStyle = '#ff0000'; context.font = '14px_sans'; context.fillText(message, 125, 40); //guesses context.fillStyle = '#109910'; context.font = '16px_sans'; context.fillText('Guesses:' + guesses, 215, 60); //higher or lower context.fillStyle = '#000000'; context.font = '16px_sans'; context.fillText('Higher or Lower:' + higherOrLower, 150, 125); //letters guessed context.fillStyle = '#ff0000'; context.font = '16px_sans'; context.fillText('Letters Guessed:' + lettersGuessed.toString(), 10, 260); if (gameOver) { context.fillStyle = "#FF0000"; context.font = "40px _sans"; context.fillText("You Got It!", 150, 180); } } 代码很简单 就是绘制背景 还有文字信息。下面我们介绍导入图像的功能 当我们点击“Export Canvas Image”按钮的时候 会打开一个新的页面 显示当前的图像。注意toDataURL()方法 他会返回一个64位的png图片数据。 复制代码代码如下: $('#createImageData').click(function () { window.open(theCanvas.toDataURL(), 'canvasImage', 'left=0,top=0,width=' + theCanvas.width + ',height=' + theCanvas.height + ',toolbar=0,resizab le=0'); }); 大家还是直接运行demo 查看最终效果吧。demo下载地址：html5canvas.guessTheLetter.zip

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。