原生JS實作一個簡單的打字小游戲
- 利用javascript制作一個簡單的打字小游戲
- 之前寫了一個貪吃蛇小游戲好像反響不錯 今天我來寫一個比貪吃蛇更low更簡單的打字小游戲
- 打字小游戲原理
- 接下來咋們直接康康代碼：
- HTML和CSS
- JS
利用javascript制作一個簡單的打字小游戲
之前寫了一個貪吃蛇小游戲好像反響不錯 今天我來寫一個比貪吃蛇更low更簡單的打字小游戲
之前貪吃蛇小游戲鏈接: 貪吃蛇小游戲.
打字小游戲原理
根據字母的unicode編碼 生成相應的亂數 在把亂數轉換成字母 關鍵就是下面兩行代碼:
zmcode = 65+Math.floor(Math.random()*26);
var zm = String.fromCharCode(zmcode);
然后根據鍵盤按下事件 判斷按下的鍵(keyCode)和隨機生成字母(zmcode)有沒有相等就可以知道你輸入的字母有沒有正確,錯誤字母顏色變紅,正確就在隨機生成一個字母，
接下來咋們直接康康代碼：
HTML和CSS
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #000000;
}
h1{
text-align: center;
font-size: 400px;
color: orangered;
/* color: royalblue; */
}
h2{
text-align: center;
font-size: 40px;
color: #FEC007;
}
p{
text-align: center;
color: #673AB7;
font-size: 40px;
}
u{
color: chartreuse;
}
h3{
text-align: center;
font-size: 50px;
color: #FE5722;
}
i{
color: gold;
}
</style>
<body>
<h1></h1>
<h2>按下開始</h2>
<p>正確率：<u></u></p>
<h3>你的級別：<i>操作一下？</i></h3>
</body>
JS
<script>
var h1 = document.querySelector('h1');
var h2 = document.querySelector('h2');
var u = document.querySelector('u');
var i = document.querySelector('i')
var zmcode;
function showzm(){
zmcode = 65+Math.floor(Math.random()*26);
var zm = String.fromCharCode(zmcode);
h1.innerHTML = zm;
}
//頁面顯示一個隨機字母
showzm();
//正確的次數
var zc = 0;
//錯誤的次數
var cw = 0;
document.onkeydown = function(e){
//獲取事件物件
e = e||window.event;
//讓字母隨機顏色
h1.style.color = '#'+ Math.random().toString(16).substr(-6);
//測驗用
console.log(e.keyCode)
console.log(zmcode)
//如果按下的鍵code碼和隨機生成的code碼一樣就顯示正確，并顯示下一個字母
if(e.keyCode == zmcode){
zc ++;
h2.innerText = 'true';
showzm();
u.innerText = ((zc/(zc+cw))*100 ).toFixed(2) +'%'
}else{
cw ++;
h2.innerText = 'false';
h1.style.color = 'red';
u.innerText = ((zc/(zc+cw))*100 ).toFixed(2) +'%'
}
//等級判斷:正確率等于正確的次數除以(正確的次數加錯誤的次數)
if((zc/(zc+cw))*100 > 99){
i.innerHTML = '無敵'
}
else if((zc/(zc+cw))*100 > 95){
i.innerHTML = '大神'
}
else if((zc/(zc+cw))*100 > 80){
i.innerHTML = '就這？'
}
else if((zc/(zc+cw))*100 > 60){
i.innerHTML = '也就一般，'
}
else{
i.innerHTML = '太菜了還得多練練'
}
}
</script>
其實也沒什么難度就是簡單的判斷code值有沒有相等 接下來我們來看看效果：
1.
開始會隨機生成一個字母
2.
輸入正確就換下一個字母，并且實時顯示你輸入對錯以及正確率還有你的級別
3.
當你輸入錯誤字母顏色會變紅，下面也會顯示你輸入錯誤以及你的正確率下降，說不定級別也會下降喲！
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/112367.html
標籤：其他