原生js实现打字游戏

本文实例为大家分享了js实现打字游戏的具体代码，供大家参考，具体内容如下

1、HTML代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>打字游戏</title><link rel="stylesheet" href="css/index.css">
</head>
<body><!-- 开始界面 --><div class="start-box"><div class="start-message"><!-- 文字 --><img src="img/start-font.png" alt="消消乐"><!-- 人物 --><img src="img/start-gril.png" alt="小女孩"><!-- 开始按钮 --><img src="img/play-btn.png" alt="开始" class="start"></div></div><!-- 游戏中 --><div class="play-box"><!-- 游戏信息 --><div class="play-message"><!-- 血条 --><div class="life"><img src="img/life.png" alt="血条"><span class="blood"></span></div><!-- 分数 --><div class="score"><img src="img/score.png" alt="分数"><span class="score-num"></span></div><!-- 音量 --><div class="sound"><img src="img/sound-on.png" alt="音量"></div></div><!-- 游戏主界面 --><div class="main"></div><!-- 游戏结束界面 --><div class="play-tips"><img class="level" src="img/level.png"><span class="play-msg">游戏结束</span><img class="reload-btn" src="img/reload-btn.png"></div><embed src="music/music_bg.mp3" hidden="true" autostart="true" loop="true"></div>
</body>
<script src="js/index.js"></script>
</html>

2、CSS代码如下

html,body{height: 100%;
}
*{/* 去除浏览器默认样式 */margin: 0;padding: 0;
}/* 开始界面 */
.start-box{width: 100%;height: 100%;background: url('../img/bg.png') no-repeat center / cover;position: fixed;top: 0;left: 0;z-index: -1;
}
.start-message{width: 700px;position: absolute;top: 50%;margin-top: -160px;left: 50%;margin-left: -350px;
}
.start-message img:nth-child(1){width: 700px;position: relative;z-index: 999;
}
.start-message img:nth-child(2){width: 300px;position: absolute;right: 100px;top: -150px;
}
.start-message img:nth-child(3){width: 80px;position: absolute;left: 50%;margin-left: -40px;cursor: pointer;animation: run 0.5s infinite alternate;/* 无限次播放，奇数次正向播放，偶数次反向播放 */
}
@keyframes run{0%{}100%{transform: scale(1.1);/* 转换，放大1.1倍 */}}/* 游戏中 */
.play-box{width: 100%;height: 100%;background: url('../img/bg.png') no-repeat center /cover;padding-top: 40px;box-sizing: border-box;position: absolute;left: 0;top: 0;
}
/* 游戏信息 */
.play-box .play-message{width: 1000px;height: 50px;position: absolute;left: 50%;margin-left: -500px;
}
.play-box .play-message img{height: 50px;
}
.play-box .play-message .life{float: left;position: relative;margin-right: 60px;
}
.play-box .play-message .life span{line-height: 50px;width: 140px;height: 50px;color: #fff;position: absolute;top: 0px;left: 120px;
}
.play-box .play-message .score span{line-height: 50px;width: 88px;height: 50px;color: #fff; position: absolute;top: 4px;left: 100px;
}
.play-box .play-message .score{float: left;position: relative;
}
.play-box .play-message .sound{float: right;
}
.play-box .main{width: 1000px;height: 100%;position: absolute;left: 50%;margin-left: -500px;top: 0;overflow: hidden;
}
.play-tips{position: absolute;left:50%;margin-left:-250px;top:50%;margin-top:-200px;width:500px;display:none;
}
.play-tips .level{width:100%;
}.play-tips .play-msg{position: absolute;width:100%;height:48px;top:280px;font-size:48px;text-align:center;color:#8B5511;
}
.play-tips .reload-btn{position: absolute;width:100px;top:350px;left:50%;margin-left:-50px;
}

3、JS代码如下

//1. 生成26个字母图片
//2. 下落，字母消失。血条减1
//3. 按键效果，分数加1
var cl = document.documentElement.clientHeight;
var nums = 5;
var speed = 5;
var main = document.querySelector(".main");
var letter = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
var blood = 10;
var score = 0;
var bloods = document.querySelector(".blood");
var scoreNum = document.querySelector(".score-num");
bloods.innerText = blood;
scoreNum.innerText = score;
var playTips = document.querySelector(".play-tips");
var reloadBtn = document.querySelector(".reload-btn");
//生成26个字母图片
function getLetter(num)
{for(let i=0;i<num;i++){var number = Math.floor(Math.random()*26);var lett = letter[number];//创建一个img标签，最后放到main里面var img = document.createElement("img");img.src = `img/letter/${lett}.png`;//y轴方向偏移量，topvar t = -80 - Math.random()*100; //x轴方向偏移量，leftvar l = Math.random()*970;img.style.cssText = `width:70px;position:absolute;left:${l}px;top:${t}px;`img.className = lett;main.appendChild(img);}
}
getLetter(nums);
var t = null;
//下落，字母消失。血条减1
function play()
{t = setInterval(function(){var letters = document.querySelectorAll(".main img");if(letters.length < nums){console.log("获取");getLetter(nums - letters.length);}for(let i=0;i<letters.length;i++){var ltop = letters[i].offsetTop;letters[i].style.top = ltop + speed + "px";if(ltop>cl-80){main.removeChild(letters[i]);blood--;bloods.innerText = blood;if(blood <= 0){clearInterval(t);main.innerHTML = "";playTips.style.display = "block";}}}},50)document.onkeydown = function(e){var keyCode = e.key;var all = document.querySelectorAll(".main img");for(let i=0;i<all.length;i++){if(all[i].className == keyCode){main.removeChild(all[i]);score ++;scoreNum.innerText = score;break;}}}
}
play();
reloadBtn.onclick = function()
{blood = 10;score = 0;bloods.innerText = blood;scoreNum.innerText = score;playTips.style.display = "none";play();
}

了解更多，点击下载源代码

原生js实现打字游戏相关推荐

H5原生js简单拼图游戏
H5原生js简单拼图游戏演示地址效果展示源码 index.html puzzle.css puzzle.js 源码下载演示地址链接: 演示地址效果展示源码 index.html < ...
原生js canvas 碰撞游戏的开发笔记
-----------------------------------------------福利--------------------------------------------- ----- ...
原生JS实现拼图游戏
前面的话练习了10几个原生js小游戏的案例,刚开始是无从下手,而现在有了自己的思路,不再觉得那么的难了.总结起来,还是那句话,"好的代码是时间熬出来的,多练是硬道理!",这篇文章 ...
原生js做打地鼠游戏
学原生js的语法其实是容易的,最主要的练习逻辑思维.对于刚刚学完js的语法的我来说,写这个打地鼠游戏真的花费了我一整天的时间.整体感觉写出来的js代码,其实就是平时练习的一些小案例的代码拼起来的,js ...
JS：打字游戏_键盘事件监听
1. 打字游戏屏幕随机出现字母或数字用户按下键盘,屏幕显示回答正确与否当用户按下ESC时游戏结束 <!DOCTYPE html> <html lang="en&quo ...
原生JavaScript实现打字游戏
写在最前面本文主要锻炼的是原生JavaScript的编程能力,运用了函数式编程的思想! 1.页面的排版与布局主要分成两个页面:a.初始呈现出来的界面:b.点击开始进入游戏的界面. a界面: 比较丑 ...
利用原生js制作小游戏
1.编写函数: 该函数对游戏间隔时间.影响游戏的对象的绑定.开始.结束进行编写 /*** * @param {*} duration 间隔时间* @param {*} thisObj 绑定的this对 ...
原生JS 实现小游戏贪吃蛇
文章目录 (1) 游戏场景搭建 (2) 获取标签.准备数据 (3)贪吃蛇移动 (4) 控制贪吃蛇移动 (5) 随机生成食物 (6) 完成食物消化 (7) 边界判断 (8) 积分判断 (9) 暂停继续 ...
开源项目 —— 原生JS实现斗地主游戏 ——代码极少、功能都有、直接粘贴即用
目录效果如下目录结构 GameEntity.js GrawGame.js konva.min.js PlayGame.js veriable.js index.html 结语࿱

原生js实现打字游戏

原生js实现打字游戏相关推荐

最新文章

热门文章