教你前端三件套实现简易版卡牌游戏

最新推荐文章于 2023-12-05 10:10:28 发布

qq_75222206

最新推荐文章于 2023-12-05 10:10:28 发布

阅读量250

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/qq_75222206/article/details/131520405

版权

游戏介绍

利用好JavaScript，css，html可以实现简易版的卡牌游戏。

卡牌游戏规则如下：

1.每个卡牌对应不同的卡槽，一个卡牌有且仅有唯一的卡槽与其对应

2.通过控制小键盘的上下左右键位实现控制卡牌运动

实现思路

首先构建好卡牌的基本布局。这里推荐使用css中的流式布局，调整好每个卡牌的位置，完成基本框架布局

代码展示：

css部分

<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: 150px;
    }
    .f2>div{
        width:200px;
        height:300px;
        border:1px solid rebeccapurple;
       text-align:center;
       /*行高与元素高度一致，则垂直居中*/
       line-height:300px;
    }
   
 </style>

html部分

<body>
 <div class="f1">
   <img src="手抓饼.jpg" alt="" onclick="move1(this,0)">
        <img src="牛肉面.jpg" alt="" onclick="move1(this,1)">
            <img src="烧烤.jpg" alt="" onclick="move1(this,2)">
       <img src="炒菜.jpg" alt="" onclick="move1(this,3)">
       <img src="牛排.jpg" alt="" onclick="move1(this,4)">
      <img src="饺子.jpg" alt="" onclick="move1(this,5)">
 </div>
 <div class="f2">
    <div>手抓饼</div>
    <div>牛肉面</div>
    <div>烧烤</div>
    <div>炒菜</div>
    <div>牛排</div>
    <div>饺子</div>
 </div>
</body>

然后就是编写JavaScript代码部分了。我们要先定义一个坐标对象，用于记录卡牌初始位置，然后定义一个数组用于存放当前的所有对象运动。设置键盘控制图片移动，选用switch分支实现

js部分

<script>
    //定义一个坐标对象，记录当前操作的元素的位置
   let pos={x:0,y:0}
   //定义一个数组，存放六个对象独立的记录每个对象的运动坐标
   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},{x:0,y:0}]
 function move1(img,i){
    //pos表示当前正在操作的对象
    pos=arr[i]
   console.log(img)
   
   document.onkeydown=function(e){
    switch(e.keyCode){
        case 37:
            console.log('左')
            pos.x-=5
            img.style.left=pos.x+'px'
        break;
        case 38:
            pos.y-=5
            img.style.top=pos.y+'px'
            console.log('上')
        break;
        case 39:
        pos.x+=5
            img.style.left=pos.x+'px'
            console.log('右')
        break;
        case 40:
        pos.y+=5
            img.style.top=pos.y+'px'
            console.log('下')
        break;
    }
   }
 }



 
</script>

实现效果