一、键盘事件

（1）keydown & keyup

定义： 按下按键和抬起按键

执行顺序： keydown > keypress > keyup

keydown和keypress的区别：
1、keydown没有charCode

2、keypress按住可以一直触发

3、keypress可以区分字母大小写

document.onkeypress = function (e) {var str = String.fromCharCode(e.charCode);console.log(str); // a b c A
}

4、keypress只触发所有字符类按键(包括123abc><=，不包括ctrl)

5、keydown用来触发控制键，键盘上所有的按键都可以触发

charCode和keyCode的区别：
charCode是ASCII码，keyCode是键盘顺位排序码

（2）静态方法/属性

给一个函数添加一个方法和属性，这些方法和属性就是这个函数的静态方法和属性

（3）移动盒子

点击查看源代码

二、贪吃蛇运动原理

（1）贪吃蛇案例

点击查看源代码

三、备注

（1）文档碎片

每一次循环dom结构都在变化，这样很消耗性能

frag不在dom结构里面，所以在循环的时候是没有改变dom结构的

记住：
1、只要是循环创建，一定要用到文档碎片

2、它的好处是可以阻止回流，减少对dom结构的操作，优化性能

（2）标签借用

用一些特定的标签（i、ins），这样好维护

（3）这里为什么要这样写？

就是往了一个方向走，就不能再往这个方向或者反方向走了

DOM-21【键盘事件、贪吃蛇运动原理】相关推荐

WINDOWS键盘事件的挂钩监控原理及其应用技术
WINDOWS键盘事件的挂钩监控原理及其应用技术 WINDOW的消息处理机制为了能在应用程序中监控系统的各种事件消息,提供了挂接各种反调函数(HOOK)的功能.这种挂钩函数(HOOK)类似扩 ...
基于单片机的贪吃蛇游戏
绪论 1．1 研究背景与意义随着社会的发展,人们生活的步调日益加快,越来越多的人加入了全球化的世界. 人们不再拘泥于--,J,块天地,加班,出差成了现代人不可避免的公务.而此时一款可以随时随地娱乐 ...
python100行代码-怎样写贪吃蛇小游戏？用100行python代码轻松解决！
大家小时候都玩过贪吃蛇吧?小编小时候可喜欢拿爸妈的手机玩了,厉害着呢!今天,小编就来用100行代码实现一个简易版的贪吃蛇.在网上,贪吃蛇教程蛮多的,但要安装蛮多库的,而且也不够清晰,今天的代码比较短, ...
bat贪吃蛇游戏代码_100行python代码，轻松完成贪吃蛇小游戏
来源:DataGo数据狗链接: https://mp.weixin.qq.com/s/fDcr1SfcbynLzHye7Q7VOg 大家小时候都玩过贪吃蛇吧?小编小时候可喜欢拿爸妈的手机玩了,厉 ...
基于pygame的贪吃蛇游戏
14/100保存草稿发布文章博文管理我的博客退出加粗斜体标题删除线无序有序待办引用代码块 BashCC++C#CLikeCSSGoHandlebarsJavaJavaScriptKo ...
python代码，轻松完成贪吃蛇小游戏
大家小时候都玩过贪吃蛇吧?小编小时候可喜欢拿爸妈的手机玩了,厉害着呢!今天,小编就来用100行代码实现一个简易版的贪吃蛇.在网上,贪吃蛇教程蛮多的,但要安装蛮多库的,而且也不够清晰,今天的代码比较短, ...
Javascript项目— 甜心教主《爱你》版贪吃蛇游戏
0.项目展示目录 0.项目展示一,贪吃蛇游戏 1. 初始化及引入Game类 2.页面的初始化 3. 蛇类的初始化 4.蛇的运动更新与渲染 4.1 清屏操作 4.2 蛇的运动更新基于以上,我们对运 ...
原生JS 实现小游戏贪吃蛇
文章目录 (1) 游戏场景搭建 (2) 获取标签.准备数据 (3)贪吃蛇移动 (4) 控制贪吃蛇移动 (5) 随机生成食物 (6) 完成食物消化 (7) 边界判断 (8) 积分判断 (9) 暂停继续 ...
C语言贪吃蛇课程设计实验报告（包含贪吃蛇项目源码）
文末有贪吃蛇代码全览,代码有十分细致的注释!!! 文末有贪吃蛇代码全览,代码有十分细致的注释!!! 文末有贪吃蛇代码全览,代码有十分细致的注释!!! 码文不易,给个免费的小星星和免费的赞吧,关注也行呀 ...

DOM-21【键盘事件、贪吃蛇运动原理】