利用js制作的简单网页小游戏
利用html和js制作的简单的网页小游戏这个是我第一次利用js制作wang’y
·
利用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函数，单位ms
var 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><!--当这里的value为off的时候就是没有点击开始游戏-->
</div>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
8
0- 0
已为社区贡献2条内容
所有评论(0)