一个简单JS小游戏

最新推荐文章于 2024-08-23 16:53:29 发布

YoHooooo

最新推荐文章于 2024-08-23 16:53:29 发布

阅读量7.3k

点赞数 2

分类专栏：笔记文章标签：游戏 javascript

本文链接：https://blog.csdn.net/qq_15857627/article/details/55804084

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这是一个简单的利用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">&nbsp;</td> 
    <td id="square5">&nbsp;</td>
    <td id="square10">&nbsp;</td>
    <td id="square14">&nbsp;</td>
    <td id="square19">&nbsp;</td>
  </tr>
  <tr>
    <td id="square1">&nbsp;</td>
    <td id="square6">&nbsp;</td>
    <td id="square11">&nbsp;</td>
    <td id="square15">&nbsp;</td>
    <td id="square20">&nbsp;</td>
  </tr>
    <tr>
    <td id="square2">&nbsp;</td>
    <td id="square7">&nbsp;</td>
    <td id="free">Free</td>
    <td id="square16">&nbsp;</td>
    <td id="square21">&nbsp;</td>
  </tr>
    <tr>
    <td id="square3">&nbsp;</td>
    <td id="square8">&nbsp;</td>
    <td id="square12">&nbsp;</td>
    <td id="square17">&nbsp;</td>
    <td id="square22">&nbsp;</td>
  </tr>
    </tr>
    <tr>
    <td id="square4">&nbsp;</td>
    <td id="square9">&nbsp;</td>
    <td id="square13">&nbsp;</td>
    <td id="square18">&nbsp;</td>
    <td id="square23">&nbsp;</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);
}