오늘 우리는 캔버스를 사용하여 작은 추측 편지 게임을 만들고 먼저 렌더링을 그릴 것입니다.
게임 디자인은 매우 간단합니다. 이 시스템은 AZ의 26 글자 중 하나를 무작위로 선택하여 저장합니다. 키보드에 문자를 입력하면 시스템이 현재 입력 한 문자보다 올바른 문자가 더 작거나 크지 않으며 올바른 문자를 입력 할 때까지 게임이 끝나지 않습니다.
다음은 JS 코드에 사용해야하는 일부 변수와 그 의미를 소개합니다. 시스템은 처음에 이러한 변수를 초기화합니다.
추측 : 사용자가 편지를 추측하는 횟수;
메시지 : 플레이어가 게임을하도록 돕는 지침;
편지 : 26 개의 영어 편지를 저장하십시오.
오늘 : 현재 시간;
LetterToguess : 시스템이 선택한 문자, 즉 당신이 추측 해야하는 글자;
Higherorlower : 현재 입력 한 문자가 대답보다 크거나 작습니다.
편지 : 사용자가 추측 한 편지;
게임 오버 : 게임이 끝났는지 여부.
var theades = 0;
var message = "a (하단)에서 z (Higher)까지의 문자를 추측하십시오.";
var 문자 = [ "a", "b", "c", "d", "e", "f", "g", "h", "i", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "t", "u", "v", "x", "," "," "," "
var today = new Date ();
var lettoguess = "";
var Higherorlower = "";
var 문자;
var gameover = false;
아래에 우리는 키보드 팝업에 응답하는 이벤트를 소개합니다. 키보드 팝업에 응답하는 이벤트는 사용자가 입력 한 문자가 정답인지 확인하는 데 사용됩니다.
$ (Window) .Bind ( 'keyup', EventKeyPressed);
함수 EventKeypressed (e) {
// 먼저 게임이 끝났는지 여부를 결정합니다
if (! 게임 오버) {
// 입력 문자를 얻습니다
var legrpressed = string.fromcharcode (e.keycode);
// 소문자 처리를 수행합니다
LEDRPRESSED = LEDLPRESSED.TOLOWERCASE ();
// 게임 번호 1을 추가합니다
추측 ++;
// 입력 문자를 짐작한 문자 배열에 저장합니다
편지.
// 입력 문자와 답변이 일관된 지 판단합니다. 게임이 동일하면 게임이 종료되면 게임이 끝납니다.
if (antlepressed == LetterToguess) {
GameOver = true;
} 또 다른 {
// 알파벳 배열에서 답변 위치를 가져옵니다
var letterIndex = letters.indexof (LetterToguess);
// alphabetical 배열에서 입력 문자의 위치를 가져옵니다.
var gueseIndex = letters.indexof (angressed);
Debugger.log (gesourindex);
// 심판 크기
if (propessIndex <0) {
Higherorlower = "그것은 편지가 아닙니다";
} else if (guessIndex> letterIndex) {
Higherorlower = "문자가 입력 한 것보다 낮습니다";
} 또 다른 {
Higherorlower = "문자가 입력 한 것보다 높습니다";
}
}
// 캔버스를 다시 칠합니다
드로 스크린 ();
}
}
여기서 주목해야 할 것은 캔버스에서 이미지를 수정해야 할 때 전체 캔버스 객체가 일반적으로 다시 페인트됩니다. 따라서 문자를 추측 할 때마다 전체 캔버스에 모든 객체를 그리기 위해 드로크 스크린을 실행합니다.
드로우 스크린이 무엇을하는지 봅시다.
함수 drawscreen () {
//배경
Context.fillStyle = '#ffffa';
context.fillRect (0, 0, 500, 300);
//상자
context.strokestyle = '#000000';
Context.Strokerect (5, 5, 490, 290);
context.textBaseline = 'top';
//날짜
Context.FillStyle = '#00000';
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 = '#00000';
context.font = '16px_sans';
context.fillText ( 'Higher 또는 Lower :' + HigherorLower, 150, 125);
// 편지가 추측되었습니다
Context.FillStyle = '#ff0000';
context.font = '16px_sans';
context.fillText ( '편지는 추측 :' + lettersguessed.toString (), 10, 260);
if (GameOver) {
Context.FillStyle = "#ff0000";
context.font = "40px _sans";
context.fillText ( "당신은 그것을 얻었습니다!", 150, 180);
}
}
코드는 매우 간단하며 배경 및 텍스트 정보를 그려야합니다. 아래에서 이미지 가져 오기 기능을 소개합니다. 내보내기 캔버스 이미지 버튼을 클릭하면 새 페이지가 열려 현재 이미지를 표시합니다. 64 비트 PNG 이미지 데이터를 반환하는 Todataurl () 메소드에주의하십시오.
$ ( '#createImagedata'). 클릭 (function () {
window.open (thecanvas.todataurl (), 'canvasimage', 'left = 0, top = 0, width =' + thecanvas.width + ', height =' + thecanvas.height + ', 툴바 = 0, resizab le = 0');
});
모든 사람은 최종 효과를보기 위해 데모를 직접 실행해야합니다. 데모 다운로드 주소 : html5/"> html5canvas.guesstheletter.zip