<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>Document</title>
</head>
<body>
????<html>
????<head>
????????<meta?charset="utf-8">
????????<title>打字游戲</title>
????????<!--引入animate.css動畫庫-->
????????<link?rel="stylesheet"?href="animate.css">
????????<style>
????????????body?{
????????????????margin:?0;
????????????????/*開啟彈性布局，并讓彈性布局中的子元素????????????????水平居中對齊，垂直居中對齊*/
????????????????display:?flex;
????????????????justify-content:?center;
????????????????align-items:?center;
????????????????/*文字居中*/
????????????????text-align:?center;
????????????????/*設(shè)置背景顏色的經(jīng)像漸變*/
????????????????background:?radial-gradient(circle,?#444,?#111,?#000);
????????????}
????????????#charContent?{
????????????????font-size:?400px;
????????????????color:?lightgreen;
????????????????/*設(shè)置文字陰影*/
????????????????/*text-shadow:?水平位置?垂直位置?模糊距離?陰影顏色*/
????????????????/*位置可以為負(fù)值*/
????????????????text-shadow:?0?0?50px?#666;
????????????}
????????????#result?{
????????????????font-size:?20px;
????????????????color:?#888;
????????????}
????????????/*找到id為char及類名為error的div元素*/
????????????#charContent.error?{
????????????????color:?red;
????????????}
????????</style>
????</head>
????<body>
????????<mian>
????????????<div?id="charContent">A</div>
????????????<div?id="result">請?jiān)诎存I上按下屏幕上顯示的字母</div>
????????</mian>
????</body>
????</回頭ml>
????<script?src="../../public.js"></script>
????<script>
????????//按鍵正確：?"animated?zoomIn";
????????//按鍵錯誤：
????????????"animated?shake?error";
????????//頁面加載?char中隨機(jī)顯示?A--Z之間的任意一個字符?65--?-?90?在頁面中顯示A--Z之間的任意一個字符?初始化頁面字母內(nèi)容?頁面加載添加一個隨機(jī)的大寫字母
????????var?playGame?=?{
????????????charContent:?document.getElementById("charContent"),
????????????result:?document.getElementById("result"),
????????????init:?function?()?{
????????????????var?rand?=?getRand(65,?90);
????????????????var?ch?=?String.fromCharCode(rand);
????????????????this.charContent.className?=?"animated?zoomIn";
????????????????this.charContent.innerHTML?=?ch;
????????????},
????????????//游戲開始?
????????????start:?function?()?{
????????????????var?_this?=?this;
????????????????var?sucCount?=?0;
????????????????//正確個數(shù)
????????????????var?failedCount?=?0;
????????????????//錯誤個數(shù)?
????????????????document.onkeydown?=?function?(eve)?{
????????????????????var?e?=?eve?||?event?//獲取對應(yīng)鍵碼值
????????????????????var?code?=?e.keyCode?||?e.which?||?e.charCode;
????????????????????//通過鍵碼值得到對應(yīng)的字符?codeChar
????????????????????var?codeChar?=?String.fromCharCode(code);
????????????????????//獲取當(dāng)前charContent的字符內(nèi)容?textChar
????????????????????var?textChar?=?_this.charContent.innerHTML;
????????????????????//animate.css在切換同一個動畫，?css沒法執(zhí)行?需要行刪除再添加?_this.charContent.className?=?"";
????????????????????//判斷codeChar與textChar是否相等
????????????????????if?(codeChar?===?textChar)?{
????????????????????????//如果相等說明按下的字符正解?切換下一個隨機(jī)字母?
????????????????????????setTimeout(function?()?{
????????????????????????????//有正確的動畫?
????????????????????????????_this.init();
????????????????????????})?
????????????????????????sucCount++;
????????????????????}?else?{
????????????????????????//不相等說明按下錯誤?添加錯誤動畫?setTimeout
????????????????????????(function?()?{
????????????????????????????_this.charContent.className?=?"animated?shake?error";
????????????????????????})?
????????????????????????failedCount++;
????????????????????}
????????????????????//統(tǒng)計(jì)正確率?并將正確率顯示在result中
?????????????????????_this.result.innerHTML?=?"正確："?+?sucCount?+?"個，錯誤："?+
????????????????????????failedCount?+?"個，正確率："?+?parseInt((sucCount?/?(sucCount?+?failedCount))?*?100)?+
????????????????????????"%";
????????????????}
????????????}
????????}
????????playGame.init();
????????playGame.start();
????</script>
????</script>
</body>
</html>
