Difference between revisions of "W1523 Paddle Paddle"
Line 44: | Line 44: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== Add a Left Paddle to Our | === Add a Left Paddle to Our InteractionLayer === | ||
We'll need to make the following changes to our | We'll need to make the following changes to our InteractionLayer class: | ||
# Add a | |||
# Initialize | # Add a {{SwiftIdentifier|paddleLeft}} property | ||
# Set the initial coordinates of | # Initialize {{SwiftIdentifier|paddleLeft}} in the constructor | ||
# Set the initial coordinates of {{SwiftIdentifier|paddleLeft}} | |||
<syntaxhighlight lang="swift" highlight="2"> | <syntaxhighlight lang="swift" highlight="2"> | ||
let ball | let ball = Ball() | ||
let paddleLeft | let paddleLeft = Paddle() | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<syntaxhighlight lang="swift" highlight="5"> | <syntaxhighlight lang="swift" highlight="5"> | ||
init() { | |||
ball | // Using a meaningful name can be helpful for debugging | ||
ball.changeVelocity(velocityX: | super.init(name:"Interaction") | ||
insert(entity: ball, at: .front) | |||
ball.changeVelocity(velocityX: 3, velocityY: 5) | |||
insert(entity: paddleLeft, at: .front) | |||
paddleLeft = Paddle(topLeft:Point(x:0, y:0), size:Size(width:10, height:100)) | paddleLeft = Paddle(topLeft:Point(x:0, y:0), size:Size(width:10, height:100)) | ||
} | } | ||
Line 92: | Line 95: | ||
[[File:Start button green arrow.svg|left|link=|Start button green arrow]] Run the project. <br>View the results in the browser. Ensure that the application behaves as expected. | [[File:Start button green arrow.svg|left|link=|Start button green arrow]] Run the project. <br>View the results in the browser. Ensure that the application behaves as expected. | ||
=== Add a Right Paddle to Our Painter === | === Add a Right Paddle to Our Painter === |
Revision as of 21:23, 18 January 2021
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)
}
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:
- Add a paddleLeft property
- Initialize paddleLeft in the constructor
- Set the initial coordinates of paddleLeft
let ball = Ball()
let paddleLeft = Paddle()
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)
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[edit]
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[edit]
Add the following method to our Painter class:
override func onKeyDown(key:String, code:String, ctrlKey:Bool, shiftKey:Bool, altKey:Bool, metaKey:Bool) {
}
Exercises[edit]
- Use print statements to investigate the arguments provided to the
onKeyDown
event handler - Select sensible keys to be used to move the left paddle up and down and to move the right paddle up and down
- Implement the required code to actually move the paddles in accordance with your selected keypresses