HTML5 Canvas API制作简单的猜字游戏

2025-02-26 云资源网 前端开发教程 已收录 关注 28次
当前位置：云资源网 > 技术教程 > 前端开发教程 > HTML5 Canvas API制作简单的猜字游戏
正文概述

这篇文章主要介绍了借助HTML5 Canvas API制作一个简单的猜字游戏的实例分享,游戏中每局会自动生成一个字母,玩家按键盘来猜测该字母是哪一个,需要的朋友可以参考下

二话不说，先上效果图以及源代码~

HTML代码

<!doctype html>
<html lang=en>
    <head>
        <meta charset=utf-8 />
        <script type=text/javascript src=chp1_guess_the_letter.js></script>
        <script type=text/javascript src=modernizr.custom.99886.js></script>
    </head>
    <body>
        <canvas id=canvas_guess_the_letter width=500 height=300>
            你的浏览器不支持HTML5 Canvas   
        </canvas>
        <form>
            <input type=button id=createImageData value=Export Canvas Image />;   
        </form>
    </body>
</html>

JS代码

/** 
 * @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);   
    }   
}

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

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

案例当中涉及的变量。

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

变量的声明

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;

初始化游戏

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

通过使用Math的random()函数和floor()函数，根据文字的数组生成要猜测的文字。

并且当用户按键盘的时候监听《keyup》事件，根据传递过来的event，生成按下的键值。

因猜测游戏对大小写不敏感，为防止用户按大写字母，我们需要把值转换成小写形式。

猜测次数+1

猜测出来的文字添加到已经猜测的文字数组当中

var letterPressed = String.fromCharCode(e.keyCode);   
letterPressed = letterPressed.toLowerCase();   
guesses++;   
letterGuessed.push(letterPressed);

剩下的就只有判断 大和小了。

通过indexOf函数 我们可以判断要猜测的文字和我们输入的文字在字符集上面的索引值。

如果我们输入的更靠前则提示《小了》反之《大了》

最终用户猜对了要猜测的文字 我们会在中央用大号字体显示《你猜对了》

letterIndex = letters.indexOf(letterToGuess);   
guessIndex = letters.indexOf(letterPressed);   
if(guessIndex < 0) {   
    higherOrLower = 请输入正确的字符;   
} else if(guessIndex < letterIndex) {   
    higherOrLower = 小了;   
} else {   
    higherOrLower = 大了;   
｝

至此这个功能差不多完成了吧，我们还有一个小功能，那就是通过按下按钮的方式可以把屏幕结果抓去出来。

用的函数为toDataUrl()，有兴趣的朋友研究一下。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

HTML5 Canvas实现烟花绽放的特效

关于html5 canvas 微信海报的分享介绍

canvas实现动态小球重叠的效果代码

以上就是HTML5 Canvas API制作简单的猜字游戏的详细内容，更多请关注双恒网络其它相关文章！

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！

云资源网 » HTML5 Canvas API制作简单的猜字游戏

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？
本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了？
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。 若排除这种情况，可在对应资源底部留言，或 联络我们.。
你们有qq群吗怎么加入？
当然有的，如果你是帝国cms、易优cms、和pbootcms系统的爱好者你可以加入我们的QQ千人交流群https://www.sudo1.com/page-qun.html。

云资源网 钻石

喜欢 0
分享到：

相关推荐

  • 会员数(个)
  • 12334资源数(个)
    •        
  • 资源(G)
    •        
  • 今日下载
  • 1406稳定运行(天)

提供最优质的资源集合

立即查看 了解详情