html5 캔버스-2. 캔버스를 사용하여 Letters_html5 튜토리얼 기술을 추측하는 작은 게임을 만듭니다.

오늘은 캔버스를 사용하여 작은 글자 추측 게임을 만들어 보겠습니다. 먼저 렌더링을 살펴보겠습니다.

게임 디자인은 매우 간단합니다. 시스템은 a~z의 26개 문자 중 하나를 무작위로 선택하여 저장합니다. 키보드로 문자를 입력하면 시스템이 올바른 문자인지 묻는 메시지를 표시합니다. 현재 입력 중인 문자보다 작거나 큽니다. 올바른 문자를 입력할 때까지 게임이 종료되지 않습니다.
다음은 js 코드에서 사용해야 하는 몇 가지 변수와 그 의미를 소개합니다. 시스템은 이러한 변수를 처음에 초기화합니다.
추측: 사용자가 문자를 추측한 횟수
메시지: 플레이어가 게임을 플레이하는 데 도움이 되는 지침
문자: 영어 26자를 저장하는 배열
오늘: 현재 시간;
letterToGuess: 시스템에서 선택한 문자는 추측해야 하는 문자입니다.
higherOrLower: 현재 입력한 문자가 답보다 높은지 작은지 여부를 사용자에게 묻습니다.
lettersGuessed: 사용자가 가지고 있는 문자입니다.
gameOver: 게임이 종료되었는지 여부를 이미 추측했습니다.

코드 복사

코드는 다음과 같습니다.

var 추측 = 0; 🎜>var message = "a(낮음)에서 z(높음)까지의 문자 추측";
var letter = ["a", "b", "c", "d", "e", "f ", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s" , "t", "u", "v", "x", "y", "z"]
var today = new Date()
var letterToGuess = "";
var highOrLower = "";
var letterGuessed;
var gameOver = false

아래에서는 키보드 팝업에 응답하는 이벤트를 소개합니다. 사용자가 입력한 글자가 정답인지 :

코드를 복사하세요코드는 다음과 같습니다.

$(window).bind('keyup', eventKeyPressed)

코드 복사코드는 다음과 같습니다.

function eventKeyPressed(e) {

//먼저 게임 종료 여부를 판단합니다
if (!gameOver) {
//입력 문자 가져오기
var letterPressed = String.fromCharCode(e .keyCode);
//소문자 처리
letterPressed = letterPressed.toLowerCase()
//숫자 증가
guess;
//입력한 문자를 추측한 문자 배열에 저장
lettersGuessed.push(letterPressed)
//입력한 문자와 답이 일치하는지 확인합니다. 일치하면 게임이 종료됩니다
if (letterPressed == letterToGuess) {
gameOver = true
} else {
//문자 배열에서 답의 위치를 ​​가져옵니다
var letterIndex = 편지.indexOf(letterToGuess); 🎜>//크기를 판단하세요
if (guessIndex < 0) {
higherOrLower = "문자가 아닙니다.";
} else if (guessIndex > letterIndex) {
higherOrLower = " 문자가 입력한 것보다 작습니다.";
} else {
higherOrLower = "문자가 입력한 것보다 높습니다.";
}
}
//캔버스 다시 그리기
drawScreen();
}
}


여기서 한 가지 주의할 점은 캔버스에 있는 이미지를 수정해야 할 때 일반적으로 캔버스 객체 전체를 다시 그리는 것입니다. 따라서 글자를 추측할 때마다 drawScreen이 실행되어 전체 캔버스에 모든 개체를 그립니다.
drawScreen이 어떤 역할을 하는지 살펴보겠습니다.

코드 복사

코드는 다음과 같습니다.

function drawScreen() {
//배경
context.fillStyle = '#ffffaa';
context.fillRect(0, 0, 500, 300);
//상자
context.StrokeStyle = '#000000';
context.StrokeRect(5, 5, 490, 290);
context.textBaseLine = '상단';
//날짜
context.fillStyle = '#000000';
context.font = '10px_sans';
context.fillText(오늘, 150, 20);
//메시지
context.fillStyle = '#ff0000';
context.font = '14px_sans';
context.fillText(메시지, 125, 40);
//추측
context.fillStyle = '#109910';
context.font = '16px_sans';
context.fillText('추측:' 추측, 215, 60);
//더 높거나 더 낮음
context.fillStyle = '#000000';
context.font = '16px_sans';
context.fillText('높음 또는 낮음:' highOrLower, 150, 125);
//문자 추측
context.fillStyle = '#ff0000';
context.font = '16px_sans';
context.fillText('추측된 글자:' letterGuessed.toString(), 10, 260);
if (gameOver) {
context.fillStyle = "#FF0000";
context.font = "40px _sans";
context.fillText("알았어!", 150, 180);
}
}

代码很简单，就是绘简卯，还有文字信息。下面我们介绍导入图image的功能，当我们点击“캔버스 내보내기 이미지”按钮的时候,会打开一个새로운页면，显示当前的图image。注复은DataURL()방법에 의지하고 있습니다.章代码

代码如下:

$('#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