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