devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【JS】原生js实现极简版贪吃蛇，附全部代码_贪吃蛇js代码

作者：weixin_40725706 | 2024-08-19 08:12:23

赞

踩

贪吃蛇js代码

需求分析：

1.小蛇朝着某个方向不断运动 （头部运动 身体也动 每节身体运动的位置是下一节的位置）

2.上下左右能控制小蛇的运动方向

3.随机生成食物

4.碰到食物会增大

5.碰到四周或自己 游戏结束

实现思路：

最关键的就是利用Vue操作数据来改变视图的MVVM思想，我们设定一个数组，里面存放着小蛇每一个节点的全部信息，先改变数组内的数据，再根据数组数据进行dom操作。

1. 小蛇的渲染

设定一个数组，里面存放的是小蛇每节身体的数据，包括id和位置信息，根据这些信息渲染小蛇的dom节点（我这里是一个li作为一节身体），小蛇头部有一个移动方向的额外属性。

  1.        let snake_arr = [
  2.             { id: 0, left: 100, top: 100, move_direction: 'r' },
  3.             { id: 1, left: 80, top: 100 },
  4.             { id: 2, left: 60, top: 100 }]
  5.  
  6.         // 1.根据数组渲染小蛇  为了让小蛇头部在右端，所以最后渲染
  7.         function render_snake(flag = false) {
  8.             if (flag) {
  9.                 // 当添加身体时，先把ul里面的li全部清空再进行渲染
  10.                 // 缺点是这种做法会让transition的效果失效
  11.                 ul_body.innerHTML = ''
  12.             }
  13.  
  14.             // 从后往前 向ul里面添加li标签
  15.             for (let i = snake_arr.length - 1; i >= 0; i--) {
  16.  
  17.                 let li = document.createElement('li')
  18.                 // 第0个是小蛇的头部 多一个属性控制移动方向
  19.                 if (snake_arr[i].id == 0) {
  20.                     li.classList.add('cube', 'head')
  21.                 } else if (snake_arr[i].id == snake_arr.length - 1) {
  22.                     li.innerText = i
  23.                     li.classList.add('cube')
  24.                 }
  25.                 else {
  26.                     li.innerText = ''
  27.                     li.classList.add('cube')
  28.                 }
  29.                 li.style.left = snake_arr[i].left + 'px'
  30.                 li.style.top = snake_arr[i].top + 'px'
  31.  
  32.                 ul_body.append(li)
  33.             }
  34.         }
  35.        render_snake()

2.小蛇的移动

其实是改变小蛇头部的一个属性而已，switchcase获取按键，并将该属性改为对应的值。然后根据小蛇头部位置进行dom操作来移动小蛇的头部。

而身体的移动其实是 上一节的身体位置和下一节身体的位置信息进行了交换，然后重新渲染小蛇身体，因为浏览器执行速度很快，所以看起来就像是小蛇在移动，其实是小蛇先消失，然后重新出现的。

  1. //根据上下左右改变小蛇头部的属性的代码略，就是先获取用户按的是上还是下，是左还是右，然后赋值给一个变量。不过需要注意：当小蛇在水平移动时，再按←或→不进行反应，上下也是同理，防止小蛇移动时原地掉头直接死亡了。
  2.  
  3. // 先改变数组数据，然后重新渲染整条小蛇，渲染的函数可以复用刚才的函数
  4. function snake_move() {
  5.             let d = snake_arr[0].move_direction
  6.  
  7.             /* lis:    [尾 5 4 3 2 1 0 头] 
  8.            snake_arr:  [头 0 1 2 3 4 5 尾]*/
  9.  
  10.             // 如果是操控dom元素的位置的话会比较难 所以直接改变存放小蛇数据的数组
  11.             // 让每一节小蛇的身体都获取下一节的位置 
  12.             for (let i = snake_arr.length - 1; i >= 1; i--) {
  13.                 snake_arr[i].left = snake_arr[i - 1].left
  14.                 snake_arr[i].top = snake_arr[i - 1].top
  15.             }
  16.  
  17.             // 头部单独处理 根据移动方向进行位置变化  这里取到20是因为小蛇每一节身体都是20*20px
  18.             switch (d) {
  19.                 case 'l':
  20.                     snake_arr[0].left -= 20
  21.                     break
  22.                 case 'r':
  23.                     snake_arr[0].left += 20
  24.                     break
  25.                 case 'u':
  26.                     snake_arr[0].top -= 20
  27.                     break
  28.                 case 'd':
  29.                     snake_arr[0].top += 20
  30.                     break
  31.             }
  32.  
  33.             // 数组变动之后，再重新进行渲染 这种方法的优点是代码量比较少 缺点是无法使用transition效果，但是使用过渡效果也会有bug，主要是拐弯时过渡效果会使得小蛇身体出现重影
  34.             render_snake(true)
  35.         }
  36.  
  37.         let auto_move = setInterval(snake_move, 100)

3. 随机生成食物

重点是生成的食物应该和小蛇可以完全重合，所以食物所在的位置和大小必须和小蛇的身体成倍数关系才行。

  1. // 随机在地图上生成食物
  2.         function random_food() {
  3.             // 0 - width/height 还得是20的倍数 这样20px * 20px的小蛇才能和食物完全重合
  4.             let random_left = Math.floor(Math.random() * container.clientWidth / 20)
  5.             let random_top = Math.floor(Math.random() * container.clientHeight / 20)
  6.  
  7.             let food = document.createElement('div')
  8.             food.classList.add('food')
  9.             food.style.left = random_left * 20 + 'px'
  10.             food.style.top = random_top * 20 + 'px'
  11.  
  12.             container.append(food)
  13.         }
  14.  
  15.         random_food()

效果如下：食物就像是在一个个的网格上面，不会出现错位的情况

4.吃到食物身体增加一节

需要使用定时器不断检测小蛇头部的位置，判断其是否与食物重合，重合的话才会执行下一步操作：即增加数组内一个元素，并将其渲染到dom节点中。

  1.  // 吃到食物身体增加1节
  2.         // 获取到指定的某个元素的相对位置
  3.         function get_position(domEle) {
  4.             return [domEle.offsetLeft, domEle.offsetTop]
  5.         }
  6.  
  7.         // 1.吃食物的检测与后续操作
  8.         function eat_food() {
  9.             let test_head_position
  10.             // 获得食物的位置 因为食物是不会动的，所以获取食物的位置只需要获取一次即可
  11.             let food = document.querySelector('.food')
  12.             let [fl, ft] = get_position(food)
  13.  
  14.             // 检测小蛇头部是否与食物的位置重合
  15.             test_head_position = setInterval(() => {
  16.                 // console.log(test_head_position); //用log的频率来检测定时器是否被清除了
  17.  
  18.                 // 小蛇是在不断移动的，所以需要不断重新获取小蛇的位置才行
  19.                 let head = document.querySelector('.snake_body .head')
  20.                 let [hl, ht] = get_position(head)
  21.  
  22.                 if (hl == fl && ht == ft) {
  23.                     // 吃到了食物的时候再清除定时器
  24.                     clearInterval(test_head_position)
  25.                     // console.log('吃到了食物');
  26.                     // 删除被吃掉的食物
  27.                     food.parentElement.removeChild(food)
  28.                     // 随机生成一个新的食物 
  29.                     random_food()
  30.                     // 执行这个函数 以便获取新食物的位置
  31.                     eat_food()
  32.                     // 增加n节身体长度
  33.                     add_body(1)
  34.                 }
  35.             }, 100)
  36.         }
  37.  
  38.         // 2.增加1节身体
  39.         function add_body(n = 1) {
  40.             for (let i = 0; i < n; i++) {
  41.                 let length = snake_arr.length
  42.                 // 直接加在最后一节身体的上面  虽然当时重合在了一起 但是下次移动时，倒数第二个位置会变到倒数第三个cube的位置，倒数第一个位置相当于没变动，就露出来了
  43.                 snake_arr.push({ id: length, left: snake_arr[length - 1].left, top: snake_arr[length - 1].top })
  44.             }
  45.             render_snake(true)
  46.             // console.log(snake_arr)
  47.         }
'
运行

5.检测是否撞到了自己

设定一个定时器，不断执行下面函数，因为数组内存放的有小蛇每一节身体的位置数据，所以只需要遍历数组进行判断即可。

  1. // 检测是否撞到了自己
  2.         function test_body() {
  3.             // 通过小蛇存放的位置来判断头部是否和某一个身体部位重合
  4.             console.log(snake_arr[0].move_direction);
  5.             for (let i = snake_arr.length - 1; i > 0; i--) {
  6.                 if (snake_arr[0].left == snake_arr[i].left && snake_arr[0].top == snake_arr[i].top) {
  7.                     return true
  8.                 }
  9.             }
  10.             return false
  11.         }
'
运行

额外注意：

浏览器在监听键盘按压事件时，灵敏度是很高的，很可能出现同时或几乎同时按下两个按键时，小蛇移动出现原地掉头情况，然后直接死亡，玩家体验非常不好，这个问题我试验了很多次，但是都没有很好的解决，希望评论区有大神可以解决这个问题。以下是我尝试解决的方法：

  1.    // 贪吃蛇要用keyup事件，否则 按住 ← 再按其他的按键，会同时执行这两个按键的事件
  2.         window.addEventListener('keyup', (e) => {
  3.             // console.log(e.key);
  4.             // 1.使用防抖函数来 减少 快速按压两个按键时咬到自己的bug 的发生频率 （改成100ms几乎完全不会触发这个bug）
  5.             // 在小蛇向下移动时，同时按下 → ↑ （先随便按一个 再同时按下相反的按键）就会触发这个bug，其他方向也有这个bug   
  6.             // （bug原因可能是因为在按下→键时，js代码已经改变了小蛇移动的方向 从d变成了r，但是100ms才移动一次，这时候
  7.             // 小蛇还未向右移动，恰巧用户又按下了↑，导致snake_move执行时，小蛇移动方向变成了u，是向上移动的 就触发了这个bug）
  8.             // debounce(e.key)
  9.  
  10.             // 重点是保证永远只有一个事件执行（防抖是只允许最后一个执行，节流是只允许第一个事件执行）
  11.  
  12.             // 2.如果不用防抖 小蛇虽然转向没延迟了 但是这个bug更容易触发了
  13.             test_key(e.key)
  14.  
  15.             // 3.使用节流阀也行，但是其实本质是让节流阀来限制用户的操作频率 （如果在100ms之内按下了两次按键，只有第一次会被执行 第二次无效）
  16.             // test_key(e.key)
  17.  
  18.         })

代码附录：

因为是极简版，所以没有素材图片，直接复制粘贴即可运行

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  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.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.  
  15.         ul {
  16.             list-style: none;
  17.         }
  18.  
  19.         .container {
  20.             width: 1000px;
  21.             height: 800px;
  22.             margin: 10px auto;
  23.             background-color: antiquewhite;
  24.             position: relative;
  25.         }
  26.  
  27.         .food {
  28.             width: 20px;
  29.             height: 20px;
  30.             background-color: lightcoral;
  31.             position: absolute;
  32.         }
  33.  
  34.         /* .snake_body {
  35.             position: relative;
  36.         } */
  37.  
  38.         .snake_body .cube {
  39.             position: absolute;
  40.             width: 20px;
  41.             height: 20px;
  42.             background-color: #bff;
  43.         }
  44.  
  45.         .cube.head {
  46.             background-color: rgb(4, 147, 250);
  47.         }
  48.     </style>
  49. </head>
  50.  
  51. <body>
  52.     <div class="container">
  53.  
  54.         <ul class="snake_body">
  55.             <!-- <li class="cube"></li>
  56.             <li class="cube"></li>
  57.             <li class="cube head"></li> -->
  58.         </ul>
  59.  
  60.     </div>
  61.  
  62.  
  63.     <script>
  64.         const container = document.querySelector('.container')
  65.  
  66.         const ul_body = document.querySelector('.snake_body')
  67.  
  68.         /*需求：
  69.        1.小蛇朝着某个方向不断运动 （头部运动 身体也动 每节身体运动的位置是下一节的位置）
  70.        2.上下左右能控制小蛇的运动方向
  71.        3.随机生成食物
  72.        4.碰到食物会增大
  73.        5.碰到四周或自己 游戏结束
  74.        6.采用vue 操作数据的思想 */
  75.  
  76.         let snake_arr = [
  77.             { id: 0, left: 100, top: 100, move_direction: 'r' },
  78.             { id: 1, left: 80, top: 100 },
  79.             { id: 2, left: 60, top: 100 }]
  80.  
  81.         render_snake()
  82.         // 1.根据数组渲染小蛇  为了让小蛇头部在右，所以最后渲染
  83.         function render_snake(flag = false) {
  84.             if (flag) {
  85.                 // 当添加身体时，先把ul里面的li全部清空再进行渲染
  86.                 // 这种做法会让transition的效果失效
  87.                 ul_body.innerHTML = ''
  88.             }
  89.  
  90.             // 从后往前 向ul里面添加li标签
  91.             for (let i = snake_arr.length - 1; i >= 0; i--) {
  92.  
  93.                 let li = document.createElement('li')
  94.                 // 第0个是小蛇的头部 多一个属性控制移动方向
  95.                 if (snake_arr[i].id == 0) {
  96.                     li.classList.add('cube', 'head')
  97.                 } else if (snake_arr[i].id == snake_arr.length - 1) {
  98.                     li.innerText = i
  99.                     li.classList.add('cube')
  100.                 }
  101.                 else {
  102.                     li.innerText = ''
  103.                     li.classList.add('cube')
  104.                 }
  105.                 li.style.left = snake_arr[i].left + 'px'
  106.                 li.style.top = snake_arr[i].top + 'px'
  107.  
  108.                 ul_body.append(li)
  109.             }
  110.         }
  111.  
  112.         // 2.增加1节身体
  113.         function add_body(n = 1) {
  114.             for (let i = 0; i < n; i++) {
  115.                 let length = snake_arr.length
  116.                 // 直接加在最后一节身体的上面  虽然当时重合在了一起 但是下次移动时，倒数第二个位置会变到倒数第三个cube的位置，倒数第一个位置相当于没变动，就露出来了
  117.                 snake_arr.push({ id: length, left: snake_arr[length - 1].left, top: snake_arr[length - 1].top })
  118.             }
  119.             render_snake(true)
  120.             // console.log(snake_arr)
  121.         }
  122.  
  123.         // 3. 根据头部的方向移动
  124.         function snake_move() {
  125.             let d = snake_arr[0].move_direction
  126.  
  127.             /* lis:    [尾 5 4 3 2 1 0 头] 
  128.            snake_arr:  [头 0 1 2 3 4 5 尾]*/
  129.  
  130.             // 如果是操控dom元素的位置的话会比较难 所以直接改变存放小蛇数据的数组
  131.             // 让每一节小蛇的身体都获取下一节的位置 
  132.             for (let i = snake_arr.length - 1; i >= 1; i--) {
  133.                 snake_arr[i].left = snake_arr[i - 1].left
  134.                 snake_arr[i].top = snake_arr[i - 1].top
  135.             }
  136.  
  137.             // 头部单独处理 根据移动方向进行位置变化  这里取到20是因为小蛇每一节身体都是20*20px
  138.             switch (d) {
  139.                 case 'l':
  140.                     snake_arr[0].left -= 20
  141.                     break
  142.                 case 'r':
  143.                     snake_arr[0].left += 20
  144.                     break
  145.                 case 'u':
  146.                     snake_arr[0].top -= 20
  147.                     break
  148.                 case 'd':
  149.                     snake_arr[0].top += 20
  150.                     break
  151.             }
  152.  
  153.             // 数组变动之后，再重新进行渲染 这种方法的优点是代码量比较少 缺点是无法使用transition效果，但是使用过渡效果也会有bug，主要是拐弯时过渡效果会使得小蛇身体出现重影
  154.             render_snake(true)
  155.         }
  156.  
  157.         let auto_move = setInterval(snake_move, 100)
  158.  
  159.         // 4.按键改变方向 其实是改变数组中head的属性值，然后移动时是看属性值进行移动的
  160.  
  161.         // 节流阀的做法：定义lock
  162.         let lock = false
  163.         // 判断一下是否和正在移动的方向相反 如果是的话不对用户的操作作出反应
  164.         function test_key(key) {
  165.             if (!lock) {
  166.                 lock = true
  167.                 // console.log('我执行了');
  168.                 let d = snake_arr[0].move_direction
  169.                 // 判断一下按压的key是水平的还是垂直的
  170.                 let key_type = 'vertical'
  171.                 if (key == 'ArrowLeft' || key == 'ArrowRight') {
  172.                     key_type = 'level'
  173.                 } else {
  174.                     key_type = 'vertical'
  175.                 }
  176.  
  177.                 // 如果用户想让小蛇水平移动 且此时小蛇已经是水平移动状态了 那么就不做操作
  178.                 if (key_type == 'level' && (d == 'r' || d == 'l')) {
  179.                     // console.log('小蛇正在水平移动');
  180.                 } else if (key_type == 'vertical' && (d == 'u' || d == 'd')) {
  181.                     // console.log('小蛇正在垂直移动');
  182.                 } else {
  183.                     key_change_direction(key)
  184.                 }
  185.                 setTimeout(() => {
  186.                     lock = false
  187.                 }, 50)
  188.             }
  189.         }
  190.         // 根据按键改变小蛇的头部方向
  191.         function key_change_direction(key) {
  192.  
  193.             switch (key) {
  194.                 case 'ArrowLeft':
  195.                     snake_arr[0].move_direction = 'l'
  196.                     break
  197.                 case 'ArrowRight':
  198.                     snake_arr[0].move_direction = 'r'
  199.                     break
  200.                 case 'ArrowUp':
  201.                     snake_arr[0].move_direction = 'u'
  202.                     break
  203.                 case 'ArrowDown':
  204.                     snake_arr[0].move_direction = 'd'
  205.                     break
  206.                 default:
  207.                     console.log(key);
  208.             }
  209.  
  210.  
  211.         }
  212.  
  213.         let timer = null
  214.         function debounce(key) {
  215.             if (timer) {
  216.                 // console.log('已经有了一个定时器:' + timer);
  217.                 clearTimeout(timer)
  218.             }
  219.             timer = setTimeout(() => {
  220.                 test_key(key)
  221.             }, 50)
  222.         }
  223.  
  224.         // 贪吃蛇要用keyup事件，否则 按住 ← 再按其他的按键，会同时执行这两个按键的事件
  225.         window.addEventListener('keyup', (e) => {
  226.             // console.log(e.key);
  227.             // 1.使用防抖函数来 减少 快速按压两个按键时咬到自己的bug 的发生频率 （改成100ms几乎完全不会触发这个bug）
  228.             // 如果把211行代码改成0，在 小蛇向下移动时，同时按下 → ↑ （先随便按一个 再同时按下相反的按键）就会触发这个bug，其他方向也有这个bug   
  229.             // （bug原因可能是因为在按下→键时，js代码已经改变了小蛇移动的方向 从d变成了r，但是100ms才移动一次，这时候
  230.             // 小蛇还未向右移动，恰巧用户又按下了↑，导致snake_move执行时，小蛇移动方向变成了u，是向上移动的 就触发了这个bug）
  231.             // debounce(e.key)
  232.  
  233.             // 重点是保证永远只有一个事件执行（防抖是只允许最后一个执行，节流是只允许第一个事件执行）
  234.  
  235.             // 2.如果不用防抖 小蛇虽然转向没延迟了 但是这个bug更容易触发了
  236.             test_key(e.key)
  237.  
  238.             // 3.使用节流阀也行，但是其实本质是让节流阀来限制用户的操作频率 （如果在100ms之内按下了两次按键，只有第一次会被执行 第二次无效）
  239.             // test_key(e.key)
  240.  
  241.         })
  242.  
  243.         // 5.随机在地图上生成食物
  244.         function random_food() {
  245.             // 0 - width/height 还得是20的倍数 这样20px * 20px的小蛇才能和食物完全重合
  246.             let random_left = Math.floor(Math.random() * container.clientWidth / 20)
  247.             let random_top = Math.floor(Math.random() * container.clientHeight / 20)
  248.  
  249.             let food = document.createElement('div')
  250.             food.classList.add('food')
  251.             food.style.left = random_left * 20 + 'px'
  252.             food.style.top = random_top * 20 + 'px'
  253.  
  254.             container.append(food)
  255.         }
  256.  
  257.         random_food()
  258.         // 6.吃到食物身体增加1节
  259.  
  260.         // 获取到指定元素的相对位置
  261.         function get_position(domEle) {
  262.             return [domEle.offsetLeft, domEle.offsetTop]
  263.         }
  264.  
  265.         // 吃食物的检测与后续操作
  266.         function eat_food() {
  267.             let test_head_position
  268.             // 获得食物的位置 因为食物是不会动的，所以获取食物的位置只需要获取一次即可
  269.             let food = document.querySelector('.food')
  270.             let [fl, ft] = get_position(food)
  271.  
  272.             // 检测小蛇头部是否与食物的位置重合
  273.             test_head_position = setInterval(() => {
  274.                 // console.log(test_head_position); //用log的频率来检测定时器是否被清除了
  275.  
  276.                 // 小蛇是在不断移动的，所以需要不断重新获取小蛇的位置才行
  277.                 let head = document.querySelector('.snake_body .head')
  278.                 let [hl, ht] = get_position(head)
  279.  
  280.                 if (hl == fl && ht == ft) {
  281.                     // 吃到了食物的时候再清除定时器
  282.                     clearInterval(test_head_position)
  283.                     // console.log('吃到了食物');
  284.                     // 删除被吃掉的食物
  285.                     food.parentElement.removeChild(food)
  286.                     // 随机生成一个新的食物 
  287.                     random_food()
  288.                     // 执行这个函数 以便获取新食物的位置
  289.                     eat_food()
  290.                     // 增加n节身体长度
  291.                     add_body(1)
  292.                 }
  293.             }, 100)
  294.         }
  295.  
  296.         eat_food()
  297.  
  298.         // 7.增加失败条件
  299.         let container_w = container.offsetWidth
  300.         let container_h = container.offsetHeight
  301.  
  302.         let test_failue = setInterval(() => {
  303.  
  304.             // 跑出圈外判负
  305.             if (snake_arr[0].left >= container_w || snake_arr[0].left < 0 || snake_arr[0].top >= container_h || snake_arr[0].top < 0) {
  306.                 // location.reload()
  307.                 // alert('碰壁了！')
  308.                 // 不清除定时器的话会一直alert很多遍 但是如果把reload放到alert上面就不用清除定时器了
  309.                 clearInterval(test_failue)
  310.                 clearInterval(auto_move)
  311.             }
  312.             // 碰到自己的身体也判负
  313.             else if (test_body()) {
  314.                 // location.reload()
  315.                 // alert('咬着自己了！')
  316.                 clearInterval(test_failue)
  317.                 clearInterval(auto_move)
  318.             }
  319.             // 胜利条件 没有写
  320.             // else if(){
  321.  
  322.             // }
  323.  
  324.         }, 100)
  325.  
  326.         // 检测是否撞到了自己
  327.         function test_body() {
  328.             // let cubes = document.querySelectorAll('.snake_body .cube')
  329.             // let head = document.querySelector('.snake_body .head')
  330.             // let [hl, ht] = get_position(head)
  331.             // for (let i = 0; i < cubes.length - 1; i++) {
  332.             //     let [bl, bt] = get_position(cubes[i])
  333.             //     if (hl == bl && ht == bt) {
  334.             //         return true
  335.             //     }
  336.             // }
  337.             // 没有问题
  338.             // return false
  339.  
  340.             // 通过小蛇存放的位置来判断头部是否和某一个身体部位重合
  341.             console.log(snake_arr[0].move_direction);
  342.             for (let i = snake_arr.length - 1; i > 0; i--) {
  343.                 if (snake_arr[0].left == snake_arr[i].left && snake_arr[0].top == snake_arr[i].top) {
  344.                     return true
  345.                 }
  346.             }
  347.             return false
  348.         }
  349.     </script>
  350. </body>
  351.  
  352. </html>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/1001433
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号