请选择 进入手机版 | 继续访问电脑版
查看: 2502|回复: 83

[新手教程] HTML5+JS游戏开发模块----canvas打字游戏

  [复制链接]
最佳答案
0 
guofinni 发表于 2017-3-30 13:56:18 | 显示全部楼层 |阅读模式


适合初学JavaScript者的html5打字小游戏。
QQ截图20170330134559.jpg
游戏难点:
1.字母初始化
2.一个字母消失后,自动补充一个
3.字母运动


想必大家也看出来了,游戏比较简单,直接开始js部分。
字母类:
  1. //字母类  
  2.                 function Word(){  
  3.                     this.x=[];  
  4.                     this.y=[];  
  5.                     this.aLive=[];  
  6.                     this.spd=[];  
  7.                     this.larr=[];//绘制所需数组  
  8.                     this.color=[];  
  9.                     this.xColor;//选择颜色  
  10.                     this.letters=[];//字母集合数组  
  11.                 }  
  12.                 Word.prototype.sum=5;//屏幕中最多有50个字母  
  13.                 Word.prototype.init=function(){  
  14.                     this.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','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'];  
  15.                     this.color=['yellow','red','blue','green'];  
  16.                     for(var i=0;i<this.sum;i++){  
  17.                         this.aLive[i]=true;  
  18.                         this.x[i]=600;  
  19.                         this.y[i]=Math.floor(Math.random()*400)+100;  
  20.                         if(this.y[i]>600){  
  21.                             this.y[i]=0;  
  22.                         }  
  23.                         if(i>=1){  
  24.                             if(this.y[i]-this.y[i-1]<30){  
  25.                                 this.y[i]=this.y[i-1]+41;  
  26.                             }  
  27.                         }  
  28.                         var arrL=this.letters[Math.floor(Math.random()*48)];//随机排序  
  29.                         this.larr.push(arrL);  
  30.                         this.spd[i]=Math.random()*0.017+0.003;//速度区间在[0.01-0.015)  
  31.                     }  
  32.                 }  
  33.                 Word.prototype.draw=function(){  
  34.                     for(var i=0;i<this.sum;i++){  
  35.                         if(this.aLive[i]){  
  36.                             this.x[i]-=this.spd[i]*5*deltaTime;  
  37.                             ctx.save();  
  38.                             //设置字体样式  
  39.                             ctx.font = "50px Courier New";  
  40.                             //设置字体填充颜色  
  41.                             ctx.fillStyle =''+this.color[this.xColor]+'';  
  42.                             //从坐标点(50,50)开始绘制文字  
  43.                             ctx.fillText(this.larr[i], this.x[i], this.y[i]);  
  44.                             ctx.restore();  
  45.                             if(this.x[i]<=0){//边界消失  
  46.                                 this.born(i);  
  47.                             }  
  48.                         }     
  49.                     }     
  50.                 }  
  51.                 //自动生成一个字母  
  52.                 Word.prototype.born=function(i){  
  53.                     this.aLive[i]=false;//字母消失  
  54.                     this.x[i]=600;  
  55.                     this.y[i]=Math.floor(Math.random()*400)+100;  
  56.                     if(this.y[i]>600){  
  57.                         this.y[i]=0;  
  58.                     }  
  59.                     this.larr.splice(i,1,this.letters[Math.floor(Math.random()*48)]);//删除数组对应字母,并在原位置插入,确保顺序  
  60.                     this.aLive[i]=true;//字母重新生成  
  61.                 }  
复制代码

上面类属性基本上都是采用数组方式,为什么呢?因为字母有多个,多个物体运动必须有多个物体坐标,速度等,字母触碰边界消失,按键触发消失,以上代码有详细注释,不多说了。

接下来就是游戏必不可少的鼠标事件,按键事件
  1. //按键事件  
  2.                 keysDown={};//保存按键事件  
  3.                 window.addEventListener('keydown',function(e){  
  4.                     keysDown[e.keyCode]=true;  
  5.                     e=event||window.event;  
  6.                     for(var i=0;i<sum;i++){  
  7.                         if(String.fromCharCode(e.keyCode)==word.larr[i].toLocaleUpperCase()){//将字母全部转换为大写字母在比较  
  8.                             word.born(i);//删除数组对应字母  
  9.                         }     
  10.                     }  
  11.                 },false);  
  12.   
  13.                 window.addEventListener('keyup',function(e){  
  14.                     delete keysDown[e.keyCode];  
  15.                 },false);  
  16.                 //鼠标事件  
  17.                 window.addEventListener('mousemove',function(e){  
  18.                     if(e.offSetX||e.layerX){//兼容性写法  
  19.                         //三元运算符  
  20.                         mx=e.offSetX==undefined?e.layerX:e.offSetX;  
  21.                         my=e.offSetY==undefined?e.layerY:e.layerY;  
  22.                     }  
  23.                     ctx.save();  
  24.                     ctx.font = "12px Courier New";  
  25.                     ctx.fillStyle =''+fcolor+'';  
  26.                     if(mx>708&&mx<730&&my>120&&my<130){  
  27.                         canvas.style.cursor='pointer';  
  28.                         ctx.fillText('黄色',708,130);  
  29.                     }  
  30.                     else if(mx>748&&mx<770&&my>120&&my<130){  
  31.                         canvas.style.cursor='pointer';  
  32.                         ctx.fillText('红色',748,130);  
  33.                     }  
  34.                     else if(mx>708&&mx<730&&my>160&&my<170){  
  35.                         canvas.style.cursor='pointer';  
  36.                         ctx.fillText('蓝色',708,170);  
  37.                     }  
  38.                     else if(mx>748&&mx<770&&my>160&&my<170){  
  39.                         canvas.style.cursor='pointer';  
  40.                         ctx.fillText('绿色',748,170);  
  41.                     }  
  42.                     else{  
  43.                         canvas.style.cursor='default';  
  44.                         ctx.beginPath();  
  45.                         //设置字体样式  
  46.                         ctx.font = "12px Courier New";  
  47.                         //设置字体填充颜色  
  48.                         ctx.fillStyle ='blue';  
  49.                         //从坐标点(50,50)开始绘制文字  
  50.                         ctx.fillText('请选择字母颜色',708,100);  
  51.                         ctx.fillText('黄色',708,130);  
  52.                         ctx.fillText('红色',748,130);  
  53.                         ctx.fillText('蓝色',708,170);  
  54.                         ctx.fillText('绿色',748,170);  
  55.                         ctx.closePath();  
  56.                     }  
  57.                     ctx.restore();  
  58.                 },false);  
  59.                 //鼠标点击  
  60.                 window.addEventListener('click',function(e){  
  61.                     if(e.offSetX||e.layerX){//兼容性写法  
  62.                         //三元运算符  
  63.                         mx=e.offSetX==undefined?e.layerX:e.offSetX;  
  64.                         my=e.offSetY==undefined?e.layerY:e.layerY;  
  65.                     }  
  66.                     if(mx>708&&mx<730&&my>120&&my<130){  
  67.                         xColor=0;  
  68.                     }  
  69.                     else if(mx>748&&mx<770&&my>120&&my<130){  
  70.                         xColor=1;  
  71.                     }  
  72.                     else if(mx>708&&mx<730&&my>160&&my<170){  
  73.                         xColor=2;  
  74.                     }  
  75.                     else if(mx>748&&mx<770&&my>160&&my<170){  
  76.                         xColor=3;  
  77.                     }  
  78.                 },false);  
复制代码

采用addEventListener事件绑定,这样做好处就是响应更加紧凑,而且可以实现(玩家)斜着运动,这里用来绑定鼠标移动,鼠标点击,键盘事件。鼠标移动事件主要是为了字母颜色选择时候,字体变色(类似鼠标经过效果),鼠标点击事件就是增加响应颜色属性,改变字母颜色。键盘事件主要用到String.fromCharCode(e.keyCode)返回按键字符串,当然是大写的,所以判断时候,要将画布上字母进行大写转换word.larr.toLocaleUpperCase(),否则小写字母,不会消失。

字母绘制,文本绘制
  1. //设置字体样式  
  2.                 ctx.font = "12px Courier New";  
  3.                 //设置字体填充颜色  
  4.                 ctx.fillStyle ='blue';  
  5.                 //从坐标点(50,50)开始绘制文字  
  6.                 ctx.fillText('请选择字母颜色',708,100);  
复制代码

第一个是字体大小,字体填充颜色(也可以是描边stroke),填充文本fillText。

接下来的不过就是不断循环刷新画布,让字母运动。
游客,如果您要查看本帖隐藏内容请回复





最佳答案
0 
qewsfs 发表于 2017-3-31 13:50:55 | 显示全部楼层
RE: HTML5+JS游戏开发模块----canvas打字游戏 [修改]
最佳答案
0 
John_森 发表于 2017-3-31 14:24:01 | 显示全部楼层
赞一个!我也不知道说啥好!  作为一名新人  大家多多关照~
您需要登录后才可以回帖 登录 | 注册

本版积分规则

推荐阅读 More>

© 2001-2015 9秒社团

合作伙伴

公司简介 | 联系方式
COPYRIGHT©2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备11023195号-4
北京中清龙图网络技术有限公司
返回顶部 返回列表