僵尸入侵4-菜单和键盘事件

有了背景，下面进行游戏控制的部分。

首先建立hud.js并导入index.

hud=head up display.用来表示得分和当前生命值。

脚本如下：

var HUD = function(){var score=0;var life =0;this.setScore =function(num){score=num;};this.setLife=function(num){life=num;};this.step=function(dt){};this.draw=function(ctx){ctx.fillStyle="#FF000";ctx.textAlign="left";ctx.font="bold 30px Aprial";ctx.fillText("得分："+score,50,30);ctx.textAlign="right";ctx.fillText("生命："+life,900,30)};};

回到game.js中在start方法中加入hud

 this.start=function(){setBoard(0,new GameMap(20,200));<span style="color:#ff0000;">setBoard(1,new HUD());</span>loop();};

现在就要写用户的键盘控制脚本了，新建input.js。并导入。键盘输入只需要集中处理，所以建立的时候采用单键模式即可。关注的按键在key_code下定义；this.keys属性保存当前关注的按键是否按下或释放，init方法用来初始化键盘事件监听。

var  KEY_CODES={38:'up',40:'down',32:'fire',27:'esc',13:'enter',17:'ctrl'};var Input=(function(){this.keys={};  this.init=function(){$keys=this.keys;window.addEventListener('keydown',function(e){if (KEY_CODES[event.keyCode]) {$keys[KEY_CODES[event.keyCode]] =true;e.preventDefault();//code}},false);window.addEventListener('keyup',function(e){if (KEY_CODES[event.keyCode]) {$keys[KEY_CODES[event.keyCode]] =false;e.preventDefault();//code}},false);};return this;})();

回到game.js在Game.start前加入Input方法。

 <span style="color:#ff0000;">    Input.init();</span>imageLoad(game_images,Game.start);

现在需要一个简易的菜单，和玩家交互。创建menu.js文件并导入。编辑

menu菜单比较简单，menu将加入到game的boards中，所以也有step方法，检测enter按钮是否按下，是则调用回调函数

。draw方法就用来在画布上显示提示信息。分为title,sunbtitle。上下排列但是字体大小不一样。

var Menu =function(title,subtitle,callback){this.step=function(dt){if (Input.keys['enter']&&callback) {Input.keys['enter']=false;callback();//code}};this.draw=function(ctx){ctx.fillStyle="#FFFFFF";ctx.textAlign="center";ctx.font="bold 40px Aprial";ctx.fillText(title,GAME_CONFIG.width/2,GAME_CONFIG.height/2);ctx.font="bold 20px Aprial";ctx.fillText(subtitle,GAME_CONFIG.width/2,GAME_CONFIG.height/2+40);};};

接着，需要就该game.js，加入控制。加入一个go方法，启动运行，這个方法将是实际运行游戏的入口方法。加在run方法前就好。

同时，建立一个菜单显示，并在敲击enter键时调用go方法启动游戏。

 this.start=function(){setBoard(0,new GameMap(20,200));setBoard(1,new HUD());<span style="color:#ff0000;">  setBoard(2,new Menu("僵尸入侵","按下enter键开始游戏",$this.go));</span>loop();};<span style="color:#ff0000;">   this.go=function(){console.log("go");};</span>

增加quit方法处理游戏退出过程。在go方法之后;退出侯显示不同的菜单

   this.quit=function(){this.pause=false;this.boards=this.boards.slice(0,10);this.level=0;setBoard(2,new Menu("已退出游戏!","按下enter键重新开始游戏",$this.go));};

在loop循环中加入退出游戏的功能，当接收到esc按钮事件时，就退出游戏。同时加入一个暂停状态。这个首先要在Game中添加一个属性：

var Game = (function(){this.boards=[];<span style="color:#ff0000;"> this.pause=false;</span>

有了這个属性，才能在loop中增加暂停功能：

   this.loop=function(){if (Input.keys['esc']) {Input.keys['esc']=false;$this.quit();}console.log("Loop");setTimeout($this.loop,GAME_CONFIG.tick);//按下ctrl键就在暂停和运行间切换if (Input.keys['ctrl']){Input.keys['ctrl']=false;$this.pause=!$this.pause;}if ($this.pause) {return;//code}var dt=GAME_CONFIG.tick/1000;$this.run(dt);};

這样玩家就可以有简单的一些功能了。

僵尸入侵4-菜单和键盘事件相关推荐

selenium+Python(鼠标和键盘事件)
本篇总结了 web 页面常用的一些操作元素方法,可以统称为行为事件有些 web 界面的选项菜单需要鼠标悬停在某个元素上才能显示出来(如百度页面的设置按钮). 1 简单操作 1.点击(鼠标左键)页面按 ...
WINDOWS键盘事件的挂钩监控原理及其应用技术
WINDOWS键盘事件的挂钩监控原理及其应用技术 WINDOW的消息处理机制为了能在应用程序中监控系统的各种事件消息,提供了挂接各种反调函数(HOOK)的功能.这种挂钩函数(HOOK)类似扩 ...
Android事件处理之处理键盘事件
1.在Android开发中,首先和用户交互的是界面,接着就是事件处理,对于如今的图形界面应用程序,都是通过事件来实现人机交互的.事件就是用户对图形界面的操作,在Android手机和平板电脑上,主要包括 ...
QTP模拟鼠标和键盘事件整理
整理者:asoqa整理 1.鼠标事件 1.1 使用自带的Click方法看QTP的帮助,每个对象都有自带的Click方法,通过其中第三个参数指定具体的鼠标事件例如: Browser("Ne ...
【杂记】（input获取焦点失去焦点、获取input中输入的值、键盘事件、js事件、Math 属性、手机自适应meta定义、去掉input内置阴影、图片居中、去蓝色默认背景、点击去掉默认边框）
1. input获取焦点失去焦点 input:focus{border:1px red solid:} 获取焦点 .focus()失去焦点.blur() 2. 获取input中输入的值 <inp ...
qt Android 按键事件,QT无窗口状态下对键盘事件的监听
Question:最近在搞linux下的一个客户端项目,需要接收键盘事件,但是又不能有界面,这种情况怎么处理呢? int main(int argc, char *argv[]) { QApplica ...
773-780---DOM事件高级（常用鼠标事件，案例：跟随鼠标的天使，常用的键盘事件，案例：模拟京东按键输入内容，案例：模拟京东快递单号查询）
文章目录事件高级 7 常用的鼠标事件 7.1常用的鼠标事件 7.2 鼠标事件对象案例:跟随鼠标的天使 8 常用的键盘事件 8.1 常用的键盘事件 8.2 键盘事件对象 8.3 ASCII 表案例 ...
2020.11.18第十三章事件（事件处理程序；事件对象；事件类型：UI事件；焦点事件；鼠标与键盘事件变动事件模拟事件）
事件处理程序 html事件处理程序(直接在html中书写script) <!-- //#### 事件处理程序 //html时间程序可以直接在HTML文件中写,而且还可以引用其他地方的方法和函数 ...
python+webdriver学习鼠标键盘事件以及定位元素
设置浏览器大小:像素点 set_window_size(width,height) maximize_window() 浏览器全屏显示,不带参数控制浏览器前进.后退: driver.forward( ...

僵尸入侵4-菜单和键盘事件

僵尸入侵4-菜单和键盘事件相关推荐

最新文章

热门文章