一个简单JS小游戏

这是一个简单的利用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>Bth>
    <th>Ith>
    <th>Nth>
    <th>Gth>
    <th>Oth>
  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">Freetd>
    <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);
}

你可能感兴趣的:(笔记)