console
var guesses=0;
var message="Guess The Letter From a to z";
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.onload=initGame;
function initGame(){
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var formElement=document.getElementById('createImageData');
formElement.addEventListener('click',createImageDataPressed, false);
var letterIndex=Math.floor(Math.random()*letters.length);
letterToGuess=letters[letterIndex];
guesses=0;
lettersGuessed=[];
gameOver=false;
window.addEventListener("keydown",eventKeyPressed, true);
drawScreen();
function createImageDataPressed(e){
window.open(canvas.toDataURL())
}
function eventKeyPressed(e){
if(!gameOver){
var letterPressed=String.fromCharCode(e.keyCode);
letterPressed=letterPressed.toLowerCase();
guesses++;
lettersGuessed.push(letterPressed);
if(letterPressed==letterToGuess){
gameOver=true;
}else{
letterIndex=letters.indexOf(letterToGuess);
guessIndex=letters.indexOf(letterPressed);
if(guessIndex<0){
higherOrLower="That is not a letter";
}else if(guessIndex>letterIndex){
higherOrLower="Lower";
}else{
higherOrLower="Higher";
}
}
drawScreen();
}
}
function drawScreen(){
ctx.fillStyle="#ffa";
ctx.fillRect(0,0,500,300);
ctx.strokeStyle="#000";
ctx.strokeRect(5,5,490,290);
ctx.textBaseline="top";
ctx.fillStyle="#000";
ctx.font="10px Sans-Serif";
ctx.fillText(today,150,10);
ctx.fillStyle="#f00";
ctx.font="14px Sans-Serif";
ctx.fillText(message,125,30);
ctx.fillStyle="#109910";
ctx.font="16px Arial";
ctx.fillText('Guess: '+guesses,215,50);
ctx.fillStyle="#000";
ctx.font="16px Arial";
ctx.fillText('Higher Or Lower: '+higherOrLower,150,125);
ctx.fillStyle="#f00";
ctx.font="16px Arial";
ctx.fillText('Letters Guessed: '+lettersGuessed.toString(),10,260);
if(gameOver){
ctx.fillStyle="#f00";
ctx.font="40px Arial";
ctx.fillText("You Got It!",150,180);
}
}
}
<canvas id="canvas" width="500" height="300"></canvas>
<form>
<input type="button" id="createImageData" value="Export Canvas Image" />
</form>