Programming Kid Games with Microsoft Small BasicDemo Chapter 5.docx

Programming Kid Games with Microsoft Small BasicDemo Chapter 5.docx

《Programming Kid Games with Microsoft Small BasicDemo Chapter 5.docx》由会员分享，可在线阅读，更多相关《Programming Kid Games with Microsoft Small BasicDemo Chapter 5.docx（42页珍藏版）》请在冰豆网上搜索。

ProgrammingKidGameswithMicrosoftSmallBasicDemoChapter5

ProgrammingKidGamesWith

SmallBasic

5.SafecrackerProgram

ReviewandPreview

∙We’vecompletedourreviewoftheSmallBasicdevelopmentenvironment,andtheobjectsandlanguageusedtoprogramusingSmallBasic.Wecanfinallystartbuildingsomekidgames.Foreachprogrambuilt,weprovidestep-by-stepinstructionsindesigningthegamegraphicwindowsanddetailedexplanationsofthecodebehindtheprograms.

∙ThefirstprogramwebuildisaSafecrackerthatasksyoutoguessasecretcombinationofnumbersusingcluesfromthecomputer.

SafecrackerProgramPreview

∙Inthischapter,wewillbuildaSafecrackergame.Abanksafeislockedandcanonlybeopenedifyouenterthepropercombination.Thecombinationcanbe2to4non-repeatingdigits（digitsrangefrom1to9）.Aftereachguess,youaretoldhowmanydigitsarecorrectandhowmanyareinthecorrectlocation.Basedonthisinformation,youmakeanotherguess.Youcontinueguessinguntilyougetthecorrectcombinationorstopthegame.

∙ThefinishedprogramissavedasSafecrackerintheKidGamesSB\KidGamesSBPrograms\Safecrackerfolder.StartSmallBasicandopenthefinishedprogram.Runtheprogram（clicktheRuntoolbarbuttonorpress）.Thegamewillappearinits‘stopped’state.Thebanksafeisdisabled–nocombinationcanbeentered.Atthispoint,youcanclicktheStartGamebuttontostartthegame,clickChangeOptionstochangeprogramoptions（programoptionsaredisplayedinthetitlebararea）orclickExittoexittheprogram.

∙

ClickChangeOptionstochangeoptions.Atextwindowwillappear:

Theonlyoptionyoucanchangeisthenumberofdigitsinthecombination.Iselected3,thenpressedEnter.Thegraphicswindowreappearswiththegamestillinthe‘stopped’state:

Noticethetitlebarareanowreflects3digitsinthecombinationandthatnumberofdigitsisshowninthebanksafe.

∙ClickStartGametostartplaying.TwoofthebuttonsdisappearandaResultsareaappearsontherightofthewindow.Wecallthisthe‘playing’state:

Inthisstate,youmakeaguessatthethreedigitcombinationusingthenumberkeysonthekeyboard.Aftereachguess,theresultsofyourguessaredisplayedintheResultsarea.YoukeepguessinguntilcorrectoruntilyouclickStopGame.

∙

Enteraguess;Ientered123:

Asaguessisentered,noticeseveralthings.Onceakeyispressed,thecorrespondingdigitappearsintheproperlocation.Oncethreebuttonsarepressed（numberscannotrepeat）,theresultsareshown.Youareshownyourguessandtwonumbersseparatedbyacolon（:

）.Thenumbertotheleftofthecolontellsyouhowmanydigitsinyourguesswerecorrectandthenumberontherighttellsyouhowmanywereinthecorrectposition.Ifincorrect,youwillhearan‘uh-oh’sound.Obviously,myguesswasnotverygood!

∙

WhenItry456,Isee:

Muchbetter.Now,Iknowthatthecombinationhaseithera4anda5,a4anda6,ora5anda6.Ialsoknownoneofthedigitsareintheirproperposition.

∙

WhatifItry745（Iassumedthe4and5shouldstayandshiftedthemover）

Sinceonly1digitisnowcorrect,Iknowthe6isdefinitelyinthecombination.Ithinkyou’restartingtoseehowthegameworks.

∙

Icontinuedplayinguntilfinally,afterentering648:

Thecorrectcombinationwasentered!

Alittlecelebratorysoundisheardandamessageisshown.Thegamereturnstoitsstoppedstatetoallowanothergame,changeoptionsortoexittheprogram.

∙Continueplayingthegametounderstanditsoperation.ClickExitwhenyou’redonetostopthegame.Lookoverthecodeintheeditorifyoulike.

∙

Youwillnowbuildthisprograminstages.AsyoubuildSmallBasicprograms,wealwaysrecommendtakingaslow,step-by-stepprocess.Itminimizesprogrammingerrorsandhelpsbuildyourconfidenceasthingscometogetherinacompleteprogram.Thisistheapproachwewilltakeonallprogramsinthesenotes.

∙Weaddresswindowdesign.Thisinvolvesdecidingjustwhatweneedtodisplayinthegraphicswindowtoplaythegame.And,weaddresscodedesign.Wediscusshowtoformthesecretcombination,howtogatheruserinputandhowtocheckanenteredcombination.

GameWindowDesign

∙Sincethisisourfirstprogram,let’slookbrieflyattheideaofgamewindowdesign.ThisisafirststepinbuildingaSmallBasicgameprogram（oranyprogram）whereyoudecidewhatyouwanttodisplaytotheuserinthegraphicswindow.Inthiswindowdesignphase,youneedtoknowwhatinputsyouneedfromtheuserandhowyouwanttoshowthemoutputs.

∙Makeinitialsketchesofwhereyouwantcertaingameelementstoappear.Alwayshaveanareatoprovidemessagestotheuser–messageslikehowtostart/stopthegameandmessagesonhowtheyareprogressinginthegame.Usebuttoncontrolstoperformspecifictasks（start,stop,changeoptions）inyourprogram.Inyourdesign,sinceyouareusingthegraphicswindow,makesureyouincorporategraphicselementsofcolorsandshapes.Makethewindowpleasanttolookatandeasytounderstand.Finalizeyoursketchongraphpapertohelpwithpositioningpartsofthefinallayout.Makenotesfordimensionsandlocationsofdifferentcomponents.

∙TranslateyoursketchtoactualSmallBasiccodetodrawthewindowelements.WithSmallBasic,youcanmakequickchangesandseetheresultsofthesechangesimmediately.Thewindowdesignprocessisiterative–meaningyouwillalwaysbetweakingcertainitemsuntilyouaresatisfiedwithyourwindowdesign.Forthegamesinthesenotes,wepresentourideasforwindows.Feelfreetomodifytheminanywayyouchoose.

SafecrackerWindowDesign

∙HereisthesketchforthewindowlayoutoftheSafecrackergame:

Wedrawasafeontheleftsideofthewindowusinglinesandrectangles.Thecombinationdigitswillbedisplayedinborderedrectangles.Alittle‘moneybag’graphicisadded.Therightsideofthewindowisablankareawherewewillprovideinformationtotheuserattheappropriatetimes.Threebuttoncontrolswillbeused:

onetostartandstopthegame,onetochangeoptionsandonetoexittheprogram.

∙WenowbeginwritingcodefortheSafecrackergameprogram.Wewillwritethecodeinseveralsteps.Asafirststep,wewillwritethecodethatdrawsthegamewindowandestablishesthe‘stopped’state.Wewritecodetosetgameoptionsinatextwindow.Then,welookathowtogoto‘playing’statefollowingclickingoftheStartGamebutton.Duringthecodedevelopmentprocess,recognizeyoumaymodifyaparticularprocedureseveraltimesbeforearrivingatthefinishedproduct.

∙

Beforestarting,makesureyouhaveestablishedafolderonyourcomputerforbuildingSmallBasicprograms.Alwayssaveyourprogramsinthisfolder.Donotsavetheminthefolderusedinthesenotes（KidGamesSB\KidGamesSBPrograms）.Leavethisfolderintactsoyoucanalwaysreferencethefinishedprograms,ifneeded.

∙StartanewprograminSmallBasic.Oncestarted,wesuggestyouimmediatelysavetheprogramwithanameyouchoose.Thissetsupthefolderandfilestructureneededforyourprogram.

WindowDesign–DrawSafe

∙WeseeinthesketchthatthesafeusedintheSafecrackergameismadeupofrectangles,lines,aheading（BANK）andalittlemoneybaggraphic.IntheKidGamesSB\KidGamesSBPrograms\Safecrackerfolderisafilemoney.jpg.Thisisthegraphicwewilldisplay.Itisloadedbytheprogram.Copythisfiletoyourprogram’sfolder.

∙Now,addthiscodetotheeditor.

'Safecracker

InitializeProgram（）

SubInitializeProgram

'graphicswindow

GraphicsWindow.Width=650

GraphicsWindow.Height=400

'Drawbanksafe

GraphicsWindow.BrushColor="Blue"

GraphicsWindow.FillRectangle（0,0,310,400）

GraphicsWindow.BrushColor="LightGray"

GraphicsWindow.FillRectangle（25,25,260,350）

GraphicsWindow.BrushColor="Gray"

GraphicsWindow.FillRectangle（50,50,210,300）

GraphicsWindow.PenWidth=2

GraphicsWindow.PenColor="Black"

GraphicsWindow.DrawRectangle（25,25,260,350）

GraphicsWindow.DrawRectangle（50,50,210,300）

GraphicsWindow.DrawLine（25,25,50,50）

GraphicsWindow.DrawLine（285,25,260,50）

GraphicsWindow.DrawLine（285,375,260,350）

GraphicsWindow.DrawLine（25,375,50,350）

GraphicsWindow.BrushColor="Yellow"

GraphicsWindow.FontBold="false"

GraphicsWindow.FontSize=48

GraphicsWindow.DrawText（95,50,"BANK"）

MoneyImage=ImageList.LoadImage（Program.Directory+"\money.jpg"）

GraphicsWindow.DrawImage（MoneyImage,80,200）

EndSub

Thiscodeisjustatranslationofourwindowsketchintoactualcode.ThefirstlineofcodecallsasubroutineInitializeProgramwherewewillputallcodeneededtosetuptheprogramforuse.Allremainingcodeheregoesinthatsubroutine.Noticethegraphicsfile（money.jpg）isloadedfromtheProgram.Directoryfolder–thisisyourprogram’sfolder.That’swhyweaskedyoutocopythefiletothisparticularfolder.Noticethelineloadingthefileisdisplayedontwolinesinthesenotesduetomarginrestrictions.Makesurethisistypedononelineinthecodeeditor.Lookforsimilaroccurrencesthroughoutthenotesforthiscourse.

∙SaveandRun（clickRuninthetoolbar）theprogram.Thesafewillappear:

Ifthemoneybagdoesnotshowup,double-checkyoucopiedthefileintothesamefolderholdingyourprogramcode.

WindowDesign–DisplayCombinationDigits

∙Thecombinationenteredbytheuserwillbedisplayedinborderedrectanglesonthesafe.Todrawtheserectangles,weneedtoknowhowmanydigitswillbeentered.ThevariableNumberDigitswillbeusedforthispurpose–wegiveitadefault（beginningvalue）of2.Thiscanbechangedbytheu