ie10版本
View Code
<!DOCTYPE html>
<!--
begin : 20130508
author : Spider (利用js复习对象概念)
20130508: 背景 棋盘 双方 棋子等对象定义
20130509: 棋盘 双方 棋子等对象功能实现
20130510: 各对象之间功能交换实现游戏规则
20130511: 加入刚学到HTML5_CSS3部分效果(ie10)
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS_HTML5_CSS3练习象棋游戏ie10</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}#bgdiv
{
border: 0px solid #00ff21;
}#bg
{
background-image: url("bg.jpg");
width: 600px;
height: 600px;
}#box
{
width: 495px;
height: 500px;
border: 1px solid rgba(0, 255, 33, 0.00);
top: 10px;
left: 10px;
position: absolute;
z-index: 1;
/*column-count: 9;*/
}.di
{
margin: 3px;
width: 49px;
height: 44px;
border: 0px solid #ffd800;
float: left;
background-color: rgba(200, 193, 147, 0.00);
border-radius: 25px;
}.qz
{
margin: 1px;
width: 40px;
height: 40px;
border: 1px solid #00ffff;
border-radius: 25px;
font-size: 35px;
background-color: #bd8143;
text-align: center;
cursor: pointer;
position: relative;
transition: transform 1s, width 0.5s, height 0.5s,top 0.5s,left 0.5s,font-size 0.5s;
/*transition-delay: 0.5s;*/
box-shadow: 5px 5px 15px #888888;
font-family: 隶书;
}.d3:hover
{
top: -3px;
left: -3px;
}.d4
{
width: 46px;
height: 46px;
font-size: 40px;
transform: rotate(360deg);
}.qz0
{
color: red;
}.qz1
{
color: black;
}.delz
{
width: 90px;
height: 500px;
border: 1px solid rgba(0, 255, 255, 0.00);
top: 10px;
left: 10px;
position: absolute;
z-index: 1;
/*column-count: 2;*/
}.tiqi
{
border: 1px solid #00ff21;
}@keyframes action01
{
}
</style>
<script type="text/javascript">
//B:工厂 E:事件 F:方法
//-------------------------
//快捷获取DOM
function A(id) {
if (typeof id == "string") {
return document.getElementById(id);
}
else if (typeof id == "object") {
return id;
}
}
//快捷获取DOM id名
function sA(id) {
if (typeof id == "string") {
return id;
}
else if (typeof id == "object") {
return id.id;
}
}
//alert
function al(s) {
alert(s);
}
//快捷parseInt
function pi(s) {
return parseInt(s);
}
//快捷parseFloat
function pf(s) {
return parseFloat(s);
}
//快捷Number
function nb(s) {
return Number(s);
}
//取element的viewport(可视区域)坐标
function viewtblr(id) {
return A(id).getBoundingClientRect();
}//车
function ms0(ts) {
var dq = ts.dqwz;
var re = ts.lzwz;
//上
for (var i = dq - 9 ; i >= 0; i -= 9) {
var ffh = ts.fang.qp.getdizqz(i);
if (ffh == undefined) {
ts.lzwz.push(i);
}
else if (ffh.qz.fh == ts.fh) {
break;
}
else {
ts.czwz.push(ffh);
break;
}
}
//下
for (var i = dq + 9 ; i <= 89; i += 9) {
var ffh = ts.fang.qp.getdizqz(i);
if (ffh == undefined) {
ts.lzwz.push(i);
}
else if (ffh.qz.fh == ts.fh) {
break;
}
else {
ts.czwz.push(ffh);
break;
}
}
//左
for (var i = dq - 1 ; i % 9 >= 0; i -= 1) {
if (i % 9 == 8) break;
var ffh = ts.fang.qp.getdizqz(i);
if (ffh == undefined) {
ts.lzwz.push(i);
}
else if (ffh.qz.fh == ts.fh) {
break;
}
else {
ts.czwz.push(ffh);
break;
}
}
//右
for (var i = dq + 1 ; i % 9 <= 8 ; i += 1) {
if (i % 9 == 0) break;
var ffh = ts.fang.qp.getdizqz(i);
if (ffh == undefined) {
ts.lzwz.push(i);
}
else if (ffh.qz.fh == ts.fh) {
break;
}
else {
ts.czwz.push(ffh);
break;
}
}
return re;
}
//马
function ms1(ts) {
var dq = ts.dqwz;
var re = ts.lzwz;
if (dq % 9 != 0 && dq != 0 && dq - 18 >= 0 && ts.fang.qp.getdizqz(dq - 9) == undefined) {
re.push(dq - 19);
}
if ((dq + 1) % 9 != 0 && dq + 18 <= 89 && ts.fang.qp.getdizqz(dq + 9) == undefined) {
re.push(dq + 19);
}
if ((dq + 1) % 9 != 0 && dq - 18 >= 0 && ts.fang.qp.getdizqz(dq - 9) == undefined) {
re.push(dq - 17);
}
if (dq % 9 != 0 && dq != 0 && dq + 18 <= 89 && ts.fang.qp.getdizqz(dq + 9) == undefined) {
re.push(dq + 17);
}
if (dq - 9 >= 0 && dq % 9 != 0 && (dq - 1) % 9 != 0 && ts.fang.qp.getdizqz(dq - 1) == undefined) {
re.push(dq - 11);
}
if (dq + 9 <= 89 && (dq + 1) % 9 != 0 && (dq + 2) % 9 != 0 && ts.fang.qp.getdizqz(dq + 1) == undefined) {
re.push(dq + 11);
}
if (dq - 9 >= 0 && (dq + 1) % 9 != 0 && (dq + 2) % 9 != 0 && ts.fang.qp.getdizqz(dq + 1) == undefined) {
re.push(dq - 7);
}
if (dq + 9 <= 89 && dq % 9 != 0 && (dq - 1) % 9 != 0 && ts.fang.qp.getdizqz(dq - 1) == undefined) {
re.push(dq + 7);
}
ts.chiziwz();
return re;
}
//象
function ms2(ts) {
var dq = ts.dqwz;
var re = ts.lzwz;
var fw = {};
if (ts.fh == 0) {
fw = { 47: 1, 51: 1, 63: 1, 67: 1, 71: 1, 83: 1, 87: 1 };
}
else {
fw = { 38: 1, 42: 1, 26: 1, 22: 1, 18: 1, 2: 1, 6: 1 };
}
if ((dq - 20) in fw && ts.fang.qp.getdizqz(dq - 10) == undefined) {
re.push(dq - 20);//左上
}
if ((dq