欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

html5 canvas之猜数目字游戏

更新时间: 2014-01-05 00:53:42 责任编辑: Author_N1

 

HTML5 Canvas之猜数字游戏

主要的内容描述的是如何渲染一个矩形的边框和填充背景,以及文字.

代码中有详细的注释:

效果图:


以下是代码:

<!DOCTYPE html>
<html lang="cn">
<head> 
    <title>猜数字游戏示例</title>
    <meta charset="gb2312">
    <script type="text/javascript">
              //@author 杨虹昌
              //guess全局属性  GuessBean对象
              var guess=null;
              var context=null;//2d全局上下文

              //检查浏览器是否支持canvas属性
              function canvasSupport(){
                  return   !!document.createElement("canvas").getContext;
              }

             //dom加载完成后所执行的函数
             function windowLoaded(){
                          canvasStart();
             }

           //对日志对象的简单封装
           var   Debugger=(function(){
                           //输出日志信息
                           this.log=function(message){
                               try{
                                  console.log(message);
                               }catch(e){

                               }
                           }
               return this;
           })();

           // 定义游戏类实体
          function GuessBean(){
           this.today=null;//显示当前时间
           this.guessNum=-1;//要猜的数字,初始为负数
           this.pressNum=-1;//用户按下的数字,初始为负数代表是初始化状态
           this.numGuessed;//用户已经猜过的数字
           this.guesses=0;//记录用户猜过的次数
           this.gameOver=false;//游戏是否已经结束
           this.message="猜数字,数字从0-9.";//提示用户消息
           this.hightOrLower="";
          }

          //初始化游戏相关信息,并返回GuessBean对象
         function initGame(){
                 Debugger.log("初始化游戏设置>>");
                 guess=new GuessBean();
                 guess.guessNum=Math.floor(Math.random()*10);//生成0-9的随机数
                 Debugger.log("此次生成的随机数:"+guess.guessNum);
                 guess.today=new Date();//获取当前日期
                 guess.guesses=0;//初始化猜的次数为0
                 guess.gameOver=false;
                guess.hightOrLower="";
                guess.numGuessed=[];
                Debugger.log("绑定dom键盘按下事件.");
                //添加事件绑定
               window.addEventListener("keyup",listenerKeyPressed,true);
               drawScreen();//执行渲染
         }

          //canvas程序入口
          function canvasStart(){
                 // 判断浏览器是否支持canvas
                 if(!canvasSupport()){
                   return;
                 }
              //获取dom文档中id属性为"theCanvas"的元canvas素
              var theCanvas=document.getElementById("theCanvas");
              //获取2d上下文,注意:此处的2d只能是小写,大写不能获取此对象
              context=theCanvas.getContext("2d");
              Debugger.log("开始渲染>>");
              initGame();

          }
         //完成屏幕渲染
         function drawScreen(){
                 //
                 context.fillStyle="#ffffaa";   //设置填充颜色
                 context.fillRect(0,0,500,300);     //创建一个矩形

                 //围绕图像以及文本绘制一个非填充的小方块,
                 context.strokeStyle="#000000";   //设置填充颜色
                 //绘制矩形边框,一下四个参数分别为:
                //第一和第二个参数:左上角x,y坐标
               //第三和第四个参数:右下角x,y坐标
                 context.strokeRect(5,5,490,290);   //设置字体大小和字号
                 context.textBaseline="top"; //设置字体的垂直对齐方式

                 //日期
                 context.fillStyle="#000000";    //设置填充颜色
                 context.font="12px 隶书";    //设置字体大小和类型
                 //参数:
                //第一个参数:渲染内容
               //第二个参数:x轴
              //第三个参数:y轴
                 context.fillText("时间:"+guess.today.toLocaleString(),20,10);

                 // 消息
                context.fillStyle="#ff0000";     //设置填充颜色
                context.font="14px 隶书";        //设置字体大小和类型
                context.fillText("消息:"+guess.message,250,10);

                //
                context.fillStyle="#109910";
                context.font="16px 隶书";
                context.fillText("Guesses:"+guess.guesses,250,30);

               //
              context.fillStyle="#000000";
              context.font="23px 隶书";
              context.fillText("Higher or Lower:"+guess.hightOrLower,30,125);

             //
             context.fillStyle="#ff0000";
             context.font="18px 隶书";
             context.fillText("Num Guessed:"+guess.numGuessed,10,260);

             //游戏结束
             if(guess.gameOver){
                 context.fillStyle="#ff0000";
                 context.font="40px 隶书";
                 context.fillText("恭喜你,答对了!",150,180);
             }
         }

          //处理键盘按下事件
         function listenerKeyPressed(e){
                 //游戏结束
               if(guess&&guess.gameOver){
                   Debugger.log("游戏结束.>>");
                  return;
               }
             var digit=String.fromCharCode(e.keyCode);
             guess.guesses++;//猜的次数加1
             guess.numGuessed.push(digit);//记录猜的值
              //判断是否与对应的随机值相等
            if(parseInt(digit)===guess.guessNum){
                  guess.gameOver=true;//游戏结束
            }else{
                //判断是否是数字
                if((/^\d$/.test(digit))){
                   if(parseInt(digit)>guess.guessNum){
                       guess.hightOrLower="大了.";
                   }else{
                       guess.hightOrLower="小了.";
                   }
                }else{
                    guess.hightOrLower="您按下的不是一个数字.";
                }
            }
            drawScreen();//渲染
         }
           //添加事件监听
          window.addEventListener("load",windowLoaded,false);
    </script>
</head>
<body>
            <canvas  id="theCanvas" width="500" height="300">
                 <!-- 这个里面是写当不支持canvas时候的提示信息-->
                 浏览器不支持html5 canvas ,建议使用chrome 或者FF
            </canvas>
</body>
</html>
源码地址:https://code.csdn.net/yhc13429826359/html5_canvas_demo

上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:53:42
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1112/
本文WWW.DOC100.NET DOC100.NET版权所有。