javascript翻转棋、javascript写的小游戏

最新推荐文章于 2023-10-18 21:42:34 发布

HaQiaME

最新推荐文章于 2023-10-18 21:42:34 发布

阅读量653

点赞数

分类专栏： javascript 文章标签： javascript 翻转棋黑白棋

本文链接：https://blog.csdn.net/HaQiaME/article/details/76356012

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

用js写了个黑白翻转棋的，大家感兴趣的可以直接粘贴就能用。

把下面代码放到txt文件里，文件后缀改成htm直接打开就能用，没有加人机的功能。不过还不错呀！

<!DOCTYPE>
<head>
<style type='text/css'>
.bk{width:74px;height:72px;float:left;}
.w1{background-image: url

(https://img-blog.csdn.net/20170729200234936);width:74px;height:72px;

background-position: center;background-repeat: no-repeat; float:left;}
.w2{background-image: url

(https://img-blog.csdn.net/20170729200243301);width:74px; 

height:72px;background-position: center;background-repeat: no-

repeat; float:left;}
.w3{background-image: url

(https://img-blog.csdn.net/20170729200257714);width:74px; 

height:72px;background-position: center;background-repeat: no-

repeat; float:left;}
.w4{background-image: url

(https://img-blog.csdn.net/20170729200305472);width:74px; 

height:72px;background-position: center;background-repeat: no-

repeat; float:left;}
.b1{background-image: url

(https://img-blog.csdn.net/20170729200204519);width:74px; 

height:72px;background-position: center;background-repeat: no-

repeat; float:left;}
.b2{background-image: url

(https://img-blog.csdn.net/20170729200211343);width:74px; 

height:72px;background-position: center;background-repeat: no-

repeat; float:left;}
.b3{background-image: url

(https://img-blog.csdn.net/20170729200218836);width:74px; 

height:72px;background-position: center;background-repeat: no-

repeat; float:left;}
.b4{background-image: url

(https://img-blog.csdn.net/20170729200226303);width:74px; 

height:72px;background-position: center;background-repeat: no-

repeat; float:left;}
td{padding:0px;}
td:hover{cursor:pointer;}
#start-btn:hover{cursor:pointer;font-size: large; border:2px;}
</style>

</head>
<html>
<body>
<div style='margin:0 auto ;background-image: url

(https://img-blog.csdn.net/20170729200155389); width:602px; 

height:600px;'>
<div style='padding-top:6px; padding-left:6px;'>
<div id='player' value=0/>
<table><tbody id='tb'>
<tr>
<td class='b1' id = '_1-1'></td>
<td class='w1' id = '_1-2'></td>
<td class='w1' id = '_1-3'></td>
<td class='b1' id = '_1-4'></td>
<td class='bk' id = '_1-5'></td>
<td class='bk' id = '_1-6'></td>
<td class='bk' id = '_1-7'></td>
<td class='bk' id = '_1-8'></td>
</tr><tr>
<td class='bk' id = '_2-1'></td>
<td class='bk' id = '_2-2'></td>
<td class='bk' id = '_2-3'></td>
<td class='bk' id = '_2-4'></td>
<td class='bk' id = '_2-5'></td>
<td class='bk' id = '_2-6'></td>
<td class='bk' id = '_2-7'></td>
<td class='bk' id = '_2-8'></td>
</tr><tr>
<td class='bk' id = '_3-1'></td>
<td class='bk' id = '_3-2'></td>
<td class='bk' id = '_3-3'></td>
<td class='bk' id = '_3-4'></td>
<td class='bk' id = '_3-5'></td>
<td class='bk' id = '_3-6'></td>
<td class='bk' id = '_3-7'></td>
<td class='bk' id = '_3-8'></td>
</tr><tr>
<td class='bk' id = '_4-1'></td>
<td class='bk' id = '_4-2'></td>
<td class='bk' id = '_4-3'></td>
<td class='bk' id = '_4-4'></td>
<td class='bk' id = '_4-5'></td>
<td class='bk' id = '_4-6'></td>
<td class='bk' id = '_4-7'></td>
<td class='bk' id = '_4-8'></td>
</tr><tr>
<td class='bk' id = '_5-1'></td>
<td class='bk' id = '_5-2'></td>
<td class='bk' id = '_5-3'></td>
<td class='bk' id = '_5-4'></td>
<td class='bk' id = '_5-5'></td>
<td class='bk' id = '_5-6'></td>
<td class='bk' id = '_5-7'></td>
<td class='bk' id = '_5-8'></td>
</tr><tr>
<td class='bk' id = '_6-1'></td>
<td class='bk' id = '_6-2'></td>
<td class='bk' id = '_6-3'></td>
<td class='bk' id = '_6-4'></td>
<td class='bk' id = '_6-5'></td>
<td class='bk' id = '_6-6'></td>
<td class='bk' id = '_6-7'></td>
<td class='bk' id = '_6-8'></td>
</tr><tr>
<td class='bk' id = '_7-1'></td>
<td class='bk' id = '_7-2'></td>
<td class='bk' id = '_7-3'></td>
<td class='bk' id = '_7-4'></td>
<td class='bk' id = '_7-5'></td>
<td class='bk' id = '_7-6'></td>
<td class='bk' id = '_7-7'></td>
<td class='bk' id = '_7-8'></td>
</tr><tr>
<td class='bk' id = '_8-1'></td>
<td class='bk' id = '_8-2'></td>
<td class='bk' id = '_8-3'></td>
<td class='bk' id = '_8-4'></td>
<td class='bk' id = '_8-5'></td>
<td class='bk' id = '_8-6'></td>
<td class='bk' id = '_8-7'></td>
<td class='bk' id = '_8-8'></td>
</tr>
</tbody></table>
</div>
</div>
<div style='float:right;margin: 20px;font-size: 20px;'>黑子:<font 

id='bf'>2</font></div>
<div style='float:right;margin: 20px;font-size: 20px;'>白子:<font 

id='wf'>2</font></div>
<div style='background-color: green;text-align:center;width: 

90px;border: 1px solid black;margin:20px auto;' id='start-btn'>重新开始

</div>

<script>


function add(el){
if(el.className.charAt(1) < 4){
el.className=el.className.charAt(0) + (Number(el.className.charAt

(1))+1);
setTimeout(arguments.callee, 20, arguments[0]);
} else {el.className = (el.className.charAt(0)=='b'?'w':'b') + "4";del

(el);}
}
function del(el){
if(el.className.charAt(1) > 1){
el.className=el.className.charAt(0) + (Number(el.className.charAt

(1))-1);
setTimeout(arguments.callee, 20, arguments[0]);
} 
}
function change(id){var el = document.getElementById(id); add(el);}




function isEnemy(player,tar){
if (  tar != null 
&& tar.className!='bk' 
&& player.className!=tar.className)
return true;return false;}
function isAble(tar){
var pos_x = parseInt(tar.id.charAt(1));
var pos_y = parseInt(tar.id.charAt(3));
var up = document.getElementById('_' + pos_x + '-' + (pos_y-1));
var down = document.getElementById('_' + pos_x + '-' + (pos_y+1));
var left = document.getElementById('_' + (pos_x-1) + '-' + pos_y);
var right = document.getElementById('_' + (pos_x+1) + '-' + pos_y);
var lu = document.getElementById('_' + (pos_x-1) + '-' + (pos_y-1));
var ru = document.getElementById('_' + (pos_x+1) + '-' + (pos_y-1));
var ld = document.getElementById('_' + (pos_x-1) + '-' + (pos_y+1));
var rd = document.getElementById('_' + (pos_x+1) + '-' + (pos_y+1));
if (isEnemy(tar,up) && isEnemy(tar,down))return false;
if (isEnemy(tar,left) && isEnemy(tar,right))return false;
if (isEnemy(tar,lu) && isEnemy(tar,rd))return false;
if (isEnemy(tar,ld) && isEnemy(tar,ru))return false;
return true;
}
function doEat(pos_x, pos_y, l, c, des){
var i = 1;
while (i < des-1) {
console.log('_'+(pos_x+i*l) + '-'+(pos_y+i*c))
change('_'+(pos_x+i*l) + '-'+(pos_y+i*c));
i++;
}
}
function checkEat(player, l, c){
var pos_x = parseInt(player.id.charAt(1));
var pos_y = parseInt(player.id.charAt(3));
var i = 1;
do{
var tar = document.getElementById('_'+(pos_x+i*l) + '-' + (pos_y+i*c));
i++;
if (!isEnemy(player,tar)){
if (!tar || tar.className == 'bk' || i==2){return false;}
else{doEat(pos_x, pos_y, l, c, i);return true;}
}
}
while (true);
}

function eat(tar){
var i = 0;
if(checkEat(tar,1,0))
i=1;
if(checkEat(tar,1,1))
i=1;
if(checkEat(tar,1,-1))
i=1;
if(checkEat(tar,0,1))
i=1;
if(checkEat(tar,0,-1))
i=1;
if(checkEat(tar,-1,0))
i=1;
if(checkEat(tar,-1,1))
i=1;
if(checkEat(tar,-1,-1))
i=1;
return !!i;
}



function click(event){
var tar = event.target;
if (tar.className != 'bk' && !tar.hasAttribute('data-class')){return;}
if (!eat(tar)) {alert('你不能下这里!!');return;}
var p = document.getElementById('player');
p.value = !p.value;
if (p.value){tar.className='b1';}
else{tar.className='w1';}
if (tar.hasAttribute('data-class')){tar.removeAttribute('data-class');}
setTimeout(changeCount, 200);
}
function changeCount() {
var wf = document.getElementById('wf');
var bf = document.getElementById('bf');
wf.innerText = document.getElementsByClassName('w1').length;
bf.innerText = document.getElementsByClassName('b1').length;
}
function mousemovein(event){
var tar = event.target;
if (tar.className != 'bk'){return;}
tar.setAttribute('data-class',tar.className);
var p = document.getElementById('player');
if (!p.value){tar.className='b1';}
else{tar.className='w1';}
}
function mousemoveout(){
var tar = event.target;
if (!tar.hasAttribute('data-class')){return;}
tar.className=tar.getAttribute('data-class');
tar.removeAttribute('data-class');
}
function reset_init(){
var tds = document.getElementsByTagName('td');
for(var i = 0; i < tds.length; i++){tds[i].className='bk';}
document.getElementById('wf').innerText = '2';
document.getElementById('bf').innerText = '2';
}
function start_init(){
reset_init();
document.getElementById('_4-4').className='b1';
document.getElementById('_4-5').className='w1';
document.getElementById('_5-4').className='w1';
document.getElementById('_5-5').className='b1';
}
(function init(){
var tb = document.getElementById('tb');
tb.onmouseup = click;

var tds = document.getElementsByTagName('td');

for(var i = 0; i < tds.length; i++){
var td = tds[i];
td.onmouseenter = mousemovein;
td.οnmοuseleave=mousemoveout;
}
var sbtn = document.getElementById('start-btn');
if (sbtn.addEventListener) {sbtn.addEventListener('click',start_init);}
else if(sbtn.attachEvent) {sbtn.addEventListener('onclick',start_init);}
else {sbtn.οnclick=start_init;}
start_init();
})();

</script>
</body>
</html>