利用js制作的简单网页小游戏

利用html和js制作的简单的网页小游戏

这个是我第一次利用js制作网页的小游戏，若有错误欢迎指出。

设计的游戏是类似于配对的小游戏。废话不多说，直接上代码，代码中有比较详细的说明。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>test</title><script>var tk;function change_p() {//改变在p中的内容，就是显示游戏规则var texts = "这是一个配对游戏，一次翻开一个，如果两个翻开的颜色相同意味成功，就加10分，颜色也有可能改变有时间限制";document.getElementById("p1").innerHTML=texts;}function begins() {//开始游戏,其实也是一个初始化的函数。clearTimeout(tk);//防止多次连续的点击开始游戏按钮之后，发生意外document.getElementById("b2").value = "on";//on代表是点击了开始按钮之后的。document.getElementById("b2").innerHTML = "重新开始";//变成重新开始的按钮。document.getElementById("times").innerHTML = "time:60";//这个是为了在重新开始游戏之后的设置，document.getElementById("scores").innerHTML = "scores:0";//初始化分数。for(var i=3; i<13; i++){document.getElementById("d"+i).style.backgroundColor = "";//初始化，设置成为没有背景。}}function time_counts() {//这个函数是用来进行记录时间的var time = parseInt(document.getElementById("times").innerHTML.slice(5)) -1;if (time>=0)//只有当time>0的时候才要继续改变id位times的内容{document.getElementById("times").innerHTML = "time:"+time;}else{clearTimeout(tk);//当倒数为0之后，就停止运行。document.getElementById("b2").value = "off";//时间结束了。document.getElementById("b2").innerHTML = "重新开始";//将这个变为重新开始的按钮。}tk = setTimeout(time_counts, 1000);//在执行过一次这个函数之后，每一秒执行一次}function change_color(obj) {//在这里的obj是一个参数表示当前点击的对象var colors = ["red", "green", "yellow", "blue"];if (obj.style.backgroundColor != "")//这里就是设置防止再已经点击变色之后再次点击再次变色{return;}if (document.getElementById("b2").value=="on"){obj.style.backgroundColor = colors[Math.floor(Math.random()*4)];// sleep(500);}}function sleep(delay) {//这个sleep函数类似于java等的sleep函数，单位msvar start = (new Date()).getTime();while ((new Date()).getTime() - start < delay) {continue;}}function match_color2() {for (var i=3; i<13; i++){while ((document.getElementById("d"+i).style.backgroundColor == ""))//要找到一个有颜色的{i++;}if (i>12){return;}color = document.getElementById("d"+i).style.backgroundColor;for (var index=3; index<13; index++){if ((color == document.getElementById("d"+index).style.backgroundColor) && (index != i)){//这里就是找到了相同的两个的了，就要进行加分和重新变回颜色//在这里使用slice进行切片，因为输出的格式固定，所以分数一定在第四个在代码里面就是要从第三位开始。var scores = parseInt(document.getElementById("scores").innerHTML.slice(7)) + 10;document.getElementById("scores").innerHTML = "scores:"+scores ;//在找到之后，得分记录之后，就要重新将那两个变为没有sleep(100);//利用自己定义的sleep函数暂定100ms，让用户看清于反应，但是这样的话，真正的时间一定超过60s了document.getElementById("d"+i).style.backgroundColor = "";document.getElementById("d"+index).style.backgroundColor = "";break;}}}}</script><style>body{/*设置成居中显示*/text-align: center;}#d1{height: 503px;width: 510px;border: black solid 1px;margin: auto;padding: 0;/*text-align: center;*/}div#d1>div{height: 250px;width: 100px;margin: 0;padding: 0;float: left;border: black solid 1px;}</style></head><body><p id="times">time:60</p><p id="scores">scores:0</p><div id="d1"><div id="d3" onmousedown="change_color(this)" onmouseup="match_color2()"></div><div id="d4" onmousedown="change_color(this)" onmouseup="match_color2()"></div><div id="d5" onmousedown="change_color(this)" onmouseup="match_color2()"></div><div id="d6" onmousedown="change_color(this)" onmouseup="match_color2()"></div><div id="d7" onmousedown="change_color(this)" onmouseup="match_color2()"></div><div id="d8" onmousedown="change_color(this)" onmouseup="match_color2()"></div><div id="d9" onmousedown="change_color(this)" onmouseup="match_color2()"></div><div id="d10" onmousedown="change_color(this)" onmouseup="match_color2()"></div><div id="d11" onmousedown="change_color(this)" onmouseup="match_color2()"></div><div id="d12" onmousedown="change_color(this)" onmouseup="match_color2()"></div></div><div id="d2"><p id="p1"></p><button type="button" id="b1" onclick="change_p()">游戏说明</button><button type="button" id="b2" onmousedown="begins()" onmouseup="time_counts()" value="off">开始游戏</button></div></body></html>