rebuilding site 2022年12月 6日 23:27:27

darjun · Dec 6, 2022 · 40c0541 · 40c0541
1 parent f0b17cd
commit 40c0541
Show file tree

Hide file tree

Showing 13 changed files with 22 additions and 38 deletions.
diff --git a/2022/11/15/godailylib/ebiten1/index.html b/2022/11/15/godailylib/ebiten1/index.html
@@ -1131,11 +1131,7 @@ <h2 id="移动飞船">移动飞船</h2>
 </span></span></code></pre></td></tr></table>
 </div>
 </div><p>好了，现在可以运行程序了<code>go run .</code>，效果如下：</p>
-
-  <div class="video">
-    <video src="/img/in-post/godailylib/ebiten10.mp4" allowfullscreen autoplay loop></video>
-  </div>
-
+<p><img src="/img/in-post/godailylib/ebiten10.gif#center" alt=""></p>
 <p>注意到，目前有两个问题：</p>
 <ul>
 <li>移动太慢</li>
@@ -1224,11 +1220,7 @@ <h2 id="移动飞船">移动飞船</h2>
 </span></span></code></pre></td></tr></table>
 </div>
 </div><p>运行，是不是快了很多呢？</p>
-
-  <div class="video">
-    <video src="/img/in-post/godailylib/ebiten11.mp4" allowfullscreen autoplay loop></video>
-  </div>
-
+<p><img src="/img/in-post/godailylib/ebiten11.gif#center" alt=""></p>
 <h2 id="总结">总结</h2>
 <p>本文介绍了2D游戏开发库ebiten的基本使用，并开始开发一个外星人入侵的游戏（1/3），目前只能在屏幕上移动飞船，下篇文章继续完成剩下的内容。</p>
 <p>大家如果发现好玩、好用的 Go 语言库，欢迎到 Go 每日一库 GitHub 上提交 issue😄</p>

diff --git a/2022/11/18/godailylib/ebiten2/index.html b/2022/11/18/godailylib/ebiten2/index.html
@@ -450,7 +450,7 @@ <h2 id="限制飞船的活动范围">限制飞船的活动范围</h2>
 </span></span></code></pre></td></tr></table>
 </div>
 </div><p>运行结果如下：</p>
-<p><img src="/img/in-post/godailylib/ebiten13.mp4" alt=""></p>
+<p><img src="/img/in-post/godailylib/ebiten13.gif" alt=""></p>
 <h2 id="发射子弹">发射子弹</h2>
 <p>我们不用另外准备子弹的图片，直接画一个矩形就ok。为了可以灵活控制，我们将子弹的宽、高、颜色以及速率都用配置文件来控制：</p>
 <div class="highlight"><div class="chroma">
@@ -663,7 +663,7 @@ <h2 id="发射子弹">发射子弹</h2>
 </span></span></code></pre></td></tr></table>
 </div>
 </div><p>运行：</p>
-<p><img src="/img/in-post/godailylib/ebiten14.mp4" alt=""></p>
+<p><img src="/img/in-post/godailylib/ebiten14.gif" alt=""></p>
 <p>目前有两个问题：</p>
 <ul>
 <li>无法一边移动一边发射，仔细看看<code>Input.Update</code>方法中的代码，你能发现什么问题码？</li>
@@ -736,7 +736,7 @@ <h2 id="发射子弹">发射子弹</h2>
 </span></span></code></pre></td></tr></table>
 </div>
 </div><p>再次运行：</p>
-<p><img src="/img/in-post/godailylib/ebiten15.mp4" alt=""></p>
+<p><img src="/img/in-post/godailylib/ebiten15.gif" alt=""></p>
 <p>数量好像被限制了，但是不是我们配置的10。原来<code>Input.Update()</code>的调用间隔太短了，导致我们一次space按键会发射多个子弹。我们可以控制两个子弹之间的时间间隔。同样用配置文件来控制（单位毫秒）：</p>
 <div class="highlight"><div class="chroma">
 <table class="lntable"><tr><td class="lntd">
@@ -805,7 +805,7 @@ <h2 id="发射子弹">发射子弹</h2>
 </span></span></code></pre></td></tr></table>
 </div>
 </div><p>运行：</p>
-<p><img src="/img/in-post/godailylib/ebiten16.mp4" alt=""></p>
+<p><img src="/img/in-post/godailylib/ebiten16.gif" alt=""></p>
 <p>又出现了一个问题，10个子弹飞出屏幕外之后还是不能发射子弹。我们需要把离开屏幕的子弹删除。这适合在<code>Game.Update</code>函数中做：</p>
 <div class="highlight"><div class="chroma">
 <table class="lntable"><tr><td class="lntd">
@@ -845,7 +845,7 @@ <h2 id="发射子弹">发射子弹</h2>
 </span></span></code></pre></td></tr></table>
 </div>
 </div><p>再次运行：</p>
-<p><img src="/img/in-post/godailylib/ebiten17.mp4" alt=""></p>
+<p><img src="/img/in-post/godailylib/ebiten17.gif" alt=""></p>
 <h2 id="外星人来了">外星人来了</h2>
 <p>外星人图片如下：</p>
 <p><img src="/img/in-post/godailylib/alien.png#center" alt=""></p>
@@ -1069,7 +1069,7 @@ <h2 id="外星人来了">外星人来了</h2>
 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span>
 </span></span></code></pre></td></tr></table>
 </div>
-</div><p><img src="/img/in-post/godailylib/ebiten19.mp4#center" alt=""></p>
+</div><p><img src="/img/in-post/godailylib/ebiten19.gif#center" alt=""></p>
 <h2 id="射击">射击！！</h2>
 <p>当前子弹碰到外星人直接穿过去了，我们希望能击杀外星人。这需要检查子弹和外星人之间的碰撞。我们新增一个文件collision.go，并编写检查子弹与外星人是否碰撞的函数。这里我采用最直观的碰撞检测方法，即子弹的4个顶点只要有一个位于外星人矩形中，就认为它们碰撞。</p>
 <div class="highlight"><div class="chroma">
@@ -1184,7 +1184,7 @@ <h2 id="射击">射击！！</h2>
 </span></span></code></pre></td></tr></table>
 </div>
 </div><p>注意将碰撞检测放在位置更新之后。运行：</p>
-<p><img src="/img/in-post/godailylib/ebiten20.mp4#center" alt=""></p>
+<p><img src="/img/in-post/godailylib/ebiten20.gif#center" alt=""></p>
 <h2 id="增加主界面和结束界面">增加主界面和结束界面</h2>
 <p>现在一旦运行程序，外星人们就开始往下掉了。我们想要增加一个按下空格键才开始的功能，并且游戏结束之后，我们也希望能显示一个Game Over的界面。首先，我们定义几个常量，表示游戏当前所处的状态：</p>
 <div class="highlight"><div class="chroma">
@@ -1702,7 +1702,7 @@ <h2 id="判断游戏胜负">判断游戏胜负</h2>
 </span></span></code></pre></td></tr></table>
 </div>
 </div><p>注意，为了下次游戏能顺序进行，这里需要清楚所有的子弹和外星人。运行：</p>
-<p><img src="/img/in-post/godailylib/ebiten21.mp4#center" alt=""></p>
+<p><img src="/img/in-post/godailylib/ebiten21.gif#center" alt=""></p>
 <h2 id="总结">总结</h2>
 <p>本文接着上篇文章，介绍了发射子弹，检测碰撞，增加主界面和游戏结束界面等内容。至此一个简答的游戏就做出来了。可以看出使用ebitengine做一个游戏还是很简单的，非常推荐尝试呢！上手之后，建议看看官方仓库examples目录中的示例，会非常有帮助。</p>
 <p>大家如果发现好玩、好用的 Go 语言库，欢迎到 Go 每日一库 GitHub 上提交 issue😄</p>

diff --git a/2022/11/23/godailylib/ebiten2/index.html b/2022/11/23/godailylib/ebiten2/index.html
@@ -594,7 +594,7 @@ <h2 id="打包资源">打包资源</h2>
 </div><p>打开浏览器输入地址：localhost:8080/wasm_exec.html。</p>
 <p><img src="/img/in-post/godailylib/ebiten25.png#center" alt=""></p>
 <p>点击run按钮即可愉快地玩耍啦！</p>
-<p><img src="/img/in-post/godailylib/ebiten26.mp4#center" alt=""></p>
+<p><img src="/img/in-post/godailylib/ebiten26.gif#center" alt=""></p>
 <h2 id="项目的不足">项目的不足</h2>
 <p>到目前为止，我们的游戏基本上可玩，但是还有很多的不足：</p>
 <ul>

diff --git a/img/in-post/godailylib/ebiten10.gif b/img/in-post/godailylib/ebiten10.gif
diff --git a/img/in-post/godailylib/ebiten11.gif b/img/in-post/godailylib/ebiten11.gif
diff --git a/img/in-post/godailylib/ebiten13.gif b/img/in-post/godailylib/ebiten13.gif
diff --git a/img/in-post/godailylib/ebiten15.gif b/img/in-post/godailylib/ebiten15.gif
diff --git a/img/in-post/godailylib/ebiten16.gif b/img/in-post/godailylib/ebiten16.gif
diff --git a/img/in-post/godailylib/ebiten17.gif b/img/in-post/godailylib/ebiten17.gif
diff --git a/img/in-post/godailylib/ebiten19.gif b/img/in-post/godailylib/ebiten19.gif
diff --git a/img/in-post/godailylib/ebiten20.gif b/img/in-post/godailylib/ebiten20.gif
diff --git a/img/in-post/godailylib/ebiten21.gif b/img/in-post/godailylib/ebiten21.gif
diff --git a/index.xml b/index.xml
@@ -233,7 +233,7 @@ advance-programming）。&lt;/li&gt;
 &lt;/div&gt;&lt;p&gt;打开浏览器输入地址：localhost:8080/wasm_exec.html。&lt;/p&gt;
 &lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten25.png#center&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
 &lt;p&gt;点击run按钮即可愉快地玩耍啦！&lt;/p&gt;
-&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten26.mp4#center&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
+&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten26.gif#center&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
 &lt;h2 id=&#34;项目的不足&#34;&gt;项目的不足&lt;/h2&gt;
 &lt;p&gt;到目前为止，我们的游戏基本上可玩，但是还有很多的不足：&lt;/p&gt;
 &lt;ul&gt;
@@ -322,7 +322,7 @@ advance-programming）。&lt;/li&gt;
 &lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
 &lt;/div&gt;
 &lt;/div&gt;&lt;p&gt;运行结果如下：&lt;/p&gt;
-&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten13.mp4&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
+&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten13.gif&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
 &lt;h2 id=&#34;发射子弹&#34;&gt;发射子弹&lt;/h2&gt;
 &lt;p&gt;我们不用另外准备子弹的图片，直接画一个矩形就ok。为了可以灵活控制，我们将子弹的宽、高、颜色以及速率都用配置文件来控制：&lt;/p&gt;
 &lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
@@ -535,7 +535,7 @@ advance-programming）。&lt;/li&gt;
 &lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
 &lt;/div&gt;
 &lt;/div&gt;&lt;p&gt;运行：&lt;/p&gt;
-&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten14.mp4&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
+&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten14.gif&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
 &lt;p&gt;目前有两个问题：&lt;/p&gt;
 &lt;ul&gt;
 &lt;li&gt;无法一边移动一边发射，仔细看看&lt;code&gt;Input.Update&lt;/code&gt;方法中的代码，你能发现什么问题码？&lt;/li&gt;
@@ -608,7 +608,7 @@ advance-programming）。&lt;/li&gt;
 &lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
 &lt;/div&gt;
 &lt;/div&gt;&lt;p&gt;再次运行：&lt;/p&gt;
-&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten15.mp4&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
+&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten15.gif&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
 &lt;p&gt;数量好像被限制了，但是不是我们配置的10。原来&lt;code&gt;Input.Update()&lt;/code&gt;的调用间隔太短了，导致我们一次space按键会发射多个子弹。我们可以控制两个子弹之间的时间间隔。同样用配置文件来控制（单位毫秒）：&lt;/p&gt;
 &lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
 &lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
@@ -677,7 +677,7 @@ advance-programming）。&lt;/li&gt;
 &lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
 &lt;/div&gt;
 &lt;/div&gt;&lt;p&gt;运行：&lt;/p&gt;
-&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten16.mp4&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
+&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten16.gif&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
 &lt;p&gt;又出现了一个问题，10个子弹飞出屏幕外之后还是不能发射子弹。我们需要把离开屏幕的子弹删除。这适合在&lt;code&gt;Game.Update&lt;/code&gt;函数中做：&lt;/p&gt;
 &lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
 &lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
@@ -717,7 +717,7 @@ advance-programming）。&lt;/li&gt;
 &lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
 &lt;/div&gt;
 &lt;/div&gt;&lt;p&gt;再次运行：&lt;/p&gt;
-&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten17.mp4&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
+&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten17.gif&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
 &lt;h2 id=&#34;外星人来了&#34;&gt;外星人来了&lt;/h2&gt;
 &lt;p&gt;外星人图片如下：&lt;/p&gt;
 &lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/alien.png#center&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
@@ -941,7 +941,7 @@ advance-programming）。&lt;/li&gt;
 &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
 &lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
 &lt;/div&gt;
-&lt;/div&gt;&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten19.mp4#center&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
+&lt;/div&gt;&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten19.gif#center&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
 &lt;h2 id=&#34;射击&#34;&gt;射击！！&lt;/h2&gt;
 &lt;p&gt;当前子弹碰到外星人直接穿过去了，我们希望能击杀外星人。这需要检查子弹和外星人之间的碰撞。我们新增一个文件collision.go，并编写检查子弹与外星人是否碰撞的函数。这里我采用最直观的碰撞检测方法，即子弹的4个顶点只要有一个位于外星人矩形中，就认为它们碰撞。&lt;/p&gt;
 &lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
@@ -1056,7 +1056,7 @@ advance-programming）。&lt;/li&gt;
 &lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
 &lt;/div&gt;
 &lt;/div&gt;&lt;p&gt;注意将碰撞检测放在位置更新之后。运行：&lt;/p&gt;
-&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten20.mp4#center&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
+&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten20.gif#center&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
 &lt;h2 id=&#34;增加主界面和结束界面&#34;&gt;增加主界面和结束界面&lt;/h2&gt;
 &lt;p&gt;现在一旦运行程序，外星人们就开始往下掉了。我们想要增加一个按下空格键才开始的功能，并且游戏结束之后，我们也希望能显示一个Game Over的界面。首先，我们定义几个常量，表示游戏当前所处的状态：&lt;/p&gt;
 &lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
@@ -1574,7 +1574,7 @@ advance-programming）。&lt;/li&gt;
 &lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
 &lt;/div&gt;
 &lt;/div&gt;&lt;p&gt;注意，为了下次游戏能顺序进行，这里需要清楚所有的子弹和外星人。运行：&lt;/p&gt;
-&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten21.mp4#center&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
+&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten21.gif#center&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
 &lt;h2 id=&#34;总结&#34;&gt;总结&lt;/h2&gt;
 &lt;p&gt;本文接着上篇文章，介绍了发射子弹，检测碰撞，增加主界面和游戏结束界面等内容。至此一个简答的游戏就做出来了。可以看出使用ebitengine做一个游戏还是很简单的，非常推荐尝试呢！上手之后，建议看看官方仓库examples目录中的示例，会非常有帮助。&lt;/p&gt;
 &lt;p&gt;大家如果发现好玩、好用的 Go 语言库，欢迎到 Go 每日一库 GitHub 上提交 issue😄&lt;/p&gt;
@@ -2333,11 +2333,7 @@ advance-programming）。&lt;/li&gt;
 &lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
 &lt;/div&gt;
 &lt;/div&gt;&lt;p&gt;好了，现在可以运行程序了&lt;code&gt;go run .&lt;/code&gt;，效果如下：&lt;/p&gt;
-
-  &lt;div class=&#34;video&#34;&gt;
-    &lt;video src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten10.mp4&#34; allowfullscreen autoplay loop&gt;&lt;/video&gt;
-  &lt;/div&gt;
-
+&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten10.gif#center&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
 &lt;p&gt;注意到，目前有两个问题：&lt;/p&gt;
 &lt;ul&gt;
 &lt;li&gt;移动太慢&lt;/li&gt;
@@ -2426,11 +2422,7 @@ advance-programming）。&lt;/li&gt;
 &lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
 &lt;/div&gt;
 &lt;/div&gt;&lt;p&gt;运行，是不是快了很多呢？&lt;/p&gt;
-
-  &lt;div class=&#34;video&#34;&gt;
-    &lt;video src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten11.mp4&#34; allowfullscreen autoplay loop&gt;&lt;/video&gt;
-  &lt;/div&gt;
-
+&lt;p&gt;&lt;img src=&#34;https://darjun.github.io/img/in-post/godailylib/ebiten11.gif#center&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
 &lt;h2 id=&#34;总结&#34;&gt;总结&lt;/h2&gt;
 &lt;p&gt;本文介绍了2D游戏开发库ebiten的基本使用，并开始开发一个外星人入侵的游戏（1/3），目前只能在屏幕上移动飞船，下篇文章继续完成剩下的内容。&lt;/p&gt;
 &lt;p&gt;大家如果发现好玩、好用的 Go 语言库，欢迎到 Go 每日一库 GitHub 上提交 issue😄&lt;/p&gt;