Spaces:
Runtime error
Runtime error
Create app.py
Browse files
app.py
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import streamlit as st
|
| 2 |
+
|
| 3 |
+
# Title for your Streamlit app
|
| 4 |
+
st.title('Web-Based Game Development Resources')
|
| 5 |
+
|
| 6 |
+
# JavaScript Section
|
| 7 |
+
st.header('JavaScript')
|
| 8 |
+
st.write('The primary programming language for developing HTML5 games, enabling game logic, interactivity, and dynamic content manipulation within web browsers.')
|
| 9 |
+
st.code('''
|
| 10 |
+
// Example: Changing an HTML element text
|
| 11 |
+
document.getElementById("myElement").innerHTML = "Hello JavaScript!";
|
| 12 |
+
''')
|
| 13 |
+
st.markdown('[Learn more about JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)')
|
| 14 |
+
|
| 15 |
+
# HTML5 Section
|
| 16 |
+
st.header('HTML5')
|
| 17 |
+
st.write('Crucial for structuring the game content on the web. It provides the canvas element for 2D and WebGL for 3D graphics.')
|
| 18 |
+
st.code('''
|
| 19 |
+
<!DOCTYPE html>
|
| 20 |
+
<html>
|
| 21 |
+
<body>
|
| 22 |
+
<canvas id="myCanvas"></canvas>
|
| 23 |
+
</body>
|
| 24 |
+
</html>
|
| 25 |
+
''')
|
| 26 |
+
st.markdown('[Learn more about HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)')
|
| 27 |
+
|
| 28 |
+
# CSS3 Section
|
| 29 |
+
st.header('CSS3')
|
| 30 |
+
st.write('Used for styling and animating game elements, contributing to the visual appeal and user interface design of HTML5 games.')
|
| 31 |
+
st.code('''
|
| 32 |
+
#myElement {
|
| 33 |
+
width: 100px;
|
| 34 |
+
height: 100px;
|
| 35 |
+
background-color: red;
|
| 36 |
+
animation: mymove 5s infinite;
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
@keyframes mymove {
|
| 40 |
+
from {background-color: red;}
|
| 41 |
+
to {background-color: yellow;}
|
| 42 |
+
}
|
| 43 |
+
''')
|
| 44 |
+
st.markdown('[Learn more about CSS3](https://developer.mozilla.org/en-US/docs/Web/CSS)')
|
| 45 |
+
|
| 46 |
+
# Phaser Section
|
| 47 |
+
st.header('Phaser')
|
| 48 |
+
st.write('A popular and versatile open-source framework for creating 2D games that run in a web browser.')
|
| 49 |
+
st.markdown('[Learn more about Phaser](https://phaser.io/)')
|
| 50 |
+
|
| 51 |
+
# Three.js Section
|
| 52 |
+
st.header('Three.js')
|
| 53 |
+
st.write('A cross-browser JavaScript library and API used to create and display animated 3D computer graphics in a web browser using WebGL.')
|
| 54 |
+
st.markdown('[Learn more about Three.js](https://threejs.org/)')
|
| 55 |
+
|
| 56 |
+
# Unity with WebGL Export Section
|
| 57 |
+
st.header('Unity with WebGL Export')
|
| 58 |
+
st.write('Unity is a powerful game development platform that can export games to WebGL, allowing developers to create high-quality 3D and 2D games for web browsers.')
|
| 59 |
+
st.markdown('[Learn more about Unity WebGL Export](https://docs.unity3d.com/Manual/webgl-gettingstarted.html)')
|
| 60 |
+
|
| 61 |
+
# Babylon.js Section
|
| 62 |
+
st.header('Babylon.js')
|
| 63 |
+
st.write('A complete JavaScript framework for building 3D games with WebGL.')
|
| 64 |
+
st.markdown('[Learn more about Babylon.js](https://www.babylonjs.com/)')
|
| 65 |
+
|
| 66 |
+
# Construct Section
|
| 67 |
+
st.header('Construct')
|
| 68 |
+
st.write('A powerful HTML5 game creator designed for 2D games, providing a visual editor that requires no coding.')
|
| 69 |
+
st.markdown('[Learn more about Construct](https://www.construct.net/)')
|
| 70 |
+
|
| 71 |
+
# Godot Engine Section
|
| 72 |
+
st.header('Godot Engine')
|
| 73 |
+
st.write('An open-source game engine that supports HTML5 export, useful for creating 2D and 3D games from a unified interface.')
|
| 74 |
+
st.markdown('[Learn more about Godot Engine](https://godotengine.org/)')
|
| 75 |
+
|
| 76 |
+
# PixiJS Section
|
| 77 |
+
st.header('PixiJS')
|
| 78 |
+
st.write('A fast, lightweight 2D rendering library that provides a simple way to work with 2D graphics in the web.')
|
| 79 |
+
st.markdown('[Learn more about PixiJS](https://www.pixijs.com/)')
|
| 80 |
+
|
| 81 |
+
# Instructions to run this Streamlit app
|
| 82 |
+
# 1. Ensure you have Python and Streamlit installed in your environment.
|
| 83 |
+
# 2. Save this script as `game_development_resources.py`.
|
| 84 |
+
# 3. Run the app by typing `streamlit run game_development_resources.py` in your terminal.
|
| 85 |
+
|