面向?qū)ο髮懽帜复蜃钟螒?/h1>

<!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>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

  • 序言:七十年代末,一起剝皮案震驚了整個濱河市控淡,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌止潘,老刑警劉巖掺炭,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異凭戴,居然都是意外死亡涧狮,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進(jìn)店門么夫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來勋篓,“玉大人,你說我怎么就攤上這事魏割∑┫” “怎么了?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵钞它,是天一觀的道長拜银。 經(jīng)常有香客問我殊鞭,道長,這世上最難降的妖魔是什么尼桶? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任操灿,我火速辦了婚禮,結(jié)果婚禮上泵督,老公的妹妹穿的比我還像新娘趾盐。我一直安慰自己,他們只是感情好小腊,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布救鲤。 她就那樣靜靜地躺著,像睡著了一般秩冈。 火紅的嫁衣襯著肌膚如雪本缠。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天入问,我揣著相機(jī)與錄音丹锹,去河邊找鬼。 笑死芬失,一個胖子當(dāng)著我的面吹牛楣黍,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播棱烂,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼锡凝,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了垢啼?” 一聲冷哼從身側(cè)響起窜锯,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎芭析,沒想到半個月后锚扎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡馁启,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年驾孔,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片惯疙。...
    茶點(diǎn)故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡翠勉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出霉颠,到底是詐尸還是另有隱情对碌,我是刑警寧澤,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布蒿偎,位于F島的核電站朽们,受9級特大地震影響怀读,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜骑脱,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一菜枷、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧叁丧,春花似錦啤誊、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至条舔,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間乏矾,已是汗流浹背孟抗。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留钻心,地道東北人凄硼。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像捷沸,于是被迫代替她去往敵國和親摊沉。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容