W1523 Paddle Paddle

Within these castle walls be forged Mavens of Computer Science ...

— Merlin, The Coder

Boy and Girl Play Ping-Pong, circa 1950

Prerequisites

• 1522 Ping Then Pong

Background

As we learned in the previous lab, the update 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

Getting Started

Continue with the previous project.

Enter into the Sources directory of the project.

cd ~/projects/IgisShell-MovingAlong/Sources/IgisShell/

First Steps

Let's start by adding a new file to our project, "Paddle.swift". Edit file "Paddle.swift":

emacs Paddle.swift

Add Constructor and Required Methods

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

import Igis

class Paddle {
    var rectangle : Rectangle

    init(topLeft:Point, size:Size) {
        let rect = Rect(topLeft:topLeft, size:size)
        rectangle = Rectangle(rect:rect, fillMode:.fillAndStroke)
    }

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

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

}

Add a Left Paddle to Our Painter

We'll need to make the following changes to our Painter class, so open "main.swift" and:

1. Add a paddleLeft property
2. Initialize paddleLeft in the constructor
3. Set the initial coordinates of paddleLeft
4. Paint paddleLeft in the Painter.paint() method

    let ball : Ball
    let paddleLeft : Paddle
    var coordinatesSet = false

    required init() {
        ball = Ball(size:30)
        ball.changeVelocity(velocityX:10, velocityY:5)

        paddleLeft = Paddle(topLeft:Point(x:0, y:0), size:Size(width:10, height:100))
    }

   func calculate(canvasSize:Size) {
        // Set the coordinates to the center of the screen if they've not yet been set
        if !coordinatesSet {
            let canvasCenter = Point(x:canvasSize.width/2, y:canvasSize.height/2)
            ball.move(to:canvasCenter)

            paddleLeft.move(to:Point(x:10, y:canvasCenter.y))

            coordinatesSet = true
        }
        ball.calculate(canvasSize:canvasSize)
    }

    func paint(canvas:Canvas, canvasSize:Size) {
        clearScreen(canvas:canvas, canvasSize:canvasSize)
        paintSkyAndGround(canvas:canvas, canvasSize:canvasSize)
        ball.paint(canvas:canvas)
        paddleLeft.paint(canvas:canvas)
    }

Run the project.
View the results in the browser. Ensure that the application behaves as expected.

Add a Right Paddle to Our Painter

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

Question: Is it necessary to define another class in order to add another paddle? Why or why not?

Run the project.
View the results in the browser as you did earlier. 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

Add the following method to our Painter class:

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

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