Skip to content

Instantly share code, notes, and snippets.

@ryaninhust

ryaninhust/index.html

Created December 2, 2013 14:32
Show Gist options
  • Save ryaninhust/7750328 to your computer and use it in GitHub Desktop.
Save ryaninhust/7750328 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.config{width:250px;margin: 40px auto;}
.grid{display:none;border-collapse:collapse; margin:30px auto 0 auto;}
.grid td{width:50px; height:50px; text-align:center; vertical-align:middle;}
.choice{display:inline-block;width:100px;}
.config>div{margin-bottom:15px;}
.begin{color:white;cursor:pointer;padding: 5px 7px;background:none;border:none;background-color:#2a6389;border-radius:4px;}
</style>
</head>
<body>
<div class="config">
<div>
<span class="choice">选择游戏难度</span>
<span class="options">
<input checked type="radio" name="level" value="1"/>
<label>1</label>
<input type="radio" name="level" value="2"/>
<label>2</label>
<input type="radio" name="level" value="3"/>
<label>3</label>
</span>
</div>
<div>
<span class="choice">先下</span>
<span class="options">
<input checked type="radio" name="order" value="human"/>
<label>人</label>
<input type="radio" name="order" value="computer"/>
<label>电脑</label>
</span>
</div>
<button class="begin">开始游戏</button>
</div>
<table class="grid" border="1">
<tr>
<td data-type="1"></td>
<td data-type="2"></td>
<td data-type="1"></td>
<td data-type="2"></td>
</tr>
<tr>
<td data-type="2"></td>
<td data-type="2"></td>
<td data-type="1"></td>
<td data-type="2"></td>
</tr>
<tr>
<td data-type="1"></td>
<td data-type="2"></td>
<td data-type="1"></td>
<td data-type="1"></td>
</tr>
<tr>
<td data-type="1"></td>
<td data-type="2"></td>
<td data-type="2"></td>
<td data-type="2"></td>
</tr>
<tr>
<td data-type="2"></td>
<td data-type="2"></td>
<td data-type="1"></td>
<td data-type="1"></td>
</tr>
</table>
<script src="./jquery-1.8.3.min.js"></script>
<script>
(function(){
$('.begin').click(function(e){
var _level = $('input[name=level]:checked').val();
var _order = $('input[name=order]:checked').val();
if (_level && _order) {
$('.grid').show();
} else {
alert('选择不完整');
}
});
$('.grid').on('click', 'td', function(e){
var target = $(e.target),
parent_tr = target.parent(),
type = target.data('type').toString(),
colum = target.index(),
row = parent_tr.index();
var cordi = {'row': row, "colum": colum};
console.log(cordi);
draw_piece(type, target);
});
function draw_piece(type, cell){
switch (type){
case '1' :
console.log('xx');
if (cell.is(':empty')){
cell.html('X');
} else {
cell.empty();
}
break;
case '2' :
console.log('oooo');
if (cell.is(':empty')){
cell.html('O');
} else {
cell.empty();
}
break;
default:
break;
}
}
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment