by topherPedersen

Pong in Python vs. Pong in JavaScript: Battle of Introductory Game Dev Tutorials

This blog post is brought to you by the developer of BitBudget. BitBudget is an automated budgeting app for Android and iOS which syncs with your bank account and helps you avoid overspending. If you’d like to quit living paycheck-to-paycheck and get a better handle on your finances, download it today! https://bitbudget.io

Battle of the introductory game dev tutorials by myself and my student “Squitato” =>

# Copyright (c) 2018 Peter Kwak (Edited by Chris Pedersen)
# This is free and unencumbered software released into the public domain.
# For more information, please refer to <http://unlicense.org/>
import turtle
# Create Game Window
screen = turtle.Screen()
# screen.setup(500, 400)
screen.screensize(500, 500, "black")
screen.bgcolor("black")
# screen.addshape("Paddle.jpg")
# Create Ping Pong Ball
ball = turtle.Turtle()
ball.penup()
ball.speed(0)
ball.shape("circle")
ball.color("white")
# Create Left Ping Pong Paddle
paddle1 = turtle.Turtle()
paddle1.penup()
paddle1.speed(0)
paddle1.setx(-200)
paddle1.shape("square")
paddle1.shapesize(4.5, 1, 0)
paddle1.fillcolor("white")
# Create Right Ping Pong Paddle
paddle2 = turtle.Turtle()
paddle2.penup()
paddle2.speed(0)
paddle2.setx(200)
paddle2.shape("square")
paddle2.shapesize(4.5, 1, 0)
paddle2.fillcolor("white")
# Create Scoreboard
scoreWriter = turtle.Turtle()
scoreWriter.penup()
scoreWriter.speed(0)
scoreWriter.hideturtle()
scoreWriter.color("white")
# Set Ball Trajectory
rise = 3
run = 3
# Set Score
score1 = 0
score2 = 0
# Create Function Which Will Move Player 1's Paddle Up
def up1():
paddle1.sety(paddle1.ycor() + 50)
# Create Function Which Will Move Player 1's Paddle Down
def down1():
paddle1.sety(paddle1.ycor() - 50)
# Create Function Which Will Move Player 2's Paddle Up
def up2():
paddle2.sety(paddle2.ycor() + 50)
# Create Function Which Will Move Player 2's Paddle Down
def down2():
paddle2.sety(paddle2.ycor() - 50)
# Create Function To Update Scoreboard
def updateScoreboard():
global scoreWriter
global score1
global score2
global ball
scoreWriter.clear()
myFont = ("Arial", 40, "bold")
scoreWriter.goto(-100, 150)
scoreWriter.write(score1, font=myFont)
scoreWriter.goto(100, 150)
scoreWriter.write(score2, font=myFont)
ball.goto(0, 0)
# Set Event Listeners
# These event listeners will listen for button presses (up, down, etc.)
screen.onkey(up1, "w")
screen.onkey(down1, "s")
screen.onkey(up2, "Up")
screen.onkey(down2, "Down")
screen.listen()
# Create Main Game Loop (Simulates Time, Keeps Game Running)
while True:
# Move Ball
ball.goto(ball.xcor() + run, ball.ycor() + rise)
# Detect Top or Bottom Boundary Strike
# (Reverses the Ball's Direction of Travel)
if ball.ycor() > 200 or ball.ycor() < -200:
rise = -rise
# Detect Paddle Strike (Player 1)
# (Also Reverses the Ball's Direction of Travel)
if abs(paddle1.xcor() - ball.xcor()) < 15:
if abs(paddle1.ycor() - ball.ycor()) < 50:
run = -run
# Detect Paddle Strike (Player 2)
# (Also Reverses the Ball's Direction of Travel)
if abs(paddle2.xcor() - ball.xcor()) < 15:
if abs(paddle2.ycor() - ball.ycor()) < 50:
run = -run
# Detect When A Player Scores a Point
if ball.xcor() > 250:
# Increment player1's score by 1 point when his ball
# travels past the paddle of his opponent, player 2.
score1 = score1 + 1
updateScoreboard()
ball.goto(0, 0)
elif ball.xcor() < -250:
# Increment player2's score by 1 point when his ball
# travels past the paddle of his opponent, player 1.
score2 = score2 + 1
updateScoreboard()
ball.goto(0, 0)
# Christine, My Super Sweet AI Goes HERE...
if ball.ycor() > paddle2.ycor() + 25:
paddle2.sety(paddle2.ycor() + 15)
elif ball.ycor() < paddle2.ycor() - 25:
paddle2.sety(paddle2.ycor() - 15)
view raw pong.py hosted with ❤ by GitHub

NOTE: For the PongJS demo, you will need to manually install p5.play.js as it is not available via CDN =>

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
<!-- NOTE: Must Download and Install p5.play.js Manually, it is not available via CDN -->
<script src="p5.play.js"></script>
</head>
<body>
<script src="pong.js"></script>
</body>
</html>
view raw pong.html hosted with ❤ by GitHub
//pong clone
//mouse to control both paddles
var paddleA, paddleB, ball, wallTop, wallBottom;
var MAX_SPEED = 10;
function setup() {
createCanvas(800, 400);
//frameRate(6);
paddleA = createSprite(30, height/2, 10, 100);
paddleA.immovable = true;
paddleB = createSprite(width-28, height/2, 10, 100);
paddleB.immovable = true;
wallTop = createSprite(width/2, -30/2, width, 30);
wallTop.immovable = true;
wallBottom = createSprite(width/2, height+30/2, width, 30);
wallBottom.immovable = true;
ball = createSprite(width/2, height/2, 10, 10);
ball.maxSpeed = MAX_SPEED;
paddleA.shapeColor = paddleB.shapeColor =ball.shapeColor = color(255, 255, 255);
ball.setSpeed(MAX_SPEED, -180);
}
function draw() {
background(0);
paddleA.position.y = constrain(mouseY, paddleA.height/2, height-paddleA.height/2);
paddleB.position.y = constrain(mouseY, paddleA.height/2, height-paddleA.height/2);
ball.bounce(wallTop);
ball.bounce(wallBottom);
var swing;
if(ball.bounce(paddleA)) {
swing = (ball.position.y-paddleA.position.y)/3;
ball.setSpeed(MAX_SPEED, ball.getDirection()+swing);
}
if(ball.bounce(paddleB)) {
swing = (ball.position.y-paddleB.position.y)/3;
ball.setSpeed(MAX_SPEED, ball.getDirection()-swing);
}
if(ball.position.x<0) {
ball.position.x = width/2;
ball.position.y = height/2;
ball.setSpeed(MAX_SPEED, 0);
}
if(ball.position.x>width) {
ball.position.x = width/2;
ball.position.y = height/2;
ball.setSpeed(MAX_SPEED, 180);
}
drawSprites();
}
view raw pong.js hosted with ❤ by GitHub
 

topherPedersen