How to make an Mole Mash Game in MIT App Inventor 2 [ Android Game in 5 minutes ]

How to make an Mole Mash Game in MIT App Inventor 2 [ Android Game in 5 minutes ]
How to make a Mole Mash Game in MIT App Inventor 2 [ Android Game in 5 minutes ] In the game MoleMash, a mole pops up at random positions on a playing field, and the player scores points by hitting the mole before it jumps away. Introduction You'll design the game so that the mole moves once every half-second. If it is touched, the score increases by one, and the phone vibrates. Pressing restart resets the score to zero. This tutorial introduces: image sprites timers and the Clock component procedures picking random numbers between 0 and 1 text blocks typeblocking The first components Several components should be familiar from previous tutorials: A Canvas named "MyCanvas". This is the area where the mole moves. A Label named "ScoreLabel" that shows the score, i.e., the number of times the player has hit the mole. A Button named "ResetButton". Drag these components from the Palette onto the Viewer and assign their names. Put MyCanvas on top and set its dimensions to 300 pixels wide by 300 pixels high. Set the Text of ScoreLabel to "Score: ---". Set the Text of ResetButton to "Reset". Also add a Sound component and name it "Noise". You'll use Noise to make the phone vibrate when the mole is hit, similar to the way you made the kitty purr in HelloPurr. Timers and the Clock component You need to arrange for the mole to jump periodically, and you'll do this with the aid of a Clock component. The Clock component provides various operations dealing with time, like telling you what the date is. Here, you'll use the component as a timer that fires at regular internals. The firing interval is determined by the Clock 's TimerInterval property. Drag out a Clock component; it will go into the non-visible components area. Name it "MoleTimer". Set its TimeInterval to 500 milliseconds to make the mole move every half second. Make sure that TimerEnabled is checked. Adding an Image Sprite To add the moving mole we'll use a sprite. Sprites are images that can move on the screen within a Canvas. Each sprite has a Speed and a Heading, and also an Interval that determines how often the sprite moves at its designated speed. Sprites can also detect when they are touched. In MoleMash, the mole has a speed zero, so it won't move by itself. Instead, you'll be setting the mole's position each time the timer fires. Drag an ImageSprite component onto the Viewer. You'll find this component in the Drawing and Animation category of the Palette. Place it within MyCanvas area. Set these properties for the Mole sprite: Picture: Use mole.png, which you downloaded to your computer at the beginning of this tutorial. Enabled: checked Interval: 500 (The interval doesn't matter here, because the mole's speed is zero: it's not moving by itself.) Heading: 0 The heading doesn't matter here either, because the speed is 0. Speed: 0.0 Visible: checked Width: Automatic Height: Automatic You should see the x and y properties already filled in. They were determined by where you placed the mole when you dragged it onto MyCanvas. Go ahead and drag the mole some more. You should see x and y change. You should also see the mole on your connected phone, and the mole moving around on the phone as you drag it around in the Designer. You've now specified all the components. The Designer should look like this. Notice how Mole is indented under MyCanvas in the component structure list, indicating that the sprite is a sub-component of the canvas.
via YouTube https://www.youtube.com/watch?v=JGPdV0sOiCM