CardsStarterKit.htm 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817
  1.  <html xmlns:MSHelp="http://msdn.microsoft.com/mshelp" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:xanx="http://schemas.microsoft.com/developer/xanx/2005"><head><META http-equiv="Content-Type" content="text/html; charset=utf-8"><META NAME="save" CONTENT="history">
  2. <title>Card Game Starter Kit</title>
  3. <style>
  4. <!--
  5. .userDataStyle
  6. {
  7. behavior: url(#default#userData);
  8. }
  9. div.saveHistory
  10. {
  11. behavior: url(#default#saveHistory);
  12. }
  13. img.toggle
  14. {
  15. border: 0;
  16. margin-right: 5;
  17. }
  18. img#languageFilterImage
  19. {
  20. border: 0;
  21. margin-left: 0;
  22. vertical-align: middle;
  23. }
  24. img#membersOptionsFilterImage
  25. {
  26. border: 0;
  27. margin-left: 0;
  28. vertical-align: middle;
  29. }
  30. img#toggleAllImage
  31. {
  32. margin-left: 0;
  33. vertical-align: middle;
  34. }
  35. MSHelp\:link
  36. {
  37. text-decoration: underline;
  38. color: #0000ff;
  39. hoverColor: #3366ff;
  40. filterString: ;
  41. }
  42. body
  43. {
  44. background: #FFFFFF;
  45. color: #000000;
  46. font-family: Verdana;
  47. font-size: medium;
  48. font-style: normal;
  49. font-weight: normal;
  50. margin-top: 0;
  51. margin-bottom: 0;
  52. margin-left: 0;
  53. margin-right: 0;
  54. width: 100%;
  55. /*font-size: 110%;*/
  56. }
  57. div.section
  58. {
  59. margin-left: 15px;
  60. }
  61. div.hxnx5
  62. {
  63. margin-left: 1.5em;
  64. }
  65. h1, h2, h3, h4, h5, h6
  66. {
  67. font-family: Verdana, Arial, Helvetica, sans-serif;
  68. margin-top: 18;
  69. margin-bottom: 8;
  70. font-weight: bold;
  71. }
  72. h1
  73. {
  74. font-size: 130%;
  75. color: #003399;
  76. }
  77. div#scrollyes h1 /* Changes font size for full-scrolling topic */
  78. {
  79. font-size: 150%;
  80. }
  81. h2
  82. {
  83. font-size: 125%;
  84. }
  85. h3
  86. {
  87. font-size: 115%;
  88. margin-top: 9;
  89. margin-bottom: 4;
  90. }
  91. h4
  92. {
  93. font-size: 115%;
  94. margin-top: 9;
  95. margin-bottom: 4;
  96. }
  97. h5
  98. {
  99. font-size: 100%;
  100. margin-top: 9;
  101. margin-bottom: 4;
  102. }
  103. h6
  104. {
  105. font-size: 100%;
  106. margin-top: 9;
  107. margin-bottom: 4;
  108. }
  109. ul p, ol p, dl p
  110. {
  111. margin-left: 0em;
  112. }
  113. p
  114. {
  115. margin-top: .6em;
  116. margin-bottom: .6em;
  117. }
  118. td p
  119. {
  120. margin-top: 0.0em;
  121. margin-bottom: 0.6em;
  122. }
  123. dd p
  124. {
  125. margin-top: 0.0em;
  126. margin-bottom: 0.6em;
  127. }
  128. .image
  129. {
  130. text-align: center;
  131. }
  132. dl
  133. {
  134. margin-top: 0em;
  135. margin-bottom: 1.3em;
  136. }
  137. dd
  138. {
  139. margin-bottom: 0em;
  140. margin-left: 1.5em;
  141. }
  142. dl.glossary dd
  143. {
  144. margin-bottom: 0em;
  145. margin-left: 1.5em;
  146. }
  147. dt
  148. {
  149. margin-top: .6em;
  150. margin-bottom: 1;
  151. }
  152. ul, ol
  153. {
  154. margin-top: 0.6em;
  155. margin-bottom: 0.6em;
  156. }
  157. ol
  158. {
  159. margin-left: 2.5em;
  160. }
  161. ul
  162. {
  163. list-style-type: disc;
  164. margin-left: 1.9em;
  165. }
  166. li
  167. {
  168. margin-bottom: 0.4em;
  169. }
  170. ul ol, ol ol
  171. {
  172. list-style-type: lower-alpha;
  173. }
  174. pre
  175. {
  176. margin-top: .6em;
  177. margin-bottom: .6em;
  178. }
  179. pre
  180. {
  181. font: 105% Lucida, mono;
  182. color: #000066;
  183. }
  184. code
  185. {
  186. font-family: Monospace, Courier New, Courier;
  187. font-size: 105%;
  188. color: #000066;
  189. }
  190. table.userdata td
  191. {
  192. background: #ffffff;
  193. background-color: #F5F5F5;
  194. border-color: #ffffff;
  195. border: none;
  196. }
  197. table.clsWarning
  198. {
  199. background: #ffffff;
  200. padding: 0px;
  201. margin: 0px;
  202. border: none;
  203. }
  204. table.clsWarning td
  205. {
  206. padding: 0px;
  207. margin: 0px;
  208. background: #ffffff;
  209. vertical-align: middle;
  210. font-size: 70%;
  211. }
  212. div#mainSection table
  213. {
  214. width: 98%;
  215. background: #ffffff;
  216. margin-top: 5px;
  217. margin-bottom: 5px;
  218. }
  219. div#mainSection table th
  220. {
  221. padding: 5px 6px;
  222. background: #EFEFF7;
  223. text-align: left;
  224. font-size: 70%;
  225. vertical-align: bottom;
  226. border-bottom: 1px solid #C8CDDE;
  227. }
  228. div#mainSection table td
  229. {
  230. padding: 5px 5px;
  231. background: #F7F7FF;
  232. vertical-align: top;
  233. font-size: 70%;
  234. border-bottom: 1px solid #D5D5D3;
  235. }
  236. div#syntaxCodeBlocks table th
  237. {
  238. padding: 1px 6px;
  239. color: #000066;
  240. }
  241. div#syntaxCodeBlocks table td
  242. {
  243. padding: 1px 5px;
  244. }
  245. span#runningHeaderText
  246. {
  247. color: #003399;
  248. font-size: 90%;
  249. padding-left: 13;
  250. }
  251. span#nsrTitle
  252. {
  253. color: #003399;
  254. font-size: 120%;
  255. font-weight: 600;
  256. padding-left: 13;
  257. }
  258. div#mainSection
  259. {
  260. font-size: 70%;
  261. width: 100%;
  262. }
  263. div#mainBody
  264. {
  265. font-size: 90%;
  266. margin-left: 15;
  267. margin-top: 10;
  268. padding-bottom: 20;
  269. }
  270. div#mainBody p, div#mainBody ol, div#mainBody ul, div#mainBody dl
  271. {
  272. padding-right: 5;
  273. }
  274. div#mainBody div.alert, div#mainBody div.code, div#mainBody div.tableSection
  275. {
  276. width:98.9%;
  277. }
  278. div.alert p, div.code p
  279. {
  280. margin-top:5;
  281. margin-bottom:8;
  282. }
  283. div#mainSection div.alert table
  284. {
  285. border: 0;
  286. }
  287. div#mainSection div.alert table th
  288. {
  289. padding-top: 0;
  290. padding-bottom: 0;
  291. padding-left: 5;
  292. padding-right: 5;
  293. }
  294. div#mainSection div.alert table td
  295. {
  296. padding-left: 5;
  297. padding-right: 5;
  298. }
  299. img.note
  300. {
  301. border: 0;
  302. margin-left: 0;
  303. margin-right: 3;
  304. }
  305. div#header
  306. {
  307. background-color: #D4DFFF;
  308. padding-top: 0;
  309. padding-bottom: 0;
  310. padding-left: 0;
  311. padding-right: 0;
  312. width: 100%;
  313. }
  314. div#header table
  315. {
  316. margin-top: 0;
  317. margin-bottom: 0;
  318. border-bottom-color: #C8CDDE;
  319. border-bottom-style: solid;
  320. border-bottom-width: 1;
  321. background: #D4DFFF;
  322. width: 100%;
  323. }
  324. div#header table td
  325. {
  326. color: #0000FF;
  327. font-size: 70%;
  328. padding-right: 20;
  329. padding-top: 1;
  330. padding-bottom: 1;
  331. border: none;
  332. background: #D4DFFF;
  333. }
  334. div#header table tr#headerTableRow3 td
  335. {
  336. padding-bottom: 2;
  337. padding-top: 5;
  338. padding-left: 15;
  339. }
  340. div#header table#bottomTable
  341. {
  342. border-top-color: #FFFFFF;
  343. border-top-style: solid;
  344. border-top-width: 1;
  345. text-align: left;
  346. padding-left: 15;
  347. }
  348. blockquote
  349. {
  350. margin-left: 3.8em;
  351. margin-right: 3.8em;
  352. margin-top: .6em;
  353. margin-bottom: .6em;
  354. }
  355. sup
  356. {
  357. text-decoration: none;
  358. font-size: smaller;
  359. }
  360. a:link
  361. {
  362. color: #0000FF;
  363. /* font-weight: bold */
  364. }
  365. a:visited
  366. {
  367. color: #0000AA;
  368. /* font-weight: bold */
  369. }
  370. a:hover
  371. {
  372. color: #3366FF;
  373. /* font-weight: bold */
  374. }
  375. .label
  376. {
  377. font-weight: bold;
  378. margin-top: 1em;
  379. margin-left: -26px;
  380. }
  381. .tl
  382. {
  383. margin-bottom: .75em;
  384. }
  385. .atl
  386. {
  387. padding-left: 1.5em;
  388. padding-bottom: .75em;
  389. }
  390. .cfe
  391. {
  392. font-weight: bold;
  393. }
  394. .mini
  395. {
  396. font-size: smaller;
  397. }
  398. .dt
  399. {
  400. margin-bottom: -.6em;
  401. }
  402. .indent
  403. {
  404. margin-left: 1.9em;
  405. margin-right: 1.9em;
  406. }
  407. .product
  408. {
  409. text-align: right;
  410. color: #333333;
  411. font-size: smaller;
  412. font-style: italic;
  413. }
  414. .buttonbarshade
  415. {
  416. position: relative;
  417. margin: 0;
  418. left: 0px;
  419. top: 2;
  420. width: 50%;
  421. height: 40px;
  422. }
  423. .buttonbartable
  424. {
  425. position: absolute;
  426. margin: 0;
  427. padding:0;
  428. border:0;
  429. left:0px;
  430. top: 2;
  431. width: 100%;
  432. height: 40px;
  433. }
  434. table.buttonbartable td, table.buttonbarshade td
  435. {
  436. background: #ffffff; /*#5177B8; #80C615;*/
  437. border-left: 0px solid #80C615;
  438. margin: 0;
  439. padding: 0px 0px 0px 0px;
  440. font-family: Impact, sans-serif;
  441. font-size: 14pt;
  442. }
  443. table.buttonbartable td.button1
  444. {
  445. background: #5177B8; /*#80C615;*/;
  446. padding: 0;
  447. font-weight: bold;
  448. text-align: center;
  449. cursor: hand;
  450. }
  451. table.buttonbartable td.button2
  452. {
  453. background: #5177B8; /*#80C615;*/;
  454. font-weight: bold;
  455. text-align: center;
  456. }
  457. table.buttonbartable td.button3
  458. {
  459. background: #5177B8; /*#80C615;*/;
  460. font-weight: bold;
  461. text-align: center;
  462. }
  463. table.buttonbartable td.runninghead
  464. {
  465. padding-left: 0px;
  466. font-style: italic;
  467. text-align: left;
  468. }
  469. .version
  470. {
  471. text-align: left;
  472. color: #000000;
  473. margin-top: 3em;
  474. margin-left: -26px;
  475. font-size: smaller;
  476. font-style: italic;
  477. }
  478. .lang, .ilang
  479. {
  480. color: #0000ff;
  481. font: normal 7pt Arial, Helvetica, sans-serif;
  482. }
  483. div.langMenu
  484. {
  485. position: absolute;
  486. z-index: 1;
  487. width: 96pt;
  488. padding: 8pt;
  489. visibility: hidden;
  490. border: 1px solid #000000;
  491. background: #ffffd0;
  492. }
  493. div.langMenu ul
  494. {
  495. padding-left: 2em;
  496. margin-left: 0;
  497. }
  498. div.filtered
  499. {
  500. margin: 4pt 0 8pt -26px;
  501. padding: 4px 4px 8px 26px;
  502. width: 100%;
  503. border: 2px solid #aaaacc;
  504. background: #ffffff;
  505. }
  506. div.filtered2
  507. {
  508. margin: 4pt 0 8pt -26px;
  509. padding: 4px 4px 8px 26px;
  510. width: 100%;
  511. border: none;
  512. background: #ffffff;
  513. }
  514. div.filtered h1, div.filtered h2, div.filtered h3, div.filtered h4
  515. {
  516. margin-left: -22px;
  517. }
  518. div.filtered span.lang
  519. {
  520. position: relative;
  521. left: -22px;
  522. }
  523. div.reftip
  524. {
  525. position: absolute;
  526. z-index: 1;
  527. padding: 8pt;
  528. visibility: hidden;
  529. border: 1px solid #000000;
  530. background: #ffffd0;
  531. }
  532. a.synParam
  533. {
  534. color: #0000FF;
  535. /*color: #3F7800;*/
  536. /*color: #8DC54F;*/
  537. text-decoration: none;
  538. font-weight: normal;
  539. }
  540. a.synParam:hover
  541. {
  542. text-decoration: underline;
  543. font-weight: normal;
  544. }
  545. div.sapop
  546. {
  547. position: absolute;
  548. z-index: 1;
  549. left: 26px;
  550. width: 100%;
  551. padding: 10px 10px 10px 36px;
  552. visibility: hidden;
  553. border: 1px solid #000000;
  554. background: #ffffd0;
  555. }
  556. div.footer
  557. {
  558. width: 100%;
  559. border: none;
  560. background: #ffffff;
  561. margin-top: 18pt;
  562. padding-bottom: 12pt;
  563. color: #0000FF;
  564. /*color: #228B22; */
  565. text-align: center;
  566. font-size: 76%;
  567. }
  568. div.preliminary
  569. {
  570. margin-top: 8pt;
  571. padding-bottom: 12pt;
  572. color: #A0A0A0;
  573. }
  574. div.proc
  575. {
  576. margin-left: 0.5em;
  577. }
  578. div.proc h3
  579. {
  580. font-family: Verdana, Arial, Helvetica, sans-serif;
  581. font-weight: bold;
  582. font-size: 115%;
  583. margin-top: 1em;
  584. margin-bottom: 0.4em;
  585. margin-left: -0.5em;
  586. color: #003399;
  587. }
  588. div.proc ul
  589. {
  590. margin-left: 1.5em;
  591. }
  592. div.proc ol
  593. {
  594. margin-left: 2.0em;
  595. }
  596. .note
  597. {
  598. margin-left: 14pt;
  599. margin-right: 12pt;
  600. }
  601. .indent1
  602. {
  603. margin-left: 12pt;
  604. }
  605. .indent2
  606. {
  607. margin-left: 24pt;
  608. }
  609. .indent3
  610. {
  611. margin-left: 36pt;
  612. }
  613. p.proch
  614. {
  615. padding-left: 16px;
  616. }
  617. p.proch img
  618. {
  619. position: relative;
  620. vertical-align: top;
  621. left: -18px;
  622. margin-right: -14px;
  623. margin-bottom: -18px;
  624. }
  625. div.clsPlatSpec
  626. {
  627. background-color:#FFF8DC;
  628. border-style:solid;
  629. border-width:1pt 0pt 0pt 1pt;
  630. border-color:#ffE4C4;
  631. margin-top:0.6em;
  632. width:100%;
  633. }
  634. .languageFilter
  635. {
  636. color: #0000FF;
  637. cursor:hand;
  638. text-decoration:underline;
  639. padding-bottom:4;
  640. }
  641. #languageSpan {
  642. position: absolute;
  643. visibility: hidden;
  644. border-style: solid;
  645. border-width: 1px;
  646. border-color: #C8CDDE;
  647. background: #d4dfff;
  648. padding: 4px;
  649. font-size: 70%;
  650. }
  651. #membersOptionsSpan {
  652. position: absolute;
  653. visibility: hidden;
  654. border-style: solid;
  655. border-width: 1px;
  656. border-color: #C8CDDE;
  657. background: #d4dfff;
  658. padding: 4px;
  659. font-size: 70%;
  660. }
  661. .style1 {
  662. margin-left: 40px;
  663. }
  664. --></style>
  665. <xml>
  666. <MSHelp:TOCTitle Title="User Interface Controls Sample" />
  667. <MSHelp:RLTitle Title="User Interface Controls Sample" />
  668. <MSHelp:Keyword Index="A" Term="O:Microsoft.Xna.Primitives3D" />
  669. <MSHelp:Keyword Index="A" Term="6336846e-5264-82f5-883d-7cf38401b788" />
  670. <MSHelp:Keyword Index="K" Term="Primitives 3D Sample" />
  671. <MSHelp:Attr Name="AssetID" Value="6336846e-5264-82f5-883d-7cf38401b788" />
  672. <MSHelp:Attr Name="Locale" Value="en-us" />
  673. <MSHelp:Attr Name="CommunityContent" Value="1" />
  674. <MSHelp:Attr Name="TopicType" Value="kbOrient" />
  675. <MSHelp:Attr Name="DocSet" Value="XNA" />
  676. <MSHelp:Attr Name="DocSet" Value="ExpressLibVS" />
  677. <MSHelp:Attr Name="DocSet" Value="C#" />
  678. <MSHelp:Attr Name="ProjType" Value="LocalProj" />
  679. <MSHelp:Attr Name="ProjType" Value="XNA_31" />
  680. <MSHelp:Attr Name="ProjType" Value="XNA_30" />
  681. <MSHelp:Attr Name="Technology" Value="XNA" />
  682. </xml>
  683. </head><body><div id="mainSection">
  684. <div id="mainBody">
  685. <h1>Card Game Starter Kit</h1>
  686. <p>This sample is a fully-functional Blackjack card game for Windows, Xbox 360 and Windows Phone 7, built on top of an easily-extensible card game and animation framework you can use to build your own card games.</p>
  687. <h1 class="heading">How the Sample Works</h1>
  688. <div id="ID4EKD" class="hxnx1">
  689. <p>The full game of Blackjack that can be built and played from this sample is built from a number of different underlying components, each of which can be separated out and extended to create new functionality:</p>
  690. <ul>
  691. <li>Classes from the GameStateManagement sample to handle the loading, updating, and transitioning of screens</li>
  692. <li>The <strong>AnimatedGameComponent</strong> class, inherited from <strong>DrawableGameComponent</strong>, to handle animating the position, scale, and text drawing of in-game objects</li>
  693. <li>The Cards Framework, represented primarily by the <strong>CardGame</strong>, <strong>CardPacket</strong>, <strong>Player</strong>, <strong>GameTable</strong> and <strong>GameRule</strong> classes, that provide generic card game functionality and are extended by the Blackjack classes to provide the specific game logic.</li>
  694. </ul>
  695. <p>Upon starting the game, the <strong>GameplayScreen</strong> creates the <strong>BlackjackCardGame</strong>, passing in a <strong>BlackJackTable</strong> and initializing <strong>BlackjackPlayers</strong>. Per-frame, the <strong>BlackjackCardGame</strong> handles the input per-frame via the <strong>GameScreen.HandleInput</strong> method, and passed via the <strong>InputState</strong> object to all of the other classes it manages.</p>
  696. <p>The various phases of gameplay are handled by a state machine inside <strong>BlackjackCardGame</strong>, deciding when to start dealing, when to add and resolve rules, and when to start a new round, based primarily on user interactions with the various input buttons, which are <strong>AnimatedGameComponent</strong> objects.</p>
  697. <p>Drawing is handled by the objects that inherit from <strong>AnimatedGameComponent</strong>. Each object is responsible for drawing itself and updating its animation states per-frame. Many of the objects, including the <strong>GameTable</strong>, derive from <strong>AnimatedGameComponent</strong>.</p>
  698. </div>
  699. <h1 class="heading">Extending the Sample</h1>
  700. <div id="Div3" class="hxnx1">
  701. <p>If you are interested in creating a different type of card game, extending the Cards Framework is a good place to start; create a new class that inherits from <strong>CardsGame</strong>, a new class that inherits from <strong>GameTable</strong>, a new player class that inherits from <strong>Player</strong>, and any new <strong>GameRule</strong> classes you need to judge card values specific to your game. You can then modify the <strong>GameplayScreen.Initialize</strong> method to call your custom <strong>CardsGame.Initialize</strong>, add the necessary <strong>Player</strong> objects and start a round of play.</p>
  702. </div>
  703. </div>
  704. <div class="footer" id="footer"><p>© 2010 Microsoft Corporation. All rights reserved.<br>Send feedback to <a href="mailto:[email protected]?subject=Documentation Feedback: Card Game Starter Kit">[email protected]</a>.</p></div></div></body></html>