HTML5+JS游戏开发模块----canvas打字游戏

原本要继续研究塔防游戏，但发现寻路算法搞不定，其实算法压根看不懂，看的头晕，炮塔自动追踪移动物体也搞不定，塔防项目得延迟了。所以，就搞了另外一个游戏，键盘打字母游戏，老样子，因为初学javascript，代码比较乱，见谅。

游戏难点：

1.字母初始化

2.一个字母消失后，自动补充一个

3.字母运动

想必大家也看出来了，游戏比较简单，直接开始js部分。

字母类

//字母类function Word(){this.x=[];this.y=[];this.aLive=[];this.spd=[];this.larr=[];//绘制所需数组this.color=[];this.xColor;//选择颜色this.letters=[];//字母集合数组}Word.prototype.sum=5;//屏幕中最多有50个字母Word.prototype.init=function(){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'];this.color=['yellow','red','blue','green'];for(var i=0;i<this.sum;i++){this.aLive[i]=true;this.x[i]=600;this.y[i]=Math.floor(Math.random()*400)+100;if(this.y[i]>600){this.y[i]=0;}if(i>=1){if(this.y[i]-this.y[i-1]<30){this.y[i]=this.y[i-1]+41;}}var arrL=this.letters[Math.floor(Math.random()*48)];//随机排序this.larr.push(arrL);this.spd[i]=Math.random()*0.017+0.003;//速度区间在[0.01-0.015)}}Word.prototype.draw=function(){for(var i=0;i<this.sum;i++){if(this.aLive[i]){this.x[i]-=this.spd[i]*5*deltaTime;ctx.save();//设置字体样式ctx.font = "50px Courier New";//设置字体填充颜色ctx.fillStyle =''+this.color[this.xColor]+'';//从坐标点(50,50)开始绘制文字ctx.fillText(this.larr[i], this.x[i], this.y[i]);ctx.restore();if(this.x[i]<=0){//边界消失this.born(i);}}   }   }//自动生成一个字母Word.prototype.born=function(i){this.aLive[i]=false;//字母消失this.x[i]=600;this.y[i]=Math.floor(Math.random()*400)+100;if(this.y[i]>600){this.y[i]=0;}this.larr.splice(i,1,this.letters[Math.floor(Math.random()*48)]);//删除数组对应字母，并在原位置插入，确保顺序this.aLive[i]=true;//字母重新生成}

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

接下来就是游戏必不可少的鼠标事件，按键事件

//按键事件keysDown={};//保存按键事件window.addEventListener('keydown',function(e){keysDown[e.keyCode]=true;e=event||window.event;for(var i=0;i<sum;i++){if(String.fromCharCode(e.keyCode)==word.larr[i].toLocaleUpperCase()){//将字母全部转换为大写字母在比较word.born(i);//删除数组对应字母}    }},false);window.addEventListener('keyup',function(e){delete keysDown[e.keyCode];},false);//鼠标事件window.addEventListener('mousemove',function(e){if(e.offSetX||e.layerX){//兼容性写法//三元运算符mx=e.offSetX==undefined?e.layerX:e.offSetX;my=e.offSetY==undefined?e.layerY:e.layerY;}ctx.save();ctx.font = "12px Courier New";ctx.fillStyle =''+fcolor+'';if(mx>708&&mx<730&&my>120&&my<130){canvas.style.cursor='pointer';ctx.fillText('黄色',708,130);}else if(mx>748&&mx<770&&my>120&&my<130){canvas.style.cursor='pointer';ctx.fillText('红色',748,130);}else if(mx>708&&mx<730&&my>160&&my<170){canvas.style.cursor='pointer';ctx.fillText('蓝色',708,170);}else if(mx>748&&mx<770&&my>160&&my<170){canvas.style.cursor='pointer';ctx.fillText('绿色',748,170);}else{canvas.style.cursor='default';ctx.beginPath();//设置字体样式ctx.font = "12px Courier New";//设置字体填充颜色ctx.fillStyle ='blue';//从坐标点(50,50)开始绘制文字ctx.fillText('请选择字母颜色',708,100);ctx.fillText('黄色',708,130);ctx.fillText('红色',748,130);ctx.fillText('蓝色',708,170);ctx.fillText('绿色',748,170);ctx.closePath();}ctx.restore();},false);//鼠标点击window.addEventListener('click',function(e){if(e.offSetX||e.layerX){//兼容性写法//三元运算符mx=e.offSetX==undefined?e.layerX:e.offSetX;my=e.offSetY==undefined?e.layerY:e.layerY;}if(mx>708&&mx<730&&my>120&&my<130){xColor=0;}else if(mx>748&&mx<770&&my>120&&my<130){xColor=1;}else if(mx>708&&mx<730&&my>160&&my<170){xColor=2;}else if(mx>748&&mx<770&&my>160&&my<170){xColor=3;}},false);

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

字母绘制，文本绘制

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

第一个是字体大小，字体填充颜色（也可以是描边stroke），填充文本fillText。

接下来的不过就是不断循环刷新画布，让字母运动，这里不再多说，感觉我也说不清楚。大家有兴趣可以去慕课网找爱心鱼游戏视频教程看看，里面有专门讲解。

完整代码

HTML5+JS游戏开发模块----canvas打字游戏相关推荐

HTML5+JS游戏开发模块----canvas打字游戏升级版
之前发了简单版本打字游戏,现在增加图片,设置开始按钮,记录分数,字母显示也改成对象数组,直接操作对象而不是操作对象属性,孰好孰坏,我也不懂,我也是初学者. 直接上代码字母类 //字母类 functi ...
开发一个Canvas小游戏实现一个游戏“引擎”
前言这个游戏其实在三四年前就写了,中间还重构过好几次,之前都是用简单的面向对象和函数式编程来写,游戏中的元素关系到还是分的挺开,但是游戏的渲染,运算等逻辑分的不够清晰,整个逻辑基本都是自顶向下的流水 ...
【游戏开发】《Java游戏服务器架构实战》项目在windows上部署
[游戏开发]<Java游戏服务器架构实战>项目在windows上部署文章目录 [游戏开发]<Java游戏服务器架构实战>项目在windows上部署一.配置项目基础环境二. ...
【Visual C++】游戏开发笔记十五游戏人工智能（一）运动型游戏AI
分享一下我老师大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow 本系列文章由zhm ...
【转】【Visual C++】游戏开发笔记十五游戏人工智能（一）运动型游戏AI
原文连接:http://www.cnblogs.com/dyllove98/archive/2012/04/07/2461865.html#commentform 我们常常听闻AI(Artificia ...
【Visual C++】游戏开发笔记十五游戏人工智能（一）运动型游戏AI .
本系列文章由zhmxy555编写,转载请注明出处. http://blog.csdn.net/zhmxy555/article/details/7434317 作者:毛星云邮箱: happy ...
[原]【Visual C++】游戏开发笔记十五游戏人工智能（一）运动型游戏AI
本系列文章由zhmxy555编写,转载请注明出处. http://blog.csdn.net/zhmxy555/article/details/7434317 作者:毛星云邮箱: happy ...
游戏开发笔记十五游戏人工智能（一）运动型游戏AI
我们常常听闻AI(Artificial Intelligence人工智能)这个名词,比如Dota里面的AI地图.写这篇文章的时候,最新版的Dota AI是6.72f,估计过几天6.73的AI也要出来了 ...
Unity 2D游戏开发教程之为游戏场景添加多个地面
Unity 2D游戏开发教程之为游戏场景添加多个地面为游戏场景添加多个地面显然,只有一个地面的游戏场景太小了,根本不够精灵四处活动的.那么,本节就来介绍一种简单的方法,可以为游戏场景添加多个地面. ...

HTML5+JS游戏开发模块----canvas打字游戏

HTML5+JS游戏开发模块----canvas打字游戏相关推荐

最新文章

热门文章