<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>你敢和我比嘛</title>
<link rel="icon" href="image/logo.ico" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
body {
background: url(image/grass.jpg);
}
#outer {
width: 575px;
height: 574px;
margin: 20px auto;
position: relative;
}
#outer .qipan {
width: 575px;
height: 574px;
}
#black {
width: 91px;
height: 71px;
position: absolute;
top: 260px;
left: -105px;
}
#white {
width: 91px;
height: 71px;
position: absolute;
top: 260px;
right: -105px;
}
#black img, #white img {
width: 91px;
height: 71px;
}
#myborder {
width: 545px;
height: 545px;
position: absolute;
top: 13px;
left: 14px;
cursor: auto;
}
#myborder img {
width: 20px;
height: 20px;
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div id="outer">
<img class="qipan" src="image/qipan.jpg" />
<div id="myborder"></div>
<div id="black">
<img src="image/blackqizi.png" />
</div>
<div id="white">
<img src="image/whiteqizi.png" />
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function (){
var outer = document.getElementById('outer');
var arr = new Array(); //先声明一维
for(var i = 0; i < 22; i++){ //一维长度为10
arr[i] = new Array(); //在声明二维
for(var j = 0; j < 22; j++){ //二维长度为20
arr[i][j] = 0;
}
}
var black = document.getElementById('black');
var white = document.getElementById('white');
var myborder = document.getElementById('myborder');
var x = 0, y = 0, imgnum = 0, qizinum = 0;
function click(qizi_cate,qizi_color){
myborder.onmousemove = function(ev){
myborder.style.cursor='pointer';
var event = ev||window.event;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
var mousex = event.clientX + scrollleft;
var mousey = event.clientY + scrolltop;
var lengthx = mousex-myborder.offsetLeft-outer.offsetLeft;
var lengthy = mousey-myborder.offsetTop-outer.offsetTop;
if (lengthx % 32 <= 16) {
x = parseInt(lengthx / 32);
} else{
x = parseInt(lengthx / 32) + 1;
};
if (lengthy % 32 <= 16) {
y = parseInt(lengthy / 32);
} else{
y = parseInt(lengthy / 32) + 1;
};
myborder.onclick = function(){
if (arr[x][y] == 0) {
qizinum++;
var newimg = document.createElement('img');
newimg.src = 'image/' + qizi_color + '.png';
myborder.appendChild(newimg);
var myimg = myborder.getElementsByTagName('img')[imgnum];
var m = 32 * x - 10;
var n = 32 * y - 10;
myimg.style.left = m + 'px';
myimg.style.top = n + 'px';
imgnum++;
arr[x][y] = qizi_cate; //qizi_cate=1 棋子为黑棋；qizi_cate=2 棋子为白棋
/***判断输赢***/
var checkleft = 0;
var checktop = 0;
var countiue_num = 0;
/***判断x轴方向***/
if (x > 4) {
checkleft = x - 4;
}
for (var i = checkleft; i <= x + 4; i++) {
if (arr[checkleft][y] == qizi_cate) {
winner(); //判断当前所下棋子一方是否赢得游戏
}else{
countiue_num=0;
};
checkleft++;
};
/***判断y轴方向***/
countiue_num = 0;
if (y > 4) {
checktop = y - 4;
}
for (var i = checktop; i <= y + 4; i++) {
if (arr[x][checktop] == qizi_cate) {
winner();
}else{
countiue_num = 0;
};
checktop++;
};
/***判断左上到右下轴方向***/
countiue_num = 0;
var new_x = 0, new_y = 0;
if (x > 4 && y > 4) {
new_x = x - 4;
new_y = y - 4;
} else if(x < 4 && y > 4){
new_y = y - x;
} else if (x > 4 && y < 4) {
new_x = x - y;
} else if(x < y < 4){
new_y = y - x;
} else if(y < x < 4){
new_x = x - y;
};
for (var i = new_x; i <= x + 4; i++) {
if (arr[new_x][new_y] == qizi_cate) {
winner();
}else{
countiue_num = 0;
};
new_x++;
new_y++;
};
/**判断左下到右上轴方向***/
countiue_num = 0;
var new_x1 = 0, new_y1 = 0;
if (x<4) {
new_x1 = 0;
new_y1 = y + x;
}else{
new_x1 = x - 4;
new_y1 = y + 4;
}
for (var i = new_x1; i <= x + 4; i++) {
if (arr[new_x1][new_y1] == qizi_cate) {
if (new_y1 < 0) {
return;
};
winner();
}else{
countiue_num = 0;
};
new_x1++;
new_y1--;
if (new_y1 < 0) {
return;
};
};
} else{
alert("此处已有棋子了哦！");
};
if (qizinum >= 324) {
alert("平局");
window.location.reload();
};
function winner(){
countiue_num++;
if (countiue_num == 5) {
if (qizi_cate == 1) {
alert("黑棋获胜！");
window.location.reload();
return;
}else if (qizi_cate == 2) {
alert("白棋获胜！");
window.location.reload();
return;
};
};
}
}
}
}
black.onclick = function(){
click(1,"black");
}
white.onclick = function(){
click(2,"white");
}
}
</script>
</html>
原生js－五子棋.zip （13个子文件） 
原生js－五子棋 css 
.DS_Store 6KB reset.css 702B image logo.ico 42KB
white.png 3KB blackqizi.png 53KB
bac.jpg 8KB .DS_Store 6KB whiteqizi.png 54KB grass.jpg 26KB qipan.jpg 78KB black.png 3KB .DS_Store 10KB
wuziqi.html 5KB资源评论
小懒HH
- 粉丝: 1
- 资源: 1
