bingo游戏
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Make Your Own Bingo Card</title>
<script src="../../js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="BingoCard.css">
<script src="BingoCard.js"></script>
</head>
<h1>Ceate A Bingo Card</h1>
<table id = "tt">
<tr id="head">
<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>
<td id="square4"> </td>
<td id="square9"> </td>
<td id="square13"> </td>
<td id="square18"> </td>
<td id="square23"> </td>
</tr>
</table>
<body>
<p><a href="BingoCard.html" id="reload">Click here </a>to create a new card</p>
</body>
</html>
CSS
body{
background-color: white;
color: black;
font-size:20px;
}
h1,th{
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}
h1{
font-size:28px;
}
table{
border-collapse: collapse;
}
th,td{
padding: 10px;
border:2px #666 solid;
text-align: center;
width: 20%;
}
#head{
background-color: #999;
}
#free,.pickedBG{
background-color: #f66;
}
.winningBG{
background-image: url(../../images/winningBG.gif);
}
JS
window.onload=initAll;
var usedNums = new Array(76);
function initAll(){
//探测对象
if(document.getelementbyid){
document.getElementById("reload").onclick = anotherCard;
newcard();
}
else{
alert("Sorry,your brower doesn't support this script.");
}
}
function newcard(){
for(var i=0;i<24;i++){
setSquare(i);
}
}
function setSquare(thisSquare){
var currSquare = "square"+thisSquare;
var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
var colBasis = colPlace[thisSquare]*15;
var newNum;
//do-while循环较于if语句可以避免空格产生
do{
newNum= colBasis+getNewNum()+1;
}
//去掉重复数字，将数组内容改为存储当前值
while(usedNums[newNum]);
usedNums[newNum] = true;
document.getElementById(currSquare).innerHTML = newNum;
//改变样式
document.getElementById(currSquare).className = "";
document.getElementById(currSquare).onmousedown = toggleColor; //不加括号，得到函数对象
}
function getNewNum(){
return Math.floor(Math.random()*15);
}
function anotherCard(){
for(var i = 0; i < usedNums.length; i++){
usedNums[i] = false;
}
newcard();
return false;
}
function toggleColor(evt){
var thisSquare;
if(evt){ //非IE环境
thisSquare = evt.target;
}
else{ //IE环境(看不见evt)
thisSquare = window.event.srcelement;
}
//thisSquare=触发事件的元素
if(thisSquare.className == ""){
thisSquare.className = "pickedBG";
}
else{
thisSquare.className = "";
}
checkWin();
}
function checkWin(){
//存储用户可能遇到的获胜选项
var winningOption = -1;
var setSquares = 0;
//设置获胜编码
var winners = new Array(31,992,15360,507904,541729,557328,1083458,2162820,4329736,8519745,8659472,16252928);
//执行完后，产生一个24位的数字，存储用户已经单击的格子，每一位的数值代表那个格的点击状态，被点击则设为1，否则设为0。如第一格没被点击过，第二格被点击过setSquares就为10
for(var i=0; i < 24; i++){
var currSquare = "square"+i;
if(document.getElementById(currSquare).className!=""){
document.getElementById(currSquare).className = "pickedBG";
setSquares = setSquares | Math.pow(2,i);
}
}
//判断用户选择是否是获胜状态
for(var i=0; i<winners.length; i++){
if((winners[i]&setSquares) == winners[i]){
winningOption = i;
}
}
//
if(winningOption > -1){
for(var i=0; i < 24; i++){
if(winners[winningOption] & Math.pow(2,i))
{
var currSquare = "square"+i;
document.getElementById(currSquare).className = "winningBG";
}
}
}
}
相关阅读
这篇文章是我之前在准备2014年8月份的腾讯产品培训生招聘时写的（我靠，这句话感觉有语病。。。）。因为种种原因失利后，原本打算将这篇
（转）SonicStage CP 4.3 中文迷你版和完整版下载
http://www.5x54.com/article/show.php?filename=20070912093602SonicStage CP 4.3 中文迷你版和完整版下载 作者：5x54
java注释使用及error occurred during initialization
JAVA注释 java语言注释有三种——单行注释，多行注释以及文档注释。单行注释：只需要将双斜线//放在这一行的最前面即可多行注释：以/*
脆弱的DNS2014年1月21日下午15：20开始，国内大部分网站，包括大型门户新浪、百度等以及导航、视频无法加载，账号无法登陆，DNS域名解析系
这家发源于1828年的大药房，1841年鸦片战争时期被华人收购并迁到香港，1989年在香港开出第一家个人护理用品商店，在1994年首次回到 大