W1523 Paddle Paddle

From Coder Merlin
Jump to navigation Jump to search
Boy and Girl Play Ping-Pong, circa 1950

Prerequisites[edit]

Research[edit]

Background[edit]

As we learned in the previous lab, the render event handler is invoked by the system periodically to refresh the canvas. We'll take advantage of this behavior to draw two "paddles", one on the left and one on the right. We'll also learn how to handle keyboard input.

Experiment[edit]

Getting Started[edit]

Continue from the previous project; we'll be editing all of our files there. Enter into the Sources directory of the project.

john-williams@codermerlin: cd ~/Experiences/W1521/Sources/ScenesShell/

First Steps[edit]

Let's start by adding a new file to our project, Paddle.swift. Open the file for editing.

Add Constructor and Required Methods[edit]

Our paddle will be a rectangle. Feel free to use any colors for stroke and fill that you deem appropriate.

import Igis
import Scenes

class Paddle: RenderableEntity {
    var rectangle: Rectangle

    init(rect:Rect) {
        rectangle = Rectangle(rect:rect, fillMode:.fillAndStroke)

        // Using a meaningful name can be helpful for debugging
        super.init(name: "Paddle")
    }

    override func render(canvas:Canvas) {
        let strokeStyle = StrokeStyle(color:Color(.black))
        let fillStyle = FillStyle(color:Color(.white))
        let lineWidth = LineWidth(width:2)
        canvas.render(strokeStyle, fillStyle, lineWidth, rectangle)
    }

    func move(to point:Point) {
        rectangle.rect.topLeft = point
    }

}

Add a Left Paddle to Our InteractionLayer[edit]

We'll need to make the following changes to our InteractionLayer class:

  1. import the Igis library
  2. Add a paddleLeft property and initialize paddleLeft
  3. Insert the paddleLeft into the InteractionLayer
  4. Set the initial coordinates of paddleLeft in a new, override func preSetup
    import Igis
    let ball = Ball()
    let paddleLeft = Paddle(rect:Rect(size:Size(width:10, height:100)))
    init() {
        // Using a meaningful name can be helpful for debugging 
        super.init(name:"Interaction")

        insert(entity: ball, at: .front)
        ball.changeVelocity(velocityX: 3, velocityY: 5)

        insert(entity: paddleLeft, at: .front)
    }
   override func preSetup(canvasSize: Size, canvas: Canvas) {
        paddleLeft.move(to:Point(x: 10, y: canvasSize.center.y))
   }
Start button green arrow
Run the program and view in a browser before continuing. Ensure that the application behaves as expected.

Add a Right Paddle to Our InteractionLayer[edit]

Using what you've just learned, add a right Paddle to the code.

ObserveIcon.png
Observe, Ponder, and Journal Section 1
Is it necessary to define another class in order to add another paddle? Why or why not?


Start button green arrow
Run the program and view in a browser before continuing. Ensure that the application behaves as expected and that there is a paddle on the left of the screen and another on the right.

Add an Event Handler to Process Key Down Events[edit]

Add the following method to our InteractionLayer class:

    func onKeyDown(key:String, code:String, ctrlKey:Bool, shiftKey:Bool, altKey:Bool, metaKey:Bool) {
    }

Enable the onKeyDown handler by making the following changes:

class InteractionLayer : Layer, KeyDownHandler

   ...

    override func preSetup(canvasSize: Size, canvas: Canvas) {
        paddleLeft.move(to:Point(x: 10, y: canvasSize.center.y))

        dispatcher.registerKeyDownHandler(handler: self)
    }

    override func postTeardown() {
        dispatcher.unregisterKeyDownHandler(handler: self)
    }
HintIcon.png
Helpful Hint

Thoroughly review the Scenes Containment Example. How can containment assist you in providing the required functionality?

Exercises[edit]

ExercisesIcon.png
Exercises
  1. Use print statements to investigate the arguments provided to the onKeyDown event handler
  2. Select sensible keys to be used to move the left paddle up and down and to move the right paddle up and down
  3. Implement the required code to actually move the paddles in accordance with your selected keypresses

Key Concepts[edit]


CoderMerlin™ proudly recommends:
HintIcon.png
   
   
   
   

Your purchase via these links helps to keep  Coder Merlin™ 's orbuculum ablaze. Thank you for your support!


Designed with pride in Silicon Valley, CA, USA