女强穿越玄幻完结小说,小说排行榜完结版,好看的小说君子以泽

主頁 > 知識(shí)庫 > 借助HTML5 Canvas API制作一個(gè)簡(jiǎn)單的猜字游戲

借助HTML5 Canvas API制作一個(gè)簡(jiǎn)單的猜字游戲

二話不說，先上效果圖以及源代碼~

HTML代碼

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="chp1_guess_the_letter.js"></script>
<script type="text/javascript" src="modernizr.custom.99886.js"></script>
</head>
<body>
<canvas id="canvas_guess_the_letter" width="500" height="300">
你的瀏覽器不支持HTML5 Canvas
</canvas>
<form>
<input type="button" id="createImageData" value="Export Canvas Image" />;
</form>
</body>
</html>

JS代碼

JavaScript Code復(fù)制內(nèi)容到剪貼板

/**
* @author Rafael
*/
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function() {
};
Debugger.log = function(message) {
try {
console.log(message);
} catch(exception) {
return;
}
}
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport() {
return Modernizr.canvas;
}
function canvasApp() {
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 letterGuessed = [];
var gameOver = false;
if(!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvas_guess_the_letter");
var context = theCanvas.getContext("2d");
initGame();
function initGame() {
var letterIndex = Math.floor(Math.random() * letters.length);
letterToGuess = letters[letterIndex];
guesses = 0;
lettersGuessed = [];
gameOver = false;
window.addEventListener("keyup", eventKeyPressed, true);
var formElement = document.getElementById("createImageData");
formElement.addEventListener('click', createImageDataPressed, false);
drawScreen();
}
function eventKeyPressed(e) {
if(!gameOver) {
var letterPressed = 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 = "請(qǐng)輸入正確的字符";
} else if(guessIndex < letterIndex) {
higherOrLower = "小了";
} else {
higherOrLower = "大了";
}
}
drawScreen();
}
}
function drawScreen() {
//背景
context.fillStyle = "#ffffaa";
context.fillRect(0, 0, 500, 300);
//箱子
context.strokeStyle = "#000000";
context.strokeRect(5, 5, 490, 290);
context.textBaseLine = "top";
//日期
context.fillStyle = "#000000";
context.font = "10px _sans";
context.fillText(today, 150, 20);
//消息
context.fillStyle = "#FF0000";
context.font = "14px _sans";
context.fillText(message, 125, 40);
//猜測(cè)次數(shù)
context.fillStyle = "#109900";
context.font = "16px _sans";
context.fillText("猜測(cè)次數(shù)： "+guesses, 215, 60);
//大還是小
context.fillStyle = "#000000";
context.font = "16px _sans";
context.fillText("大還是?。?nbsp;"+higherOrLower, 150, 135);
//已經(jīng)猜測(cè)的字符
context.fillStyle = "#FF0000";
context.font = "16px _sans";
context.fillText("已經(jīng)猜測(cè)的字符： "+letterGuessed.toString(), 10, 260);
if(gameOver) {
context.fillStyle = "#FF0000";
context.font = "40px _sans";
context.fillText("你猜中了", 150, 180);
}
}
function createImageDataPressed(e) {
window.open(theCanvas.toDataURL(), "canvasImage","left=0, top=0, width="+theCanvas.width+", height="+theCanvas.height+", toolbar=0, resizable=0");
}
}

從游戲名稱可以看出，該游戲是猜字游戲。每局系統(tǒng)都會(huì)自動(dòng)生成一個(gè)字母，玩家會(huì)按鍵盤來猜測(cè)該字母是哪一個(gè)。

例如生成的是s，玩家按了h，則游戲就會(huì)提示《小了》，因?yàn)橛⑽淖帜府?dāng)中h的索引比s的索引更靠前。

案例當(dāng)中涉及的變量。

guesses：猜測(cè)次數(shù)
message：文字提示，指導(dǎo)用戶如何玩該游戲
letters：文字?jǐn)?shù)組，存放我們要猜測(cè)的文字的集合。這個(gè)例子用的是a到z
today：今天的日期
letterToGuess：要猜測(cè)的文字
higherOrLower：是《大了》還是《小了》
letterGuessed：已經(jīng)猜測(cè)過得文字
gameOver：游戲是否結(jié)束，是布爾變量，開始的時(shí)候是false，猜對(duì)后設(shè)為true

變量的聲明

JavaScript Code復(fù)制內(nèi)容到剪貼板

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 letterGuessed = [];
var gameOver = false;

初始化游戲

JavaScript Code復(fù)制內(nèi)容到剪貼板

function initGame() {
var letterIndex = Math.floor(Math.random() * letters.length);
letterToGuess = letters[letterIndex];
guesses = 0;
lettersGuessed = [];
gameOver = false;
window.addEventListener("keyup", eventKeyPressed, true);
var formElement = document.getElementById("createImageData");
formElement.addEventListener('click', createImageDataPressed, false);
drawScreen();
}

通過使用Math的random()函數(shù)和floor()函數(shù)，根據(jù)文字的數(shù)組生成要猜測(cè)的文字。

并且當(dāng)用戶按鍵盤的時(shí)候監(jiān)聽《keyup》事件，根據(jù)傳遞過來的event，生成按下的鍵值。

因猜測(cè)游戲?qū)Υ笮懖幻舾?，為防止用戶按大寫字母，我們需要把值轉(zhuǎn)換成小寫形式。

猜測(cè)次數(shù)+1

猜測(cè)出來的文字添加到已經(jīng)猜測(cè)的文字?jǐn)?shù)組當(dāng)中

JavaScript Code復(fù)制內(nèi)容到剪貼板

var letterPressed = String.fromCharCode(e.keyCode);
letterPressed = letterPressed.toLowerCase();
guesses++;
letterGuessed.push(letterPressed);

剩下的就只有判斷大和小了。

通過indexOf函數(shù) 我們可以判斷要猜測(cè)的文字和我們輸入的文字在字符集上面的索引值。

如果我們輸入的更靠前則提示《小了》反之《大了》

最終用戶猜對(duì)了要猜測(cè)的文字我們會(huì)在中央用大號(hào)字體顯示《你猜對(duì)了》

JavaScript Code復(fù)制內(nèi)容到剪貼板

letterIndex = letters.indexOf(letterToGuess);
guessIndex = letters.indexOf(letterPressed);
if(guessIndex < 0) {
higherOrLower = "請(qǐng)輸入正確的字符";
} else if(guessIndex < letterIndex) {
higherOrLower = "小了";
} else {
higherOrLower = "大了";
｝

至此這個(gè)功能差不多完成了吧，我們還有一個(gè)小功能，那就是通過按下按鈕的方式可以把屏幕結(jié)果抓去出來。

用的函數(shù)為toDataUrl()，有興趣的朋友研究一下。

標(biāo)簽：煙臺(tái) 安慶晉中內(nèi)蒙古玉溪邯鄲牡丹江撫州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《借助HTML5 Canvas API制作一個(gè)簡(jiǎn)單的猜字游戲》，本文關(guān)鍵詞借助,HTML5,Canvas,API,制作,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。