html5 canvas

日期:2021-02-26 类型:科技新闻 

关键词:微信小程序商城,免费微信小程序,小程序设计软件,小程序生成平台,可查询的小程序

今日大家要用canvas制做1个猜字母的小手机游戏,先来张实际效果图。
 
手机游戏设计方案很简易,系统软件会任意从a-z的26个字母选中择1个储存起来,你电脑键盘键入1个字母,系统软件会提醒你正确标识符比你当今键入字母小還是大,直至你键入正确的字母手机游戏才完毕。
下面详细介绍js编码中必须用到的1些自变量及别的们的含意,系统软件会在刚开始的情况下原始化这些自变量。
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);
//分辨键入字母和回答是不是1致,1致则手机游戏完毕
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();
}
}

这里必须留意的1点是,当大家必须对canvas中的图象做改动时,1般会再次绘图全部canvas目标。因此在大家每猜1次字母,都会实行drawScreen把全部canvas上的全部目标都绘图1遍。
下面大家看看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”按钮的情况下,会开启1个新的网页页面,显示信息当今的图象。留意toDataURL()方式,他会回到1个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