游戏规则：
红色背面棋子可以翻出红炮，红炮可以隔两个红色棋子或一个黑色棋子落下，落下后成为黑炮，黑炮不可移动。
目标：生成五个黑炮
地址：https://7072-production-54a8q-1302064826.tcb.qcloud.la/1589600506147.html
image.png
源码
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>造五炮游戏</title>
<style type="text/css">
.pieces_none{
width:76px;
height:76px;
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:76px;
height:76px;
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: 1125px;
height: 112.5px;
margin: 0 auto;
margin-top: 100px;
border-radius: 1px;
}
#game{
position: absolute;
width: 1125px;
height: 112.5px;
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;
}
#p{
height: 25px;
font-size: 20px;
color: #222;
margin-top: 10px;
}
#reset{
display: inline-block;
font-size: 28px;
width: 100px;
height: 40px;
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>目标：生成五个黑炮</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>
</div>
</body>
<html>
<script type="text/javascript">
//棋子列表 默认棋子是背面，0:无子,1:背面，2:正面黑炮
var values=[1,1,1,1,1,1,1,1,1,1];
//当前红炮的位置
var redCannonIndex = -1;
//显示棋子，index:位置
function show(index){
if(values[index]==0){
//是空白区域，无效
return;
}else if(values[index]==1){//当前点击的是背面棋子
//判断与红炮位置之间的间隔是否为2
var count = 0;
if(redCannonIndex!=-1){
if(index<redCannonIndex){
for(var i=index;i<=redCannonIndex;i++){
count+=values[i];
}
}else if(redCannonIndex<index){
for(var i=redCannonIndex;i<=index;i++){
count+=values[i];
}
}
}
if(count==4){//是为4
//设置当前位置为黑炮
document.getElementById("d"+index).setAttribute("class","pieces black");
document.getElementById("d"+index).innerHTML = '炮';
values[index]=2;
//将当前红炮设置为无子
document.getElementById("d"+redCannonIndex).setAttribute("class","pieces");
document.getElementById("d"+redCannonIndex).innerHTML = ' ';
document.getElementById("d"+redCannonIndex).style.visibility="hidden";//占位隐藏
values[redCannonIndex]=0
redCannonIndex=-1;
}else{
//将当前红炮显示的文案去掉
if(redCannonIndex!=-1){//存在旧的红炮
document.getElementById("d"+redCannonIndex).setAttribute("class","pieces red");
document.getElementById("d"+redCannonIndex).innerHTML = ' ';
}
//设置当前棋子为红炮
document.getElementById("d"+index).setAttribute("class","pieces red");
document.getElementById("d"+index).innerHTML = '炮';
redCannonIndex=index;
}
}else if(values[index]==2){//当前点击的是正面棋子黑炮
alert('不能移向或操作黑炮')
return;
}
//判断是否到集齐了5个2
var countEnd=0;
for(var i=0;i<values.length;i++){
if(values[i]==2){
countEnd++;
}
}
if(countEnd==5){
alert('挑战成功')
}
}
//重置函数
function reset(){
values=[1,1,1,1,1,1,1,1,1,1];
for(var i = 0 ;i<values.length;i++){
document.getElementById("d"+i).setAttribute("class","pieces red" ); //隐藏
document.getElementById("d"+i).innerHTML = ' ';
document.getElementById("d"+i).style.visibility="visible";//显示
}
}
reset();
</script>
网友评论