0
0

【前端客栈】基于HTML、CSS、JavaScript的羊了个羊静态仿写页面小游戏

🏜哈喽，大家好，我是小浪。前段时间羊了个羊火遍了大江南北，大家是否都通过第二关了呢？哈哈，没关系，既然通不过，那咋们不如自己来做一个这样的羊了个羊的仿写页面，学会了赶紧拿去在同学面前展示展示；OK，接下来，我们开始仿写这种游戏规则模式，写一个我们自己做出来的游戏——🍅果了个果🍅；

💡声明：本游戏只涉及到一个html文件+几张图片即可完成，不要配置其他任何的东西，如果你在寻找简单好运行的代码，那么本文将是您的不二之选。

ed47cb6ef59648d1878ea99e91a67075.gif

🌄那么，学习制作这个游戏之前，你需要掌握前端三剑客的相关知识点：前端客栈。

🎑如果你之前掌握了相关前端的知识点，或者你大概只需要获取这个游戏的源码，知道如何给这个游戏换换背景，换换图片等，那么你可以直接翻到本篇博客最后获取源码即可，每个地方的细节博主都描述的很清楚哈！

📲目录

一、大概游戏思想

📠我们要制作的游戏规则很简单，就是仿照羊了个羊的规则，选取三个相同的图片就可以进行消除，用来放置图片的格子我这里给的是七个，如果填满了七个格子还没有进行消除的话那么游戏就失败了，进行一个"游戏失败"的弹窗提示。

🏟这里博主给的是20*20的方格，也就是可以放置四百个图片，那么图片太小的话我们不太看的清楚，这里我们可以设置成四个方格大小存放一张图片，那样就减少了存放图片的数量，同时游戏的界面也会更加好看，因为图片的尺寸要大一些，看起来也清楚许多。

二、具体实现方法及代码

首先我们需要创建一个坐标系：

  1.         // 坐标系的创建
  2.         let scene = document.querySelector(".scene");
  3.         let obj = {};
  4.         for (let i = 0; i < 20; i++) {
  5.             for (let j = 0; j < 20; j++) {
  6.                 let block = document.createElement("div");
  7.                 block.className = "block";
  8.                 scene.appendChild(block);
  9.                 obj[j + "-" + i] = block;
  10.             }
  11.         }

设置背景：

可以根据自己的喜好来设置喜欢的背景颜色；

0630f01278534d6dab38642d785247b0.png

设置整体坐标系大小：

  1.         .scene {
  2.             width: 500px;
  3.             height: 500px;
  4.             margin: 0 auto;
  5.         }

设置每个格子：

  1.         .block {
  2.             width: 25px;
  3.             height: 25px;
  4.             float: left;
  5.             position: relative;
  6.         }

设置7个格子用来存放选择的卡片：

a9e2112d259c432fa56cbb6a646336e6.png

  1.         .choose {
  2.             width: 357px;
  3.             height: 51px;
  4.             border-top: 1px solid red;
  5.             border-left: 1px solid red;
  6.             margin: 30px auto;
  8.         }

注意这里用来存放卡片的格子我们首先构建的格子的上、左两条边的样式，还需要设置格子的右、下两条边的格式；

  1.         .item {
  2.             width: 50px;
  3.             height: 50px;
  4.             border-right: 1px solid red;
  5.             border-bottom: 1px solid red;
  6.             float: left;
  7.             position: relative;
  9.         }

设置卡片的样式：

  1.         .card {
  2.             width: 50px;
  3.             height: 50px;
  4.             background-color: rgb(23, 228, 43);
  5.             position: absolute;
  6.             left: 0;
  7.             top: 0;
  8.             border-bottom: 3px solid #1cd241;
  9.             box-shadow: 0 0 3px #000;
  10.             background-size: 70%;
  11.             background-position: center;
  12.             background-repeat: no-repeat;
  13.             cursor: pointer;
  14.         }

卡片的背景和底色我们都是可以调的，直接修改background-color：rgb()即可。

5ac3660701774a7c883534e086687b31.png

创建卡片的代码：

  1.        // 创建卡片
  2.         let cardarr = []; //放置所有卡片的数组
  3.         function draw(level = 1) {
  4.             let posarr = [];
  5.             for (let i = 0; i < 20; i++) {
  6.                 posarr.push([]);
  7.                 for (let j = 0; j < 20; j++) {
  8.                     posarr[i][j] = 0;
  9.                 }
  10.             }
  12.             for (let i = level; i < 19 - level; i++) {
  13.                 for (let j = 1; j < 10; j++) {
  14.                     if (Math.random() < 0.2 && check(i, j, posarr)) {
  15.                         posarr[i][j] = 1;
  16.                         posarr[i][18 - j] = 1;
  17.                     }
  18.                 }
  20.             }
  21.             for (let i = 0; i < 20; i++) {
  22.                 for (let j = 0; j < 20; j++) {
  23.                     if (posarr[i][j] === 1) {
  24.                         let card = document.createElement("div");
  25.                         card.className = "card";
  26.                         card.style.zIndex = 10 - level;
  27.                         obj[j + "-" + i].appendChild(card);
  28.                         cardarr.push(card);
  29.                         // if (level > 1) {
  30.                         //     let mask = document.createElement("div");
  31.                         //     mask.className = "mask";
  32.                         //     mask.style.zIndex = 10 - level;
  33.                         //     obj[j + "-" + i].appendChild(mask);
  34.                         // }
  35.                     }
  37.                 }
  39.             }
  40.         }

我们这里设置的七个格子，也就是图片的叠加层数是七层，既然有叠加，所以我们需要渲染叠加的遮罩；

  1.        // 渲染遮罩
  2.         function renderMask() {
  3.             let masks = document.querySelectorAll(".mask");
  4.             for (let i = 0; i < masks.length; i++)
  5.                 masks[i].parentNode.removeChild(masks[i]);
  6.             for (let i = 0; i < cardarr.length; i++) {
  7.                 let item = cardarr[i];
  8.                 let rect = item.getBoundingClientRect();
  9.                 let { x, y } = rect;
  10.                 let one = document.elementFromPoint(x, y);
  11.                 let two = document.elementFromPoint(x + 49, y);
  12.                 let three = document.elementFromPoint(x, y + 49);
  13.                 let four = document.elementFromPoint(x + 49, y + 49);
  14.                 if (!(item.isSameNode(one) && item.isSameNode(two) && item.isSameNode(three) && item.isSameNode(four))) {
  15.                     let mask = document.createElement("div");
  16.                     mask.className = "mask";
  17.                     mask.style.zIndex = getComputedStyle(cardarr[i]).zIndex;
  18.                     cardarr[i].parentNode.appendChild(mask);
  19.                 }
  20.                 cardarr[i].index = i;
  21.             }
  22.         }

style中代码：

  1.         .mask {
  2.             width: 50px;
  3.             height: 50px;
  4.             background-color: #000000ae;
  5.             position: absolute;
  6.             left: 0;
  7.             top: 0;
  8.         }

图片渲染：

  1.         // 图片渲染
  2.         let imgarr = [];
  3.         for (let i = 0; i < cardarr.length / 3; i++) {
  4.             let n = Math.floor(Math.random() * 10);
  5.             imgarr.push(n);
  6.         }
  7.         let allimg = [...imgarr, ...imgarr, ...imgarr];
  8.         allimg.sort(function () {
  9.             if (Math.random() > 0.5) {
  10.                 return 1;
  11.             }
  12.             else {
  13.                 return -1;
  14.             }
  15.         });
  16.         for (let i = 0; i < cardarr.length; i++) {
  17.             cardarr[i].style.backgroundImage = "url(" + allimg[i] + ".png)";
  18.             cardarr[i].n=allimg[i];
  19.         }

触发点击事件：

  1.        // 点击事件
  2.         let choosedarr = [];
  3.         let items = document.querySelectorAll(".item");
  4.         scene.onclick = function (e) {
  5.             if (e.target.className === "card") {
  6.                 let item = e.target;
  7.                 // 删除页面的卡片
  8.                 item.parentNode.removeChild(item);
  9.                 // 从cardarr当中也去进行删除
  10.                 cardarr.splice(item.index, 1);
  11.                 if(cardarr.length===0){
  12.                     alert("游戏成功");
  13.                     location.reload();
  14.                 }
  15.                 // 重新绘制所有的遮罩
  16.                 renderMask();
  17.                 // 将当前被删除的卡片对象添加到choosedarr中
  18.                 if(choosedarr.length===7){
  19.                     alert("游戏失败");
  20.                     location.reload();
  21.                 }
  22.                 choosedarr.push(item);
  23.                 choosedarr.sort((a,b)=>a.n-b.n);
  24.                 let count={};
  25.                 for(let i=0;i<choosedarr.length;i++){
  26.                     if(!count[choosedarr[i].n]){
  27.                         count[choosedarr[i].n]=1;
  28.                     }else{
  29.                         count[choosedarr[i].n]+=1;
  30.                     }
  31.                 }
  32.                 for(let i in count){
  33.                     if(count[i]===3){
  34.                         let length=choosedarr.length;
  35.                         for(let j=0;j<choosedarr.length;j++){
  36.                             if(choosedarr[j].n==i){
  37.                                 choosedarr.splice(j,1);
  38.                                 j--;
  39.                             }
  40.                         }
  41.                     }
  42.                 }
  43.                 // 向item中添加卡片标签
  44.                 for(let i=0;i<items.length;i++){
  45.                     items[i].innerHTML="";
  46.                 }
  47.                 for (let i = 0; i < choosedarr.length; i++) {
  48.                     items[i].appendChild(choosedarr[i]);
  49.                 }
  50.             }
  51.         }

三、运行结果展示

整体样式：

2c0af9018fd64b83b495924378f739ec.png

** 消除展示：**

f33c9c6524d94fdbb03438473dcba0e4.png

失败演示：

3a853980c9dc47deaff1e4fe86b2df14.png

四、完整代码

1、文件设置格式

把ylgy.html文件和10张图片都放到一个文件夹下面，注意图片的格式修改为数字.png；这样才能保证正常运行；

07e5231c2a614ee790d5c4cf36a50f88.png

如果你想修改图片的话，可以自行下载后放在该文件夹下面即可。

源码以及图片素材获取地址github：羊了个羊仿写页面；

源代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>羊了个羊</title>
  9.     <style>
  10.         body {
  11.             background-color: rgb(31, 146, 199);
  12.         }
  14.         .scene {
  15.             width: 500px;
  16.             height: 500px;
  17.             margin: 0 auto;
  18.         }
  20.         .block {
  21.             width: 25px;
  22.             height: 25px;
  23.             float: left;
  24.             position: relative;
  25.         }
  27.         .choose {
  28.             width: 357px;
  29.             height: 51px;
  30.             border-top: 1px solid red;
  31.             border-left: 1px solid red;
  32.             margin: 30px auto;
  34.         }
  36.         .item {
  37.             width: 50px;
  38.             height: 50px;
  39.             border-right: 1px solid red;
  40.             border-bottom: 1px solid red;
  41.             float: left;
  42.             position: relative;
  44.         }
  46.         .card {
  47.             width: 50px;
  48.             height: 50px;
  49.             background-color: rgb(23, 228, 43);
  50.             position: absolute;
  51.             left: 0;
  52.             top: 0;
  53.             border-bottom: 3px solid #1cd241;
  54.             box-shadow: 0 0 3px #000;
  55.             background-size: 70%;
  56.             background-position: center;
  57.             background-repeat: no-repeat;
  58.             cursor: pointer;
  59.         }
  61.         .mask {
  62.             width: 50px;
  63.             height: 50px;
  64.             background-color: #000000ae;
  65.             position: absolute;
  66.             left: 0;
  67.             top: 0;
  68.         }
  69.     </style>
  70. </head>
  72. <body>
  73.     <div class="scene">
  74.     </div>
  75.     <div class="choose">
  76.         <div class="item"></div>
  77.         <div class="item"></div>
  78.         <div class="item"></div>
  79.         <div class="item"></div>
  80.         <div class="item"></div>
  81.         <div class="item"></div>
  82.         <div class="item"></div>
  83.     </div>
  84.     <script>
  85.         // 坐标系的创建
  86.         let scene = document.querySelector(".scene");
  87.         let obj = {};
  88.         for (let i = 0; i < 20; i++) {
  89.             for (let j = 0; j < 20; j++) {
  90.                 let block = document.createElement("div");
  91.                 block.className = "block";
  92.                 scene.appendChild(block);
  93.                 obj[j + "-" + i] = block;
  94.             }
  95.         }
  96.         // 创建卡片
  97.         let cardarr = []; //放置所有卡片的数组
  98.         function draw(level = 1) {
  99.             let posarr = [];
  100.             for (let i = 0; i < 20; i++) {
  101.                 posarr.push([]);
  102.                 for (let j = 0; j < 20; j++) {
  103.                     posarr[i][j] = 0;
  104.                 }
  105.             }
  107.             for (let i = level; i < 19 - level; i++) {
  108.                 for (let j = 1; j < 10; j++) {
  109.                     if (Math.random() < 0.2 && check(i, j, posarr)) {
  110.                         posarr[i][j] = 1;
  111.                         posarr[i][18 - j] = 1;
  112.                     }
  113.                 }
  115.             }
  116.             for (let i = 0; i < 20; i++) {
  117.                 for (let j = 0; j < 20; j++) {
  118.                     if (posarr[i][j] === 1) {
  119.                         let card = document.createElement("div");
  120.                         card.className = "card";
  121.                         card.style.zIndex = 10 - level;
  122.                         obj[j + "-" + i].appendChild(card);
  123.                         cardarr.push(card);
  124.                         // if (level > 1) {
  125.                         //     let mask = document.createElement("div");
  126.                         //     mask.className = "mask";
  127.                         //     mask.style.zIndex = 10 - level;
  128.                         //     obj[j + "-" + i].appendChild(mask);
  129.                         // }
  130.                     }
  132.                 }
  134.             }
  135.         }
  136.         for (let i = 7; i > 0; i--) {
  137.             draw(i);
  138.         }
  139.         // 把多余的卡片删除
  140.         let length = cardarr.length;
  141.         for (let i = 0; i < length % 3; i++) {
  142.             let card = cardarr.pop();
  143.             card.parentNode.removeChild(card);
  144.         }
  145.         function check(i, j, posarr) {
  146.             if (posarr[i][j - 1] || posarr[i - 1][j - 1] || posarr[i - 1][j] || posarr[i - 1][j + 1]) {
  147.                 return false;
  148.             }
  149.             else {
  150.                 return true;
  151.             }
  152.         }
  153.         // scene.getboundingClientRect;
  154.         // scene.isSameElement;
  155.         // 渲染遮罩
  156.         function renderMask() {
  157.             let masks = document.querySelectorAll(".mask");
  158.             for (let i = 0; i < masks.length; i++)
  159.                 masks[i].parentNode.removeChild(masks[i]);
  160.             for (let i = 0; i < cardarr.length; i++) {
  161.                 let item = cardarr[i];
  162.                 let rect = item.getBoundingClientRect();
  163.                 let { x, y } = rect;
  164.                 let one = document.elementFromPoint(x, y);
  165.                 let two = document.elementFromPoint(x + 49, y);
  166.                 let three = document.elementFromPoint(x, y + 49);
  167.                 let four = document.elementFromPoint(x + 49, y + 49);
  168.                 if (!(item.isSameNode(one) && item.isSameNode(two) && item.isSameNode(three) && item.isSameNode(four))) {
  169.                     let mask = document.createElement("div");
  170.                     mask.className = "mask";
  171.                     mask.style.zIndex = getComputedStyle(cardarr[i]).zIndex;
  172.                     cardarr[i].parentNode.appendChild(mask);
  173.                 }
  174.                 cardarr[i].index = i;
  175.             }
  176.         }
  177.         renderMask()
  178.         // 图片渲染
  179.         let imgarr = [];
  180.         for (let i = 0; i < cardarr.length / 3; i++) {
  181.             let n = Math.floor(Math.random() * 10);
  182.             imgarr.push(n);
  183.         }
  184.         let allimg = [...imgarr, ...imgarr, ...imgarr];
  185.         allimg.sort(function () {
  186.             if (Math.random() > 0.5) {
  187.                 return 1;
  188.             }
  189.             else {
  190.                 return -1;
  191.             }
  192.         });
  193.         for (let i = 0; i < cardarr.length; i++) {
  194.             cardarr[i].style.backgroundImage = "url(" + allimg[i] + ".png)";
  195.             cardarr[i].n=allimg[i];
  196.         }
  197.         // 点击事件
  198.         let choosedarr = [];
  199.         let items = document.querySelectorAll(".item");
  200.         scene.onclick = function (e) {
  201.             if (e.target.className === "card") {
  202.                 let item = e.target;
  203.                 // 删除页面的卡片
  204.                 item.parentNode.removeChild(item);
  205.                 // 从cardarr当中也去进行删除
  206.                 cardarr.splice(item.index, 1);
  207.                 if(cardarr.length===0){
  208.                     alert("游戏成功");
  209.                     location.reload();
  210.                 }
  211.                 // 重新绘制所有的遮罩
  212.                 renderMask();
  213.                 // 将当前被删除的卡片对象添加到choosedarr中
  214.                 if(choosedarr.length===7){
  215.                     alert("游戏失败");
  216.                     location.reload();
  217.                 }
  218.                 choosedarr.push(item);
  219.                 choosedarr.sort((a,b)=>a.n-b.n);
  220.                 let count={};
  221.                 for(let i=0;i<choosedarr.length;i++){
  222.                     if(!count[choosedarr[i].n]){
  223.                         count[choosedarr[i].n]=1;
  224.                     }else{
  225.                         count[choosedarr[i].n]+=1;
  226.                     }
  227.                 }
  228.                 for(let i in count){
  229.                     if(count[i]===3){
  230.                         let length=choosedarr.length;
  231.                         for(let j=0;j<choosedarr.length;j++){
  232.                             if(choosedarr[j].n==i){
  233.                                 choosedarr.splice(j,1);
  234.                                 j--;
  235.                             }
  236.                         }
  237.                     }
  238.                 }
  239.                 // 向item中添加卡片标签
  240.                 for(let i=0;i<items.length;i++){
  241.                     items[i].innerHTML="";
  242.                 }
  243.                 for (let i = 0; i < choosedarr.length; i++) {
  244.                     items[i].appendChild(choosedarr[i]);
  245.                 }
  246.             }
  247.         }
  249.     </script>
  250. </body>
  252. </html>

🏖🏖OK，那么今天的前端知识分享就到这里啦，原来前端这么有意思，后续会持续更新，感谢关注；最近也是在做测开+Java方向的面试真题+投递链接，感兴趣的小伙伴可参考->

📑本专栏：大厂直通车！有任何问题可以下方VX联系到博主喔！！

标签： html5 css javascript
本文转载自: https://blog.csdn.net/m0_62426532/article/details/130449554
版权归原作者 小浪学编程 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【前端客栈】基于HTML、CSS、JavaScript的羊了个羊静态仿写页面小游戏”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？