利用键盘事件编写简易打字游戏

基本知识：
键盘事件对象属性
keyCode：获取键盘对应的ASCII码值（按键值）
document.onkeydown = function(e){
var e = e || event;
alert(e.keyCode);
}
onkeydown事件下，获取字母键都是按照大写字母的ASCII码值,也可以获取功能键的值
e.ctrlKey e.shiftKey e.altKey 功能键，当键盘按下时返回true
组合键触发：
e.altKey && keyCode== 13
默认回车键的keyCode值是13，左键–37，向上键–38，右键–39，向下键–40
onkeypress事件下，可以识别字母键输入的大小状态值。除了回车键–13，空格键–32以外，其他功能键都不触发
组合键触发：
e.ctrlKey && keyCode == 10
如果功能键ctrl+回车键，回车键的keyCode值为10

keyCode的兼容：
e.keyCode在火狐下的onkeypress事件下，所有的字符键返回的都是0
e.which(火狐)
e.charCode(safari)
document.onkeydown = function(e){
var e = e || event;
var code = e.keyCode || e.which || e.charCode;
}

小案例：字母打字游戏

动画库已经写好相关动画，如按键正确： “animated zoomIn”;按键错误： “animated shake error”;
初始页面如下：

以下是JS代码：

<script src="../../public.js"></script>
/*引用一些封装好的函数，用到的有：
1. id选择器
function $id(id){
	return document.getElementById(id);
}
2. 获取某个范围之间的随机整数
function getRand(startNum,endNum){
	return parseInt(Math.random()*(endNum-startNum+1) + startNum);
}*/
<script>
    // 按键正确： "animated zoomIn";
    // 按键错误： "animated shake error";
    //页面加载  char中随机显示 A--Z之间的任意一个字符   65 --- 90
    //在页面中显示A--Z之间的任意一个字符
    
    //初始化页面显示随机字母
    initShowLetter();
    function initShowLetter() {
        var chNum = getRand(65, 90);//随机获取65 --- 90的数
        $id("char").innerHTML = String.fromCharCode(chNum);//得到以上随机数（ASCII码）对应的字符，并让其在页面展示
        $id("char").className = "animated zoomIn"//给以上字符加出现动画
    }
    var rSum = 0;//计算正确
    var wSum = 0;//计算错误
    //使用document.onkeydown/press事件
    document.onkeydown = function (e) {
        var e = e || event;
        //得到页面中的字母
        var charVal = $id("char").innerHTML;
        //获取一个e.keyCode的键码
        var code = e.keyCode || e.which || e.charCode;
        //通过键码得到一个字母
        var ch = String.fromCharCode(code);
        //用这个字母与$id("char").innerHTML当前的值比较
        if (charVal == ch) {
            //如果相等，说明正确：则切换下一个字母initShowLetter();计算正确率
            $id("char").className = ""
            setTimeout(function () {
                initShowLetter();
            }, 200)
            rSum++;
            $id("result").innerHTML = "正确" + rSum + "个，错误" + wSum + "个，正确率" + （(rSum / (rSum + wSum)).toFixed(4) * 100.toFixed(2) + "%";

        } else {
            //不等，说明不正确：执行动画animated shake error保持当前状态
            $id("char").className = ""
            setTimeout(function () {
                $id("char").className = "animated shake error";
            }, 200)
            wSum++;
            $id("result").innerHTML = "正确" + rSum + "个，错误" + wSum + "个，正确率" + （(rSum / (rSum + wSum)).toFixed(4) * 100.toFixed(2)  + "%";
        }
    }
</script>

快试试吧~~