How would I convert a .py file to HTML for newgrounds?

[EB-2K]

Does anybody know how I can upload a .py file onto newgrounds? This is the code I'm trying to convert into an HTML5 file for it to be playable on here.

# Simple Pong

# Code by @TokyoEdTech

#Note: This project is designed for beginners. There will be NO

#Object Oriented Programming or Classes

#TEST YOUR CODE OFTEN!!! DON'T SAVE TESING AT THE VERY END!!!!

# turtle module lets you do graphics in your projects

import turtle

# os module lets you interact through text commands

import os

#for windows, it's import winsound

#Creating the window

wn = turtle.Screen() #The capitalizition of "S" is important

wn.title("Pong by @TokyoEdTech")

wn.bgcolor("black")

wn.setup(width=800, height=600)

wn.tracer(0) #This stops the window from updating

#Score

score_a = 0

score_b = 0

#Paddle A

paddle_a = turtle.Turtle() #[module].[Object](), it's CaSe SeNsItIvE

paddle_a.speed(0) #speed of animation, 0 sets it to maximum speed

paddle_a.shape("square")

paddle_a.color("white")

paddle_a.shapesize(stretch_wid=5, stretch_len=1)

paddle_a.penup()

paddle_a.goto(-350, 0) #(0,0) refers to the center of the window

#Paddle B, same as paddle A, just in a different spot

paddle_b = turtle.Turtle() #[module].[Object](), it's CaSe SeNsItIvE

paddle_b.speed(0) #speed of animation, 0 sets it to maximum speed

paddle_b.shape("square")

paddle_b.color("white")

paddle_b.shapesize(stretch_wid=5, stretch_len=1)

paddle_b.penup()

paddle_b.goto(350, 0) #(0,0) refers to the center of the window

#Ball

ball = turtle.Turtle() #[module].[Object](), it's CaSe SeNsItIvE

ball.speed(0) #speed of animation, 0 sets it to maximum speed

ball.shape("square")

ball.color("white")

#paddle_b.shapesize(stretch_wid=5, stretch_len=1)

ball.penup()

ball.goto(0, 0) #(0,0) refers to the center of the window

#moving the ball

ball.dx = 2 #every time the ball moves, it moves by 2 pixels

ball.dy = -2

# Pen

pen = turtle.Turtle() #[module].[Object](), it's CaSe SeNsItIvE

pen.speed(0) #animation speed

pen.color("white")

pen.penup()

pen.hideturtle() #so we don't see it, we only want the text

pen.goto(0, 260)

pen.write("Alayer A: 0  Player B: 0", align="center", font=("Courier", 24, "normal"))

#Function

def paddle_a_up():

   y = paddle_a.ycor() #ycor comes from the turtle module

   y += 20

   paddle_a.sety(y)

def paddle_a_down():

   y = paddle_a.ycor() #ycor comes from the turtle module

   y -= 20

   paddle_a.sety(y)

def paddle_b_up():

   y = paddle_b.ycor() #ycor comes from the turtle module

   y += 20

   paddle_b.sety(y)

def paddle_b_down():

   y = paddle_b.ycor() #ycor comes from the turtle module

   y -= 20

   paddle_b.sety(y)

#Keyboard binding

wn.listen() #listen to keyboard inputs

#moving paddle a

wn.onkeypress(paddle_a_up, "w") #Only respsonds to w, not W

wn.onkeypress(paddle_a_down, "s") #Only respsonds to s, not S

#moving paddle b

wn.onkeypress(paddle_b_up, "Up") #Only respsonds to up arrow

wn.onkeypress(paddle_b_down, "Down") #Only respsonds to down arrow

#Main game loop

while True:

   wn.update()

   # Move the ball

   ball.setx(ball.xcor() + ball.dx)

   ball.sety(ball.ycor() + ball.dy)

   #Border checking

   #y coordinates

   if ball.ycor() > 290:

       ball.sety(290)

       ball.dy *= -1

       #For Mac, it is afplay. For Linux, it is aplay

       os.system("afplay bounce.wav&") #"&" cuts out the delay

       #for windows, it's winsound.PlaySound("bounce.wav", winsound.SND_ASYNC)

   if ball.ycor() < -290:

       ball.sety(-290)

       ball.dy *= -1

       #For Mac, it is afplay. For Linux, it is aplay

       os.system("afplay bounce.wav&") #"&" cuts out the delay

       #for windows, it's winsound.PlaySound("bounce.wav", winsound.SND_ASYNC)

   #x coordinates

   if ball.xcor() > 390: #Right side of screen

       ball.goto(0,0) #All coordinates with the .goto function should be in (x,y) format

       ball.dx *= -1

       score_a += 1

       #updates score

       pen.clear()

       pen.write("Alayer A: {}  Player B: {}".format(score_a, score_b), align="center", font=("Courier", 24, "normal"))

   if ball.xcor() < -390: #Left side of screen

       ball.goto(0,0) #All coordinates with the .goto function should be in (x,y) format

       ball.dx *= -1

       score_b += 1

       #updates score

       pen.clear()

       pen.write("Alayer A: {}  Player B: {}".format(score_a, score_b), align="center", font=("Courier", 24, "normal"))

   # Paddle and ball collisions

   if (ball.xcor() > 340 and ball.xcor() < 350) and (ball.ycor() < paddle_b.ycor() + 40 and ball.ycor() > paddle_b.ycor() - 40):

       ball.setx(340)

       ball.dx *= -1

       #For Mac, it is afplay. For Linux, it is aplay

       os.system("afplay bounce.wav&") #"&" cuts out the delay

       #for windows, it's winsound.PlaySound("bounce.wav", winsound.SND_ASYNC)

   if (ball.xcor() < -340 and ball.xcor() > -350) and (ball.ycor() < paddle_a.ycor() + 40 and ball.ycor() > paddle_a.ycor() - 40):

       ball.setx(-340)

       ball.dx *= -1

       #For Mac, it is afplay. For Linux, it is aplay

       os.system("afplay bounce.wav&") #"&" cuts out the delay

       #for windows, it's winsound.PlaySound("bounce.wav", winsound.SND_ASYNC)

[S3C]

At 7/27/23 09:06 PM, EB-2K wrote:Does anybody know how I can upload a .py file onto newgrounds?

NewGrounds does not natively have a python interpreter.

It's possible to wrap a python interpreter in a HTML5 (or whatever interactive formats NewGrounds supports) but I'm unaware of any existing.

In short: you can't.

This is the code I'm trying to convert into an HTML5 file for it to be playable on here.

to answer the topic title, you can't. HTML5 is not a programming language.

an HTML5 game would likely be implemented with Javascript for 'interactively' coded elements. try googling a python to javascript converter, or perhaps use an AI model like ChatGPT to convert the code for you. That may put you in the right direction, but it probably won't be a smoking gun.

It really boils down to learning Python and getting an intuitive grasp at what the code is doing. Then you can google around Javascript (or your language of choice) for translating the code. It's not a simple ask.

# turtle module lets you do graphics in your projects
import turtle

would need to see the turtle module and likely more reclusive includes in order to convert.

less complicated and likely unavoidable route is to learn a game engine for incorporating game-based graphics in a practical manner. This would be the graphics black box you use thus no need to dig in to the 'turtle' black box that this Python example is using for graphics

# os module lets you interact through text commands
import os

Not sure how a browser application would support low-ish level os functions. And even if it can, you shouldn't be using such functionality for a pong game.

for example:

:       #For Mac, it is afplay. For Linux, it is aplay

:       os.system("afplay bounce.wav&") #"&" cuts out the delay

:       #for windows, it's winsound.PlaySound("bounce.wav", winsound.SND_ASYNC)

an HTML5 browser game should be OS agnostic and not care if you're using Linux/Mac/Windows/Dos/Android/Temple-OS

A sound affect will likely be inside an event listener attached to an object (a 'wall' or 'paddle' in this case).

If you are using a game engine, you may be able to do this through it's interface and need not write any code.

The rest of the code you have posted e.g. creating the window can be accomplished through the game interface without directly writing code or is fundamental logic that shouldn't be too difficult to adopt to a different language syntax once you understand how it fundamentally works.

TLDR:

1. if this isn't an educational exercise, and you just want to play the game on NewGrounds, first make sure you have permission to use the code, and then maybe someone here (or more likely the game development forum) will be nice enough to compile into a game for you

2. if you want to learn how to make the game yourself then

--a. install Python

--b. look up rudimentary coding and Python tutorials

--c. follow the instructions for downloading the code including necessary modules like turtle.

--d. get familiar with a game engine

--e. once you are familiar (not an easy process) convert the code (since it's fundamental, should be an easy process at this point)

[Gimmick]

You can't*.

*Well, technically you can convert it to wasm and then try to run it in the browser, but it's rather overkill for what you're attempting to do. There's services like Trinket.io which allow you to put turtle graphics on the web, but I don't think you can/are allowed to embed it on Newgrounds...you might also want to try working with a game engine or framework as well.

[alsoknownas1]

At 7/27/23 09:06 PM, EB-2K wrote:Does anybody know how I can upload a .py file onto newgrounds? This is the code I'm trying to convert into an HTML5 file for it to be playable on here.

Ideally, there would be a web implementation of turtle. Sadly, I don't think such a thing exist ATM.

However... if you want to stick to Python, you might could port this to something like pygame and then use pybag to port/post to NG?

[andybarrette]

Hmmm. I have a website of apps based on HTML/JS. Should I publish them here somewhere? I didn't know NG was meant for that.

https://polyphys.com