羊了个羊网页版
Posted 小虎周
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了羊了个羊网页版相关的知识，希望对你有一定的参考价值。
最近羊了个羊火的不得了，利用周末时间实现一个网页版。步骤如下：
1，用reactjs 实现。
2，实现Gameroom类。
3，实现Card类。
4，通过父组件控制子组件通信方式，控制点击事件。
5，通过top，left属性判断是否覆盖。
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Zhou Zhengwei" content="anbangzhiguo@163.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<title>羊了个羊网页版</title>
<style>
.A
background-image: url(https://img0.baidu.com/it/u=2915591120,58539746&fm=253&fmt=auto&app=138&f=JPEG?w=50&h=75);
background-size:cover;
.Bbackground-image: url(https://img2.baidu.com/it/u=1961605168,519023852&fm=253&fmt=auto&app=120&f=JPEG?w=200&h=200);
background-size:cover;
.Cbackground-image: url(https://img1.baidu.com/it/u=1558460227,1600052005&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200);
background-size:cover;
.Dbackground-image: url(https://img0.baidu.com/it/u=1367134673,2529600782&fm=253&fmt=auto&app=120&f=JPEG?w=200&h=200);
background-size:cover;
.Ebackground-image: url(https://img1.baidu.com/it/u=2342405275,30063627&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200);
background-size:cover;
.Fbackground-image: url(https://img2.baidu.com/it/u=794796699,2048913638&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200);
background-size:cover;
.Gbackground-image: url(https://img2.baidu.com/it/u=2804974022,2583629637&fm=253&fmt=auto&app=138&f=JPEG?w=120&h=80);
background-size:cover;
.Hbackground-image: url(https://img1.baidu.com/it/u=961754899,2161050074&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200);
background-size:cover;
.Jbackground-image: url(https://img0.baidu.com/it/u=3372864484,86401414&fm=253&fmt=auto&app=138&f=JPEG?w=160&h=109);
background-size:cover;
.Kbackground-image: url(https://img0.baidu.com/it/u=2447232726,212069368&fm=253&fmt=auto?w=200&h=200);
background-size:cover;
.Lbackground-image: url(https://img2.baidu.com/it/u=3788646889,2975336153&fm=253&fmt=auto?w=200&h=200);
background-size:cover;
.Mbackground-image: url(https://img1.baidu.com/it/u=1035241979,2591366575&fm=253&fmt=auto?w=130&h=170);
background-size:cover;
.Nbackground-image: url(https://img0.baidu.com/it/u=1257446861,475247806&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200);
background-size:cover;
body
background: url(https://img2.baidu.com/it/u=3202063201,1142127465&fm=253&fmt=auto&app=138&f=JPEG?w=254&h=154);
margin: 0px;
padding: 0px;
.header
width: 100%;
height: 50px;
</style>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div class="header">
</div>
<div id="gameroom" style="float:left">
</div>
<div style="float:none"></div>
<div style="float:left;width:110px;font-size:80px;font-weight:900;">
<div style="width:80px;padding-top:80px;">羊了个羊</div>
</div>
</body>
</html>
<script type="text/babel">
class CardSlot extends React.Component
constructor(props)
super(props);
this.state =
slot0:'',
slot1:'',
slot2:'',
slot3:'',
slot4:'',
slot5:'',
slot6:''
;
disCard(s)
if(s.length > 0)
return (<div class=s style=
width:'50px',
height:'75px',
position: 'absolute',
textAlign: 'center',
top: 5,
left: 5,
fontSize:40,
fontWeight:900
>
</div>)
else
return ''
render()
return (
<div style=position: 'absolute',display:'block',bottom: 10,left: 50, width: 500,height: 90,backgroundColor: '#00ff00'>
<div style=display:'inline-block',position: 'absolute',width: 60,height: 90,backgroundColor: 'red',marginLeft:10>
this.disCard(this.state.slot0)
</div>
<div style=display:'inline-block',position: 'absolute',left:70,width: 60,height: 90,backgroundColor: 'red',marginLeft:10>
this.disCard(this.state.slot1)
</div>
<div style=display:'inline-block',position: 'absolute',left:140,width: 60,height: 90,backgroundColor: 'red',marginLeft:10>
this.disCard(this.state.slot2)
</div>
<div style=display:'inline-block',position: 'absolute',left:210,width: 60,height: 90,backgroundColor: 'red',marginLeft:10>
this.disCard(this.state.slot3)
</div>
<div style=display:'inline-block',position: 'absolute',left:280,width: 60,height: 90,backgroundColor: 'red',marginLeft:10>
this.disCard(this.state.slot4)
</div>
<div style=display:'inline-block',position: 'absolute',left:350,width: 60,height: 90,backgroundColor: 'red',marginLeft:10>
this.disCard(this.state.slot5)
</div>
<div style=display:'inline-block',position: 'absolute',left:420,width: 60,height: 90,backgroundColor: 'red',marginLeft:10>
this.disCard(this.state.slot6)
</div>
</div>
);
class GameRoom extends React.Component
constructor(props)
super(props);
this.state =
allCards:this.createCard(),
canClick:true
;
createCard()
let allCards = []
let arr = ['A','B','C','D','E','F','G','H','J','K','L','M','N']
let cardArr = []
for(let i=0;i<141;i+=3)
let c = arr[i%13]
cardArr.push(c)
cardArr.push(c)
cardArr.push(c)
for(let i=0;i<40;i++)
allCards.push(key:(100+i)+'',text:cardArr.splice([Math.floor(Math.random()*cardArr.length)],1),levle:0,parent:'',left:90+parseInt(i/6)*58,top:10+(i%6)*90)
for(let i=40;i<70;i++)
allCards.push(key:(100+i)+'',text:cardArr.splice([Math.floor(Math.random()*cardArr.length)],1),levle:1,parent:'',left:110+parseInt((i-40)/5)*58,top:40+(i%5)*105)
for(let i=70;i<90;i++)
allCards.push(key:(100+i)+'',text:cardArr.splice([Math.floor(Math.random()*cardArr.length)],1),levle:2,parent:'',left:120+parseInt((i-70)/4)*65,top:80+i%4*110)
for(let i=90;i<105;i++)
allCards.push(key:(100+i)+'',text:cardArr.splice([Math.floor(Math.random()*cardArr.length)],1),levle:3,parent:'',left:130+parseInt((i-90)/3)*67,top:125+i%3*120)
for(let i=105;i<141;i++)
allCards.push(key:(100+i)+'cart',text:cardArr.splice([Math.floor(Math.random()*cardArr.length)],1),levle:i%105,parent:'',left:540+i%羊了个羊，但是Python简(li)单(pu)版