Compare commits
10 Commits
97e02d28c1
...
5766cc7ab3
| Author | SHA1 | Date |
|---|---|---|
 Jake
|
5766cc7ab3 | |
|
Jake
|
092963c511 | |
|
Jake
|
4f8c2ba774 | |
|
Jake
|
3551ec747d | |
|
Jake
|
8a0219500d | |
|
Jake
|
9b702b6ff1 | |
|
Jake
|
4c970c8faf | |
|
Jake
|
05dd8cb6a3 | |
|
Jake
|
9bbc8592e0 | |
|
Jake
|
af9cd8177e |
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"liveServer.settings.port": 5501
|
||||||
|
}
|
||||||
1164
data/lessons.js
1164
data/lessons.js
File diff suppressed because it is too large
Load Diff
|
|
@ -1,10 +0,0 @@
|
||||||
[
|
|
||||||
{
|
|
||||||
"title": "Lesson 1",
|
|
||||||
"content": "Welcome to Python. We are going to learn how to use python to control robots, but we need some basics first.</br>Let's start with the basics of Python programming. Python is a versatile language that is easy to learn and widely used in robotics.<br>"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Lesson 2",
|
|
||||||
"content": "Now let's learn about interrupts..."
|
|
||||||
}
|
|
||||||
]
|
|
||||||
763
data/levels.json
763
data/levels.json
|
|
@ -5,32 +5,50 @@
|
||||||
"player": {
|
"player": {
|
||||||
"position": {
|
"position": {
|
||||||
"x": 200,
|
"x": 200,
|
||||||
"y": 200
|
"y": 75
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"waypoints": [
|
"waypoints": [
|
||||||
{
|
{
|
||||||
"position": {
|
|
||||||
"x": 420,
|
|
||||||
"y": 200
|
|
||||||
},
|
|
||||||
"vertices": [
|
"vertices": [
|
||||||
{
|
{
|
||||||
"x": -50,
|
"x": 300,
|
||||||
"y": -50
|
"y": 40
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": 50,
|
"x": 300,
|
||||||
"y": -50
|
"y": 110
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": 50,
|
"x": 320,
|
||||||
"y": 50
|
"y": 110
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": -50,
|
"x": 320,
|
||||||
"y": 50
|
"y": 40
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#0000FF",
|
||||||
|
"fillColor": "#0000CC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 100,
|
||||||
|
"y": 40
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 100,
|
||||||
|
"y": 110
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 120,
|
||||||
|
"y": 110
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 120,
|
||||||
|
"y": 40
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"strokeColor": "#0000FF",
|
"strokeColor": "#0000FF",
|
||||||
|
|
@ -41,130 +59,88 @@
|
||||||
{
|
{
|
||||||
"vertices": [
|
"vertices": [
|
||||||
{
|
{
|
||||||
"x": -100,
|
"x": 0,
|
||||||
"y": -100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": 100,
|
|
||||||
"y": -100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": 100,
|
|
||||||
"y": 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": -100,
|
|
||||||
"y": 100
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"position": {
|
|
||||||
"x": 800,
|
|
||||||
"y": 300
|
|
||||||
},
|
|
||||||
"strokeColor": "#999999",
|
|
||||||
"fillColor": "#CCCCCC"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"vertices": [
|
|
||||||
{
|
|
||||||
"x": -10,
|
|
||||||
"y": -10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": 1010,
|
|
||||||
"y": -10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": 1010,
|
|
||||||
"y": 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": -10,
|
|
||||||
"y": 10
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"position": {
|
|
||||||
"x": 500,
|
|
||||||
"y": 0
|
"y": 0
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"x": 850,
|
||||||
|
"y": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 850,
|
||||||
|
"y": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 0,
|
||||||
|
"y": 20
|
||||||
|
}
|
||||||
|
],
|
||||||
"strokeColor": "#999999",
|
"strokeColor": "#999999",
|
||||||
"fillColor": "#CCCCCC"
|
"fillColor": "#CCCCCC"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"vertices": [
|
"vertices": [
|
||||||
{
|
{
|
||||||
"x": -10,
|
"x": 830,
|
||||||
"y": -10
|
"y": 20
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": 1010,
|
"x": 850,
|
||||||
"y": -10
|
"y": 20
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": 1010,
|
"x": 850,
|
||||||
"y": 10
|
"y": 600
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": -10,
|
"x": 830,
|
||||||
"y": 10
|
"y": 600
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"position": {
|
"strokeColor": "#999999",
|
||||||
"x": 500,
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 0,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 850,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 850,
|
||||||
"y": 620
|
"y": 620
|
||||||
},
|
},
|
||||||
"strokeColor": "#999999",
|
|
||||||
"fillColor": "#CCCCCC"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"vertices": [
|
|
||||||
{
|
|
||||||
"x": -10,
|
|
||||||
"y": 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": 10,
|
|
||||||
"y": 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": 10,
|
|
||||||
"y": 610
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": -10,
|
|
||||||
"y": 610
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"position": {
|
|
||||||
"x": 0,
|
"x": 0,
|
||||||
"y": 310
|
"y": 620
|
||||||
},
|
}
|
||||||
|
],
|
||||||
"strokeColor": "#999999",
|
"strokeColor": "#999999",
|
||||||
"fillColor": "#CCCCCC"
|
"fillColor": "#CCCCCC"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"vertices": [
|
"vertices": [
|
||||||
{
|
{
|
||||||
"x": -10,
|
"x": 0,
|
||||||
"y": 10
|
"y": 20
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": 10,
|
"x": 20,
|
||||||
"y": 10
|
"y": 20
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": 10,
|
"x": 20,
|
||||||
"y": 610
|
"y": 600
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": -10,
|
"x": 0,
|
||||||
"y": 610
|
"y": 600
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"position": {
|
|
||||||
"x": 1000,
|
|
||||||
"y": 310
|
|
||||||
},
|
|
||||||
"strokeColor": "#999999",
|
"strokeColor": "#999999",
|
||||||
"fillColor": "#CCCCCC"
|
"fillColor": "#CCCCCC"
|
||||||
}
|
}
|
||||||
|
|
@ -176,35 +152,53 @@
|
||||||
"player": {
|
"player": {
|
||||||
"position": {
|
"position": {
|
||||||
"x": 200,
|
"x": 200,
|
||||||
"y": 200
|
"y": 75
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"waypoints": [
|
"waypoints": [
|
||||||
{
|
{
|
||||||
"position": {
|
|
||||||
"x": 220,
|
|
||||||
"y": 500
|
|
||||||
},
|
|
||||||
"vertices": [
|
"vertices": [
|
||||||
{
|
{
|
||||||
"x": -50,
|
"x": 300,
|
||||||
"y": -50
|
"y": 40
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": 50,
|
"x": 300,
|
||||||
"y": -50
|
"y": 110
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": 50,
|
"x": 320,
|
||||||
"y": 50
|
"y": 110
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": -50,
|
"x": 320,
|
||||||
"y": 50
|
"y": 40
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"strokeColor": "#000099",
|
"strokeColor": "#0000FF",
|
||||||
|
"fillColor": "#0000CC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 300,
|
||||||
|
"y": 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 320,
|
||||||
|
"y": 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 320,
|
||||||
|
"y": 280
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 300,
|
||||||
|
"y": 280
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#0000FF",
|
||||||
"fillColor": "#0000CC"
|
"fillColor": "#0000CC"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
@ -212,130 +206,487 @@
|
||||||
{
|
{
|
||||||
"vertices": [
|
"vertices": [
|
||||||
{
|
{
|
||||||
"x": -100,
|
"x": 0,
|
||||||
"y": -100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": 100,
|
|
||||||
"y": -100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": 100,
|
|
||||||
"y": 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": -100,
|
|
||||||
"y": 100
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"position": {
|
|
||||||
"x": 200,
|
|
||||||
"y": 300
|
|
||||||
},
|
|
||||||
"strokeColor": "#999999",
|
|
||||||
"fillColor": "#CCCCCC"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"vertices": [
|
|
||||||
{
|
|
||||||
"x": -10,
|
|
||||||
"y": -10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": 1010,
|
|
||||||
"y": -10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": 1010,
|
|
||||||
"y": 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": -10,
|
|
||||||
"y": 10
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"position": {
|
|
||||||
"x": 500,
|
|
||||||
"y": 0
|
"y": 0
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"x": 850,
|
||||||
|
"y": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 850,
|
||||||
|
"y": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 0,
|
||||||
|
"y": 20
|
||||||
|
}
|
||||||
|
],
|
||||||
"strokeColor": "#999999",
|
"strokeColor": "#999999",
|
||||||
"fillColor": "#CCCCCC"
|
"fillColor": "#CCCCCC"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"vertices": [
|
"vertices": [
|
||||||
{
|
{
|
||||||
"x": -10,
|
"x": 830,
|
||||||
"y": -10
|
"y": 20
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": 1010,
|
"x": 850,
|
||||||
"y": -10
|
"y": 20
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": 1010,
|
"x": 850,
|
||||||
"y": 10
|
"y": 600
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": -10,
|
"x": 830,
|
||||||
"y": 10
|
"y": 600
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"position": {
|
"strokeColor": "#999999",
|
||||||
"x": 500,
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 0,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 850,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 850,
|
||||||
"y": 620
|
"y": 620
|
||||||
},
|
},
|
||||||
"strokeColor": "#999999",
|
|
||||||
"fillColor": "#CCCCCC"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"vertices": [
|
|
||||||
{
|
|
||||||
"x": -10,
|
|
||||||
"y": 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": 10,
|
|
||||||
"y": 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": 10,
|
|
||||||
"y": 610
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"x": -10,
|
|
||||||
"y": 610
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"position": {
|
|
||||||
"x": 0,
|
"x": 0,
|
||||||
"y": 310
|
"y": 620
|
||||||
},
|
}
|
||||||
|
],
|
||||||
"strokeColor": "#999999",
|
"strokeColor": "#999999",
|
||||||
"fillColor": "#CCCCCC"
|
"fillColor": "#CCCCCC"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"vertices": [
|
"vertices": [
|
||||||
{
|
{
|
||||||
"x": -10,
|
"x": 0,
|
||||||
"y": 10
|
"y": 20
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": 10,
|
"x": 20,
|
||||||
"y": 10
|
"y": 20
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": 10,
|
"x": 20,
|
||||||
"y": 610
|
"y": 600
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": -10,
|
"x": 0,
|
||||||
"y": 610
|
"y": 600
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"position": {
|
"strokeColor": "#999999",
|
||||||
"x": 1000,
|
"fillColor": "#CCCCCC"
|
||||||
"y": 310
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Level 3",
|
||||||
|
"robots": {
|
||||||
|
"player": {
|
||||||
|
"position": {
|
||||||
|
"x": 50,
|
||||||
|
"y": 70
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"waypoints": [
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 340,
|
||||||
|
"y": 270
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 340,
|
||||||
|
"y": 360
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 360,
|
||||||
|
"y": 360
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 360,
|
||||||
|
"y": 270
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#0000FF",
|
||||||
|
"fillColor": "#0000CC"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"obstacles": [
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 0,
|
||||||
|
"y": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 850,
|
||||||
|
"y": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 850,
|
||||||
|
"y": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 0,
|
||||||
|
"y": 20
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 830,
|
||||||
|
"y": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 850,
|
||||||
|
"y": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 850,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 830,
|
||||||
|
"y": 600
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 0,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 850,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 850,
|
||||||
|
"y": 620
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 0,
|
||||||
|
"y": 620
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 0,
|
||||||
|
"y": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 20,
|
||||||
|
"y": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 20,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 0,
|
||||||
|
"y": 600
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 330,
|
||||||
|
"y": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 410,
|
||||||
|
"y": 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 430,
|
||||||
|
"y": 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 430,
|
||||||
|
"y": 20
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 410,
|
||||||
|
"y": 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 410,
|
||||||
|
"y": 160
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 430,
|
||||||
|
"y": 160
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 430,
|
||||||
|
"y": 100
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 410,
|
||||||
|
"y": 160
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 330,
|
||||||
|
"y": 240
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 330,
|
||||||
|
"y": 260
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 430,
|
||||||
|
"y": 260
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 430,
|
||||||
|
"y": 160
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 330,
|
||||||
|
"y": 240
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 130,
|
||||||
|
"y": 240
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 130,
|
||||||
|
"y": 260
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 330,
|
||||||
|
"y": 260
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 300,
|
||||||
|
"y": 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 300,
|
||||||
|
"y": 140
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 20,
|
||||||
|
"y": 140
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 20,
|
||||||
|
"y": 120
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 20,
|
||||||
|
"y": 140
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 90,
|
||||||
|
"y": 140
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 20,
|
||||||
|
"y": 210
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 130,
|
||||||
|
"y": 260
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 130,
|
||||||
|
"y": 480
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 150,
|
||||||
|
"y": 480
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 150,
|
||||||
|
"y": 260
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 20,
|
||||||
|
"y": 530
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 90,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 20,
|
||||||
|
"y": 600
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 260,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 260,
|
||||||
|
"y": 370
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 280,
|
||||||
|
"y": 370
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 280,
|
||||||
|
"y": 600
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 150,
|
||||||
|
"y": 350
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 240,
|
||||||
|
"y": 260
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 150,
|
||||||
|
"y": 260
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 280,
|
||||||
|
"y": 370
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 430,
|
||||||
|
"y": 370
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 430,
|
||||||
|
"y": 390
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 280,
|
||||||
|
"y": 390
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 430,
|
||||||
|
"y": 260
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 430,
|
||||||
|
"y": 370
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 410,
|
||||||
|
"y": 370
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 410,
|
||||||
|
"y": 260
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"strokeColor": "#999999",
|
||||||
|
"fillColor": "#CCCCCC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"vertices": [
|
||||||
|
{
|
||||||
|
"x": 170,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 260,
|
||||||
|
"y": 510
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"x": 260,
|
||||||
|
"y": 600
|
||||||
|
}
|
||||||
|
],
|
||||||
"strokeColor": "#999999",
|
"strokeColor": "#999999",
|
||||||
"fillColor": "#CCCCCC"
|
"fillColor": "#CCCCCC"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Level Editor with Absolute Vertices and Level Load</title>
|
||||||
|
<style>
|
||||||
|
canvas {
|
||||||
|
border: 1px solid black;
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h2>Level Editor</h2>
|
||||||
|
<label>Level Name: <input type="text" id="levelName" value="Level 1" /></label><br /><br />
|
||||||
|
<label>Mode:
|
||||||
|
<select id="drawMode">
|
||||||
|
<option value="waypoints">Waypoint</option>
|
||||||
|
<option value="obstacles">Obstacle</option>
|
||||||
|
</select>
|
||||||
|
</label><br /><br />
|
||||||
|
|
||||||
|
<!-- Load Level UI -->
|
||||||
|
<label>Load Level:
|
||||||
|
<select id="levelSelect"><option>Loading...</option></select>
|
||||||
|
<button id="loadLevelBtn">Load</button>
|
||||||
|
</label><br /><br />
|
||||||
|
|
||||||
|
<canvas id="canvas" width="1000" height="640"></canvas><br />
|
||||||
|
<button id="saveJSON">Download JSON</button>
|
||||||
|
|
||||||
|
<script src="editor.js" defer></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,279 @@
|
||||||
|
const canvas = document.getElementById("canvas");
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
const gridSize = 10;
|
||||||
|
let currentPolygon = [];
|
||||||
|
let shapes = {
|
||||||
|
robots: {
|
||||||
|
player: { position: { x: 200, y: 200 } }
|
||||||
|
},
|
||||||
|
waypoints: [],
|
||||||
|
obstacles: []
|
||||||
|
};
|
||||||
|
|
||||||
|
let view = {
|
||||||
|
zoom: 1,
|
||||||
|
offsetX: 0,
|
||||||
|
offsetY: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
let loadedLevels = []; // store loaded levels here
|
||||||
|
|
||||||
|
// Coordinate conversions
|
||||||
|
function worldToScreen(x, y) {
|
||||||
|
return {
|
||||||
|
x: (x - view.offsetX) * view.zoom,
|
||||||
|
y: (y - view.offsetY) * view.zoom
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function screenToWorld(x, y) {
|
||||||
|
return {
|
||||||
|
x: x / view.zoom + view.offsetX,
|
||||||
|
y: y / view.zoom + view.offsetY
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw grid
|
||||||
|
function drawGrid() {
|
||||||
|
const step = gridSize;
|
||||||
|
const bounds = {
|
||||||
|
left: view.offsetX,
|
||||||
|
right: view.offsetX + canvas.width / view.zoom,
|
||||||
|
top: view.offsetY,
|
||||||
|
bottom: view.offsetY + canvas.height / view.zoom
|
||||||
|
};
|
||||||
|
|
||||||
|
ctx.strokeStyle = "#eee";
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.beginPath();
|
||||||
|
for (let x = Math.floor(bounds.left / step) * step; x < bounds.right; x += step) {
|
||||||
|
const sx = worldToScreen(x, 0).x;
|
||||||
|
ctx.moveTo(sx, 0);
|
||||||
|
ctx.lineTo(sx, canvas.height);
|
||||||
|
}
|
||||||
|
for (let y = Math.floor(bounds.top / step) * step; y < bounds.bottom; y += step) {
|
||||||
|
const sy = worldToScreen(0, y).y;
|
||||||
|
ctx.moveTo(0, sy);
|
||||||
|
ctx.lineTo(canvas.width, sy);
|
||||||
|
}
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw a circle (for vertices)
|
||||||
|
function drawCircle(x, y, radius = 4) {
|
||||||
|
const screen = worldToScreen(x, y);
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(screen.x, screen.y, radius, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw polygon from absolute vertices
|
||||||
|
function drawPolygon(vertices, stroke = "#000", fill = "#ccc") {
|
||||||
|
if (vertices.length === 0) return;
|
||||||
|
ctx.beginPath();
|
||||||
|
const first = worldToScreen(vertices[0].x, vertices[0].y);
|
||||||
|
ctx.moveTo(first.x, first.y);
|
||||||
|
for (let i = 1; i < vertices.length; i++) {
|
||||||
|
const p = worldToScreen(vertices[i].x, vertices[i].y);
|
||||||
|
ctx.lineTo(p.x, p.y);
|
||||||
|
}
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.fillStyle = fill;
|
||||||
|
ctx.fill();
|
||||||
|
ctx.strokeStyle = stroke;
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Redraw entire canvas
|
||||||
|
function redrawAll() {
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
drawGrid();
|
||||||
|
|
||||||
|
for (let w of shapes.waypoints) {
|
||||||
|
drawPolygon(w.vertices, w.strokeColor, w.fillColor);
|
||||||
|
}
|
||||||
|
for (let o of shapes.obstacles) {
|
||||||
|
drawPolygon(o.vertices, o.strokeColor, o.fillColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentPolygon.length > 0) {
|
||||||
|
ctx.strokeStyle = "#000";
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
|
||||||
|
for (let p of currentPolygon) {
|
||||||
|
drawCircle(p.x, p.y);
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
const start = worldToScreen(currentPolygon[0].x, currentPolygon[0].y);
|
||||||
|
ctx.moveTo(start.x, start.y);
|
||||||
|
for (let i = 1; i < currentPolygon.length; i++) {
|
||||||
|
const p = worldToScreen(currentPolygon[i].x, currentPolygon[i].y);
|
||||||
|
ctx.lineTo(p.x, p.y);
|
||||||
|
}
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Snap to grid if ctrl pressed
|
||||||
|
function snapToGrid(x, y) {
|
||||||
|
return {
|
||||||
|
x: Math.round(x / gridSize) * gridSize,
|
||||||
|
y: Math.round(y / gridSize) * gridSize
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Canvas click event to add vertices
|
||||||
|
canvas.addEventListener("click", (e) => {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
let sx = e.clientX - rect.left;
|
||||||
|
let sy = e.clientY - rect.top;
|
||||||
|
let { x, y } = screenToWorld(sx, sy);
|
||||||
|
|
||||||
|
if (e.ctrlKey) {
|
||||||
|
({ x, y } = snapToGrid(x, y));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentPolygon.length > 0) {
|
||||||
|
const dx = x - currentPolygon[0].x;
|
||||||
|
const dy = y - currentPolygon[0].y;
|
||||||
|
if (Math.sqrt(dx * dx + dy * dy) < 10 / view.zoom) {
|
||||||
|
finishPolygon();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
currentPolygon.push({ x, y });
|
||||||
|
redrawAll();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Finish polygon and add to shapes
|
||||||
|
function finishPolygon() {
|
||||||
|
if (currentPolygon.length < 3) return;
|
||||||
|
|
||||||
|
const type = document.getElementById("drawMode").value;
|
||||||
|
const shape = {
|
||||||
|
vertices: [...currentPolygon],
|
||||||
|
strokeColor: type === "waypoints" ? "#0000FF" : "#999999",
|
||||||
|
fillColor: type === "waypoints" ? "#0000CC" : "#CCCCCC"
|
||||||
|
};
|
||||||
|
|
||||||
|
shapes[type].push(shape);
|
||||||
|
currentPolygon = [];
|
||||||
|
redrawAll();
|
||||||
|
}
|
||||||
|
//document.getElementById("finishPolygon").addEventListener("click", finishPolygon);
|
||||||
|
|
||||||
|
// Save JSON to file
|
||||||
|
document.getElementById("saveJSON").addEventListener("click", () => {
|
||||||
|
const levelName = document.getElementById("levelName").value;
|
||||||
|
const exportData = [{
|
||||||
|
name: levelName,
|
||||||
|
...shapes
|
||||||
|
}];
|
||||||
|
const blob = new Blob([JSON.stringify(exportData, null, 4)], { type: "application/json" });
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = URL.createObjectURL(blob);
|
||||||
|
a.download = levelName.replace(/\s+/g, "_") + ".json";
|
||||||
|
a.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Zoom with mouse wheel, zoom toward cursor
|
||||||
|
canvas.addEventListener("wheel", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const delta = -e.deltaY;
|
||||||
|
const zoomFactor = 1.1;
|
||||||
|
const mouse = screenToWorld(e.offsetX, e.offsetY);
|
||||||
|
|
||||||
|
if (delta > 0) {
|
||||||
|
view.zoom *= zoomFactor;
|
||||||
|
} else {
|
||||||
|
view.zoom /= zoomFactor;
|
||||||
|
}
|
||||||
|
|
||||||
|
view.offsetX = mouse.x - (e.offsetX / view.zoom);
|
||||||
|
view.offsetY = mouse.y - (e.offsetY / view.zoom);
|
||||||
|
|
||||||
|
redrawAll();
|
||||||
|
}, { passive: false });
|
||||||
|
|
||||||
|
// Undo with Ctrl+Z
|
||||||
|
document.addEventListener("keydown", (e) => {
|
||||||
|
if (e.ctrlKey && e.key === "z") {
|
||||||
|
if (currentPolygon.length > 0) {
|
||||||
|
currentPolygon.pop();
|
||||||
|
} else {
|
||||||
|
const type = document.getElementById("drawMode").value;
|
||||||
|
if (shapes[type].length > 0) {
|
||||||
|
shapes[type].pop();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
redrawAll();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// --------- NEW: Load Levels from data/levels.json ---------
|
||||||
|
async function loadLevels() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('data/levels.json');
|
||||||
|
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
loadedLevels = await response.json();
|
||||||
|
|
||||||
|
const levelSelect = document.getElementById('levelSelect');
|
||||||
|
levelSelect.innerHTML = ''; // Clear loading message
|
||||||
|
|
||||||
|
loadedLevels.forEach((level, idx) => {
|
||||||
|
const option = document.createElement('option');
|
||||||
|
option.value = idx;
|
||||||
|
option.textContent = level.name || `Level ${idx + 1}`;
|
||||||
|
levelSelect.appendChild(option);
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
alert('Failed to load levels.json: ' + err.message);
|
||||||
|
const levelSelect = document.getElementById('levelSelect');
|
||||||
|
levelSelect.innerHTML = '<option>Error loading levels</option>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadSelectedLevel() {
|
||||||
|
const levelSelect = document.getElementById('levelSelect');
|
||||||
|
const idx = parseInt(levelSelect.value);
|
||||||
|
if (isNaN(idx) || !loadedLevels[idx]) {
|
||||||
|
alert('Please select a valid level');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const level = loadedLevels[idx];
|
||||||
|
document.getElementById('levelName').value = level.name || '';
|
||||||
|
|
||||||
|
if (level.robots && level.robots.player && level.robots.player.position) {
|
||||||
|
shapes.robots.player.position = { ...level.robots.player.position };
|
||||||
|
} else {
|
||||||
|
shapes.robots.player.position = { x: 200, y: 200 };
|
||||||
|
}
|
||||||
|
|
||||||
|
shapes.waypoints = (level.waypoints || []).map(wp => ({
|
||||||
|
vertices: wp.vertices.map(v => ({ x: v.x, y: v.y })),
|
||||||
|
strokeColor: wp.strokeColor || "#0000FF",
|
||||||
|
fillColor: wp.fillColor || "#0000CC"
|
||||||
|
}));
|
||||||
|
|
||||||
|
shapes.obstacles = (level.obstacles || []).map(ob => ({
|
||||||
|
vertices: ob.vertices.map(v => ({ x: v.x, y: v.y })),
|
||||||
|
strokeColor: ob.strokeColor || "#999999",
|
||||||
|
fillColor: ob.fillColor || "#CCCCCC"
|
||||||
|
}));
|
||||||
|
|
||||||
|
currentPolygon = [];
|
||||||
|
redrawAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
document.getElementById('loadLevelBtn').addEventListener('click', loadSelectedLevel);
|
||||||
|
|
||||||
|
// Load levels.json on page load
|
||||||
|
loadLevels();
|
||||||
|
|
||||||
|
// Initial draw
|
||||||
|
redrawAll();
|
||||||
240
game.js
240
game.js
|
|
@ -2,8 +2,11 @@ import { Robot } from "./robot.js";
|
||||||
import { GameWorld } from "./gameworld.js";
|
import { GameWorld } from "./gameworld.js";
|
||||||
import { lessons } from './data/lessons.js';
|
import { lessons } from './data/lessons.js';
|
||||||
|
|
||||||
|
let mostRecentCode = ""; // The user’s code
|
||||||
|
let codeRanGood = false; // Your own function that returns true/false
|
||||||
|
let consoleText = ""; // What was printed
|
||||||
let currentLesson = 0;
|
let currentLesson = 0;
|
||||||
|
let lessonComplete = false;
|
||||||
|
|
||||||
async function loadLessons() {
|
async function loadLessons() {
|
||||||
const response = await fetch('data/lessons.json');
|
const response = await fetch('data/lessons.json');
|
||||||
|
|
@ -13,19 +16,76 @@ async function loadLessons() {
|
||||||
|
|
||||||
function showLesson(index) {
|
function showLesson(index) {
|
||||||
if (index < 0 || index >= lessons.length) return;
|
if (index < 0 || index >= lessons.length) return;
|
||||||
|
lessonComplete = false;
|
||||||
currentLesson = index;
|
currentLesson = index;
|
||||||
|
|
||||||
const lesson = lessons[index];
|
const lesson = lessons[index];
|
||||||
document.getElementById('lesson-title').textContent = lesson.title;
|
loadLessonContent(lesson);
|
||||||
document.getElementById('lesson-content').innerHTML = lesson.content;
|
updateTabs(lessons, index);
|
||||||
|
|
||||||
|
if (lesson.map) {
|
||||||
|
console.log("Loading map for lesson:", lesson.map);
|
||||||
|
document.getElementById('gameCanvas').style.display = 'block';
|
||||||
|
for (let i = 0; i < gameWorld.levelData.length; i++) {
|
||||||
|
if (gameWorld.levelData[i].name === lesson.map) {
|
||||||
|
gameWorld.currentLevel = i;
|
||||||
|
console.log("Setting current level to:", i);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
resetGameWorld();
|
||||||
|
} else {
|
||||||
|
document.getElementById('gameCanvas').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
document.getElementById('prev-lesson').disabled = index === 0;
|
document.getElementById('prev-lesson').disabled = index === 0;
|
||||||
document.getElementById('next-lesson').disabled = index === lessons.length - 1;
|
document.getElementById('next-lesson').disabled = index === lessons.length - 1;
|
||||||
|
|
||||||
console.log(isLessonDone(lesson.id));
|
//console.log(isLessonDone(lesson.id));
|
||||||
updateLessonStatus();
|
updateLessonStatus();
|
||||||
|
PopulateObjectives(lesson.objectives); // Populate objectives for the lesson
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function loadLessonContent(lesson) {
|
||||||
|
document.getElementById('lesson-title').textContent = lesson.title;
|
||||||
|
document.getElementById('lesson-content').innerHTML = lesson.content;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateTabs(lessons, currentIndex) {
|
||||||
|
let select = document.getElementById('lesson-select');
|
||||||
|
let select_robot = document.getElementById('robot-select');
|
||||||
|
select.innerHTML = ''; // Clear old options
|
||||||
|
select_robot.innerHTML = ''; // Clear old options
|
||||||
|
|
||||||
|
|
||||||
|
lessons.forEach((lesson, index) => {
|
||||||
|
const option = document.createElement('option');
|
||||||
|
option.value = index;
|
||||||
|
option.textContent = lesson.title || `Lesson ${index + 1}`;
|
||||||
|
if (lesson.level == "basics") {
|
||||||
|
select.appendChild(option);
|
||||||
|
} else {
|
||||||
|
select_robot.appendChild(option);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set current selected lesson
|
||||||
|
select.value = currentIndex;
|
||||||
|
select_robot.value = currentIndex;
|
||||||
|
// Handle user selection
|
||||||
|
select.addEventListener('change', () => {
|
||||||
|
const selectedIndex = Number(select.value);
|
||||||
|
console.log("Selected lesson index:", selectedIndex);
|
||||||
|
showLesson(selectedIndex);
|
||||||
|
});
|
||||||
|
select_robot.addEventListener('change', () => {
|
||||||
|
const selectedIndex = Number(select_robot.value);
|
||||||
|
console.log("Selected lesson index:", selectedIndex);
|
||||||
|
showLesson(selectedIndex);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
document.getElementById('prev-lesson').addEventListener('click', () => {
|
document.getElementById('prev-lesson').addEventListener('click', () => {
|
||||||
showLesson(currentLesson - 1);
|
showLesson(currentLesson - 1);
|
||||||
});
|
});
|
||||||
|
|
@ -33,20 +93,55 @@ document.getElementById('next-lesson').addEventListener('click', () => {
|
||||||
showLesson(currentLesson + 1);
|
showLesson(currentLesson + 1);
|
||||||
});
|
});
|
||||||
|
|
||||||
function checkLessonDone(outputText) {
|
function checkLessonDone() {
|
||||||
|
//consoleText = outputText; // Update console text
|
||||||
|
if (consoleText.includes("Error") || consoleText.includes("Exception") || consoleText.includes("PythonError")) {
|
||||||
|
console.log(consoleText);
|
||||||
|
codeRanGood = false;
|
||||||
|
} else {
|
||||||
|
codeRanGood = true;
|
||||||
|
}
|
||||||
|
console.log("codeRanGood ", codeRanGood);
|
||||||
|
|
||||||
|
//checkCurrentStep(outputText);
|
||||||
const lesson = lessons[currentLesson];
|
const lesson = lessons[currentLesson];
|
||||||
if (lesson.doneCondition && lesson.doneCondition(outputText)) {
|
const result = lesson.doneCondition({
|
||||||
|
code: mostRecentCode,
|
||||||
|
consoleText: consoleText,
|
||||||
|
codeRanGood: codeRanGood,
|
||||||
|
gameWorld: gameWorld
|
||||||
|
});
|
||||||
|
console.log(gameWorld.waypointsReached);
|
||||||
|
if (result.done) {
|
||||||
markLessonDone(lesson.id);
|
markLessonDone(lesson.id);
|
||||||
}
|
}
|
||||||
|
console.log(result);
|
||||||
|
//if (result.progressArray) {
|
||||||
|
console.log("Progress: ", result.progressArray);
|
||||||
|
for (let i = 0; i < result.progressArray.length; i++) {
|
||||||
|
const objective = result.progressArray[i];
|
||||||
|
if (objective) {
|
||||||
|
toggleObjective(i, true); // Mark as completed
|
||||||
|
} else {
|
||||||
|
toggleObjective(i, false); // Mark as not completed
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//}
|
||||||
|
if (result.hint) {
|
||||||
|
logToConsole("Hint: " + result.hint, false);
|
||||||
|
//console.log("Hint:", result.hint); // Or show it in your console UI
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function markLessonDone(lessonId) {
|
function markLessonDone(lessonId) {
|
||||||
|
if (lessonComplete) return; // Prevent marking multiple times
|
||||||
|
lessonComplete = true; // Set flag to prevent further marking
|
||||||
// Your logic here: e.g., store in localStorage or update UI
|
// Your logic here: e.g., store in localStorage or update UI
|
||||||
console.log(`Lesson ${lessonId} marked as done!`);
|
console.log(`Lesson ${lessonId} marked as done!`);
|
||||||
// For example:
|
// For example:
|
||||||
localStorage.setItem(`lessonDone_${lessonId}`, 'true');
|
localStorage.setItem(`lessonDone_${lessonId}`, 'true');
|
||||||
logToConsole("✅ Task Completed! ✅");
|
logToConsole("✅ Task Completed! ✅", false);
|
||||||
updateLessonStatus();
|
updateLessonStatus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -68,6 +163,31 @@ function isLessonDone(lessonId) {
|
||||||
return localStorage.getItem(`lessonDone_${lessonId}`) === 'true';
|
return localStorage.getItem(`lessonDone_${lessonId}`) === 'true';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let currentStepIndex = 0;
|
||||||
|
|
||||||
|
function checkCurrentStep(text) {
|
||||||
|
const lesson = lessons[currentLesson];
|
||||||
|
const step = lesson.steps[currentStepIndex];
|
||||||
|
const result = step.doneCondition(text);
|
||||||
|
|
||||||
|
if (result) {
|
||||||
|
currentStepIndex++;
|
||||||
|
renderSteps(); // Re-render to show the new step
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderSteps() {
|
||||||
|
const lesson = lessons[currentLesson];
|
||||||
|
const container = document.getElementById("lesson-content");
|
||||||
|
container.innerHTML = "";
|
||||||
|
loadLessonContent(lesson); // Load the lesson content first
|
||||||
|
for (let i = 0; i <= currentStepIndex && i < lesson.steps.length; i++) {
|
||||||
|
const stepEl = document.createElement("div");
|
||||||
|
stepEl.innerHTML = lesson.steps[i].content;
|
||||||
|
container.appendChild(stepEl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function clearLessonProgress() {
|
function clearLessonProgress() {
|
||||||
Object.keys(localStorage).forEach(key => {
|
Object.keys(localStorage).forEach(key => {
|
||||||
if (key.startsWith('lessonDone_')) {
|
if (key.startsWith('lessonDone_')) {
|
||||||
|
|
@ -79,8 +199,47 @@ function clearLessonProgress() {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let objectiveElements = []; // store checkbox + item div
|
||||||
|
|
||||||
|
const listContainer = document.getElementById("objectives-list");
|
||||||
|
|
||||||
|
function PopulateObjectives(objectives) {
|
||||||
|
|
||||||
|
listContainer.innerHTML = ""; // Clear the DOM
|
||||||
|
objectiveElements.length = 0; // Clear the stored references
|
||||||
|
objectives.forEach((text, index) => {
|
||||||
|
const item = document.createElement("div");
|
||||||
|
item.className = "objective";
|
||||||
|
|
||||||
|
const checkbox = document.createElement("input");
|
||||||
|
checkbox.type = "checkbox";
|
||||||
|
checkbox.id = "obj-" + index;
|
||||||
|
checkbox.disabled = true; // make it non-interactive
|
||||||
|
|
||||||
|
const label = document.createElement("label");
|
||||||
|
label.htmlFor = checkbox.id;
|
||||||
|
label.textContent = text;
|
||||||
|
|
||||||
|
item.appendChild(checkbox);
|
||||||
|
item.appendChild(label);
|
||||||
|
listContainer.appendChild(item);
|
||||||
|
|
||||||
|
objectiveElements.push({ checkbox, item }); // Store reference
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function toggleObjective(index, completed = true) {
|
||||||
|
const obj = objectiveElements[index];
|
||||||
|
if (obj) {
|
||||||
|
obj.checkbox.checked = completed;
|
||||||
|
obj.item.classList.toggle("completed", completed);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//clearLessonProgress(); // Clear progress on load for testing
|
//clearLessonProgress(); // Clear progress on load for testing
|
||||||
showLesson(0);
|
|
||||||
|
|
||||||
const consoleElement = document.getElementById("console");
|
const consoleElement = document.getElementById("console");
|
||||||
const gameCanvas = document.getElementById("gameCanvas");
|
const gameCanvas = document.getElementById("gameCanvas");
|
||||||
|
|
@ -113,6 +272,7 @@ function startPyodideWorker() {
|
||||||
switch (event.data.type) {
|
switch (event.data.type) {
|
||||||
case "console":
|
case "console":
|
||||||
logToConsole(event.data.data);
|
logToConsole(event.data.data);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case "error":
|
case "error":
|
||||||
logToConsole(`<span style="color:red;">${event.data.message}</span>`);
|
logToConsole(`<span style="color:red;">${event.data.message}</span>`);
|
||||||
|
|
@ -126,6 +286,11 @@ function startPyodideWorker() {
|
||||||
case "move":
|
case "move":
|
||||||
move(event.data.data);
|
move(event.data.data);
|
||||||
break;
|
break;
|
||||||
|
case "execution_done":
|
||||||
|
console.log("Execution done");
|
||||||
|
document.getElementById('compile-button').disabled = false;
|
||||||
|
checkLessonDone();
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -145,10 +310,10 @@ function createInitialRobots() {
|
||||||
const maxLines = 64;
|
const maxLines = 64;
|
||||||
const logLines = [];
|
const logLines = [];
|
||||||
|
|
||||||
function logToConsole(text) {
|
function logToConsole(text, checkLesson = true) {
|
||||||
if (text.includes("Pyodide not initialized yet.")) return;
|
if (text.includes("Pyodide not initialized yet.")) return;
|
||||||
|
|
||||||
checkLessonDone(text);
|
|
||||||
|
|
||||||
const newLines = text.split('\n').map(line => line.trim()).filter(line => line !== "");
|
const newLines = text.split('\n').map(line => line.trim()).filter(line => line !== "");
|
||||||
|
|
||||||
|
|
@ -166,18 +331,30 @@ function logToConsole(text) {
|
||||||
// Create and append separate divs for each line
|
// Create and append separate divs for each line
|
||||||
logLines.forEach(lineText => {
|
logLines.forEach(lineText => {
|
||||||
const lineDiv = document.createElement('div');
|
const lineDiv = document.createElement('div');
|
||||||
lineDiv.textContent = lineText;
|
lineDiv.innerHTML = lineText; // <-- render HTML tags here
|
||||||
|
lineDiv.style.maxWidth = "100%";
|
||||||
|
lineDiv.style.whiteSpace = "pre-wrap";
|
||||||
|
lineDiv.style.overflowWrap = "break-word";
|
||||||
|
lineDiv.style.wordWrap = "break-word";
|
||||||
|
|
||||||
consoleElement.appendChild(lineDiv);
|
consoleElement.appendChild(lineDiv);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Scroll to bottom
|
// Scroll to bottom
|
||||||
consoleElement.scrollTop = consoleElement.scrollHeight;
|
consoleElement.scrollTop = consoleElement.scrollHeight;
|
||||||
|
|
||||||
|
if (checkLesson && !text.includes("Welcome")) { // Don't check lesson completion for welcome message
|
||||||
|
consoleText = text; // Update console text
|
||||||
|
//checkLessonDone(text);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function clearConsole() {
|
function clearConsole() {
|
||||||
logLines.length = 0; // Empty the logLines array
|
logLines.length = 0; // Empty the logLines array
|
||||||
consoleElement.innerHTML = ""; // Clear the console DOM element
|
consoleElement.innerHTML = ""; // Clear the console DOM element
|
||||||
|
consoleText = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
// ✅ Game Control Functions
|
// ✅ Game Control Functions
|
||||||
|
|
@ -199,6 +376,12 @@ function togglePause() {
|
||||||
document.getElementById("pause-button").innerText = paused ? "Resume" : "Pause";
|
document.getElementById("pause-button").innerText = paused ? "Resume" : "Pause";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function resetGameWorld() {
|
||||||
|
robots = createInitialRobots();
|
||||||
|
gameWorld.reset(robots["player"]);
|
||||||
|
pyodideWorker.postMessage({ type: "interrupt" });
|
||||||
|
}
|
||||||
|
|
||||||
// ✅ Reset Function (Fixed)
|
// ✅ Reset Function (Fixed)
|
||||||
function resetGame() {
|
function resetGame() {
|
||||||
// Terminate the worker
|
// Terminate the worker
|
||||||
|
|
@ -221,6 +404,8 @@ function resetGame() {
|
||||||
document.getElementById("pause-button").innerText = "Pause";
|
document.getElementById("pause-button").innerText = "Pause";
|
||||||
|
|
||||||
logToConsole("Welcome to the game! Type your Python code in the editor and click 'Compile' to execute it.");
|
logToConsole("Welcome to the game! Type your Python code in the editor and click 'Compile' to execute it.");
|
||||||
|
|
||||||
|
document.getElementById('compile-button').disabled = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
const targetFPS = 30;
|
const targetFPS = 30;
|
||||||
|
|
@ -244,12 +429,18 @@ function gameLoop(timestamp) {
|
||||||
|
|
||||||
gameWorld.update();
|
gameWorld.update();
|
||||||
gameWorld.draw(ctx);
|
gameWorld.draw(ctx);
|
||||||
if (gameWorld.checkPlayerCompletedTask()) {
|
|
||||||
logToConsole("✅ Task Completed! ✅");
|
if (gameWorld.waypointsReachedChanged()) {
|
||||||
togglePause();
|
console.log("Waypoints reached:", gameWorld.waypointsReached);
|
||||||
gameWorld.currentLevel++;
|
checkLessonDone();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// if (gameWorld.checkPlayerCompletedTask()) {
|
||||||
|
// logToConsole("✅ Task Completed! ✅");
|
||||||
|
// togglePause();
|
||||||
|
// gameWorld.currentLevel++;
|
||||||
|
// }
|
||||||
|
|
||||||
pyodideWorker.postMessage({
|
pyodideWorker.postMessage({
|
||||||
type: "game_state",
|
type: "game_state",
|
||||||
state: gameWorld
|
state: gameWorld
|
||||||
|
|
@ -279,18 +470,29 @@ function updateSensorData() {
|
||||||
|
|
||||||
document.getElementById("compile-button").addEventListener("click", () => {
|
document.getElementById("compile-button").addEventListener("click", () => {
|
||||||
if (paused) return;
|
if (paused) return;
|
||||||
|
document.getElementById('compile-button').disabled = true;
|
||||||
|
clearConsole();
|
||||||
|
resetGameWorld();
|
||||||
// Use the Monaco Editor instance to get the code
|
// Use the Monaco Editor instance to get the code
|
||||||
let code = monacoEditor.getValue(); // Get text from the editor
|
let code = monacoEditor.getValue(); // Get text from the editor
|
||||||
console.log(code);
|
//console.log(code);
|
||||||
|
|
||||||
code = code.replace(/time\.sleep\(/g, "await time.sleep(");
|
code = code.replace(/time\.sleep\(/g, "await time.sleep(");
|
||||||
|
|
||||||
|
code = code.replace(
|
||||||
|
/^([ \t]*)while True:\s*$/gm,
|
||||||
|
(_, indent) => `${indent}while True:\n${indent} await time.sleep(0.0001)`
|
||||||
|
);
|
||||||
|
|
||||||
console.log(code);
|
console.log(code);
|
||||||
consoleElement.innerHTML = "";
|
consoleElement.innerHTML = "";
|
||||||
pyodideWorker.postMessage({
|
pyodideWorker.postMessage({
|
||||||
type: "execute",
|
type: "execute",
|
||||||
code: code
|
code: code
|
||||||
});
|
});
|
||||||
|
|
||||||
|
mostRecentCode = code;
|
||||||
|
logToConsole("Compiling your code...", false);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -388,16 +590,18 @@ function setupCanvas() {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Call this function when the page loads
|
// Call this function when the page loads
|
||||||
|
|
||||||
fetch('/data/levels.json')
|
fetch('/data/levels.json')
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
gameWorld.levelData = data;
|
gameWorld.levelData = data;
|
||||||
|
|
||||||
setupCanvas();
|
setupCanvas();
|
||||||
|
|
||||||
resetGame(); // Initialize the game and robots
|
resetGame(); // Initialize the game and robots
|
||||||
// Start game loop
|
// Start game loop
|
||||||
gameLoop();
|
gameLoop();
|
||||||
|
|
||||||
|
showLesson(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
165
gameworld.js
165
gameworld.js
|
|
@ -14,6 +14,8 @@ export class GameWorld {
|
||||||
this.currentLevel = 0;
|
this.currentLevel = 0;
|
||||||
|
|
||||||
this.waypoints = [];
|
this.waypoints = [];
|
||||||
|
this.prevWaypointsReached = [];
|
||||||
|
this.waypointsReached = [];
|
||||||
this.obstacles = [];
|
this.obstacles = [];
|
||||||
this.robots = [];
|
this.robots = [];
|
||||||
|
|
||||||
|
|
@ -28,6 +30,8 @@ export class GameWorld {
|
||||||
this.robots = []
|
this.robots = []
|
||||||
this.obstacles = []
|
this.obstacles = []
|
||||||
this.waypoints = [];
|
this.waypoints = [];
|
||||||
|
this.waypointsReached = [];
|
||||||
|
this.prevWaypointsReached = [];
|
||||||
Matter.World.clear(this.world); // Clear the world without resetting the engine
|
Matter.World.clear(this.world); // Clear the world without resetting the engine
|
||||||
|
|
||||||
let level = this.levelData[this.currentLevel];
|
let level = this.levelData[this.currentLevel];
|
||||||
|
|
@ -51,7 +55,10 @@ export class GameWorld {
|
||||||
let obstacle = level.waypoints[i];
|
let obstacle = level.waypoints[i];
|
||||||
console.log("Adding waypoint:", obstacle);
|
console.log("Adding waypoint:", obstacle);
|
||||||
this.addWaypoint(obstacle.vertices, obstacle.position, obstacle.strokeColor, obstacle.fillColor);
|
this.addWaypoint(obstacle.vertices, obstacle.position, obstacle.strokeColor, obstacle.fillColor);
|
||||||
|
this.waypointsReached.push(false); // Initialize as not reached
|
||||||
}
|
}
|
||||||
|
this.prevWaypointsReached = [...this.waypointsReached];
|
||||||
|
console.log(level.waypointsReached)
|
||||||
|
|
||||||
// this.addObstacle([
|
// this.addObstacle([
|
||||||
// { x: -100, y: -100 }, // Vertex 1
|
// { x: -100, y: -100 }, // Vertex 1
|
||||||
|
|
@ -77,7 +84,19 @@ export class GameWorld {
|
||||||
this.robots[id].update(this);
|
this.robots[id].update(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < this.waypoints.length; i++) {
|
||||||
|
if (this.waypointsReached[i]) {
|
||||||
|
|
||||||
|
} else {
|
||||||
|
let waypoint = this.waypoints[i];
|
||||||
|
let playerPos = this.robots[0].body.position;
|
||||||
|
let waypointBounds = waypoint.bounds;
|
||||||
|
if (Matter.Bounds.contains(waypointBounds, playerPos)) {
|
||||||
|
console.log("Player is inside the waypoint's bounding box.");
|
||||||
|
this.waypointsReached[i] = true; // Mark this waypoint as reached
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//this.checkPlayerCompletedTask();
|
//this.checkPlayerCompletedTask();
|
||||||
|
|
||||||
|
|
@ -86,44 +105,131 @@ export class GameWorld {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
waypointsReached() {
|
||||||
|
return this.waypointsReached;
|
||||||
|
}
|
||||||
|
|
||||||
|
waypointsReachedChanged() {
|
||||||
|
// Check if waypointsReached has changed since the last update
|
||||||
|
let changed = false;
|
||||||
|
for (let i = 0; i < this.waypointsReached.length; i++) {
|
||||||
|
if (this.waypointsReached[i] !== this.prevWaypointsReached[i]) {
|
||||||
|
changed = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Update prevWaypointsReached to the current state
|
||||||
|
this.prevWaypointsReached = [...this.waypointsReached];
|
||||||
|
return changed;
|
||||||
|
}
|
||||||
|
|
||||||
// Needs to be updated to handle different win conditions
|
// Needs to be updated to handle different win conditions
|
||||||
checkPlayerCompletedTask() {
|
// checkPlayerCompletedTask() {
|
||||||
let playerPos = this.robots[0].body.position;
|
// let playerPos = this.robots[0].body.position;
|
||||||
let waypointBounds = this.waypoints[0].bounds;
|
// let waypointBounds = this.waypoints[0].bounds;
|
||||||
if (Matter.Bounds.contains(waypointBounds, playerPos)) {
|
// if (Matter.Bounds.contains(waypointBounds, playerPos)) {
|
||||||
console.log("Player is inside the waypoint's bounding box.");
|
// console.log("Player is inside the waypoint's bounding box.");
|
||||||
return true;
|
// return true;
|
||||||
}
|
// }
|
||||||
return false;
|
// return false;
|
||||||
}
|
// }
|
||||||
|
|
||||||
addWaypoint(vertices, position = { x: 0, y: 0 }, strokeColor = "yellow", fillColor = "yellow") {
|
addWaypoint(vertices, position = { x: 0, y: 0 }, strokeColor = "yellow", fillColor = "yellow") {
|
||||||
// Convert the polygon points into a Matter.js body
|
// Convert the polygon points into a Matter.js body
|
||||||
let body = Matter.Bodies.fromVertices(position.x, position.y, [vertices], {
|
const sortedVertices = Matter.Vertices.clockwiseSort(vertices);
|
||||||
|
|
||||||
|
// Compute centroid
|
||||||
|
const centroid = this.getCentroid(sortedVertices);
|
||||||
|
|
||||||
|
// Create relative vertices centered around centroid
|
||||||
|
const relativeVertices = sortedVertices.map(v => ({
|
||||||
|
x: v.x - centroid.x,
|
||||||
|
y: v.y - centroid.y
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
const body = Matter.Bodies.fromVertices(
|
||||||
|
centroid.x,
|
||||||
|
centroid.y,
|
||||||
|
[relativeVertices],
|
||||||
|
{
|
||||||
isSensor: true,
|
isSensor: true,
|
||||||
isStatic: true,
|
isStatic: true,
|
||||||
label: "zone"
|
label: "zone",
|
||||||
});
|
},
|
||||||
body.strokeColor = strokeColor;
|
true
|
||||||
body.fillColor = fillColor;
|
);
|
||||||
// Add body to world and store it
|
|
||||||
|
body.strokeColor = 'rgba(0, 0, 255, 0.1)';
|
||||||
|
body.fillColor = 'rgba(0, 0, 255, 0.1)';
|
||||||
|
|
||||||
Matter.World.add(this.world, body);
|
Matter.World.add(this.world, body);
|
||||||
this.waypoints.push(body);
|
this.waypoints.push(body);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
addObstacle(vertices, position = { x: 0, y: 0 }, strokeColor = "black", fillColor = "gray") {
|
getCentroid(vertices) {
|
||||||
// Convert the polygon points into a Matter.js body
|
let area = 0, cx = 0, cy = 0;
|
||||||
let body = Matter.Bodies.fromVertices(position.x, position.y, [vertices], {
|
|
||||||
isStatic: true, // Obstacles shouldn't move
|
for (let i = 0; i < vertices.length; i++) {
|
||||||
});
|
const p1 = vertices[i];
|
||||||
|
const p2 = vertices[(i + 1) % vertices.length];
|
||||||
|
const cross = p1.x * p2.y - p2.x * p1.y;
|
||||||
|
|
||||||
|
area += cross;
|
||||||
|
cx += (p1.x + p2.x) * cross;
|
||||||
|
cy += (p1.y + p2.y) * cross;
|
||||||
|
}
|
||||||
|
|
||||||
|
area *= 0.5;
|
||||||
|
if (area === 0) return vertices[0]; // fallback to first point
|
||||||
|
|
||||||
|
cx /= (6 * area);
|
||||||
|
cy /= (6 * area);
|
||||||
|
|
||||||
|
return { x: cx, y: cy };
|
||||||
|
}
|
||||||
|
|
||||||
|
addObstacle(vertices, strokeColor = "black", fillColor = "gray") {
|
||||||
|
// Sort vertices clockwise (Matter requires this)
|
||||||
|
const sortedVertices = Matter.Vertices.clockwiseSort(vertices);
|
||||||
|
|
||||||
|
// Compute centroid
|
||||||
|
const centroid = this.getCentroid(sortedVertices);
|
||||||
|
|
||||||
|
// Create relative vertices centered around centroid
|
||||||
|
const relativeVertices = sortedVertices.map(v => ({
|
||||||
|
x: v.x - centroid.x,
|
||||||
|
y: v.y - centroid.y
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Create the body with options to reduce auto corrections
|
||||||
|
const body = Matter.Bodies.fromVertices(
|
||||||
|
centroid.x,
|
||||||
|
centroid.y,
|
||||||
|
[relativeVertices],
|
||||||
|
{
|
||||||
|
isStatic: true,
|
||||||
|
// If your Matter.js supports these:
|
||||||
|
// removeCollinear: 0.01,
|
||||||
|
// minimumArea: 10
|
||||||
|
},
|
||||||
|
true // autoHull (convex decomposition) enabled
|
||||||
|
);
|
||||||
|
|
||||||
body.strokeColor = strokeColor;
|
body.strokeColor = strokeColor;
|
||||||
body.fillColor = fillColor;
|
body.fillColor = fillColor;
|
||||||
// Add body to world and store it
|
|
||||||
Matter.World.add(this.world, body);
|
Matter.World.add(this.world, body);
|
||||||
this.obstacles.push(body);
|
this.obstacles.push(body);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
addRobot(robot) {
|
addRobot(robot) {
|
||||||
console.log("added robot");
|
console.log("added robot");
|
||||||
// Create the robot's Matter.js body
|
// Create the robot's Matter.js body
|
||||||
|
|
@ -167,22 +273,29 @@ export class GameWorld {
|
||||||
});
|
});
|
||||||
|
|
||||||
// Draw Waypoints
|
// Draw Waypoints
|
||||||
this.waypoints.forEach(body => {
|
for (let w = 0; w < this.waypoints.length; w++) {
|
||||||
|
let body = this.waypoints[w];
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
let vertices = body.vertices;
|
let vertices = body.vertices;
|
||||||
ctx.moveTo(vertices[0].x, vertices[0].y);
|
ctx.moveTo(vertices[0].x, vertices[0].y);
|
||||||
for (let i = 1; i < vertices.length; i++) {
|
for (let i = 1; i < vertices.length; i++) {
|
||||||
ctx.lineTo(vertices[i].x, vertices[i].y);
|
ctx.lineTo(vertices[i].x, vertices[i].y);
|
||||||
}
|
}
|
||||||
ctx.fillStyle = body.fillColor;;
|
|
||||||
|
|
||||||
ctx.strokeStyle = body.strokeColor;
|
if (this.waypointsReached[w]) {
|
||||||
ctx.closePath();
|
ctx.globalAlpha = 0.05; // Applies to all drawing
|
||||||
|
ctx.fillStyle = "green"; // Color for reached waypoints
|
||||||
|
ctx.strokeStyle = "rgba(0, 128, 0, 0.2)"; // green with 80% opacity
|
||||||
|
} else {
|
||||||
ctx.globalAlpha = 0.2; // Applies to all drawing
|
ctx.globalAlpha = 0.2; // Applies to all drawing
|
||||||
|
ctx.fillStyle = body.fillColor; // Default color for waypoints
|
||||||
|
ctx.strokeStyle = body.strokeColor;
|
||||||
|
}
|
||||||
|
ctx.closePath();
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
ctx.globalAlpha = 1.0; // Reset after if needed
|
ctx.globalAlpha = 1.0; // Reset after if needed
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
});
|
}
|
||||||
|
|
||||||
this.robots.forEach(robot => {
|
this.robots.forEach(robot => {
|
||||||
let body = robot.body; // Get the Matter.js body from the robot object
|
let body = robot.body; // Get the Matter.js body from the robot object
|
||||||
|
|
|
||||||
35
index.html
35
index.html
|
|
@ -25,9 +25,31 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
<!-- New Lesson Box / Instructions Area -->
|
<!-- New Lesson Box / Instructions Area -->
|
||||||
<section id="lesson-box">
|
<section id="lesson-box">
|
||||||
<div class="content-width">
|
|
||||||
|
<div class="dropdown-row content-width">
|
||||||
|
<div class="dropdown-group">
|
||||||
|
<div class="dropdown-title">Basics</div>
|
||||||
|
<select id="lesson-select"></select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dropdown-group">
|
||||||
|
<div class="dropdown-title">Robot</div>
|
||||||
|
<select id="robot-select"></select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dropdown-group">
|
||||||
|
<div class="dropdown-title">Challenges</div>
|
||||||
|
<select id="challenge-select"></select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-width" style="display: flex; gap: 20px; align-items: flex-start;">
|
||||||
|
|
||||||
|
<!-- 📘 Lesson content area (3/4 width) -->
|
||||||
|
<div style="flex: 3;">
|
||||||
<h2 id="lesson-title">Lesson Title</h2>
|
<h2 id="lesson-title">Lesson Title</h2>
|
||||||
<p id="lesson-content">Lesson Content</p>
|
<p id="lesson-content">Lesson Content</p>
|
||||||
|
|
||||||
|
|
@ -40,8 +62,17 @@
|
||||||
<button id="next-lesson">Next →</button>
|
<button id="next-lesson">Next →</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
|
<!-- ✅ Objectives (1/4 width) -->
|
||||||
|
<aside style="flex: 1;">
|
||||||
|
<h2>Objectives</h2>
|
||||||
|
<div id="objectives-list">
|
||||||
|
<!-- Populated via JavaScript -->
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<main>
|
<main>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,15 @@
|
||||||
importScripts("https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js");
|
importScripts("https://cdn.jsdelivr.net/pyodide/v0.27.7/full/pyodide.js");
|
||||||
|
|
||||||
let sensorData = {}; // ✅ Store sensor values
|
let sensorData = {}; // ✅ Store sensor values
|
||||||
let gameWorld = null;
|
let gameWorld = null;
|
||||||
|
|
||||||
async function initializePyodide() {
|
async function initializePyodide() {
|
||||||
self.pyodide = await loadPyodide({
|
self.pyodide = await loadPyodide({
|
||||||
indexURL: "https://cdn.jsdelivr.net/pyodide/v0.23.4/full/"
|
indexURL: "https://cdn.jsdelivr.net/pyodide/v0.27.7/full/"
|
||||||
});
|
});
|
||||||
|
console.log("Pyodide loaded:", self.pyodide.version);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
self.pyodide.globals.set("send_to_main", (event, data) => {
|
self.pyodide.globals.set("send_to_main", (event, data) => {
|
||||||
self.postMessage({ type: event, data: data });
|
self.postMessage({ type: event, data: data });
|
||||||
|
|
@ -16,7 +19,7 @@ async function initializePyodide() {
|
||||||
|
|
||||||
// ✅ Expose sensor data to Python
|
// ✅ Expose sensor data to Python
|
||||||
self.pyodide.globals.set("get_sensor_data", (name) => {
|
self.pyodide.globals.set("get_sensor_data", (name) => {
|
||||||
if (gameWorld == null){
|
if (gameWorld == null) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -28,7 +31,7 @@ async function initializePyodide() {
|
||||||
sensorData = sensorArray.map(sensor => ({
|
sensorData = sensorArray.map(sensor => ({
|
||||||
"type": sensor.type, // Individual sensor's type
|
"type": sensor.type, // Individual sensor's type
|
||||||
"angle": sensor.angle, // Individual sensor's angle
|
"angle": sensor.angle, // Individual sensor's angle
|
||||||
"distance": sensor.distance, // Individual sensor's distance
|
"distance": Math.round(sensor.distance * 100) / 100, // Individual sensor's distance
|
||||||
"hitpoint": sensor.hitpoint // Whatever other attributes you need
|
"hitpoint": sensor.hitpoint // Whatever other attributes you need
|
||||||
}));
|
}));
|
||||||
//console.log(sensorData["x"]);
|
//console.log(sensorData["x"]);
|
||||||
|
|
@ -38,7 +41,7 @@ async function initializePyodide() {
|
||||||
|
|
||||||
|
|
||||||
self.pyodide.globals.set("get_robot_data", () => {
|
self.pyodide.globals.set("get_robot_data", () => {
|
||||||
if (gameWorld == null){
|
if (gameWorld == null) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
let robot = gameWorld.robots[0];
|
let robot = gameWorld.robots[0];
|
||||||
|
|
@ -66,6 +69,12 @@ class RobotModule:
|
||||||
sensor_data = json.loads(get_sensor_data(name))
|
sensor_data = json.loads(get_sensor_data(name))
|
||||||
return sensor_data
|
return sensor_data
|
||||||
|
|
||||||
|
def get_distance_left(self):
|
||||||
|
return self.get_sensors()[0]["distance"]
|
||||||
|
|
||||||
|
def get_distance_right(self):
|
||||||
|
return self.get_sensors()[1]["distance"]
|
||||||
|
|
||||||
def get_sensors(self):
|
def get_sensors(self):
|
||||||
return json.loads(get_sensor_data("sensors")) # Returns list of sensor dicts
|
return json.loads(get_sensor_data("sensors")) # Returns list of sensor dicts
|
||||||
|
|
||||||
|
|
@ -98,12 +107,22 @@ class RobotModule:
|
||||||
return magnitude
|
return magnitude
|
||||||
|
|
||||||
def move(self, speed):
|
def move(self, speed):
|
||||||
|
if speed < -1:
|
||||||
|
speed = -1
|
||||||
|
elif speed > 1:
|
||||||
|
speed = 1
|
||||||
|
speed = speed/5000
|
||||||
send_to_main("move", speed)
|
send_to_main("move", speed)
|
||||||
|
|
||||||
def fire(self):
|
def fire(self):
|
||||||
send_to_main("fire", None)
|
send_to_main("fire", None)
|
||||||
|
|
||||||
def turn(self, deg):
|
def turn(self, deg):
|
||||||
|
if deg < -1:
|
||||||
|
deg = -1
|
||||||
|
elif deg > 1:
|
||||||
|
deg = 1
|
||||||
|
deg = deg/150
|
||||||
send_to_main("turn", deg)
|
send_to_main("turn", deg)
|
||||||
|
|
||||||
robot = RobotModule()
|
robot = RobotModule()
|
||||||
|
|
@ -129,6 +148,8 @@ async def async_sleep(seconds):
|
||||||
|
|
||||||
|
|
||||||
time.sleep = async_sleep # ✅ Monkey-patch time.sleep()
|
time.sleep = async_sleep # ✅ Monkey-patch time.sleep()
|
||||||
|
|
||||||
|
|
||||||
`);
|
`);
|
||||||
|
|
||||||
self.postMessage({ type: "ready" }); // ✅ Notify main thread that Pyodide is ready
|
self.postMessage({ type: "ready" }); // ✅ Notify main thread that Pyodide is ready
|
||||||
|
|
@ -136,6 +157,11 @@ time.sleep = async_sleep # ✅ Monkey-patch time.sleep()
|
||||||
|
|
||||||
initializePyodide();
|
initializePyodide();
|
||||||
|
|
||||||
|
// Add this function to trigger interrupts
|
||||||
|
function interruptExecution() {
|
||||||
|
interruptBuffer[0] = 2; // 2 is the magic number for KeyboardInterrupt
|
||||||
|
}
|
||||||
|
|
||||||
self.onmessage = async (event) => {
|
self.onmessage = async (event) => {
|
||||||
if (!self.pyodide) {
|
if (!self.pyodide) {
|
||||||
self.postMessage({ type: "error", message: "Pyodide not initialized yet." });
|
self.postMessage({ type: "error", message: "Pyodide not initialized yet." });
|
||||||
|
|
@ -158,5 +184,6 @@ self.onmessage = async (event) => {
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
self.postMessage({ type: "error", message: error.toString() });
|
self.postMessage({ type: "error", message: error.toString() });
|
||||||
}
|
}
|
||||||
|
self.postMessage({ type: "execution_done" });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
50
readme.md
50
readme.md
|
|
@ -30,3 +30,53 @@ while True:
|
||||||
else:
|
else:
|
||||||
robot.turn(0)
|
robot.turn(0)
|
||||||
time.sleep(0.1)
|
time.sleep(0.1)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#Robot 1
|
||||||
|
import time
|
||||||
|
import robot
|
||||||
|
|
||||||
|
robot.move(1)
|
||||||
|
time.sleep(1.6)
|
||||||
|
robot.move(0)
|
||||||
|
robot.turn(1)
|
||||||
|
time.sleep(2.2)
|
||||||
|
robot.turn(0)
|
||||||
|
robot.move(1)
|
||||||
|
|
||||||
|
|
||||||
|
#Robot 2
|
||||||
|
import robot
|
||||||
|
import time
|
||||||
|
|
||||||
|
robot.move(1)
|
||||||
|
time.sleep(0.8)
|
||||||
|
robot.move(0.4)
|
||||||
|
robot.turn(1)
|
||||||
|
time.sleep(4.7)
|
||||||
|
robot.move(0)
|
||||||
|
robot.turn(0)
|
||||||
|
|
||||||
|
|
||||||
|
#Robot 3
|
||||||
|
import time
|
||||||
|
import robot
|
||||||
|
|
||||||
|
robot.move(1)
|
||||||
|
while True:
|
||||||
|
if robot.get_distance_left() < 58:
|
||||||
|
robot.turn(1)
|
||||||
|
robot.move(0.2)
|
||||||
|
elif robot.get_distance_right() < 58:
|
||||||
|
robot.turn(-1)
|
||||||
|
robot.move(0.2)
|
||||||
|
else:
|
||||||
|
robot.move(1)
|
||||||
|
robot.turn(0)
|
||||||
|
time.sleep(0.01)
|
||||||
114
style.css
114
style.css
|
|
@ -9,16 +9,38 @@ html {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
background-color: #fff;
|
background-color: #ffffff;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.objective {
|
||||||
|
margin: 10px 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.objective label {
|
||||||
|
margin-left: 8px;
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.completed label {
|
||||||
|
color: green;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
pointer-events: none; /* make it non-clickable */
|
||||||
|
}
|
||||||
|
|
||||||
/* ===== Header (top bar) ===== */
|
/* ===== Header (top bar) ===== */
|
||||||
header {
|
header {
|
||||||
background-color: #f3f4f6;
|
background-color: #ffffff;
|
||||||
/* light gray */
|
/* light gray */
|
||||||
padding: 16px 0;
|
padding: 16px 0;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
|
@ -50,6 +72,16 @@ header p {
|
||||||
/* gray-600 */
|
/* gray-600 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
code, pre {
|
||||||
|
font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
|
||||||
|
background-color: inherit;
|
||||||
|
color: blue;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.button-group {
|
.button-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
|
|
@ -76,6 +108,10 @@ button {
|
||||||
background-color: #1d4ed8;
|
background-color: #1d4ed8;
|
||||||
/* blue-700 */
|
/* blue-700 */
|
||||||
}
|
}
|
||||||
|
#compile-button:disabled {
|
||||||
|
background-color: #bbbbbb;
|
||||||
|
/* blue-700 */
|
||||||
|
}
|
||||||
|
|
||||||
#pause-button {
|
#pause-button {
|
||||||
background-color: #eab308;
|
background-color: #eab308;
|
||||||
|
|
@ -161,6 +197,48 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.dropdown-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-group {
|
||||||
|
flex: 1; /* Equal horizontal space */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-title {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-group select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
background-color: white;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#lesson-box {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #ffffff;
|
||||||
|
border-top: none;
|
||||||
|
border-radius: 0 0 8px 8px;
|
||||||
|
padding-top: 0; /* prevents double padding below tabs */
|
||||||
|
margin-top: -1px; /* overlap the active tab */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Monaco editor - left half */
|
/* Monaco editor - left half */
|
||||||
#monaco-editor {
|
#monaco-editor {
|
||||||
|
|
@ -205,16 +283,32 @@ main {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container,
|
||||||
|
.right-side,
|
||||||
|
#console,
|
||||||
|
#console > div {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
#console {
|
#console {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
word-wrap: break-word;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
background: black;
|
background: black;
|
||||||
color: white;
|
color: white;
|
||||||
font-family: monospace, monospace;
|
font-family: monospace;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
overflow-y: auto;
|
box-sizing: border-box;
|
||||||
border: 1px solid #d1d5db;
|
}
|
||||||
width: 100%;
|
|
||||||
|
#console > div {
|
||||||
|
max-width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
word-wrap: break-word;
|
||||||
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* alternate line colors */
|
/* alternate line colors */
|
||||||
|
|
@ -241,7 +335,7 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
#lesson-box {
|
#lesson-box {
|
||||||
background: #f9f9f9;
|
background: #ffffff;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
|
|
@ -265,9 +359,9 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#lesson-box code {
|
/* #lesson-box code {
|
||||||
background: #eee;
|
background: #eee;
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
}
|
} */
|
||||||
Loading…
Reference in New Issue