Content area
Computer programming is one of the main subjects of computer science study programs at universities. Usually, students learn structural programming first, and later they start to learn object-oriented programming. At J. Selye University, computer science students learn structural programming in standard C programming language first, and later, in the second year of their studies, they move to object-oriented programming in C#. In this paper, we briefly overview some of the difficulties that may occur during the teaching of computer programming, especially during object-oriented programming courses. One of the problems that students can meet after a few weeks of participating in a programming course is a lack of enough motivation to develop an application. The solution to this problem can be in the development of computer games, which makes programming more enjoyable and can motivate novice programmers. In this paper, we also show, how the button component, the first component that students are familiar with in C#, can be used for instantiating an array of button objects in the C# programming language. Next, we give some ideas for using such an array of buttons to create computer games. Our goal was to find out simple computer games, that are easy and quick to develop but are interesting and motivating for novice programmers. In our opinions and experiences, the presented games can be used successfully to introduce object-oriented programming. Finally, we describe some of our observations and draw some conclusions.
Abstract: Computer programming is one of the main subjects of computer science study programs at universities. Usually, students learn structural programming first, and later they start to learn object-oriented programming. At J. Selye University, computer science students learn structural programming in standard C programming language first, and later, in the second year of their studies, they move to object-oriented programming in C#. In this paper, we briefly overview some of the difficulties that may occur during the teaching of computer programming, especially during object-oriented programming courses. One of the problems that students can meet after a few weeks of participating in a programming course is a lack of enough motivation to develop an application. The solution to this problem can be in the development of computer games, which makes programming more enjoyable and can motivate novice programmers. In this paper, we also show, how the button component, the first component that students are familiar with in C#, can be used for instantiating an array of button objects in the C# programming language. Next, we give some ideas for using such an array of buttons to create computer games. Our goal was to find out simple computer games, that are easy and quick to develop but are interesting and motivating for novice programmers. In our opinions and experiences, the presented games can be used successfully to introduce object-oriented programming. Finally, we describe some of our observations and draw some conclusions.
Keywords: teaching and learning programming; object-oriented programming, creating computer games; C# programming language; button component.
INTRODUCTION
Object-oriented programming 1s one of the compulsory subjects of applied informatics and informatics teacher training study programs at J. Selye University. Undergraduate students learn computer programming mainly during the first two years of their university studies. First, they start with structural programming in standard C programming language. Next, they learn object-oriented programming in C# programming language. Except for the main programming subjects, students have additional courses in programming in Python, Perl, PHP, and JavaScript as well.
Structural programming that students learn during programming courses in the first year of their studies, uses functional decomposition of tasks, which develops procedural thinking [3]. In the second year, students start learning object-oriented programming, which makes use of students' reasoning skills and requires a high degree of abstraction. Furthermore, object-oriented decomposition of tasks requires structured programming knowledge [3].
I. DIFFICULTIES IN TEACHING PROGRAMMING
According to research conducted in the academic years 2019/20 and 2021/22 at J. Selye University, only 61% of first-year undergraduate computer science students learned some programming in high school, and 39% of them do not have any prior programming experience [4]. Teaching programming to new programmers is challenging because novice programmers need to learn the syntax and semantics of a new programming language in parallel with improving their algorithmization and problem-solving skills. Prior computing experiences, like experiences with computer games, word processing, photo editing, search engines, e-mail clients, social networking sites and instant messaging is not enough to learn computer programming and algorithmization, because students need to apply problem-solving skills and logical thinking when developing a piece of computer software [7].
Another difficulty in teaching programming, especially in teaching object-oriented programming is guiding students to comprehend the abstract concept and think abstractly. The core concepts of object-oriented programming are class and object; however, it is hard to find an equivalence to them in real life. If students cannot comprehend the basic concept of class and object well, it will be even more difficult for them to understand more complex concepts like inheritance and polymorphism [7].
Another problem in teaching programming is keeping students' attention and interest throughout the whole programming course [7]. Because nowadays students are grown up in environments full of multimedia, they use graphically enrich games and applications on smartphones and computers, so using only text-based programming environments during the programming courses is not interesting for them. Using visualisations and algorithm animations during programming courses can increase students' attention [6]. Developing even simple games instead of writing program codes of standard programming assignments (e.g., search the minimum in an array, compute the average of numbers, mirror a matrix) can better motivate students [1][2][5].
II. USING THE BUTTON COMPONENT FOR CREATING SIMPLE GAMES
The button component is one of the first components students use during the introductory object-oriented programming courses in C#. After creating simple buttons using the visual designer in Microsoft Visual Studio 2022, there is usually a demand to create an array of buttons using the program code instead of the visual designer. The following source code (figure 1) shows an example of creating such an array of button objects in C#.
The size of every button object is defined by the SIZE constant (50x50 pixels), the background colour of the buttons is randomly selected from the colors array (Red, DarkBlue, LightGreen), and the location of the buttons is also randomly generated as it is shown on the right part of the screenshot of the Building a Tower game (figure 2). When the users click on any of the buttons, a ButtonClick function 1s called.
In the following sub-chapters, we show some of the ideas for developing simple games using an array of button objects for practising object-oriented programming. We tried to find out tasks that are easy to program (maximum of 100 lines of source code), but the game is interesting and motivating for novice programmers.
2.1. Building a Tower
The task of undergraduate computer science students was to create a simple game for young children that contains 10 buttons (the building blocks of a tower). At the start of the game, the building blocks must be randomly scattered (right side of the screenshot in figure 2). The player can build a tower from the building blocks (left side of the screenshot in figure 2). The game ends when all the blocks have been used to build the tower.
To build the tower, the player of this game can click on any of the building blocks (buttons). If the player clicks on one of the scattered building blocks, it must be placed on top of the tower being built (the tower must be built from the bottom up). If the player clicks on the building blocks of the tower (i.e., those that are already in their place), nothing should happen.
When the last building block is in its place, the game must display a message box that confirms the successful end of the game. By clicking the OK button in the message box, the game must start over again.
From the programming point of view, developing such a game is very simple. When the game begins, 10 buttons must be instantiated with random locations (figure 1). The programmers must declare a global variable that defines the y coordinate of the next building block in the tower. When the player clicks on any of the buttons, a simple conditional statement must decide 1f the button is already in its place (in the tower), checking the x coordinate of the button. If the button is not in its place (not in the tower), the location of the button must be changed using the defined global variable, and the global variable must be decreased.
2.2. Pixel Painter
In this task, students had to develop a simple pixel painter application with 4 buttons to select the colour and 100 buttons that defines the drawing area (figure 3).
The background colour of the buttons for selecting the painting colour should be red, green, blue, and white. Initially, the first (red) colour must be selected, which is indicated by the X mark on the button. By clicking on any of the four buttons, the users can select the colour they want to draw with. The X mark must be always displayed on the button of the selected colour.
The drawing area must initially consist of 10x10 small buttons with a white background. If the user clicks on any of these buttons, the background colour of the button must be changed to the selected colour.
This application is also very easy to develop. First, programmers must create buttons of four colours and change their background colour to red, green, blue, and white. To mark the selected button with the X is simple, programmers must clear the text property of all four buttons, then change the selected button's text property to an "X" string. A global variable can be used to store the selected colour. Next, programmers must create the drawing area of 10x10 buttons and initially set their background colour to white. When the user clicks on any of these buttons, their background colour must be changed to the colour stored in the global variable.
2.3. Repeating Colour Patterns
The task of computer science students was to develop a game consisting of 12 small buttons and 4 big buttons. The background colour of the 12 small buttons should be randomly selected from red, yellow, green, and blue (the colours of these buttons should always be randomly re-generated when the game is restarted). The background colour of the 4 large buttons should be red, yellow, green, and blue respectively (the background colour of these big buttons never changes, not even when the game is restarted) (figure 4).
The player's task is to click on the big, coloured buttons in the order given by the background colours of the small buttons (going from left to right). When the player clicks on the big button of the right colour, the corresponding small button should be invisible (so the small buttons disappear one after the other). However, if the player accidentally clicks on the wrong colour (on a wrong big button), then all the small buttons must be visible again (but the colours should not be regenerated) and the player must click on the big, coloured buttons in the correct order from the beginning.
The game is over when the player manages to click on the big, coloured buttons in the right order and all the small buttons got invisible. In this case, the application must display a message box. When the user clicks the OK button of the message box, the game must be restarted (the small buttons must be visible again and the background colours of the small buttons must be regenerated).
From the programming point of view, creating this game is relatively simple, too. When the game begins, 12 small buttons must be created with a random background colour, and 4 big buttons must be created with a predefined colour. The programmers must declare a global variable that defines which is the next small button in the row that colour the user must select using the big buttons. When the player clicks on the right big button with the corresponding colour, the actual small buttons visibility must be changed to false, and the defined global variable must be increased. If the user clicks on a big button with the wrong colour, the visibility of all small buttons must be changed to true, and the global variable must be reset to the first small button.
2.4. Advent Calendar
This game is an advent calendar that contains 24 buttons (arranged in 6 rows and 4 columns). When the game start, the background colour of the buttons must be set to red and green in a chessboard pattern, and numbers from 1 to 24 must be displayed on the buttons. In the beginning, the computer must shuffle the numbers randomly (left screenshot in figure 5).
The player must open the windows of the advent calendar by clicking on the numbered buttons in the correct order (one after the other, starting with 1). If the user clicks on the correct number, the background colour of the button must be changed to white, and the text on the button must be changed to a gift parcel symbol (right screenshot in figure 5). To display this symbol of a gift package in C#, the text property of the button must be set to the following special string: "\UOOO1F381". If the player clicks on a button with a wrong number, Which does not follow the previously clicked button's number (e.g., clicks on 6 after 1, 2, 3), the game must be restarted (i.e., the background colour of all the buttons must be set to red or green, the numbers 1-24 must be displayed on the buttons, and the displayed numbers must be reshuffled).
When the user accidentally clicks on an already opened window (i.e., on a button with white background colour and a symbol of a gift package on it), nothing should happen.
If the user manages to solve the task successfully (i.e., to open all the windows in the right order), a message box must be displayed. By clicking on the OK button in the message box, the game must be restarted.
This game has similar programming difficulty as the previous applications. First, students need to instantiate buttons with predefined locations, background colours, and numbers. Next, they need to randomly shuffle the text properties of the buttons (i.e., the numbers displayed on the buttons). A global variable must define a number between 1 and 24 that the user must click on, the value of this global variable must be set to 1 initially. When the user clicks on any of the buttons, a conditional statement must check if the number on the button equals the value of the global variable. When it is true, the background colour of the button must be changed to white, the text property of the button must be changed to the symbol of the gift package, and finally, the global variable must be increased. If the user clicks on another number that is expected, the game must be restarted.
2.5. Mirror Image
The task of students was to create a simple game in which the computer displays a randomly generated orange shape of 5 buttons: one orange button must be displayed in each row of the first or second column of the gameboard. Similarly, the application must display a randomly generated blue shape of 5 buttons: one blue button must be displayed in each row of the third or fourth column of the gameboard (left screenshot in figure 6). The application must check if the generated initial orange and blue shapes are not already mirrored images of each other. If they are, the game must regenerate the shapes.
The player's task is to create a mirror image of the orange shape by clicking on the blue buttons (right screenshot in figure 6). If the player clicks on a blue button, its position should change as follows: if the button was in the third column, it should move to the fourth column; if the button was in the fourth column, it should move to the third column. If the player manages to create the mirror image of the orange shape (using the blue buttons), a message box must be displayed, and the game must be restarted.
First, programmers must create the 5 orange and 5 blue buttons with locations of random columns. The column of the orange buttons must be selected randomly from the first and second columns, while the column of the blue buttons must be selected randomly from the third and fourth columns. Next, it is necessary to check, using the x coordinates of the orange and blue buttons in every row, if the initially generated blue shape is not the mirror image of the initially generated orange shape. In case it is, the shapes must be regenerated. After the initial setup, when the player clicks on a blue button, its column (i.e., its x coordinate) must be changed (from the third to fourth, or from the fourth to third column). Using the x coordinates of the orange and blue buttons in every row, it is necessary to check after every click, if the blue shape is the mirror image of the orange shape. In case it is, a message box must be displayed, and the game must be restarted.
2.6. Exchanging Colours
This simple game contains 9 buttons in a row. In the beginning, the background colours of the first 4 buttons must be set to red, the background colour of the middle button must be set to white, and the background colour of the last 4 buttons must be set to green (figure 7). The goal of the game is to exchange the red colours with the green ones using the rules of the game. The game is over when the first four buttons turn green and the last four buttons turn red.
The player can click on any button, however, only in the following two cases should the colours be changed. (1) If the white button is immediately before or after the button the player clicked, the background colour of the white button must be exchanged with the background colour of the button the player clicked (green or red). So, it's like moving the clicked button one place right or left. (2) If the white button is two places before or after the button clicked by the player, the background colour of the white button must be exchanged with the background colour of the button clicked by the player (green or red). So, it's as if the clicked button skips over the button next to it.
From the programming point of view, this game is a little bit more difficult to develop than the previous games. One of the simplicities of the previous games was that in those games it was enough to refer to the button the player clicked, and then change its location, text, or background property. However, in this game, the reference to the button the player clicked is not enough. First, the programmer must find the index of the clicked button in the array of buttons, and then check the buttons one and two places right and left of the found index. If the button with the white background colour is located in one or two places of the button the player clicked, the background colour of these two buttons must be exchanged.
2.7. Day or Night
In this task, students had to develop a simple game with 10 buttons in a row. When the game starts, the background colour of the buttons must be randomly generated from two colours: blue or yellow. Furthermore, a moon symbol must always be displayed on the buttons with a blue background, and a sun symbol on the buttons with a yellow background (figure 8). The symbols can be defined in the C# programming language as special strings: "\u263e" for the moon, and "\u2600" for the sun.
By clicking on a button, the player can change the given button and their neighbours to the opposite (the sun with a yellow background to the moon with a blue background, or vice versa). So, by clicking on a button, the player changes not only the given button but also the buttons before and after it to the opposite.
The goal of the game is to set all the buttons to the same symbol. So, either all 10 buttons must have a moon symbol with a blue background, or all 10 buttons must have a sun symbol with a yellow background. If the player succeeds in solving this puzzle, a message box must be displayed. By clicking on the OK button in the message box, the game must be restarted.
The programming difficulty of this task is like the difficulty of the previous game. First, the 10 button objects must be instantiated with random background colour (or symbol). The reference to the button the player clicked is not enough in this game, as well. Students need to find the index of the clicked button in the array of buttons to be able to change the text and the background property of the previous and next buttons to the opposite. By checking the background colour (or symbol) of every button in a for loop, students can check if all the buttons have the same background (or symbol). If the puzzle is solved, a message box must be displayed, and the game must be restarted.
2.8. Hiding Buttons
This game consists of a 4x4 gameboard (16 buttons with a blue background), however, when the game starts, only one randomly selected button should be visible, and the others should be invisible (left screenshot on figure 9).
The goal of this game is to make all the buttons disappear by clicking on them. However, a randomly selected invisible button must become visible every second after the start of the game (right screenshot in figure 9).
If the player clicks on a visible blue button, it must become invisible. The game can end in two ways: (1) If the player succeeds in making all the buttons disappear, a message box with the text "you won" must appear. (2) If all 16 buttons are visible on the gameboard, a message box with the text "you lost" must appear. When the player clicks on the OK button in any of the message boxes, the game must be restarted.
From the programmer's point of view, developing this game is simple, however except for the button component, another component (a timer) must be used. First, students need to create 16 buttons and make them invisible by setting the visible property of the buttons to false. Next, one randomly selected button must be set to visible by setting its visible property to true.
When the player clicks on any of the buttons, the visible property of the given button must be set to false. A timer component must be used to make an invisible button visible every second.
After every user's click or timer's tick event, the visibility of all the buttons must be checked. This can be done either by using a for loop (by checking every button's visible property) or by using a global variable that counts how many visible buttons are in the given moment on the gameboard (on every user's click the value of this variable must be decreased by one, and on every tick event of the timer the value of this variable must be increased by one). If all the buttons are invisible, the player wins the game; however, if they are all visible, the player loses the game.
2.9. Whitening the Grid
Students' task was to create a simple speed game that consist of 5x5 buttons. The background colour of the buttons must be initially set to white or black randomly (figure 10). The goal of the game is to whiten the gameboard in 5 seconds.
The player can change the colour of the buttons by clicking on them. If the player clicks on a black button, its background colour must be changed to white. However, if the player accidentally clicks on a white button, the whole game must be restarted.
An added difficulty to the game is that the player has only 5 seconds to change all the black buttons' backgrounds to white. If they fail to complete this task in 5 seconds, the game must be restarted automatically. If they succeed in completing the task within the given time frame, a message box must be displayed, and the game must be restarted.
The programming difficulty of this game is like the difficulty of the previous game. First, students needed to instantiate the 25 button objects with a random background colour. Next, when the player clicks on any of the buttons, a conditional statement must be used to check, whether the background colour of the clicked button is black or white. If the background colour of the clicked button is black, the background property of the button must be changed to white. However, if it is white, the game must be restarted (i.e., random colour must be regenerated for every button). Except for the button component, the timer component must be used in this game, as well. The timer component's interval property must be set to 5000 milliseconds initially. The timer must be restarted whenever the background colours of buttons are regenerated. If the timer's tick event occurs (after 5 sec), the game must be restarted again (i.e., random colour must be regenerated again for every button).
III. CONCLUSIONS
In this paper, we briefly overviewed some of the difficulties in learning programming, while we focused mainly on object-oriented programming. One of the problems might be that students are overwhelmed and not enough motivated after a few weeks of learning programming. By developing games, students' motivation can be increased. In this paper, we showed how the button component, the first component that they learn in C#, can be used to create simple, but interesting games. In the main part of the paper, we presented 9 simple games, which source codes are very simple (around 100 lines of code for every game), but they can arise interest among novice programmers. We gave tasks of developing these games to our second-year undergraduate computer science students during the winter semester of the academic year 2022/23 when they started learning object-oriented programming. Most of the students were able to develop these games successfully, they usually needed around 1 hour to create any of the presented games. According to their opinion, the game development was interesting and enjoyable for them. After creating these simple games, students were motivated to create more complex games, as well.
Acknowledgements
The paper was supported by project KEGA 013TTU-4/2021 "Interactive animation and simulation models for deep learning".
Reference Text and Citations
[1] Comber, Oswald; Motschnig, Renate; Mayer, Hubert; Haselberger, David; Engaging Students in Computer Science Education through Game Development with Unity, 2019 IEEE Global Engineering Education Conference (EDUCON), IEEE, DOI: 10.1109/EDUCON.2019.8725135, рр. 199-205.
[2] Gabaruk, Julia; Logofatu, Doina; GroBkreutz, Damian; Andersson, Christina; On Teaching Java and Object Oriented Programming by Using Children Board Games, 2019 IEEE Global Engineering Education Conference (EDUCON), 2019, IEEE, DOI: 10.1109/EDUCON.2019.8725264, pp. 601-606.
[3] Gainutdinova, Tatyana Yu.; Denisova, Marina Yu.; Shirokova, Olga A.; Current Trends in the Study of Object-Oriented Programming in Higher Education, ARPHA Proceedings: V International Forum on Teacher Education, 2019, DOI: 10.3897/ар.1.е0152, pp. 163-169.
[4] Végh, Ladislav; Gubo, Stefan; Assessment of Algorithmic and Logical Thinking of First- and Second-Year Computer Science Students at J. Selye University in Academic Years 2019/20 and 2021/22, ICERI2022 Proceedings, 2022, IATED Academy, DOI: 10.21125/iceri.2022.0480, pp. 1888-1895.
[5] Végh, Ladislav; Stoffova, Veronika; Learning Object-Oriented Programming by Creating Games, The 15% International Scientific Conference: eLearning and Software for Education, 2019, Vol. 1, „CAROL I National Defence University Publishing House, DOI: 10.12753/2066-026X-19-002, pp. 20-29.
[6] Végh, Ladislav; Stoffová, Veronika; Algorithm Animations for Teaching and Learning the Main Ideas of Basic Sortings, Informatics in Education, 2017, Vol. 16, No. 1, DOI: 10.15388/infedu.2017.07, pp. 121-140.
[7] Yan, Lu; Teaching Object-Oriented Programming with Games, 2009 Sixth International Conference on Information Technology: New Generation, 2009, IEEE, DOI: 10.1109/ITNG.2009.13, pp. 969-974.
Copyright "Carol I" National Defence University 2023