[自製Javascript遊戲引擎][第１節][JavaScript基本介紹與工具安裝]

来源：互联网发布：七天网络查询分数编辑：程序博客网时间：2024/06/05 07:38

大家好，我是傅老師。

你想學做遊戲嗎？
你想試試看自己從第0行開始做出整個遊戲嗎？
你想學先徒手自製引擎，再用引擎徒手自製遊戲嗎？（挖…惊讶這真的不會太難嗎？）
一點也不難！初中生就學得會！

趕快來收看我們全新的系列課程—＜自製Javascript遊戲引擎＞！

第１節

JavaScript工具安裝與快速體驗

在本節中，我們將帶您安裝所需工具，並且用最快的速度讓您取得Javascript的基礎經驗。
請先下載本課課件。
課件下載位址：http://pan.baidu.com/s/1csp36A

1-1. 工具安裝

在開始編寫JavaScript前，請讀者安裝這堂課的必備軟體：Chrome、Notepad++、以及２套插件(Plugin)。
首先，請讀者於下方的「網址1」下載Chrome並進行安裝；接著於「網址2」中下載Notepad++並進行安裝（本系列課程建議您使用Notepad++ 6.9.2版)。

網址1:https://www.google.com.tw/intl/zh-HK/chrome/browser/desktop/
網址2:https://notepad-plus-plus.org/download/v6.9.2.html

裝完Chrome及Notepad++之後，接下來裝２套Notepad++的插件(Plugin)。請開啟Notepad++，於上方的工作列中，點擊「外掛模組」。
这里写图片描述

開啟「外掛模組」的選單後，選擇「PluginManager」中的「ShowPlugin Manager」。
这里写图片描述

「PluginManager」的視窗出來後，在選單中找到「JSLint」和「JSTool」兩個插件(Plugin)，打勾後點擊「Install」。
这里写图片描述

插件(Plugin)安裝完成後，Notepad++會如下圖一樣，通知有新的原件安裝進Notepad++，點選＜是＞重新啟動Notepad++便可以正常使用。兩套工具中，JSLint可用來糾錯，JSTool可用來排版，都是非常好用的小工具喔～

1-2. 顯示圖片

是的，我不打算從基礎語法教起。（什麼？。。。可是老師你剛剛說初中生都可以學會，那不從基礎語法教起我學得會嗎？）沒錯～我確定這套課程初中生學得會，因為同樣的課程我已經開過三梯了。不從基礎語法教起正就是初中生都學得會的奧密之一。

＂你不可能在沒有經驗的狀況下，學會系統級別的理論。＂

所以從現在開始，我要用最快的速度帶領讀者取得一些Javascript的經驗。好了～坐穩拉，我們要起飛囉！
將本節課件包中的<#class1>目錄解壓至桌面。以Notepad++開啟裡面的index.html檔，你會看到一個空白的檔案。請在檔案中寫入下列程式碼：

<html>    <head>        <title>This is my HTML page</title>    </head>    <body>        <canvas id="game" width="800" height="600" style="background-color: blue;"></canvas>    </body></html>

这里写图片描述

這。。看起來實在像是Windows死機啊!!（笑）不過沒關係，看出來這畫面程式間有什麼關係了嗎？夾在＜title＞＜/title＞標籤內的就是這個網頁的標題，下面的canvas就是螢幕中間的畫布，而畫布的顏色被我們使用CSS屬性＜background-color: blue;＞指定成藍色了。

猜猜看，下列畫面是如何修改而得呢？：

这里写图片描述

好的，接下來我們來顯示一些靜態圖片吧～請開啟課件找到＜images＞資料夾，盤點一下裡面的圖片。你應改會看到幾張可愛的像素風圖片（pixel art），其中有一張是蛋蛋老師的全身照＜egg.png＞。我們現在來試試看把蛋蛋老師畫到畫布上吧！

打開＜index.html＞修改程式：

<html>    <head>        <title>這是我的超級遊戲</title>        <meta charset="utf8">    </head>    <body>        <canvas id="game" width="800" height="600" style="background-color: orange;"></canvas>        <script>        var canvas = document.getElementById("game");        var ctx = canvas.getContext("2d");        var img = new Image();        img.src = "images/egg.png";        img.onload = function(){            ctx.drawImage(img, 0, 0,32,32);        };        </script>    </body></html>

寫好後存檔，跳至Chrome內按下＜F5＞刷新。優呼～蛋蛋老師出現在左上角了！
这里写图片描述

在此我們大略解釋一下代碼的意義。包夾在＜script＞＜/script＞區間的部分，就是Javascript程式。我們要做的就是利用這段程式，回頭去修改之前已繪製於畫面上的canvas畫布。

首先以var canvas = document.getElementById(“game”)，去取得id名稱為game這張畫布，取得畫布後放置於canvas這個變數中。
由於HTML原本canvas有意支援2D與3D兩種繪製模式，因此我們以canvas底下的canvas.getContext函數，將canvas詮釋為一塊2D內容並放置於ctx變數中。未來凡是需要繪製2D影像，均可透過ctx變數來繪製。
接著我們要做的是將＜egg.png＞讀入記憶體內。首先以new Image()產生一塊空白的影像，放置於img變數中。接著再以img.src指定讀檔位置，這條程式一經執行，電腦就會去將檔案搬進記憶體中。然而，這段搬動的過程需要一些時間，無法在瞬間完成。因此我們只好先跟電腦約定，＂如果你讀檔讀完以後要幫我呼叫影像中的onload函數喔～＂，並且先填好onload函數的內容，交給電腦。
img.onload這個funciton就是我們要跟電腦約定好的函數。我們可以看到他的內容只有一行：ctx.drawImage(img,0,0,32,32);　我們之前說過，繪製畫布這件事可透過ctx來執行，指的就是這一行。這行的意思是：使用ctx將img影像繪製於座標(0,0)處，繪製影像寬高為(32,32)。

好的，我想現在大家基本上已經理解了各行程式的用意。現在傅老師要出一個題目了：底下這個畫面是怎麼顯示出來的呢？（提示：換圖、換位置、換大小）
这里写图片描述