使用前端三剑客实现有趣的小游戏

最新推荐文章于 2024-07-25 15:46:04 发布

ichao66

最新推荐文章于 2024-07-25 15:46:04 发布

阅读量94

点赞数

文章标签： html5 javascript css

本文链接：https://blog.csdn.net/sqdz123/article/details/131602885

版权

使用前端三剑客实现三国英雄归位小游戏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 操作单个元素，布局方式：子元素绝对定位，父元素相对定位
        所有的子元素，left和top都是相对于父元素的左上顶点
        因此每个元素的left和top初始值都不一样
        操作批量元素：
        父元素流式布局flex，子元素相对定位
        每个子元素都是相对于自身的初始位置，
        每个子元素的left和top初始值都是0 */
        .f1,.f2{
            /* 流式布局 */
            display: flex;
            /* 每个子元素均匀分布 */
            justify-content: space-around;
        }
        .f1>img{
            width: 200px;
            height: 300px;
            position: relative;
        }
        .f2{
            margin-top: 100px;
        }
        .f2>div{
            width: 200px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            /* 行高与元素高度一致，则垂直居中 */
            border: 1px solid red;
        }
    </style>

</head>
<body>
    <div class="f1">
        <img src="曹操.jpg" onclick="move(this,0)">
        <img src="貂蝉.webp" onclick="move(this,1)">
        <img src="关羽.webp" onclick="move(this,2)">
        <img src="刘备.jpg" onclick="move(this,3)">
        <img src="刘协.webp" onclick="move(this,4)">
        <img src="孙权.webp" onclick="move(this,5)">
    </div>
    <div class="f2">
        <div>刘协</div>
        <div>曹操</div>
        <div>孙权</div>
        <div>刘备</div>
        <div>貂蝉</div>
        <div>关羽</div>
    </div>
</body>
<script>
    // 定义一个坐标对象，记录当前操作的元素位置
    let pos={x:0,y:0}
    // 定义一个数组，存放6个对象，独立的记录每个对象的运动坐标
    let arr=[{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0}]
    function move(img,i){
        pos=arr[i]
        console.log(img)
        document.onkeydown=function(e){
            switch (e.keyCode){
                case 37:
                    pos.x-=10
                    img.style.left=pos.x+'px'
                    break;
                case 38:
                    pos.y-=10
                    img.style.top=pos.y+'px'
                    break;
                case 40:
                    pos.y+=10
                    img.style.top=pos.y+'px'
                    break;
                case 39:
                    pos.x+=10
                    img.style.left=pos.x+'px'
                    break;
            }
        }
    }
</script>
</html>

通过鼠标点击图片选中，然后使用键盘中的‘↑’，‘↓’，‘←’，‘→’键进行操作，使图片进入到对应的框框中。

投票选美女，选出你心中的NO.1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            display: flex;
            justify-content: center;
        }
        .top>div{
            margin-left: 30px;
            text-align: center;
        }
        .top>div>span{
            color:aqua;
            font-size: large;
        }
        /* 第一个和第三个子元素向下移动 */
        .top>div:nth-child(1),.top>div:nth-child(3){
            margin-top: 30px;
        }
        img{
            width: 200px;
            height: 300px;
            border-radius: 10px;
        }
        img:hover{
            box-shadow: 5px 5px 5px rebeccapurple;
            transform: translate(5px,5px);
        }
        /* 主体部分布局 */
        .main{
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .main>div{
            text-align: center;
            margin-left: 30px;
        }
        .main button{
            width: 90px;
            height: 40px;
            border: none;
            border-radius: 10px;
            background-color: skyblue;
            color: aliceblue;
            font-size: large;
        }
        button:hover{
            box-shadow: 0 8px 5px royalblue;
        }
        button:active{
            transform: translateY(5px);
            box-shadow: 0 8px 5px royalblue;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;color: purple;"></h1>
    <div class="top" id="top">
        <div>
            <img src="imgs/a.webp" alt=""><br>
            <span>榜眼</span><br>
            张三--90
        </div>
        <div>
            <img src="imgs/b.webp" alt=""><br>
            <span>状元</span><br>
            李四--100
        </div>
        <div>
            <img src="imgs/c.jpeg" alt=""><br>
            <span>探花</span><br>
            王五--80
        </div>
    </div>
    <hr>
    <div class="main" id="main">
        <div>
            <img src="imgs/a.webp"><br>
            <span>a--0</span><br>
            <button>投票</button>
        </div>
    </div>
</body>
<script>
    let beauty=[
        {name:'a.webp',num:0},{name:'b.webp',num:0},{name:'c.jpeg',num:0},
        {name:'d.webp',num:0},{name:'e.webp',num:0},{name:'f.webp',num:0},
        {name:'g.webp',num:0},{name:'h.webp',num:0},{name:'i.webp',num:0},
        {name:'j.webp',num:0},{name:'k.webp',num:0},{name:'l.webp',num:0}
    ]
    //根据数组中的数据，自动生成图片到页面
   let main= document.getElementById('main')
    function flushImg(){
        let s=''
        beauty.forEach((e,i)=>{
            s+=
            `<div>
            <img src="imgs/${e.name}"><br>
            <span>${e.name.slice(0,e.name.indexOf('.'))}--${e.num}</span><br>
            <button onclick='vote(${i})'>投票</button>
        </div>`
        })
        main.innerHTML=s
    }
    //调用flushImg函数
    flushImg()
    //投票函数
    function vote(i){
        beauty[i].num++
        //刷新主体(数组中的数据)
        flushImg()
        //更新前三甲
        updateTop3()
    }
    let tops=document.getElementById('top')
    function updateTop3(){
        let beauty2=[...beauty]
        console.log(beauty2)
        beauty2.sort((e1,e2)=>{
            return e2.num-e1.num
        })
        beauty2.slice(0,3)
        tops.innerHTML=
        `<div>
            <img src="imgs/${beauty2[1].name}" alt=""><br>
            <span>榜眼</span><br>
            ${beauty2[1].name.slice(0,beauty2[1].name.indexOf('.'))}--${beauty2[1].num}
        </div>
        <div>
            <img src="imgs/${beauty2[0].name}" alt=""><br>
            <span>状元</span><br>
            ${beauty2[0].name.slice(0,beauty2[0].name.indexOf('.'))}--${beauty2[0].num}
        </div>
        <div>
            <img src="imgs/${beauty2[2].name}" alt=""><br>
            <span>探花</span><br>
            ${beauty2[2].name.slice(0,beauty2[3].name.indexOf('.'))}--${beauty2[2].num}
        </div>`
        
    }
    
</script>
</html>