html 编写一个小游戏,通过HTML5 Canvas API制作一个简单的猜字游戏-CSDN博客

XML / HTML代码将内容复制到文本

< html lang = “ en” >

< meta charset = “ utf-8” />

脚本>

头>

< canvas id = “ canvas_guess_the_letter”宽度= “ 500”高度= “ 300” >

你的浏览器不支持HTML5 Canvas

canvas >

;

表单>

body >

html >

JS代码

JavaScript代码将内容复制到

/ **

* @作者拉斐尔

* /

window.addEventListener(“ load” ，eventWindowLoaded， false );

var Debugger = function (){

};

Debugger.log = 函数(消息){

尝试 {

console.log(消息);

} 捕获(例外){

回报;

}

函数 eventWindowLoaded(){

canvasApp();

}

函数 canvasSupport(){

返回 Modernizr.canvas;

}

函数 canvasApp(){

VAR 猜测= 0;

var message = “猜字母从a(低)到z(高)的字母” ；

变数字母= [ “” 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 = 新的 Date();

var letterToGuess = “” ;

var HigherOrLower = “” ;

var letterGuessed = [];

var gameOver = false ;

如果(！canvasSupport()){

回报;

}

var theCanvas = document.getElementById(“ canvas_guess_the_letter” );

var context = theCanvas.getContext(“ 2d” );

initGame();

函数 initGame(){

var letterIndex = Math.floor(Math.random()* letters.length);

letterToGuess =字母[letterIndex];

猜测= 0;

letterGuessed = [];

gameOver = false ;

window.addEventListener(“ keyup” ，eventKeyPressed， true );

var formElement = document.getElementById(“ createImageData” );

formElement.addEventListener('click' ，createImageDataPressed， false );

drawScreen();

}

函数 eventKeyPressed(e){

如果(！gameOver){

var letterPressed = String.fromCharCode(e.keyCode);

letterPressed = letterPressed.toLowerCase();

猜测++;

letterGuessed.push(letterPressed);

如果(letterPressed == letterToGuess){

gameOver = true ;

} 其他 {

letterIndex = letters.indexOf(letterToGuess);

guessIndex = letters.indexOf(letterPressed);

如果(guessIndex <0){

HigherOrLower = “请输入正确的字符” ;

} 否则，如果(guessIndex

HigherOrLower = “小了” ;

} 其他 {

HigherOrLower = “大了” ;

}

drawScreen();

}

函数 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(今天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);

如果(gameOver){

context.fillStyle = “＃FF0000” ;

context.font = “ 40px _sans” ;

context.fillText(“你猜中了” ，150，180 );

}

函数 createImageDataPressed(e){

window.open(theCanvas.toDataURL()， “ canvasImage” ，“ left = 0，top = 0，width =” + theCanvas.width + “，height =” + theCanvas.height + “，工具栏= 0，可调整大小= 0” ) ;

}

每局系统都会自动生成一个字母，玩家会按键盘来猜测该字母是哪一个。

例如生成的是s，玩家按了h，则游戏就会提示《小了》，因为英文字母当中h的索引比s的索引更靠前。

案例当中涉及的变量。

猜测：猜测次数消息：文字提示，指导用户如何玩该游戏字母：文字分散，放置我们要猜测的文字的集合。这个例子用的是a到z今天：今天的日期letterToGuess：要猜测的文字更高或更低：是《大了》还是《小了》letterGuessed：已经猜测过得文字gameOver：游戏是否结束，是布尔变量，开始的时候是false，猜对后设置true

变量的声明

JavaScript代码将内容复制到

VAR 猜测= 0;

var message = “猜字母从a(低)到z(高)的字母” ；

变数字母= [ “” 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 = 新的 Date();

var letterToGuess = “” ;

var HigherOrLower = “” ;

var letterGuessed = [];

var gameOver = false ;

初始化游戏