七夕特辑-消消乐表白神器(JavaScript)

具体代码:
index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>字母消消乐</title> <link rel="stylesheet" href="css/game.css" /> </head> <body> <!--字母下落区域--> <div id="screen"></div> <!--底部暂停开始按钮--> <!--底部黑色的阴影--> <div class="botton_black"> <!--暂停开始按钮--> <div class="stop_game" onclick="stop_game();">暂停游戏</div> <div class="start_game" onclick="start_game();">开始游戏</div> </div> <!--积分器--> <div id="score">00</div> <script type="text/javascript" src="js/game.js"></script> </body> </html>
game.css:
@charset "utf-8"; body{ background: url(../img/背景.png) no-repeat; background-size: cover; margin: 0; padding: 0; overflow: hidden;/*超出body部分隐藏*/ } #screen{ width: 900px; height: 633px; margin: auto; padding: 0;/*内外间距为0*/ } .botton_black{ width: 100%; height: 50px; background:black; opacity: 0.7; position:absolute ; bottom: 0px; } .botton_black .start_game, .botton_black .stop_game{ width: 192px; background: url(../img/按钮.png) no-repeat; background-size: auto; background-size: 189px 32px; position: absolute; bottom: 10px; left: 13px; cursor: pointer; text-align: center; font-size: 23px; font-weight: bold; } .botton_black .start_game{ left: 250px; background: url(../img/按钮.png) no-repeat; background-size: 189px 32px; } #score{ width: 250px; height: 200px; background: url(../img/积分器.png) no-repeat; background-size: 250px 200px; position: absolute; right: 10px; bottom: 250px; font-family: "微软雅黑"; text-align: center; font-size: 100px; line-height: 197px; } .letter{ width: 200px; height: 200px; font-size: 0; border: 0; position: absolute; }
js:
var letters = ['H','Y','X','I','L','O','V','E','U']; var screen = document.getElementById("screen"); var count = document.getElementById("score"); var score = 0; var create_flag; var down_flag; function start_game(){ var audio= new Audio("img/Feeling The Rain.MP3"); audio.play(); create_letter(); down_letter(); //绑定键盘事件 window.onkeydown = key_down; sleep(18500).then(() => { audio.pause(); }); } function create_letter(){ //创建定时器 create_flag = window.setInterval(function(){ //生成下落的随机起始点 var math_left =Math.round(Math.random() * 1000 ); //生成26以内的随机整数 var num = parseInt(Math.random() * 9 ); var inp = document.createElement("input"); inp.value = letters[num]; inp.className = "letter"; inp.style.background = "url(img/"+ letters[num] +".png) no-repeat" inp.style.top = "0px"; inp.style.left = math_left + "px"; screen.appendChild(inp); },800); } //字母下落 function down_letter(){ //创建定时器 down_flag = window.setInterval(function(){ //获取所有字母 var inps = screen.childNodes; //每个字母每秒下落50px for(var i = 0;i < inps.length;i++){ var inp = inps[i]; //如果是元素节点,则获取top值修改 if(1 == inp.nodeType){ var top = inp.style.top;//获取top值 top = parseInt(top); //超出屏幕游戏失败 if(600>top){ inp.style.top = top + 3 +"px"; }else{ //游戏失败 //暂停游戏 stop_game(); screen.innerHTML = "";//清空屏幕 count.innerHTML = "0";//重置计数器 score = 0;//重置分数 } } } },20); } //暂停游戏 function stop_game(){ //暂停定时器 clearInterval(create_flag); clearInterval(down_flag); //取消绑定事件 window.onkey = null; } //按下键盘消除字母 function key_down(){ //获取所有字母 var inps = screen.childNodes; //判断用户按下的键值与input的walue是否一致 for(var i = 0;i < inps.length;i++){ var inp = inps[i]; //如果是元素节点,则获取top值修改 var n = 0; if(1 == inp.nodeType){ //判断用户按下的值和input的velue是否一致 switch(event.keyCode){ case 72:n = 0; break; case 89:n = 1; break; case 88:n = 2; break; case 73:n = 3; break; case 76:n = 4; break; case 79:n = 5; break; case 86:n = 6; break; case 69:n = 7; break; case 85:n = 8; break; default :n = 9; } if(letters[n] == inp.value){ screen.removeChild(inp); score++; next_game(); count.innerHTML = score; break; } } } } function next_game(){ if(score == 21){ stop_game(); screen.innerHTML = "";//清空屏幕 fall(); } } function fall(){ sleep(1000).then(() => { var audio= new Audio("img/月半小夜曲.mp3"); audio.play(); }) sleep(4500).then(() => { //生成下落的随机起始点 var math_left =Math.round(Math.random() * 1000 ); //生成26以内的随机整数 var num = 3; for(num = 3;num <9;num++){ var inp = document.createElement("input"); inp.value = letters[num]; inp.className = "letter"; inp.style.background = "url(img/"+ letters[num] +".png) no-repeat" inp.style.top = "0px"; //inp.style.left = num*200-500 + "px"; switch(num){ case 3:inp.style.left = 100 + "px"; break; case 4:inp.style.left = 350+ "px"; break; case 5:inp.style.left = 500+ "px"; break; case 6:inp.style.left = 660+ "px"; break; case 7:inp.style.left = 820+ "px"; break; case 8:inp.style.left = 1100+ "px"; break; } screen.appendChild(inp); } sleep(2000).then(() => { // 这里写sleep之后需要去做的事情 for(num = 0;num <3;num++){ var inp = document.createElement("input"); inp.value = letters[num]; inp.className = "letter"; inp.style.background = "url(img/"+ letters[num] +".png) no-repeat" inp.style.top = "0px"; inp.style.left = num*200+200 + "px"; screen.appendChild(inp); } }) down_flag = window.setInterval(function(){ //获取所有字母 var inps = screen.childNodes; //每个字母每秒下落50px for(var i = 0;i < inps.length;i++){ var inp = inps[i]; //如果是元素节点,则获取top值修改 if(1 == inp.nodeType){ var top = inp.style.top;//获取top值 top = parseInt(top); inp.style.top = top + 3 +"px"; if(top > 350){ stop_game(); } } } },20); }) } function sleep (time) { return new Promise((resolve) => setTimeout(resolve, time)); }
修改方式:
1.根据需要修改img中的素材图片。
2.js第一行中替换字母。
3.js88-90行替换字母ASCII码。
字母转ASCII码图片地址:https://blog.csdn.net/qq_37234166/article/details/86591576
具体代码及素材git地址:https://gitee.com/baixujun/xiaoxiaole
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性