H5猜字母游戏

来源：互联网发布：真三7帝国捏脸数据编辑：程序博客网时间：2024/05/08 10:15
<!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>
0 0