forked from andrea/homework5
move is done I think
This commit is contained in:
parent
0e880db407
commit
b5b37ae9a8
|
|
@ -39,6 +39,7 @@ User Contol: ASDW
|
|||
### Properties (Action)
|
||||
| Objects | Image | Instructions |
|
||||
| :------ | :---: | :----------- |
|
||||
| IS |  | Operator |
|
||||
| You |  | |
|
||||
| Move |  | |
|
||||
| Stop |  | |
|
||||
|
|
|
|||
|
|
@ -60,3 +60,7 @@ This homework will be evaluated following two criteria:
|
|||
- Keep a screenshot that proves your completed submission.
|
||||
- Writing style might be considered in grading
|
||||
- Other subjective metrics by prof may apply
|
||||
|
||||
|
||||
### Reference
|
||||
https://youtu.be/M5St-vvohzs
|
||||
|
|
|
|||
13
index.html
13
index.html
|
|
@ -6,12 +6,19 @@
|
|||
<title>Document</title>
|
||||
<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.11.2/addons/p5.sound.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.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="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>
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
143
main.js
143
main.js
|
|
@ -2,9 +2,29 @@
|
|||
const tileSize = 16;
|
||||
|
||||
// Sprites
|
||||
let baba;
|
||||
let tile, wall, rock, water, lava, flag;
|
||||
let win, you, move, stop;
|
||||
let baba_img;
|
||||
let tile_img, wall_img, rock_img, water_img, lava_img, flag_img;
|
||||
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
|
||||
let babaX = 0;
|
||||
|
|
@ -15,26 +35,81 @@ let bgm, winSound;
|
|||
let isPlaying = false;
|
||||
|
||||
function preload(){
|
||||
// BGM
|
||||
bgm = loadSound("/assets/Baba Is You OST - Baba Is You Theme.mp3");
|
||||
baba = loadImage("/assets/Baba.webp");
|
||||
tile = loadImage("/assets/Tile.webp");
|
||||
wall = loadImage("/assets/Wall.webp");
|
||||
rock = loadImage("/assets/Rock.webp");
|
||||
water = loadImage("/assets/Water.webp");
|
||||
lava = loadImage("/assets/Lava.webp");
|
||||
flag = loadImage("/assets/Flag.webp");
|
||||
|
||||
// Spritesd
|
||||
baba_img = loadImage("/assets/Baba.webp");
|
||||
tile_img = loadImage("/assets/Tile.webp");
|
||||
wall_img = loadImage("/assets/Wall.webp");
|
||||
rock_img = loadImage("/assets/Rock.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(){
|
||||
createCanvas(800, 400);
|
||||
new World();
|
||||
|
||||
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(){
|
||||
// backgroundMusic();
|
||||
background(51);
|
||||
fill(255, 204, 0);
|
||||
image(baba, babaX, babaY, tileSize, tileSize);
|
||||
drawSprites();
|
||||
// fill(255, 204, 0);
|
||||
// image(baba_img, babaX, babaY, tileSize, tileSize);
|
||||
// squasre(babaX, babaY, tileSize);
|
||||
}
|
||||
|
||||
|
|
@ -49,7 +124,7 @@ function mousePressed(){
|
|||
bgm.pause();
|
||||
isPlaying = false;
|
||||
} else {
|
||||
bgm.play();
|
||||
bgm.loop();
|
||||
isPlaying = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -69,28 +144,46 @@ function keyPressed(){
|
|||
const maxX = width - tileSize;
|
||||
const maxY = height - tileSize;
|
||||
|
||||
if(key=='a'||key=='A') {
|
||||
if (babaX - tileSize >= 0) {
|
||||
babaX -= tileSize;
|
||||
if((key=='a'||key=='A') && isOpen(baba.x - tileSize, baba.y)) {
|
||||
if (baba.x - tileSize >= 0) {
|
||||
baba.x -= tileSize;
|
||||
console.log('Left');
|
||||
}
|
||||
}
|
||||
if(key=='s'||key=='S') {
|
||||
if (babaY + tileSize <= maxY) {
|
||||
babaY += tileSize;
|
||||
if((key=='s'||key=='S') && isOpen(baba.x, baba.y + tileSize)) {
|
||||
if (baba.y + tileSize <= maxY) {
|
||||
baba.y += tileSize;
|
||||
console.log('Down');
|
||||
}
|
||||
}
|
||||
if(key=='d'||key=='D') {
|
||||
if (babaX + tileSize <= maxX) {
|
||||
babaX += tileSize;
|
||||
if((key=='d'||key=='D') && isOpen(baba.x + tileSize, baba.y)) {
|
||||
if (baba.x + tileSize <= maxX) {
|
||||
baba.x += tileSize;
|
||||
console.log('Right');
|
||||
}
|
||||
}
|
||||
if(key=='w'||key=='W') {
|
||||
if(babaY - tileSize >= 0){
|
||||
babaY -= tileSize;
|
||||
if((key=='w'||key=='W') && isOpen(baba.x, baba.y - tileSize)) {
|
||||
if(baba.y - tileSize >= 0){
|
||||
baba.y -= tileSize;
|
||||
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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user