用html做个猜字游戏,借助HTML5 Canvas API制作一个简单的猜字游戏

/**   * @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 = "请输入正确的字符";                   } 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);

//猜测次数

context.fillStyle = "#109900";           context.font = "16px _sans";

context.fillText("猜测次数： "+guesses, 215, 60);

//大还是小           context.fillStyle = "#000000";

context.font = "16px _sans";           context.fillText("大还是小： "+higherOrLower, 150, 135);

//已经猜测的字符

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);

}       }

function createImageDataPressed(e) {

window.open(theCanvas.toDataURL(), "canvasImage","left=0, top=0, width="+theCanvas.width+", height="+theCanvas.height+", toolbar=0, resizable=0");       }

}