小猪佩琪 快乐小鸡 Vue 版

By | 2018/09/22
8 Comments

女儿自从看得懂小猪佩琪，每天不同时段都要看几集才肯罢休，看的时候阻断一切交流，谁和她说话都没反应，看着这么个电视迷，心里很是担心。虽然不得不说，小猪佩琪真好看啊！

里面有个非常蠢萌的“快乐小鸡”的游戏，感觉非常简单，做出来以后能不能有点乐趣呢？诚然我们可以用Pygame呀，Phaser来做，但是Vue的Star数都超React了，为什么不用Vue呢：）

游戏分析

感觉开车以后就是按键盘，里面的小鸡随机下蛋，就是这么简单，拼手速的游戏吧。似乎有记分牌，因为猪爷爷说他要超过猪奶奶的记录…… 还有一个开场动画，就忽略吧~

元素要点

里面一共只有几个画面要素，一只小鸡，蛋，记分牌。似乎过了一段时间后鸡蛋会破裂里面会出现新的小鸡，这个机制商不明确，待2.0再完善。

既然纯Vue不用Canvas，那么我得用CSS或者什么技术把他们画出来。

先说蛋：蛋比较简单，可以用border-radius模拟，虽然它是个上小下大的椭圆形，border-radius可以不是只能画正圆或者圆角矩形的，它的参数最多高达8个！因为说白了，它是指四个角的椭圆曲线，每个椭圆有纵横两个半径，所以就有八个咯。

.egg {
      width: 8vw;
      height: 12vw;
      background: #ff0;
      border-radius: 50% / 60% 60% 40% 40%;
      position: absolute;
}

最终效果差不多这个样子，已经基本接近了，就用它。

再说小鸡：我本来想用为元素的after/before、然后配合shadow什么的来画出小鸡的，首先这个肯定是可行的，因为这只鸡也确实没有多少笔画，但是考虑它有个张嘴和劈叉的动作，纯css的效率可能没那么高，综合考虑我决定用svg来画，这样还可以很自然的用数据来控制它。

分析一下

http://editor.method.ac/

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>Mrs Chik</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <link rel="apple-touch-icon" sizes="256x256" href="icon-256.png" />
  <meta name="HandheldFriendly" content="true" />
  <meta name="mobile-web-app-capable" content="yes" />
  <link rel="shortcut icon" sizes="256x256" href="icon-256.png" />

  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }
    html, body {
      background: #000;
      color: #fff;
      overflow: hidden;
      touch-action: none;
      -ms-touch-action: none;
      height: 100%;
    }
    #app {
      touch-action-delay: none;
      touch-action: none;
      -ms-touch-action: none;
      width: 100%;
      height: 100%;
      position: relative;
    }
    .portrait .egg {
      width: 8vw;
      height: 12vw;
      background: #ff0;
      border-radius: 50% / 60% 60% 40% 40%;
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="app" @touchstart.self="lay($event)" :class="appClass">
    <div class="egg" v-for="(egg, i) in eggs" :style="{top:egg.y+'px',left:egg.x+'px'}"></div>
    <chik></chik>
  </div>

  <script type="text/x-template" id="chik-template">
<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg">
 <g>
 <title>Layer 1</title>
 <path id="svg_4" d="m26.64917,18.07781c0,0 -3.89608,-11.42856 -2.59739,-13.63635c1.29869,-2.2078 4.02596,-2.72728 5.84414,-1.68832c2.07792,1.55844 2.20779,5.97402 2.07793,5.84416c0.12986,0.12986 4.67531,-4.28572 7.66232,-3.89611c3.63636,0.25974 6.62337,2.5974 7.92209,6.36364c0.64933,4.80518 -1.68833,7.14285 -1.81818,7.01298c0.12985,0.12987 -19.09091,0 -19.09091,0z" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#ff0000"/>
 <path id="svg_5" d="m16.5193,26.7791c0,0 -14.28571,-3.76623 -14.41556,-3.8961c0.12986,0.12987 12.0779,9.99999 11.94804,9.87012c0.12986,0.12987 -11.03897,10.90908 -11.03897,10.90908c0,0 11.94804,-3.63636 11.94804,-3.63636" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#ff7f00"/>
 <path id="svg_6" d="m60.41538,38.59727c0,0 4.93506,-1.16883 6.36363,-0.77922c1.42857,0.38961 4.02597,5.06493 3.8961,6.23376c-0.12987,1.16883 -5.06493,-0.25974 -5.19479,-0.38961c0.12986,0.12987 3.24674,5.06493 3.11688,4.93506c0.12986,0.12987 -5.84417,-0.64935 -5.84417,-0.64935c0,0 4.02597,3.63636 2.85714,6.23376c-1.16883,2.5974 -3.24675,2.07792 -3.37661,1.94806c0.12986,0.12987 -7.53248,-5.71429 -7.66233,-5.84415" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#ffff00"/>
 <path id="svg_11" d="m25.99982,57.03882" opacity="0.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
 <path stroke="#000" id="svg_12" d="m27.03878,56.38947c0,0 -8.93939,8.5869 -9.09089,8.44136" opacity="0.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
 <path id="svg_13" d="m14.70112,56.90895c0,0 9.22077,3.11688 9.09092,2.98702c0.12986,0.12987 2.59739,9.61038 2.46753,9.48051" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
 <path id="svg_14" d="m47.2985,56.64921c0,0 6.10389,9.74025 5.97403,9.61039" opacity="0.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
 <path id="svg_15" d="m58.98681,59.11674c0,0 -9.87013,1.16883 -9.99998,1.03897c0.12985,0.12986 -4.28573,8.44155 -4.41558,8.31168" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
 <ellipse stroke="#000" ry="20.2498" rx="22.74978" id="svg_2" cy="36.99805" cx="36.74718" stroke-width="1.5" fill="#ffff00"/>
 <ellipse ry="1.68831" rx="1.49351" id="svg_16" cy="29.7013" cx="27.55845" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
 </g>
</svg>
  </script>

  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

  <script>
    Vue.component('chik', {
      template: '#chik-template',
      data: function() {
        return {};
      },
    });

    var app = new Vue({
      el: '#app',
      data: function() {
        return {
          appClass: '',
          eggs: []
        };
      },
      created: function() {
        window.addEventListener('resize', this.onResize);
        this.onResize();
      },
      methods: {
        lay: function(evt) {
          if (evt.touches) {
            this.eggs.push({x: evt.touches[0].clientX, y: evt.touches[0].clientY});
            return;
          }
          this.eggs.push({x: evt.clientX, y: evt.clientY});
        },
        onResize: function() {
          if (window.screen.width > window.screen.height) {
            this.appClass = 'landscape';
          } else {
            this.appClass = 'portrait'
          }
        }
      }
    });
  </script>
</body>
</html>

唔，最终使用Pixi.js完成了，下次整理一下发出来

8 thoughts on “小猪佩琪 快乐小鸡 Vue 版”

  3. Leon Zou

    更新了耶：——）
    是什么鬼？？
    竟然可以这样写？！

    Reply ↓
  7. zxc

    就出来一个小鸡，按键没反应，请问是什么原因呢

    Reply ↓

发表评论

您的电子邮箱地址不会被公开。