研究了一种玩法 估且就叫落十马吧。
落下十马就算挑战成功哈。点击下面的链接可以玩
https://7072-production-54a8q-1302064826.tcb.qcloud.la/1589537388680.html
image.png
源码
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>落十马游戏</title>
<style type="text/css">
.pieces_none{
width:75px;
height:75px;
border-radius:50px;
border:rgb(78,56,23) double 8px;
background-color:rgb(192,149,106);
margin:auto;text-align:center;
font:75px "楷体";
line-height:75px;text-shadow:0px 0px 2px white;
box-shadow:3px 3px 2px black;
float:left;
margin:10px;
opacity:0;
}
.pieces{
width:75px;
height:75px;
border-radius:50px;
border:rgb(78,56,23) double 8px;
background-color:rgb(192,149,106);
margin:auto;text-align:center;
font:75px "楷体";
line-height:75px;text-shadow:0px 0px 2px white;
box-shadow:3px 3px 2px black;
float:left;
margin:10px;
}
.red{color:rgb(144,11,11);border-color:rgb(144,11,11)}
.black{color:rgb(78,56,23)}
*{
padding: 0;
margin: 0;
border: 0;
}
body {
width: 100%;
height: 100%;
}
body{
width:100%;
height: 100%;
background: url(picture/timg.jpg) no-repeat;
}
#up{
font-size: 25px;
font-family: 幼圆;
color: darkgray;
}
#container{
position: relative;
width: 450px;
height: 450px;
margin: 0 auto;
margin-top: 100px;
border-radius: 1px;
}
#game{
position: absolute;
width: 450px;
height: 450px;
border-radius: 5px;
display: inline-block;
/*background-color: #ffe171;*/
box-shadow: 0 0 10px #ffe171;
margin-top:10px;
margin-bottom:10px;
background:#eee;
background-image:linear-gradient(45deg,#ccc 25%,transparent 0),
linear-gradient(45deg,transparent 75%,#ccc 0),
linear-gradient(45deg,#ccc 25%,transparent 0),
linear-gradient(45deg,transparent 75%,#ccc 0);
background-size:225px 225px;
background-position: 0 0,112.5px 112.5px,112.5px 112.5px,225px 225px;
}
#control{
width: 150px;
height: 450px;
display: inline-block;
float: right;
}
#control p{
height: 25px;
font-size: 20px;
color: #222;
margin-top: 10px;
}
#start{
display: inline-block;
font-size: 28px;
width: 100px;
height: 28px;
background-color: #20a6fa;
color: #ffe171;
text-shadow: 1px 1px 2px #ffe171;
border-radius: 5px;
box-shadow: 2px 2px 5px #4c98f5;
text-align: center;
cursor: pointer;
}
#reset{
display: inline-block;
font-size: 28px;
width: 100px;
height: 28px;
background-color: #20a6fa;
color: #ffe171;
text-shadow: 1px 1px 2px #ffe171;/*字体阴影*/
border-radius: 5px;/*圆角属性*/
box-shadow: 2px 2px 5px #4c98f5;/*盒子阴影*/
text-align: center;/*文字居中*/
cursor: pointer;
}
</style>
</head>
<body>
<div id="up">
<p>游戏规则：</p>
<p>以马走日的规则在棋盘上摆放，看最多能摆下多少个</p>
<p>PS:我能摆十个</p>
</div>
<rowspan id="reset" onclick="reset()">重来</rowspan>
<div id="container">
<div id="game">
<!--游戏区，也就是大DIV方块-->
<div id="d0" class="pieces black" onclick="show(0)">马</div>
<div id="d1" class="pieces black" onclick="show(1)">马</div>
<div id="d2" class="pieces black" onclick="show(2)">马</div>
<div id="d3" class="pieces black" onclick="show(3)">马</div>
<div id="d4" class="pieces black" onclick="show(4)">马</div>
<div id="d5" class="pieces black" onclick="show(5)">马</div>
<div id="d6" class="pieces black" onclick="show(6)">马</div>
<div id="d7" class="pieces black" onclick="show(7)">马</div>
<div id="d8" class="pieces black" onclick="show(8)">马</div>
<div id="d9" class="pieces black" onclick="show(9)">马</div>
<div id="d10" class="pieces black" onclick="show(10)">马</div>
<div id="d11" class="pieces black" onclick="show(11)">马</div>
<div id="d12" class="pieces black" onclick="show(12)">马</div>
<div id="d13" class="pieces black" onclick="show(13)">马</div>
<div id="d14" class="pieces black" onclick="show(14)">马</div>
<div id="d15" class="pieces black" onclick="show(15)">马</div>
</div>
</div>
</body>
<html>
<script type="text/javascript">
//棋子列表 默认隐藏，0:隐藏，1:显示
var values=[
[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]
];
//上一次落子位置
var oldI=-1;
var oldJ=-1;
//统计是否到10个了
var count = 0 ;
//显示棋子，index:位置
function show(index){
var i = parseInt(index/4);
var j = index%4;
if(values[i][j]==1){//当前点击的位置已经有棋子了
return;
}
if(oldI!=-1){//非首次，要进行判断
if(oldI-1==i && oldJ+2==j ||oldI+1==i && oldJ+2==j){
if(oldJ+1<4&&values[oldI][oldJ+1]==1){//蹩马腿的位置已经有棋子了
alert('蹩马腿了')
return;
}
}else if(oldI-1==i && oldJ-2==j ||oldI+1==i && oldJ-2==j){
if(oldJ-1>=0&&values[oldI][oldJ-1]==1){//蹩马腿的位置已经有棋子了
alert('蹩马腿了')
return;
}
}else if(oldI+2==i && oldJ+1==j ||oldI+2==i && oldJ-1==j){
if(oldI+1<4&&values[oldI+1][oldJ]==1){//蹩马腿的位置已经有棋子了
alert('蹩马腿了')
return;
}
}else if(oldI-2==i && oldJ+1==j || oldI-2==i && oldJ-1==j){
if(oldI-1>=0&&values[oldI-1][oldJ]==1){//蹩马腿的位置已经有棋子了
alert('蹩马腿了')
return;
}
} else{
//alert('不符合马走日的规则')
return;
}
//允许跳转 旧的棋子要变色
document.getElementById("d"+(oldI*4+oldJ)).setAttribute("class","pieces black");
}
//落子成功
values[i][j]=1;
oldI=i;
oldJ=j;
document.getElementById("d"+index).setAttribute("class","pieces red");
//判断是否到10个了
count++;
if(count==10){
alert('挑战成功')
}
}
//重置函数
function reset(){
values=[
[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]
];
oldI=-1;
oldJ=-1;
count=0;
for(var i = 0 ;i<16;i++){
document.getElementById("d"+i).setAttribute("class","pieces_none" ); //隐藏
}
}
reset();
</script>
网友评论