andrea/homework5
1
0
Fork 10
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20243197 #12

Closed
20243197 wants to merge 30 commits from 20243197/20243197:20243197 into 20243197
pull from: 20243197/20243197:20243197
merge into: andrea:20243197
Conversation 0 Commits 30 Files Changed 16 +140 -28
5 changed files with 140 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b5b37ae9a8 - Show all commits

1
PROPOSAL_20243197.md
View File

@ -39,6 +39,7 @@ User Contol: ASDW
### Properties (Action) ### Properties (Action)
| Objects | Image | Instructions | | Objects | Image | Instructions |
| :------ | :---: | :----------- | | :------ | :---: | :----------- |
| IS | ![is](assets/Text_IS_0.webp) | Operator |
| You | ![you](assets/You.webp) | | | You | ![you](assets/You.webp) | |
| Move | ![Move](assets/Move.webp) | | | Move | ![Move](assets/Move.webp) | |
| Stop | ![Stop](assets/Stop.webp) | | | Stop | ![Stop](assets/Stop.webp) | |

4
README.md
View File

@ -60,3 +60,7 @@ This homework will be evaluated following two criteria:
- Keep a screenshot that proves your completed submission. - Keep a screenshot that proves your completed submission.
- Writing style might be considered in grading - Writing style might be considered in grading
- Other subjective metrics by prof may apply - Other subjective metrics by prof may apply
### Reference
https://youtu.be/M5St-vvohzs

13
index.html
View File

@ -6,12 +6,19 @@
<title>Document</title> <title>Document</title>
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.2/p5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.2/addons/p5.sound.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5.play@3/p5play.js"></script>
<script src="https://cdn.jsdelivr.net/npm/planck@latest/dist/planck.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.2/addons/p5.sound.min.js"></script> -->
<!-- <script src="lib/p5.play.js" type="text/javascript"></script> --> <!-- <script src="lib/p5.play.js" type="text/javascript"></script> -->
<script src="https://cdn.jsdelivr.net/gh/molleindustria/p5.play/lib/p5.play.js"></script> <!-- <script src="https://cdn.jsdelivr.net/gh/molleindustria/p5.play/lib/p5.play.js"></script> -->
<script src="./main.js"></script> <script src="./main.js"></script>
</head> </head>
<body> <body>

143
main.js
View File

@ -2,9 +2,29 @@
const tileSize = 16; const tileSize = 16;
// Sprites // Sprites
let baba; let baba_img;
let tile, wall, rock, water, lava, flag; let tile_img, wall_img, rock_img, water_img, lava_img, flag_img;
let win, you, move, stop; let win_img, you_img, move_img, stopText_img;
let is_img;
// Map
let tileMap = [
' ',
'w wwwwwwwwwwwwww',
'w w ttw',
'w r ll ttw',
'w ll ttw',
'w aa w ttw',
'w aa w ttw',
'wwwwwwwwwwwwwwww',
];
let rules = [
["rock", "is", "push"],
["wall", "is", "stop"],
["water", "is", "sink"],
["lava", "is", "hot"]
]
// CaracterMove // CaracterMove
let babaX = 0; let babaX = 0;
@ -15,26 +35,81 @@ let bgm, winSound;
let isPlaying = false; let isPlaying = false;
function preload(){ function preload(){
// BGM
bgm = loadSound("/assets/Baba Is You OST - Baba Is You Theme.mp3"); bgm = loadSound("/assets/Baba Is You OST - Baba Is You Theme.mp3");
baba = loadImage("/assets/Baba.webp");
tile = loadImage("/assets/Tile.webp"); // Spritesd
wall = loadImage("/assets/Wall.webp"); baba_img = loadImage("/assets/Baba.webp");
rock = loadImage("/assets/Rock.webp"); tile_img = loadImage("/assets/Tile.webp");
water = loadImage("/assets/Water.webp"); wall_img = loadImage("/assets/Wall.webp");
lava = loadImage("/assets/Lava.webp"); rock_img = loadImage("/assets/Rock.webp");
flag = loadImage("/assets/Flag.webp"); water_img = loadImage("/assets/Water.webp");
lava_img = loadImage("/assets/Lava.webp");
flag_img = loadImage("/assets/Flag.webp");
is_img = loadImage("/assets/Text_IS_0.webp");
win_img = loadImage("/assets/Win.webp");
you_img = loadImage("/assets/You.webp");
move_img = loadImage("/assets/Move.webp");
stopText_img = loadImage("/assets/Stop.webp");
} }
function setup(){ function setup(){
createCanvas(800, 400); createCanvas(800, 400);
new World();
background(51); background(51);
textAlign(CENTER);
// Floor - Tile
let tile = new Group();
tile.img = tile_img;
tile.collider = 'none';
tile.tile = "t";
tile.scale = tileSize/tile_img.width;
// WALL
let wall = new Group();
wall.img = wall_img;
wall.collider = 'static';
wall.tile = "w";
wall.scale = tileSize/wall_img.width;
// ROCK
let rock = new Group();
rock.img = rock_img;
rock.collider = 'dynamic';
rock.tile = "r";
rock.scale = tileSize/rock_img.width;
// Water
let water = new Group();
water.img = water_img;
water.collider = 'none';
water.tile = 'a';
water.scale = tileSize/water_img.width;
// Lava
let lava = new Group();
lava.img = lava_img;
lava.collider = 'none';
lava.tile = 'l';
lava.scale = tileSize/lava_img.width;
new Tiles(tileMap, tileSize/2, tileSize/2, tileSize, tileSize);
//BABA
baba = new Sprite(tileSize/2, tileSize/2, tileSize, tileSize);
baba.img = baba_img;
baba.scale = tileSize / baba_img.width;
baba.label = 'you';
} }
function draw(){ function draw(){
// backgroundMusic(); // backgroundMusic();
background(51); background(51);
fill(255, 204, 0); drawSprites();
image(baba, babaX, babaY, tileSize, tileSize); // fill(255, 204, 0);
// image(baba_img, babaX, babaY, tileSize, tileSize);
// squasre(babaX, babaY, tileSize); // squasre(babaX, babaY, tileSize);
} }
@ -49,7 +124,7 @@ function mousePressed(){
bgm.pause(); bgm.pause();
isPlaying = false; isPlaying = false;
} else { } else {
bgm.play(); bgm.loop();
isPlaying = true; isPlaying = true;
} }
} }
@ -69,28 +144,46 @@ function keyPressed(){
const maxX = width - tileSize; const maxX = width - tileSize;
const maxY = height - tileSize; const maxY = height - tileSize;
if(key=='a'||key=='A') { if((key=='a'||key=='A') && isOpen(baba.x - tileSize, baba.y)) {
if (babaX - tileSize >= 0) { if (baba.x - tileSize >= 0) {
babaX -= tileSize; baba.x -= tileSize;
console.log('Left'); console.log('Left');
} }
} }
if(key=='s'||key=='S') { if((key=='s'||key=='S') && isOpen(baba.x, baba.y + tileSize)) {
if (babaY + tileSize <= maxY) { if (baba.y + tileSize <= maxY) {
babaY += tileSize; baba.y += tileSize;
console.log('Down'); console.log('Down');
} }
} }
if(key=='d'||key=='D') { if((key=='d'||key=='D') && isOpen(baba.x + tileSize, baba.y)) {
if (babaX + tileSize <= maxX) { if (baba.x + tileSize <= maxX) {
babaX += tileSize; baba.x += tileSize;
console.log('Right'); console.log('Right');
} }
} }
if(key=='w'||key=='W') { if((key=='w'||key=='W') && isOpen(baba.x, baba.y - tileSize)) {
if(babaY - tileSize >= 0){ if(baba.y - tileSize >= 0){
babaY -= tileSize; baba.y -= tileSize;
console.log('Up'); console.log('Up');
} }
} }
}
// move only to the opened place
function isOpen(x,y){
let i = floor(x / tileSize);
let j = floor(y / tileSize);
if (j < 0 || j >= tileMap.length || i < 0 || i >= tileMap[0].length) {
return false;
}
let tile = tileMap[j][i];
if (tile == ' '){
return true;
} else {
console.log('blocked');
return false;
}
} }

7
style.css
View File

@ -1,3 +1,10 @@
body{ body{
background-color: aquamarine; background-color: aquamarine;
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
} }