更換舞臺背景

要想編寫小遊戲或動畫，讓角色移動是很是基本的操做。爲了更好的理解移動值的設置，咱們換一個舞臺背景。操做以下：動畫

①在舞臺設置中，點擊「選擇背景」圖標，選擇背景spa

打開UC瀏覽器查看更多精彩圖片3d

②在背景列表中找到Xy-grid圖片。點擊該圖片，將舞臺背景換成以下圖。blog

打開UC瀏覽器查看更多精彩圖片遊戲

Xy-grid舞臺背景是一個標有xy座標軸的圖片，角色默認位置是舞臺中央，也就是(x:0,y:0)，咱們稱之爲原點。事件

圖上的任意位置都是由x值和y值共同定義的，咱們稱之爲座標，表示方式是(x,y)。x值（第一個數字）是位置距原點的左側或右側的距離。Y值（第二個數字）是位置距原點的上面或下面的距離。圖片

角色移動

下面咱們試着作如下兩個操做：橫向移動和縱向移動。以後再解釋x和y的值。class

一、橫向移動。

第一步：在「事件」類別中找到圖1這個積木塊，並拖動到代碼區，意思是點擊舞臺區上的「運行」圖標，程序開始運行；

打開UC瀏覽器查看更多精彩圖片

圖1

第二步：在「運動」類別中找到圖2這個積木塊，並拖動到代碼區，將x的值改爲100，意思是角色會橫向向右移動100。

打開UC瀏覽器查看更多精彩圖片

圖2

代碼塊如圖3：

打開UC瀏覽器查看更多精彩圖片

圖3

第三步：點擊舞臺區的「運行」圖標，程序開始運行，小貓會橫向向右移動100，如圖4。

GIF打開UC瀏覽器查看更多精彩圖片

圖4

思考：小朋友能夠將x的值100改爲-100，看看小貓會朝那邊移動。

二、縱向移動

使用上面提到的圖一、圖2兩個積木塊，並將圖2的積木塊的y的值改爲100，如圖5

打開UC瀏覽器查看更多精彩圖片

圖5

點擊舞臺區「運行」圖標，程序開始運行，小貓會縱向向上移動100，如圖6

GIF打開UC瀏覽器查看更多精彩圖片

圖 6

思考：小朋友能夠將y的值100改爲-100，看看小貓會朝那邊移動。

X座標和y座標

上面咱們經過兩個操做了解了如何讓角色移動。如今咱們就來講說x和y這兩個值。前面已經說過Scratch舞臺區由x、y的值來定義角色的位置，即座標(x,y)。舞臺區的中央x、y的值均爲0，即原點(0,0)。

x值是位置距原點的左側或右側的距離，正值爲右側，負值爲左側。Y值是位置距原點的上面或下面的距離，正值是上面，負值是下面。

前面咱們作橫向移動，x的值爲100，y的值爲0。也就是說角色的位置，y值與原點距離爲0，即縱向方向不動；x值與原點距離爲100，即向右移動100。位置標識如圖7。

一樣作縱向移動，x的值爲0，y的值爲100。角色的位置，x值與原點距離是0，即橫向方向不動；y值與原點距離爲100，即向上移動100。位置表示如圖7。

打開UC瀏覽器查看更多精彩圖片

圖7

那麼咱們如今把移動的位置改爲x爲100，y爲100呢？如圖8

打開UC瀏覽器查看更多精彩圖片

圖8

從圖9的程序運行來看，小貓會往右上方移動，也就是往(x:100,y:100)的點移動。(x:100,y:100)的意思就是：x值與原點距離是100，y值與原點距離是100。

GIF打開UC瀏覽器查看更多精彩圖片

圖9

搞清楚上面說的，小朋友能夠再試試圖十、圖11兩個積木塊。圖10表示只增長x的座標值，y的值不變。圖11表示只增長y的座標值，x的值不變。

打開UC瀏覽器查看更多精彩圖片

圖10：：只增長x的座標值，y的值不變

打開UC瀏覽器查看更多精彩圖片

圖11：只增長y的座標值，x的值不變

好了小朋友們，角色的移動就說到這，你們再好好理解下座標這個概念吧。下一篇我會和大家一塊兒探討角色和場景的設置。