您的位置：首页 > Web前端 > JavaScript

一个简单JS小游戏

2017-02-19 14:10 435 查看

这是一个简单的利用JS制作的卡片类游戏.

html文件如下：

<html>
<head>
<title>卡片游戏</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="script01.css">
<script type="text/javascript" src="script01.js">
</script>

</head>
<body>
<h1>创建一个卡片</h1>
<table>
<tr>
<th>B</th>
<th>I</th>
<th>N</th>
<th>G</th>
<th>O</th>
</tr>
<tr>
<td id="square0"> </td>
<td id="square5"> </td>
<td id="square10"> </td>
<td id="square14"> </td>
<td id="square19"> </td>
</tr>
<tr>
<td id="square1"> </td>
<td id="square6"> </td>
<td id="square11"> </td>
<td id="square15"> </td>
<td id="square20"> </td>
</tr>
<tr>
<td id="square2"> </td>
<td id="square7"> </td>
<td id="free">Free</td>
<td id="square16"> </td>
<td id="square21"> </td>
</tr>
<tr>
<td id="square3"> </td>
<td id="square8"> </td>
<td id="square12"> </td>
<td id="square17"> </td>
<td id="square22"> </td>
</tr>
</tr>
<tr>
<td id="square4"> </td>
<td id="square9"> </td>
<td id="square13"> </td>
<td id="square18"> </td>
<td id="square23"> </td>
</tr>
</table>
<p><a href="script01.html" id="reload">点击这里</a>创建一个新卡片</p>
</body>
</html>

创建一个卡片

B	I	N	G	O


		Free

js文件如下：

window.onload = initAll;//当窗口完成加载时，它调用initAll函数

function initAll(){//这个循环将重复24次。第一次I=0,最后一次I=23
for(var i = 0 ;i<24;i++){
var newNum = Math.floor(Math.random()*75)+1;
document.getElementById("square"+i).innerHTML = newNum;
}//Math.random()生成0～1的一个随机数，比如0.123。将Math.random（）与最大值相乘，会生成0到最大值的之间的结果，对结果进行floor运算会获得结果整数部分。再加1就会获得1到最大值的数字。
}

css文件如下：

body {
background-color: white;
color: black;
font-size: 20px;
font-family: "Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
}

h1 ,th {
font-family: Georgia,"Times New Roman",Times,serif;
}

h1 {
font-size: 28px;

}

table {
border-collapse: collapse;
}

th, td{
padding: 10px;
border:2px #666 solid;
text-align: center;
width: 20%;
}

#free, .pickedBG{
background-color: #f66;
}

.winningBG{
background-image: url(image/redFlash.gif);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 游戏 javascript

相关文章推荐

新的分享

章节导航