您的位置：首页 > Web前端 > HTML5

H5猜字母游戏

2016-06-29 22:17 441 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
//判断页面是否加载完成
window.addEventListener("load",eventWindowLoaded,false);
// 封装console.log
var Debugger=function(){};
Debugger.log=function(message){
try{
console.log(message);
}catch(exception){
return;
}
};
// 页面加载完成后触发该事件
function eventWindowLoaded(){
// 调用主函数
canvasApp();
}
// 判断是否支持2D上下文
function canvasSupport(){
return !!document.createElement("textCanvas").getContext;
}

// 主函数
function canvasApp(){
var guesses=0;//玩家猜的次数
var message="猜字母从a（大）到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;//游戏是否结束

if(!canvasSupport){
return;
}

var theCanvas=document.getElementById("canvasOne");
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++;
lettersGuessed.push(letterPressed);

if(letterPressed==letterToGuess){
// 游戏结束
gameOver=true;
}else{
var letterIndex=letters.indexOf(letterToGuess);//找到正确字母在字母表中的位置
var guessIndex=letters.indexOf(letterPressed);//找出玩家输入字母所在的位置
// 比较
if(guessIndex<0){
higherOrLower="你输入的不是字母！";
}
if(guessIndex<letterIndex){
higherOrLower="小了！";
}
if(guessIndex>letterIndex){
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,10);

// 消息
context.fillStyle="#FF0000";
context.font="14px sans";
context.fillText(message,125,30);

// 猜测的次数
context.fillStyle="#109910";
context.font="16px sans";
context.fillText('猜测的次数'+guesses,215,50);

// 显示大了或小了
context.fillStyle="#000000";
context.font="16px sans";
context.fillText('大了或小了:'+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);
}
}

// 游戏截图函数
function createImageDataPressed(e){
window.open(theCanvas.toDataURL(),"canvasImage","left=0,top=0,width='+theCanvas.width+',height='+theCanvas.height+',toolbar=0,resizable=0");
}

}
</script>
</head>
<body>
<div style="position:absolute;top:50px;left:50px;">
<canvas id="canvasOne" width="500" height="300">
your browser does not support HTML5 Canvas
</canvas>
<form>
<input type="button" id="createImageData" value="Export Canvas Image">
</form>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航