H5猜字母游戏

最新推荐文章于 2022-06-21 14:01:14 发布
Wangdanting123
最新推荐文章于 2022-06-21 14:01:14 发布
阅读量964
点赞数 1
本文链接：https://blog.csdn.net/Wangdanting123/article/details/51786337
版权
<!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>