基于easyX動(dòng)畫(huà)案例開(kāi)發(fā)導(dǎo)向的C語(yǔ)言程序設(shè)計(jì)課程 教學(xué)方法研究

宋雅娟，邊 晶

(1.蘇州市職業(yè)大學(xué) 計(jì)算機(jī)工程學(xué)院，江蘇 蘇州 215104；2.長(zhǎng)春大學(xué) 計(jì)算機(jī)科學(xué)技術(shù)學(xué)院，長(zhǎng)春 130022)

C語(yǔ)言是計(jì)算機(jī)基礎(chǔ)性程序設(shè)計(jì)語(yǔ)言，它的發(fā)展貫穿了計(jì)算機(jī)發(fā)展的歷程，它蘊(yùn)含了程序設(shè)計(jì)的基本思想，是理工科高等院校的一門(mén)基礎(chǔ)課程[1]。一直以來(lái)，C語(yǔ)言教學(xué)都是圍繞語(yǔ)法知識(shí)這個(gè)主線展開(kāi)，按照順序結(jié)構(gòu)、選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)的順序來(lái)學(xué)習(xí)程序結(jié)構(gòu)，這種線性教學(xué)模式可以循序漸進(jìn)地把教學(xué)內(nèi)容傳授給學(xué)生，但是很難鍛煉學(xué)生的整體編程思維。學(xué)生長(zhǎng)期反復(fù)地學(xué)習(xí)基礎(chǔ)知識(shí)和經(jīng)典算法，雖然可以讀懂和編寫(xiě)簡(jiǎn)單的程序，但很難形成對(duì)編程的興趣，也沒(méi)有自主思維和實(shí)踐創(chuàng)新的意識(shí)[2]。王洋在《Java就該這樣學(xué)》一書(shū)中提出一種以玩游戲的方法來(lái)玩代碼的思路，借助Java的圖形類庫(kù)引導(dǎo)學(xué)生設(shè)計(jì)自己的小動(dòng)畫(huà)，小游戲[3]。標(biāo)準(zhǔn)的C是沒(méi)有圖形庫(kù)的，圖形庫(kù)都是第三方的擴(kuò)展，比如TC2.0的graphics.h等等。但目前C語(yǔ)言的教學(xué)實(shí)踐環(huán)境主要是在VC環(huán)境下進(jìn)行，而VC下制作圖形程序需要使用MFC或者OPENGL，增加了學(xué)習(xí)的難度。如果能找到在VC環(huán)境下制作圖形程序的一種方便的庫(kù)，設(shè)計(jì)適合的案例引導(dǎo)學(xué)生掌握?qǐng)D形程序設(shè)計(jì)方法，把原來(lái)的語(yǔ)法知識(shí)融入案例的開(kāi)發(fā)過(guò)程中，同時(shí)鼓勵(lì)學(xué)生開(kāi)放想象力自行設(shè)計(jì)自己的動(dòng)畫(huà)，必能激發(fā)學(xué)生學(xué)習(xí)C語(yǔ)言編程的興趣，提高自主思維和實(shí)踐創(chuàng)新的意識(shí)。easyX圖形庫(kù)正是這樣的一種工具，它融合了VC方便的開(kāi)發(fā)平臺(tái)和TC簡(jiǎn)單的繪圖功能，可以幫助C語(yǔ)言初學(xué)者快速上手圖形和游戲編程[4]。easyX可以從網(wǎng)上下載，安裝簡(jiǎn)單。本文以easyX開(kāi)發(fā)的一個(gè)簡(jiǎn)單案例為線索來(lái)設(shè)計(jì)C語(yǔ)言程序設(shè)計(jì)課程的教學(xué)方法。

1 easyX庫(kù)簡(jiǎn)介

easyX是針對(duì)C++的圖形庫(kù)，可以幫助C語(yǔ)言初學(xué)者快速上手圖形和游戲編程。比如，可以用VC + easyX很快地用幾何圖形畫(huà)一個(gè)房子，或者一輛移動(dòng)的小車，可以編寫(xiě)俄羅斯方塊、貪吃蛇、黑白棋等小游戲，可以練習(xí)圖形學(xué)的各種算法等等[4]。

easyX圖形庫(kù)主要提供了用于繪制圖形的常用函數(shù)庫(kù)及相應(yīng)的頭文件。使用easyX非常簡(jiǎn)單，只要下載文件夾，將其lib文件夾和include文件夾內(nèi)容分別拷貝到Visual C++的include和lib文件中即可。

在使用easyX提供的函數(shù)前需要使用initgraph(640, 480)對(duì)屏幕進(jìn)行初始化，設(shè)置顯示屏幕的大小，結(jié)束后使用closegraph()函數(shù)關(guān)閉。

easyX主要提供了顏色設(shè)置、繪制圖形、輸出文本等函數(shù)。其中前景顏色設(shè)置函數(shù)為setcolor，如果要將前景色設(shè)置為紅色，可使用預(yù)定義顏色setcolor(RED)或使用RGB顏色setcolor(0xff0000)。填充色設(shè)置函數(shù)為setfillcolor。可以結(jié)合畫(huà)筆程序?qū)φ誩asyX提供的庫(kù)函數(shù)幫助學(xué)生理解函數(shù)的意義和用法。畫(huà)筆程序提供的畫(huà)圖工具如圖1所示。

下面列出幾個(gè)常用于繪制圖形的函數(shù)：

(1)void circle(int x,int y,radius)：以指定的x,y坐標(biāo)為圓心、radius為半徑畫(huà)圓，對(duì)應(yīng)于畫(huà)筆程序里的畫(huà)空心圓的工具。

(2)void fillellipse(int left,int top,int right,int bottom)：以left,top為橢圓外切矩形左上角坐標(biāo)、right,bottom為右下角坐標(biāo)繪制具有指定填充色的橢圓。

(3)void rectangle(int left,int top,int right,int bottom)：以left,top為矩形左上角坐標(biāo)、right,bottom為右下角坐標(biāo)繪制具有矩形。

(4)void moveto(int x,int y)：將光標(biāo)移動(dòng)到坐標(biāo)x,y 處。

(5)void lineto(int x,int y)：從光標(biāo)所在處畫(huà)一條直線到坐標(biāo)x,y處，對(duì)應(yīng)于畫(huà)筆程序里的畫(huà)直線工具。

(6)void polygon(const POINT *points,int num)：畫(huà)多邊形。

easyX中在指定位置輸出文本的函數(shù)是outtextxy(int x,int y, LPCTSTR str)，可配合settextcolor和settextstyle在屏幕上輸出不同顏色和字體的文字。

在實(shí)踐過(guò)程中可結(jié)合應(yīng)用C語(yǔ)言其它的庫(kù)函數(shù)來(lái)完成動(dòng)畫(huà)效果，比如用隨機(jī)函數(shù)rand()來(lái)獲得隨機(jī)值，用Sleep(int time)來(lái)使程序進(jìn)行休眠。

2 應(yīng)用easyX開(kāi)發(fā)的簡(jiǎn)單案例介紹

結(jié)合1節(jié)介紹的函數(shù)制作一個(gè)動(dòng)畫(huà)程序應(yīng)用案例，程序部分運(yùn)行效果如圖2所示。

圖2 不斷上升的氣泡

程序運(yùn)行時(shí)，屏幕上出現(xiàn)一個(gè)640×480的窗口，背景色為天青色模擬魚(yú)缸中水的顏色。水中出現(xiàn)50個(gè)大小不同、位置不同的白色氣泡。每個(gè)氣泡都以緩慢的速度在上升，當(dāng)氣泡接觸到上邊沿時(shí)消失，從下方同樣橫坐標(biāo)的位置重新出現(xiàn)，重復(fù)上升過(guò)程，循環(huán)往復(fù)。這個(gè)程序中涉及了順序結(jié)構(gòu)、循環(huán)結(jié)構(gòu)、選擇結(jié)構(gòu)、函數(shù)、結(jié)構(gòu)體、數(shù)組等C語(yǔ)言語(yǔ)法[5]內(nèi)容。此程序案例作為一個(gè)基礎(chǔ)，在此基礎(chǔ)上可以增加水草、魚(yú)等更多水里不同的生物以及不同的運(yùn)動(dòng)方式。也可以繼續(xù)在此基礎(chǔ)上增加鼠標(biāo)、鍵盤(pán)等處理方法形成人機(jī)互動(dòng)的游戲效果。在實(shí)踐過(guò)程中有學(xué)生以此實(shí)現(xiàn)大魚(yú)吃小魚(yú)的程序、天空落雨、景物變化等種種不同的動(dòng)畫(huà)效果。

3 基于動(dòng)畫(huà)案例的課堂教學(xué)過(guò)程展開(kāi)

easyX用于開(kāi)發(fā)圖形案例、動(dòng)畫(huà)案例甚至游戲都比較容易上手，在教學(xué)過(guò)程中首先尋找已有的動(dòng)畫(huà)案例，向?qū)W生展示動(dòng)畫(huà)效果，使學(xué)生對(duì)C語(yǔ)言的學(xué)習(xí)結(jié)果產(chǎn)生向往。之后，提取出常用的幾個(gè)函數(shù)，簡(jiǎn)單地向?qū)W生講解一下函數(shù)的含義和調(diào)用方法。教師使用自行設(shè)計(jì)的小而全功能的案例在課堂上首先快速開(kāi)發(fā)出原型程序，讓學(xué)生體會(huì)easyX的易用性，激發(fā)學(xué)習(xí)動(dòng)力。之后，課程即以案例為主線，在開(kāi)發(fā)案例的過(guò)程中穿插講解相關(guān)理論知識(shí)。

3.1 順序結(jié)構(gòu)及函數(shù)調(diào)用

在初始窗口中繪制一個(gè)魚(yú)缸及水底一氣泡。

(1)圖形界面初始化。可通過(guò)下面的圖形函數(shù)進(jìn)行初始化，運(yùn)行界面如圖3所示。

initgraph(640,480)。

圖3 設(shè)置初始窗口

當(dāng)圖形繪制結(jié)束后，可用圖形關(guān)閉函數(shù)closegraph()進(jìn)行關(guān)閉。

(2)繪制特定顏色圖形。例如在特定背景色下繪制特定顏色實(shí)心圓，如圖4所示。

圖4 天青色背景下的指定位置的白色實(shí)心圓

initgraph(640,480);

setbkcolor(CYAN);

cleardevice();

setcolor(WHITE);

setfillcolor(WHITE);

fillcircle(300,450,30);

getch()。

上述代碼可以讓學(xué)生了解C語(yǔ)言中的函數(shù)調(diào)用方式及順序結(jié)構(gòu)的使用方法。

(3)學(xué)生自由繪制。讓學(xué)生自行學(xué)習(xí)“幫助文件”，繪制出不同大小、不同位置的圓及其它組合圖形。

3.2 變量及循環(huán)結(jié)構(gòu)的應(yīng)用

在基本圖形的基礎(chǔ)上，結(jié)合變量及循環(huán)結(jié)構(gòu)的使用，使圖形復(fù)雜化。

(1)講解for循環(huán)常規(guī)語(yǔ)法知識(shí)及變量使用。

(2)重新設(shè)置圓的坐標(biāo)及大小為變量值。

(3)使用循環(huán)重復(fù)在屏幕上畫(huà)圓，使得后產(chǎn)生的圓都在原來(lái)圖形位置偏上一點(diǎn)，并且變大一點(diǎn)，如圖5所示。

圖5 引入循環(huán)結(jié)構(gòu)后的多個(gè)不同圓的繪制

(4)引入Sleep()函數(shù)保持畫(huà)面穩(wěn)定。

(5)引入使用背景色重畫(huà)原圖實(shí)現(xiàn)擦除原圖形效果，從而形成動(dòng)畫(huà)效果。

(6)學(xué)生自行實(shí)踐如何使自己設(shè)計(jì)的組合圖形上下左右移動(dòng)的效果。

此部分可以讓學(xué)生理解循環(huán)結(jié)構(gòu)的作用，學(xué)習(xí)循環(huán)結(jié)構(gòu)的語(yǔ)法知識(shí)。還可以引導(dǎo)學(xué)生以此為基礎(chǔ)設(shè)計(jì)自己需要的圖形及動(dòng)畫(huà)效果。

3.3 選擇結(jié)構(gòu)的應(yīng)用

通過(guò)案例展示，如何用“選擇結(jié)構(gòu)”處理圖形繪制過(guò)程中的邊界問(wèn)題及事件觸發(fā)問(wèn)題。

(1)講解if…else選擇結(jié)構(gòu)的基本語(yǔ)法。

(2)使用選擇結(jié)構(gòu)處理不斷上升的圓上越界的情況，當(dāng)上越界時(shí)讓實(shí)心圓從下方重新以原有大小位置出現(xiàn)。

(3)引入鼠標(biāo)處理方法，完成當(dāng)鼠標(biāo)點(diǎn)擊到圖形內(nèi)部時(shí)圖形消失功能。

此部分可以讓學(xué)生理解選擇結(jié)構(gòu)的作用，學(xué)習(xí)選擇結(jié)構(gòu)的語(yǔ)法知識(shí)，并引導(dǎo)學(xué)生以此為基礎(chǔ)設(shè)計(jì)自己需要的圖形及動(dòng)畫(huà)效果。

3.4 數(shù)組的應(yīng)用

通過(guò)案例展示，如何用數(shù)組對(duì)圖形進(jìn)行批處理。

(1)讓屏幕上出現(xiàn)多個(gè)不同橫坐標(biāo)的圓，縱坐標(biāo)及大小保持相同。

(2)引入一維數(shù)組實(shí)現(xiàn)多個(gè)圓的同時(shí)存在、同時(shí)上升變化等，如圖6所示。

圖6 引入數(shù)組后的多個(gè)不同氣泡在屏幕上變化效果

(3)使用一維數(shù)組保存各個(gè)圓的消失和存在狀態(tài)，當(dāng)鼠標(biāo)點(diǎn)擊到某個(gè)圓時(shí)該圓的標(biāo)志為消失狀態(tài)。

引入數(shù)組后可讓學(xué)生理解批量數(shù)據(jù)的使用，在此處即可引導(dǎo)學(xué)生制作第2節(jié)中案例的多個(gè)不同位置的動(dòng)畫(huà)形式氣泡。

3.5 結(jié)構(gòu)體與函數(shù)定義

用案例展示如何用“結(jié)構(gòu)體”繪制一批形態(tài)各異的氣泡。

(1)結(jié)構(gòu)體基本語(yǔ)法講解。

(2)使用結(jié)構(gòu)體保存各個(gè)圓的圓心坐標(biāo)及半徑。

(3)改變程序?yàn)楦鱾€(gè)不同位置及大小的圓。

(4)自定義函數(shù)來(lái)進(jìn)行圓的繪制與擦除。

可參考如下代碼進(jìn)行講解：

void drawcircle(COLORREF color,struct circle mycircles[])

{ int i;

for(i=0;i<50;i++)

{

setcolor(color);

setfillcolor(color);

fillcircle(mycircles[i].x,mycircles[i].y,mycircles[i].r);

}

}

3.6 文件

用文件方式保存程序結(jié)束時(shí)各個(gè)圓的狀態(tài)，在程序運(yùn)行時(shí)打開(kāi)文件，取出上一次狀態(tài)，再現(xiàn)前景。

在課程進(jìn)行過(guò)程中，還可以采取各種方式鼓勵(lì)學(xué)生創(chuàng)新，如舉辦作品展及作品PK等方式激發(fā)學(xué)生不斷發(fā)揮潛力，完善自己作品。

4 結(jié)語(yǔ)

隨著計(jì)算機(jī)的發(fā)展，計(jì)算機(jī)編程語(yǔ)言的學(xué)習(xí)已經(jīng)越來(lái)越普及，目前不只大學(xué)生學(xué)習(xí)計(jì)算機(jī)語(yǔ)言，中小學(xué)生的計(jì)算機(jī)編程課堂也越來(lái)越活躍。因而編程課程越來(lái)越需要行之有效并且趣味性強(qiáng)的教學(xué)方法。在C語(yǔ)言程序設(shè)計(jì)課堂應(yīng)用easyX圖形庫(kù)開(kāi)發(fā)動(dòng)畫(huà)程序案例比較符合教學(xué)需求。筆者在自己的C語(yǔ)言課堂嘗試使用這種方法，提高了學(xué)習(xí)興趣，激發(fā)了學(xué)生的創(chuàng)作欲望，從而以玩游戲的心態(tài)來(lái)玩代碼，學(xué)習(xí)效果比較明顯。當(dāng)然，為了取得更好的教學(xué)效果，還需要編寫(xiě)適合的教材、改革考核方式，這是在以后的教學(xué)工作中需要進(jìn)一步嘗試的內(nèi)容。