羊了个羊网页版

news2025/2/25 15:08:36

最近羊了个羊火的不得了，利用周末时间实现一个网页版。步骤如下：

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;
            }
            .B{background-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;}
            .C{background-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;}
            .D{background-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;}
            .E{background-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;}
            .F{background-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;}
            .G{background-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;}
            .H{background-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;}
            .J{background-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;}
            .K{background-image: url(https://img0.baidu.com/it/u=2447232726,212069368&fm=253&fmt=auto?w=200&h=200);
                background-size:cover;}
            .L{background-image: url(https://img2.baidu.com/it/u=3788646889,2975336153&fm=253&fmt=auto?w=200&h=200);
                background-size:cover;}
            .M{background-image: url(https://img1.baidu.com/it/u=1035241979,2591366575&fm=253&fmt=auto?w=130&h=170);
                background-size:cover;}
            .N{background-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%10*3,top:30+i%105*12})
            }
            return allCards

        }
        
        handleClick(t) {
            let targetLeft = 65+(3*70)
            let diffLeft = targetLeft-this[t].state.left
            let stepLeft = diffLeft*5/(680-this[t].state.top)

            let selectItem,selectIndex
            for(let i=0;i<this.state.allCards.length;i++){
                let item = this.state.allCards[i]
                if(item.key == t){
                    selectItem = item
                    selectIndex = i
                    break
                }
            }

            let haveCover = false;
            for(let i=0;i<this.state.allCards.length;i++){
                let item = this.state.allCards[i]
                if(item.levle > selectItem.levle){
                    if(item.top < selectItem.top+75 && item.top > selectItem.top -75 && item.left < selectItem.left+50 && item.left > selectItem.left -75){
                        haveCover = true;
                    }
                }
            }

            
            if(haveCover) return;
            if(this.state.canClick){
                this.setState(prevState => ({
                    canClick:false
                }));
            }else{
                return;
            }

            this.backInterval = setInterval(()=>{
                if(this[t].state.top >= 680){
                    clearInterval(this.backInterval)
                    this[t].setState(prevState => ({
                        dis: '0'
                    }));                   
                    
                    let allCardsTemp = this.state.allCards
                    allCardsTemp.splice(selectIndex, 1);
                    this.setState(prevState => ({
                        allCards:allCardsTemp,
                        canClick:true
                    })); 

                    let slotnum = {}
                    for(let i=0;i<7;i++){
                        let s = this.cardSlot.state['slot'+i]
                        if(s !=''){
                            if(slotnum[s]){
                                slotnum[s] = slotnum[s]+1
                            }else{
                                slotnum[s] = 1
                            }
                        }
                    }


                    let tt =  selectItem.text
                    if(slotnum[tt]){
                        slotnum[tt] = slotnum[tt]+1
                    }else{
                        slotnum[tt] = 1
                    }
                    console.log(slotnum)

                    let slotState = {}
                    let snum = 0
                    for(let k in slotnum){
                        if(slotnum[k] < 3){
                            slotState['slot'+snum] = k
                            snum++
                            if(slotnum[k]==2){
                                slotState['slot'+snum] = k
                                snum++
                            }
                        }
                    }

                    for(let k = snum;k<7;k++){
                        slotState['slot'+k] = ''
                    }
                    this.cardSlot.setState(prevState => (slotState)); 
                    if(snum == 7){
                        alert('Game Over')
                        location.reload();
                    }  
                }else{
                    this[t].setState(prevState => ({
                        top: this[t].state.top+5,
                        left: this[t].state.left+stepLeft
                    }));
                }
            },10)
        }  

        render() {
            return (
                <div style={{
                    position: 'absolute',
                    display:'block',
                    top:50,
                    bottom: 100,
                    left: 50,
                    width: 650,
                    height: 900
                }} >
                    <CardSlot ref={foo => {this.cardSlot = foo}}/>
                    {
                        this.state.allCards.map((item, index) => {
                            return <Card key={item.key} ref={foo => {this[item.key] = foo}} handleClick={()=>{this.handleClick(item.key)}} name={item.text} top={item.top} left={item.left} dis={'1'} />
                        })
                    }
                    
                </div>
            );
          }
    }

    class Card extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            top:this.props.top,
            left:this.props.left,
            dis:this.props.dis
            };
          this.handleClick = this.props.handleClick;
        }
              
        render() {
          return (
            <div class={this.props.name} style={
                    {
                        width:'50px',
                        height:'75px',
                        position: 'absolute',
                        textAlign: 'center',
                        top: this.state.top,
                        left: this.state.left,
                        fontSize:40,
                        margin:3,
                        fontWeight:900,
                        boxShadow: '20px 20px 20px #000000',
                        border: 'white 4px solid',
                        display:this.state.dis=='1'?'block':'none'
                    }
                } onClick={this.handleClick}>
                
            </div>
          );
        }
      }
      
      ReactDOM.render(
        <GameRoom></GameRoom>,
        document.getElementById('gameroom')
      );
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/405539.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

nvm切换node版本

nvm切换node版本

在实际的前端开发过程中&#xff0c;可能会经常遇见 node.js 的版本问题&#xff0c;不同的项目需要使用不同的 node.js 版本。比如Vue2和Vue3需要的Node版本不一样。 地址&#xff1a;https://github.com/coreybutler/nvm-windows/releases 注意&#xff1a;安装之前必须完…
阅读更多...
ChatGPT初体验——震撼，好用，贾维斯已来

ChatGPT初体验——震撼，好用，贾维斯已来

2022.12.26 大概一个月的使用体验&#xff0c;我觉得chagpt的使用还算远远超出我的想象&#xff0c;可以说只有你想不到的&#xff0c;最近需要写一个基于shell的学生选课系统&#xff0c;但是时间实在是紧张的很&#xff0c;一开始chatgpt是无法接受这么大的要求的&#xff0c…
阅读更多...
js实现数组去重的方式(7种)

js实现数组去重的方式(7种)

目录JS数组去重的方式1.利用Set()Array.from()2.利用两层循环数组的splice方法3.利用数组的indexOf方法4.利用数组的includes方法5.利用数组的filter()indexOf()6.利用Map()7.利用对象JS数组去重的方式 例&#xff1a;将下面数组去除重复元素&#xff08;以多种数据类型为例&a…
阅读更多...
vue开发中，数据更新，但视图不刷新

vue开发中，数据更新，但视图不刷新

我们在开发过程中会碰到数据更新&#xff0c;但是视图并未改变的情况&#xff0c;情况如下&#xff1a; 第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到&#xff1b; 第二种:通过数组下标修改数组中的元素或者手动修改数组的长度,Vue识别不到&#…
阅读更多...
【Javaweb学习笔记】在Eclipse中创建Web项目

【Javaweb学习笔记】在Eclipse中创建Web项目

【Javaweb学习笔记】在Eclipse中创建Web项目 哈喽大家好&#xff0c;这里是Java框架学习笔记专栏第二期 本期内容——在Eclipse中创建Web项目 前期回顾&#xff1a; 第一期——schema约束 笔者还是菜菜&#xff0c;还请大家多多指教呀&#xff01; 文章目录【Javaweb学习笔记】…
阅读更多...
解决onebot提示当前QQ版本过低，请升级到最新版在登录！

解决onebot提示当前QQ版本过低，请升级到最新版在登录！

文章目录前言方法一方法二1️⃣下载文件2️⃣本地运行3️⃣重新启动go-cqHttp4️⃣服务器下载go-cqhttp5️⃣配置gocqhttp6️⃣启动go-cqhttp结语前言 &#x1f947;个人主页&#xff1a;MIKE笔记 &#x1f948;文章专栏&#xff1a;技术教程 &#x1f4e3;TG交流群&#xff1a…
阅读更多...
vue:聊天对话框的实现

vue:聊天对话框的实现

实现效果&#xff1a;不知道怎么录屏 就用图片展示了&#xff0c;实现了聊天框的基础功能&#xff0c;也有一些细节考虑不完全。未输入消息时可发送图片或视频&#xff0c;输入消息后显示发送按钮&#xff0c;保持滚动条在位于底部的最新消息。 实现方式&#xff1a; 1.布局&a…
阅读更多...
React中的setState使用细节和原理解析

React中的setState使用细节和原理解析

文章目录setState使用详解使用setState的原因setState的基本用法setState的异步更新setState获取异步结果setState一定是异步?setState使用详解 前面我们有使用过setState的基本使用, 接下来我们对setState使用进行详细的介绍 使用setState的原因 开发中我们并不能直接通过修…
阅读更多...
vue项目打断点的三种方式

vue项目打断点的三种方式

方式一&#xff1a;使用debugger介绍&#xff1a;js自带的方法优点&#xff1a;简单好用&#xff0c;不需要额外的配置注意&#xff1a;生产环境下需要去掉方式二&#xff1a;使用vsCode插件断点介绍&#xff1a;vscode集成的断点调试&#xff0c;大佬必备优点&#xff1a;减少…
阅读更多...
Nodejs安装及npm配置（超详细）

Nodejs安装及npm配置（超详细）

文章目录一、Node.js 下载二、Node.js 安装node.js简单安装三、Node.js 配置配置npm源关于npm源的更新四、可能遇到的问题1. 直接输入npm 或 npm 命令出错一、Node.js 下载 Node.js官网下载地址 Node.js中文下载地址 本文以 node.js 16.14.2 版本做演示&#xff0c;此版本要…
阅读更多...
vue如何请求后端数据

vue如何请求后端数据

在vue中&#xff0c;我们如何通过请求接口来访问后端的数据呢&#xff1f;在这里简单总结了一个小示例&#xff1a; 主要问题&#xff1a;如果不封装的话&#xff0c;在每次请求的时候都要书写一遍下面的代码&#xff0c;造成代码冗余。 1、在src目录下创建一个utils文件夹&am…
阅读更多...
uniapp h5跳转微信小程序（wx-open-launch-weapp）

uniapp h5跳转微信小程序（wx-open-launch-weapp）

目录 一、注意事项 二、使用步骤 三、调整样式 一、注意事项 微信版本要求为&#xff1a;7.0.12及以上系统版本要求为&#xff1a;iOS 10.3及以上、Android 5.0及以上已认证的服务号&#xff0c;服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。…
阅读更多...
vue项目网页自适应，等比例放大缩小

vue项目网页自适应，等比例放大缩小

同样是&#xff0c;虽然标题写的vue项目适用&#xff0c;但其它前端框架应该也可以。其它框架我没什么经验&#xff0c;可以参考着看看&#xff0c;应该适用。 本文章不涉及第三方插件&#xff0c;纯js。 自适应这个问题&#xff0c;老早以前就有一个解决方式&#xff0c;css中…
阅读更多...
前端实现vue3使用axios调用后端接口

前端实现vue3使用axios调用后端接口

前言&#xff1a;在探索vue3.0的道路上调接口这件事很重要&#xff0c;所以我就把我探索出来的这条道展示出来&#xff0c;为大家提供便利&#xff0c;望喜欢&#xff0c;废话不多说展示&#xff01;&#xff01;&#xff01; 第一步&#xff1a;在src下创建一个http文件夹&am…
阅读更多...
vue-devtools的安装与使用

vue-devtools的安装与使用

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、vue-devtools是什么&#xff1f;二、vue-devtools安装1.下载vue-devtools工具2.安装vue-devtools工具三、vue-devtools的使用总结前言 主要介绍vue-devtool…
阅读更多...
nvm详细安装步骤以及使用（window10系统）

nvm详细安装步骤以及使用（window10系统）

nvm详细安装步骤以及使用 nvm是一个管理nodejs版本的工具。在实际的开发中&#xff0c;有些项目的开发依赖需要低版本的nodejs运行环境&#xff0c;此时我们就需要使用nvm来降低nodejs版本。 1.下载安装nvm&#xff0c;首先安装目录不要有空格和中文&#xff0c;会出现乱码 下…
阅读更多...
若依框架详细使用

若依框架详细使用

目录 &#x1f3f3;‍&#x1f308;若依是用来干什么的❓ &#x1f6a9;技术支持&#xff1a; &#x1f3f3;‍&#x1f308;如何下载❓ &#x1f6a9;官网地址: &#x1f3f3;‍&#x1f308;如何搭建ruoyi环境❓ &#x1f6a9;若依框架的目录结构 &#x1f6a9; 修改配…
阅读更多...
WKHtmltoPdf

WKHtmltoPdf

踩过的坑 请一定要使用下面的这种方式获取系统的可执行命令&#xff0c;否则会报一堆的找不到目录等错误&#xff01;&#xff01;&#xff01; String osname System.getProperty("os.name").toLowerCase();String cmd osname.contains("windows") ? …
阅读更多...
如何运行vue项目(超详细图解）

如何运行vue项目(超详细图解）

&#x1f4d6;本篇超级详细案例截图教学 如何运行别人的vue项目&#xff0c;图片点击可放大仔细看 一、查看node.js版本 Vue环境配置教程 &#xff1a;https://blog.csdn.net/m0_57545353/article/details/124366678 配置完成后分别在cmd中执行node -v查看是否安装成功&…
阅读更多...
js常用的加密/解密方法

js常用的加密/解密方法

1.前言(老司机直接跳过) 为什么js需要加密 谈到加密&#xff0c;大多数人应用场景都在于后端接口的加密签名校验。这种一般都用于服务端与服务端之间的相互调用&#xff0c;避免第三方使用你的接口做违法违规的事情&#xff0c;这种加密校验比较安全&#xff0c;因为没有暴露在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023