返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

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

2019-01-28 15:03:28于丽
  •                     //已经猜测的字符   
  •         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");        }   
  • }  

    从游戏名称可以看出，该游戏是猜字游戏。每局系统都会自动生成一个字母，玩家会按键盘来猜测该字母是哪一个。

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

    案例当中涉及的变量。

    guesses：猜测次数
    message：文字提示，指导用户如何玩该游戏
    letters：文字数组，存放我们要猜测的文字的集合。这个例子用的是a到z
    today：今天的日期
    letterToGuess：要猜测的文字
    higherOrLower：是《大了》还是《小了》
    letterGuessed：已经猜测过得文字
    gameOver：游戏是否结束，是布尔变量，开始的时候是false，猜对后设为true

    变量的声明

    JavaScript Code复制内容到剪贴板
    1. var guesses = 0;    var message = "Guess The Letter From a(lower) to z(higher)";   
    2. 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"];   
    • 相关文章 大家在看