首頁 >web前端 >js教程 >JavaScript 和 codeguppy.com 快速介紹

JavaScript 和 codeguppy.com 快速介紹

Patricia Arquette
Patricia Arquette原創
2024-11-15 01:06:02197瀏覽

Quick intro to JavaScript and codeguppy.comJavaScript 是最通用的程式語言之一,也是創意編碼、遊戲開發和 Web 開發的核心工具。無論您是初學者還是想要刷新知識,本指南都提供了基本 JavaScript 概念的快速概述,旨在幫助您快速入門。您還將學習如何利用 codeguppy.com(一個適合初學者的線上編碼平台)來練習您的技能。從變數到迴圈和函數,本文可作為快速入門 JavaScript 的參考。

目錄

第 1 章:JavaScript 語法

  • 變數
  • if 語句
  • For 循環
  • While 循環
  • Do While 迴圈
  • Switch 語句
  • 功能
  • 數組方法
  • 字串方法
  • 隨機數
  • 模組

第 2 章:使用 JavaScript 在畫布上繪圖

  • 關於畫布
  • 清除畫布
  • 背景顏色
  • 繪製形狀
  • 形狀設定
  • 海龜圖形
  • 顏色
  • 角度
  • 動畫

第 3 章:使用者輸入

  • 按鍵事件
  • keyReleased 事件
  • 按鍵輸入事件
  • 滑鼠點擊事件
  • 滑鼠按下事件
  • 老鼠釋放事件
  • 滑鼠移動事件
  • 滑鼠拖曳事件
  • 雙擊事件
  • 滑鼠滾輪事件
  • 按鍵被按下
  • 鑰匙
  • 密鑰代碼
  • 滑鼠X
  • 老鼠Y
  • pmouseX
  • pmouseY
  • 滑鼠被按下
  • 滑鼠按鈕
  • keyIsDown()
  • keyWentDown()

第 4 章:使用 codeguppy.com 進行 JavaScript 遊戲開發

  • 繪製圖層
  • 設定背景圖片
  • 載入內建精靈
  • 載入自訂精靈
  • 載入動畫自訂精靈
  • 設定精靈位置
  • 自動移動精靈
  • 鏡像精靈
  • 精靈旋轉
  • 自動旋轉精靈
  • 繪圖深度
  • 更改動畫
  • 精靈上的老鼠事件
  • 隱藏精靈
  • 刪除精靈
  • 精靈碰撞
  • 精靈組
  • 背景音樂
  • 音效
  • 形狀之間的碰撞
  • 遊戲循環
  • 預載資源
  • 展示場景
  • 進入事件
  • 將資料傳遞到場景

第 5 章:其他編碼提示

  • 列印資料
  • 建構資料輸入 UI

第 1 章:JavaScript 語法

讓我們從探索 JavaScript 語法開始我們的文章。

宣告變數

變數用於儲存數字、字串(文字)甚至複雜物件等資料。請記住:

  • 程式中可以有任意數量的變數。
  • 您需要使用代表其儲存資料的名稱來命名每個變數。
  • 為同一程式碼區塊內的變數(例如 { ... } 之間的內容)甚至函數內的變數指定不同的名稱

宣告變數x

let x;

宣告 x 並用數值初始化它

let x = 1;

聲明 s 並用字串初始化它

let s = "Hello, World!";

為變數賦值

使用 let 宣告變數後,可以根據需要多次為其分配/重新分配不同的值。

您可以使用簡單的常數甚至包含常數、其他變數甚至同一變數的複雜表達式來分配它!計算機非常擅長評估表達式。

將數字 100 分配給變數 x

x = 100;

將字串“Hello”分配給變數 s

s = "Hello";

將空數組賦給變數 ar

ar = [];

將 3 個數字的陣列分配給變數 ar

ar = [1, 2, 3];

將 2 個字串的陣列分配給變數 ar

ar = ["A", "B"];

將內聯物件指派給變數 o

o = {   Type: 'car', 
        x : 100, 
        y : 200 
    };

變數 sum 等於 a b

sum = a + b;

將表達式指派給變數 avg

avg = (a + b) / 2;

變數總和增加 10(新總和變成舊總和 10)

sum = sum + 10;

變數 i 增加(遞增)1

i++;

變數 i 增加 2

i += 2;

if 語句

if 語句非常適合控製程式流程。通常,程式從上到下一次執行一條指令。

如果條件滿足,允許做出決定並執行一組指令。

如果條件為 true,則執行 {} 之間的指令區塊

if (mouseX < width)
{

}

如果條件為真則執行第一個指令區塊,否則執行第二個指令區塊

if (hour < 12)
{

}
else
{

}

根據不同的條件執行不同的區塊

在下面的範例中,如果第一個條件為 true,則第一個區塊將被執行,而其他區塊將不被執行。

但是,如果第一個條件不為真,則使用 else if 來測試另一個條件,如果為真,則執行 else if 的區塊。

只有在此之前沒有其他條件為真時,才會執行最後一個 else 之後的區塊。

let x;

注意:在這個表達式中可以有多個 else if 區塊。

for迴圈

使用 for 迴圈和 println 列印從 0 到 4 的數字

let x = 1;

使用 for 迴圈列印從 10 到 0 的數字

let s = "Hello, World!";

列印 0 到 100 之間的偶數

x = 100;

列印數組的所有元素

s = "Hello";

while 循環

使用 while 循環列印從 0 到 9 的數字

ar = [];

做一會兒

使用 do while 迴圈列印從 0 到 10 的數字

ar = [1, 2, 3];

注意:do while迴圈將條件放在程式碼區塊之後,因此即使條件為假,程式碼區塊也至少可以執行一次。

switch 語句

switch 語句是除了 if / else if 之外的另一個用來控製程式流程的指令。您可以使用 switch 將表達式與不同的值進行比較,然後根據該表達式是否等於任何 case 值來執行對應的指令集。

通常 switch 的使用頻率低於 if / else if / else。

ar = ["A", "B"];

功能

函數非常適合建立新的語言指令,您可以在程式中重複使用這些指令。

一旦定義了新指令,它就與 JavaScript 和 codeguppy.com 中存在的內建指令無法區分

定義並呼叫函數氣球

o = {   Type: 'car', 
        x : 100, 
        y : 200 
    };

傳回值的函數

sum = a + b;

注意:codeguppy.com 包含大量內建函數,如 Circle、Right 等。您可以像呼叫自己的自訂函數一樣呼叫這些函數。

數組方法

使用陣列可以使用單一變數名稱方便地儲存一系列值。數組具有允許操作其元素的屬性和方法。

聲明 ar 並將其初始化為空數組

avg = (a + b) / 2;

將 ar 宣告並初始化為 3 個數字的陣列

sum = sum + 10;

數組的長度

i++;

在陣列末端追加一個元素

i += 2;

在數組的開頭插入一個元素

if (mouseX < width)
{

}

在任意位置插入元素

if (hour < 12)
{

}
else
{

}

在任意位置插入元素(簡易模式)

注意:插入陣列方法只存在於codeguppy.com

let x;

讀取數組元素2的值

let x = 1;

計算數組元素的總和

let s = "Hello, World!";

為數組的所有元素分配不同的值

x = 100;

訪問第一個元素

s = "Hello";

訪問最後一個元素

ar = [];

存取最後一個元素(簡單的方法)

注意:peek 陣列方法只存在於 codeguppy.com

ar = [1, 2, 3];

刪除數組的第一個元素

ar = ["A", "B"];

刪除數組的最後一個元素

o = {   Type: 'car', 
        x : 100, 
        y : 200 
    };

刪除任意位置的元素

sum = a + b;

刪除數組的所有元素

avg = (a + b) / 2;

連接兩個數組

sum = sum + 10;

提取數組的一個切片

slice() 是一個有趣的方法,可用於從陣列中提取「切片」。 “切片”將作為獨立數組傳回。此方法接收切片中我們想要的第一個元素的索引(包括)和最後一個元素的索引(不包括)作為參數:

i++;

連接數組的元素

i += 2;

字串方法

就像陣列一樣,您可以存取和操作字串中的獨立字元。

字串的長度

let x;

迭代字串的所有字符

let x = 1;

按位置存取字串字符

let s = "Hello, World!";

將文字轉換為大寫

x = 100;

將文字轉換為小寫

s = "Hello";

判斷字串是否包含另一個子字串

ar = [];

確定字串是否以指定前綴開頭

ar = [1, 2, 3];

判斷字串是否以指定字尾結尾

ar = ["A", "B"];

找出子字串的位置。搜尋從頭開始

o = {   Type: 'car', 
        x : 100, 
        y : 200 
    };

找出子字串的位置。搜尋從指定索引處開始。

sum = a + b;

從字串中提取子字串

avg = (a + b) / 2;

刪除字串開頭和結尾的空格

sum = sum + 10;

刪除字串開頭的空格

i++;

刪除字串末尾的空格

i += 2;

用另一個字串填充字串的開頭

if (mouseX < width)
{

}

用另一個字串填充字串的末尾

if (hour < 12)
{

}
else
{

}

字元代碼

if (minute <= 15)
{
}
else if(minute <= 30)
{
}
else
{
}

代碼中的字符

for(let i = 0; i < 5; i++)
{
    println(i);
}

隨機數

隨機數在編碼中非常有用。

要在 JavaScript 中取得 0(含)和 1(不包含)之間的隨機數,可以使用 Math.random() 函數。

for(let i = 10; i >= 0; i--)
{
    println(i);
}

codeguppy.com 透過附加說明擴展了對隨機數的支持,可讓您快速選擇首選範圍內的隨機數。

0 到 1 之間的隨機浮點數(不包括 1)

這與 Math.random() 相同

for(let i = 0; i <= 100; i+=2)
{
    println(i);
}

0 到 n 之間的隨機浮點數(不包括 n)

let ar = [10, 20, 30];

for(let element of ar)
{
    println(element);
}

n1 和 n2 之間的隨機浮點數(不包括 n2)

let i = 0;

while(i < 10)
{
    println(i);
    i++;
}

最小值和最大值之間的隨機整數(兩者都包括在內)

您可以使用 randomInt 或 randomNumber

let i = 0;

do
{
    println(i);
    i++;
}
while(i < 10)

chr1 和 chr2 之間的隨機字元(均包含)

函數 randomChar(chr1, chr2)

switch(myExpresion)
{
    case 100:
        //...
        break;
    case 200:
        //...
        break;
    case 300:
        //...
        break;
    default:
        //...
}

數組的隨機元素

// Function balloon draws a balloon using simple shapes such as circle and line
// It expects as arguments the coordinates for balloon center and the color of the balloon
function balloon(x, y, shapeColor)
{
    let r = 30;
    let stringLen = 100;

    fill(shapeColor);
    stroke(shapeColor);

    circle(x, y, r);
    line(x, y + r, x, y + r + stringLen);
}

// Call function balloon with different parameters
balloon(100, 100, "red");
balloon(300, 300, "blue");
balloon(500, 200, "yellow");

打亂數組

function addNumbers(x, y)
{
    return x + y;
}

// Call a function
var sum = addNumbers(100, 200);
println(sum);

模組

為了更好地組織程式碼,特別是在較大的程式中,codeguppy.com 引入了模組的概念。

您可以將程式的所有功能拆分為多個程式碼頁,而不是在單一程式碼頁中編寫程式的所有功能,這樣每個程式碼頁就成為一個模組。

模組為內部定義的變數和函數提供了強大的封裝。這種封裝允許您在不同的模組中定義具有相同名稱的函數/變數。

要使用模組內的函數,您首先需要 require 該模組。

主機程式

let x;

模組 MathUtils 內容

let x = 1;

注意:代碼頁的另一個用途是定義遊戲場景。 codeguppy.com 有一個內建的遊戲場景管理器。更多詳情請參閱遊戲開發文章。

第 2 章:使用 JavaScript 在畫布上繪圖

codeguppy.com 是使用笛卡爾和海龜圖形進行基於圖形的活動的絕佳環境。

關於畫布

在 codeguppy.com 中,圖形畫布為 800 x 600 像素。
系統會根據畫布的尺寸自動初始化寬度和高度變數

建議在程式中使用這些變數而不是硬編碼常數(只要可能)。

let s = "Hello, World!";

清除畫布

clear() 用於清除繪圖畫布。這個函數對於動畫非常有用,在loop()事件中,可以在下一次繪製之前清除幀。

x = 100;

背景顏色

background指令用於設定畫布的背景顏色。

?背景指令不會刪除畫布上繪製的形狀。若要擦除畫布,請使用clear()。

將背景顏色設定為指定為字串的內建顏色

s = "Hello";

將背景顏色設定為十六進位「#RRGGBB」字串指定的顏色

ar = [];

將背景顏色設定為灰色(0 - 黑色,255 - 白色)

ar = [1, 2, 3];

注意:在 codeguppy.com 中,您甚至可以將圖像設定為背景。有關如何設定圖片作為背景的更多詳細信息,請參閱“遊戲”頁面。

繪製形狀

在座標 400 x 300 處繪製一個圓,半徑為 200 像素

ar = ["A", "B"];

在座標 400 x 300、寬度和高度為 300 x 200 像素處繪製橢圓

o = {   Type: 'car', 
        x : 100, 
        y : 200 
    };

繪製一個矩形,其左上角座標為 400 x 300,寬度和高度為 300 x 200 像素

sum = a + b;

在座標 400 x 300 和 500 x 500 之間繪製一條線

avg = (a + b) / 2;

透過指定每個角座標繪製三角形

sum = sum + 10;

畫一個圓弧

要繪製圓弧,您需要指定橢圓的座標(中心位置、寬度和高度),此外還要指定起始角度和結束角度。

let x;

在座標 400 x 300 處繪製一個點

let x = 1;

在座標 400 x 300 處繪製文字 JavaScript

let s = "Hello, World!";

形狀設定

注意:設定後,這些設定將應用於畫布上繪製的所有連續形狀

將文字大小設定為 20

x = 100;

將“洋紅色”設定為填滿形狀的顏色

s = "Hello";

將“青色”設定為繪製形狀的顏色

ar = [];

將線條粗細設定為 2 px

ar = [1, 2, 3];

繪製空形狀,不填滿顏色

ar = ["A", "B"];

繪製沒有輪廓的形狀

o = {   Type: 'car', 
        x : 100, 
        y : 200 
    };

海龜圖形

codeguppy.com 可讓您將笛卡爾圖形與海龜圖形結合。

使用 Turtle Graphics 時,您可以使用預設的海龜(建議初學者和常規程式)或建立額外的海龜(對於複雜的程式)。

使用預設的 Turtle

要使用預設的海龜,您所需要做的就是使用以下全域指令。

將預設海龜重設為原始位置

sum = a + b;

將預設烏龜的筆顏色設定為紅色

avg = (a + b) / 2;

將預設烏龜的筆大小設為 2

sum = sum + 10;

將筆放在紙上。烏龜會畫畫。

i++;

將筆從紙上抬起。烏龜會前進但不會畫畫

i += 2;

將烏龜移到畫布上的任何位置

if (mouseX < width)
{

}

將預設海龜向左轉指定的度數

if (hour < 12)
{

}
else
{

}

將預設海龜向右旋轉 30 度

if (minute <= 15)
{
}
else if(minute <= 30)
{
}
else
{
}

將海龜航向(方向)設定為任意角度

for(let i = 0; i < 5; i++)
{
    println(i);
}

將海龜向前移動指定的像素數。

注意:海龜依照先前設定的向左、向右或設定的方向移動。如果筆在紙上,烏龜就會畫畫。

for(let i = 10; i >= 0; i--)
{
    println(i);
}

將海龜向後移動指定像素數。

注意:烏龜的移動方向與向前移動的方向相反

for(let i = 0; i <= 100; i+=2)
{
    println(i);
}

以 2 個數字的陣列形式檢索預設海龜的 x 和 y 位置

let ar = [10, 20, 30];

for(let element of ar)
{
    println(element);
}

檢索預設海龜方向(以度為單位)

let i = 0;

while(i < 10)
{
    println(i);
    i++;
}

與多隻海龜一起工作

在複雜的程序中,您可能會發現使用多個海龜很有用,因為每個海龜都維護自己的狀態,例如位置、顏色等。

創建多隻海龜

let x;

取得預設的烏龜

let x = 1;

顏色

如上面的範例所示,codeguppy.com 允許使用者以多種方式指定顏色。這樣,你就可以用最方便的方法來適合你的程式了。

命名顏色

codeguppy.com 中有多種帶有預先定義名稱的顏色,您可以在「背景」面板上探索所有顏色。

let s = "Hello, World!";

RGB / HTML 風格顏色

當預先定義的顏色不夠時,您可以透過指定紅色、綠色和藍色的數量來創建任何顏色。您可以使用 #RRGGBB 格式將這些顏色作為字串傳遞給填充和描邊函數:

x = 100;

快速灰色

如果您需要快速建立灰色陰影,只需將 0 到 255 之間的數字傳遞給任何需要顏色的函數,例如填充或描邊

s = "Hello";

使用 color() 函數的顏色

創建顏色的另一種方法是使用顏色函數和 R、G、B 量。這些金額的範圍是 0 到 255

ar = [];

更改為 HSB 模式

預設情況下,codeguppy.com 顏色系統使用 RGB 模式,其中顏色由 R、G、B 數量指定(如上所示)。
然而,進階使用者可以切換到 HSB 模式,其中顏色由色相、飽和度和亮度指定。

在 HSB 模式下,顏色函數的值在 0 - 360 之間

ar = [1, 2, 3];

改回 RGB 模式

ar = ["A", "B"];

角度

所有三角函數以及某些繪圖函數(例如圓弧)都與角度一起使用。

為了吸引年輕程式設計師和初學者,codeguppy.com 中的所有角度預設都是「度數」。

但是,進階使用者可以使用angleMode切換到「RADIANS」模式。使用弧度後,不要忘記切換回“度”。

o = {   Type: 'car', 
        x : 100, 
        y : 200 
    };

使用三角函數

透過 p5.js 函式庫,codeguppy.com 為使用者提供了一系列易於使用的三角函數,如 sin、cos 等

sum = a + b;

動畫

為了實現動畫,codeguppy.com 為使用者提供了一種類似於「卡通」使用的方法:將您的動畫視為一系列幀!您所要做的就是繪製第一幀,然後擦除並在稍微不同的位置繪製第二幀,依此類推!

Loop() 是動畫的基礎

在 codeguppy.com 中,loop() 函數很特殊。您要做的就是在程式碼中定義此函數,codeguppy.com 引擎將為您運行它,每秒最多 60 次!不需要自己呼叫。

在螢幕上移動一條水平線

let x;

在螢幕上彈起一個圓圈

let x = 1;

更改預設幀速率

let s = "Hello, World!";

取得幀率

x = 100;

第 3 章:使用者輸入

有兩種主要方法可以將鍵盤/滑鼠使用者輸入輸入到 codeguppy.com 程式中:透過事件或透過讀取內建系統變數和函數的 Loop() 函數。

活動

codeguppy.com 引擎可以在發生鍵盤或滑鼠事件時通知您的程式。您所要做的就是在程式中定義適當的函數(例如事件處理程序),系統會在該事件出現時自動呼叫它。

按鍵事件

按下某個鍵時執行一次

s = "Hello";

keyReleased事件

釋放按鍵時執行

ar = [];

按鍵事件

在鍵入某個鍵時執行(特殊鍵除外)

ar = [1, 2, 3];

滑鼠點擊事件

按下並放開滑鼠時執行一次

ar = ["A", "B"];

滑鼠按下事件

按下滑鼠按鈕時執行一次

o = {   Type: 'car', 
        x : 100, 
        y : 200 
    };

滑鼠釋放事件

放開滑鼠按鈕時執行

sum = a + b;

滑鼠移動事件

移動滑鼠且未按下按鈕時執行

avg = (a + b) / 2;

滑鼠拖曳事件

當滑鼠移動並按下按鈕時執行

sum = sum + 10;

按兩下事件

雙擊滑鼠時執行

i++;

滑鼠滾輪事件

當使用者使用滑鼠滾輪或觸控板時執行

i += 2;

系統變數

除了事件之外,系統還會使用適當的事件資料自動填入一些系統變數。

您可以從事件處理程序或主動畫/遊戲循環()中存取這些變數。

這通常是建立遊戲時獲取使用者輸入的首選方式。

按鍵被按下

布林系統變量,指示是否按下了某個鍵。

if (mouseX < width)
{

}

鑰匙

包含最後輸入的鍵的系統變數。

if (hour < 12)
{

}
else
{

}

鍵碼

包含最後按下的鍵的程式碼的系統變數。

可以使用以下常數來取代數字鍵碼:LEFT_ARROW、RIGHT_ARROW、UP_ARROW、DOWN_ARROW。使用它們時不帶引號。

if (minute <= 15)
{
}
else if(minute <= 30)
{
}
else
{
}

注意:要尋找 keyCode,您可以編寫測試程式或使用 keycode.info 等網站。

滑鼠X

包含滑鼠遊標水平座標的系統變數。

let x;

滑鼠Y

包含滑鼠遊標垂直座標的系統變數

let x = 1;

滑鼠X

包含滑鼠遊標先前水平座標的系統變數

let s = "Hello, World!";

滑鼠Y

包含滑鼠遊標先前垂直座標的系統變數。

x = 100;

滑鼠被按下

布林系統變量,指示是否按下任何滑鼠按鈕。
若要偵測按下哪個按鈕,請檢查 mouseButton 變數。

s = "Hello";

滑鼠按鈕

包含按下的滑鼠按鈕的系統變數。它具有以下值之一:LEFT、RIGHT、CENTER。

要偵測滑鼠是否被按下,請檢查 mouseIsPressed。

ar = [];

功能

keyIsDown()

在loop()事件中使用keyIsDown()函數來偵測是否按下了指定的鍵。您需要指定密鑰代碼。

可以使用以下常數來取代數字鍵碼:LEFT_ARROW、RIGHT_ARROW、UP_ARROW、DOWN_ARROW。使用它們時不帶引號。

ar = [1, 2, 3];

注意:要尋找金鑰代碼,您可以使用 keycode.info 等網站

keyWentDown()

keyWentDown() 也適用於 Loop() 事件,與 keyIsDown() 類似。

不同之處在於,每個按鍵函數只會傳回一次 true。若要重新觸發該功能,使用者需要釋放該鍵並再次按下:

/i/code.html?hints/userinput_10

第 4 章:使用 codeguppy.com 進行 JavaScript 遊戲開發

使用 codeguppy.com 進行遊戲開發變得非常簡單和有趣。系統內建背景圖片、精靈、音樂和音效,讓您專注於程式碼而不是搜尋資源。

繪圖層

codeguppy.com 具有分層繪圖架構。畫布上任何時間最多有 5 個繪圖層,如下圖所示:

Quick intro to JavaScript and codeguppy.com

引擎會自動組合所有圖層並在螢幕上顯示最終影像。

設定背景圖像

背景指令也出現在「繪圖」部分中,作為設定畫布背景顏色的一種方式,如下所示:

ar = ["A", "B"];

但是,背景指令不只可以設定純色作為背景。

使用相同的功能,您可以將 codeguppy.com 庫中的任何圖像設定為背景:

let x;

?若要將背景設為圖像,請開啟“背景”調色板,然後將圖像拖曳到程式碼區域。系統將為您編寫合適的程式碼。

背景指令設定背景圖層中的影像,如上圖所示。這樣,背景影像就不會被clear()指令或形狀繪製指令甚至精靈刪除或改變。

精靈

精靈是小圖像,通常是動畫的,您可以透過程式碼載入和操作。精靈是成功遊戲的重要組成部分。

codeguppy.com 包含一個大型內建精靈庫,同時它為使用者提供了定義自訂精靈的能力。

載入內建精靈

您可以使用 sprite 指令從內建函式庫載入任何精靈。

載入精靈

精靈指令將載入內建精靈平面並將其放置在螢幕中間。

let x = 1;

?打開精靈調色板並瀏覽所有包含的內建精靈。當你找到你喜歡的,拖放到程式碼編輯器中,系統會自動寫程式碼。

載入和定位精靈

let s = "Hello, World!";

載入和縮放精靈

在下面的程式碼片段中,精靈平面在放置到螢幕中間之前被調到 0.5

x = 100;

精靈的載入、定位和縮放

在下面的程式碼片段中,精靈平面在放置到螢幕中間之前被調到 0.5

s = "Hello";

載入精靈的特定動畫

對於多動畫精靈,您可以在載入時指定預設動畫,方法是將其包含在與精靈名稱相同的字串中,使用 .符號(例如plane.shoot)

?將滑鼠停留在「精靈」面板中的精靈上,您可以發現每個精靈支援哪些動畫。檢查工具提示中提供的資訊。

ar = [];

注意:對於具有多個動畫的精靈,您也可以稍後使用 sprite .show() 方法變更顯示的動畫。

載入自訂精靈

對於需要自訂圖形的遊戲,使用者可以直接在程式碼中定義額外的自訂精靈。 codeguppy.com 使用 Microsoft MakeCode Arcade 格式來自訂最多 16 種顏色的精靈。

從文字到圖像

在字串模板中使用 img 或作為函數,將自訂精靈文字轉換為圖像:

/i/code.html?hints/gamedev_10

從圖像到精靈

自訂精靈也可以使用精靈指令來載入。透過這種方式,您可以像操作其他內建精靈一樣操作它們:

/i/code.html?hints/gamedev_20

動畫自訂精靈

自訂精靈也可以設定動畫。如果您需要動畫精靈,那麼您需要為每個精靈建立多個畫面影像:

/i/code.html?hints/gamedev_30

具有多個動畫的自訂精靈

您甚至可以將多個動畫打包在自訂精靈中。這可以幫助您稍後使用 sprite .show() 方法更改動畫:

/i/code.html?hints/gamedev_40

自訂精靈的自訂調色板

如果您的程式需要不同的顏色,您可以使用 setPalette 定義自訂調色板。

/i/code.html?hints/gamedev_41

注意:您可以隨時使用 getPalette() 函數來取得目前調色盤。

操縱精靈屬性

在運作時,自訂精靈與內建精靈沒有差別。無論您如何載入/建立精靈,您都可以透過程式碼以相同的方式操作它。

精靈指令傳回一個物件的引用,您可以在該物件上呼叫方法和屬性。

設定精靈位置

精靈指令傳回精靈物件的參考。使用 .x 和 .y 屬性來更新螢幕上的精靈位置。

let x;

自動移動精靈

您可以透過指定適當的 .velocity 值,讓引擎在 x 或 y 軸上自動移動精靈,而不會用自己更改 .x 和 .y 座標。

let x = 1;

鏡像精靈

有時您需要在 .x 軸或 .y 軸上翻轉精靈。

要鏡像精靈,請使用 .mirror 方法並以 -1 作為參數。若要將其鏡像到原始方向,請使用 1 作為參數。

let s = "Hello, World!";

精靈旋轉

在某些遊戲和程式中,您可能想要以任意角度旋轉精靈。您可以使用 .rotation 屬性來指定旋轉角度。

自動旋轉精靈

如果您希望精靈無限期地自動旋轉,您可以透過為 .rotationSpeed 屬性指定大於零的值來將其設為自動旋轉:

/i/code.html?hints/gamedev_50

拉深深度

通常,新加入的精靈會繪製在先前的精靈之上。

要控制哪個精靈繪製在頂部,哪個精靈繪製在後面,您可以使用 .depth 屬性。深度較低的精靈繪製在深度較高的精靈後面。

您也可以將精靈與使用圖形 API(圓形、矩形等)繪製的經典形狀結合。

如果您希望精靈出現在圖形平面後面,請確保為精靈指定負深度,否則它們將被繪製在圖形平面的頂部。

改變動畫

如果您選擇的精靈包含多個動畫,您可以透過新增動畫名稱來指定原本要顯示的動畫。在第一個參數的字串中:

let x;

但是,稍後,您可以使用 .show 方法更改該精靈的動畫:

let x = 1;

?請將滑鼠懸停在精靈調色盤中的精靈縮圖上,仔細檢查精靈支援的動畫。

精靈上的滑鼠事件

您可以透過將事件處理程序(例如函數)指派給以下精靈屬性來偵測精靈上的滑鼠點擊:

  • .onMousePressed
  • .onMouseReleased
  • .onMouseOver
  • .onMouseOut

/i/code.html?hints/gamedev_51

隱藏精靈

您可以用兩種方式隱藏精靈:

  • 將 .visible 屬性設為 false
  • 設定可見畫布之外的 .x 和/或 .y 座標
let s = "Hello, World!";

移除精靈

要從程式中永久刪除精靈,請在精靈上使用 .remove() 方法。這對精靈來說非常有用,就像被摧毀的敵人、收集的物品等。

您也可以使用 .life 屬性讓精靈在一定數量的訊框後自動刪除。這對於子彈、火箭等您發射後就忘記的物體很有用。收藏品可以利用此屬性。預設情況下,此屬性的值為 -1(停用)。

/i/code.html?hints/gamedev_55

精靈碰撞

有 4 種不同的方法來驗證精靈是否發生碰撞:

  • sprite.collide(目標,回呼);
  • sprite.displace(目標,回呼);
  • sprite.overlap(目標, 回呼);
  • sprite.bounce(目標,回呼);

當被呼叫時,其中一些方法會自動移動精靈,其他方法會影響它們的軌跡。它們都傳回一個布林值,指示碰撞是否發生。

嘗試這些方法來發現他們的行為!

參數:

  • 目標 – 這是對其他精靈或精靈群組的引用(稍後將詳細介紹群組)
  • 回調-這是可選的,但在某些情況下很有用。回調是具有以下簽名的函數,在發生碰撞時會自動呼叫:
x = 100;

注意:檢查精靈之間或精靈與其他形狀之間碰撞的另一種方法是使用以下形狀碰撞函數。

精靈組

在具有多個同類精靈的遊戲中,有時將各種精靈分組到使用 new Group() 創建的單一群組中

群組的主要方法有:

  • .add(sprite) - 新增一個精靈到群組
  • .remove(sprite) – 從群組中刪除精靈
  • .clear() - 從群組中刪除精靈。不會從程式中刪除精靈。
  • .contains(sprite) - 檢查指定的精靈是否在群組中

/i/code.html?hints/gamedev_60

注意:某些方法,例如精靈碰撞方法,可以對整個精靈組進行操作,而不是對單一精靈進行操作(如上一頁所述)。

背景音樂

播放名為「彩虹」的音樂

let x;

注意:如果之前播放過任何音樂,音樂指令會在播放新音樂之前中斷該音樂。

播放名為「Fun Background」的音樂,音量為 0.1

let x = 1;

?使用“音樂和聲音”調色板來發現音樂。當您找到喜歡的歌曲時,請將歌曲拖曳到程式碼區域。系統將為您編寫合適的程式碼。

音效

播放聲音 zap1

let s = "Hello, World!";

注意:系統並行播放所有由聲音指令觸發的聲音。

?使用“音樂和聲音”調色板來發現聲音效果。當您找到喜歡的歌曲時,請將歌曲拖曳到程式碼區域。系統將為您編寫合適的程式碼。

形狀之間的碰撞

?如果您的遊戲僅使用精靈,那麼我們建議您使用精靈碰撞方法。

但是,如果您不使用精靈,或將精靈與常規形狀結合使用,則可以使用以下方法來偵測碰撞。它們將兩個形狀的參數作為參數,如果兩個形狀發生碰撞,則傳回 true。

注意:為了方便起見,有些指令定義了兩次,參數描述的形狀相反。

偵測點與圓之間的碰撞

使用以下任何指令來偵測點和圓之間的碰撞:

x = 100;

/i/code.html?hints/gamedev_61

偵測點與線之間的碰撞

使用這兩個指令中的任何一個來偵測點和線之間的碰撞:

s = "Hello";

/i/code.html?hints/gamedev_62

檢測點和矩形之間的碰撞

使用以下兩個指令中的任一個來偵測點和矩形之間的碰撞:

ar = [];

/i/code.html?hints/gamedev_63

偵測兩個圓之間的碰撞

使用以下指令來偵測兩個圓之間的碰撞:

ar = [1, 2, 3];

/i/code.html?hints/gamedev_64

檢測圓形和矩形之間的碰撞

使用以下兩條指令中的任一個來偵測圓形和矩形之間的碰撞:

let x;

/i/code.html?hints/gamedev_65

檢測兩個矩形之間的碰撞

使用以下指令來偵測兩個矩形之間的碰撞:

let x = 1;

/i/code.html?hints/gamedev_66

偵測兩條線之間的碰撞

使用此指令來偵測兩條線之間的碰撞:

let s = "Hello, World!";

/i/code.html?hints/gamedev_67

檢測直線和矩形之間的碰撞

使用以下兩條指令中的任一個來偵測直線和矩形之間的碰撞:

x = 100;

/i/code.html?hints/gamedev_68

遊戲循環

幾乎在所有遊戲中,您都必須定義一個「遊戲循環」——一種持續獲取用戶輸入、更新遊戲狀態並渲染遊戲圖形的特殊函數。

在codeguppy.com中,您可以使用loop()函數輕鬆實現「遊戲循環」。這與「動畫」部分的「繪圖」頁面中所述的功能相同。您要做的就是在程式碼中定義此函數,codeguppy.com 引擎將為您運行它,每秒最多 60 次!不需要自己呼叫。

如果您的遊戲僅使用精靈

要讓你的角色在螢幕上移動,請讀取鍵盤並在循環()內更新角色狀態(例如位置)

/i/code.html?hints/gamedev_70

如果您的遊戲使用精靈和形狀

如果您的遊戲也使用經典形狀,那麼您需要在循環函數內重新渲染這些形狀。當您變更精靈的屬性時,精靈會自動渲染。

/i/code.html?hints/gamedev_80

將您的遊戲視為一系列框架!首先繪製第一幀,然後擦除它並在稍微不同的位置繪製第二幀,依此類推!

預先載入資源

codeguppy.com 引擎會在執行前自動掃描您的程式碼,以確定需要載入哪些資源(例如背景、精靈、音樂、音效)。引擎透過查看您使用的相應背景、精靈、音樂和聲音命令來識別這些。

如果這些指令沒有將資源指定為常數,那麼您需要使用 preload 函數預先載入所需的資源。只要列出所有必需的資產,以逗號分隔:

s = "Hello";

多場景遊戲

支援建立多場景遊戲是codeguppy.com環境的主要亮點之一!

透過在遊戲中加入更多場景,您的遊戲將會顯得更加精美。在典型的遊戲中,您可能需要創建一個“Intro”場景來解釋如何玩遊戲,實際的“Game”場景以及完成遊戲後顯示祝賀/得分的“Congrats”場景。

每個場景都是在新的程式碼頁中建立的。確保正確命名代碼頁,因為我們稍後需要引用它們。

展示場景

程式啟動時,它將始終執行您定義的第一個場景。要顯示其他場景,您需要使用 showScene 方法:

let x;

進入事件

如果你的場景包含一個名為enter的函數,那麼當場景進入/顯示時引擎會自動執行這個函數。在典型的遊戲中,一個場景可能會在遊戲過程中顯示多次。例如,每次使用者從「Intro」場景重新啟動遊戲時,都會顯示「Game」場景。

這使您能夠適當地設定場景狀態。

注意:函數外部的鬆散程式碼每個場景只執行一次。連續顯示場景將不再觸發該程式碼。

let x = 1;

將資料傳遞到場景

在某些情況下,透過 showScene 方法將資料傳遞到場景很有用。例如,您可以將遊戲選項從「Intro」場景傳遞到「Game」場景,或將玩家得分從「Game」場景傳遞到「Congrats」場景。

將數字(例如分數)傳遞到“Congrats”場景

let s = "Hello, World!";

在「Congrats」場景中,您可以透過以下方式擷取傳遞的資料:

x = 100;

將複雜的結構傳遞給“Congrats”場景

s = "Hello";

在「Congrats」場景中,您可以透過以下方式擷取傳遞的資料:

ar = [];

進一步閱讀

要更深入地了解如何在 codeguppy.com 中使用精靈,請參閱以下教學:

  • 使用內建精靈遊樂場和教學
  • 使用自訂精靈遊樂場和教學

第 5 章:其他編碼提示

codeguppy.com 也可以用來練習演算法或透過基本資料輸入 UI 實作程式。本文介紹了對此類程序的支援。

列印數據

使用 print 和 println 指令在畫布上快速列印數字、字串和其他資訊。這些說明在單獨的可滾動文字圖層上運行。

這些說明非常適合除錯程式、練習語言元素或演算法:

列印 0 到 9 的數字

ar = [1, 2, 3];

列印前 10 個質數

/i/code.html?hints/other_10

注意:println 是在每次列印後加上換行符,而 print 則不是。

建立資料輸入 UI

codeguppy.com 提供了建立資料輸入使用者介面的簡單說明。

建立輸入框

要建立單行輸入框,請使用createEdit指令,指定控制項位置和寬度。

let x;

建立多行輸入框,也需要指定高度。如果省略高度參數,那麼系統會自動建立一個單行輸入框。

let x = 1;

請注意,createEdit 指令傳回編輯框物件的參考。您可以使用下列屬性來操作編輯框內容。

  • .text
  • .readonly
  • .可見
  • .寬度
  • .高度
  • .onchange

範例:

let s = "Hello, World!";

創建按鈕

您可以在 UI 層中建立的另一個 UI 元素是常規按鈕。

x = 100;

createButton 指令傳回建立的按鈕物件的參考。您可以使用此引用來存取屬性,例如:

  • .text
  • .可見
  • .禁用
  • .寬度
  • .高度
  • .onclick

範例:

https://codeguppy.com/code.html?hints/other_20


JavaScript 是建立互動式和動態應用程式的重要工具,理解其核心概念是掌握這種強大語言的第一步。本指南介紹了關鍵的 JavaScript 基礎知識,為變數、迴圈、函數等提供了快速、實用的參考。透過在 codeguppy.com 上進行練習,學習者可以將新學到的知識直接應用到編碼練習中,透過實踐經驗加深理解。當您繼續探索 JavaScript 時,請記住,持續的練習和實驗是精通並釋放創意編碼的全部潛力的關鍵。

以上是JavaScript 和 codeguppy.com 快速介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn