image download done
This commit is contained in:
parent
0ca1d62b33
commit
12946d2b01
221
sketch.js
221
sketch.js
|
|
@ -8,9 +8,6 @@ let powerUps = [];
|
|||
let deathZoneX;
|
||||
let deathZoneY = 600;
|
||||
let controlsP1, controlsP2;
|
||||
let P1img = [];
|
||||
let P2img = [];
|
||||
|
||||
|
||||
let spriteSheets = {};
|
||||
|
||||
|
|
@ -21,24 +18,6 @@ function preload() {
|
|||
spriteSheets.specialweapon = loadImage("assets/Mario-Enemy.png");
|
||||
spriteSheets.tileset = loadImage("assets/Mario-Tileset.png");
|
||||
|
||||
//player contoller
|
||||
controlsP1 = {
|
||||
left: 'ArrowLeft',
|
||||
right: 'ArrowRight',
|
||||
jump: 'ArrowUp',
|
||||
attack: '[',
|
||||
bomb: ']'
|
||||
};
|
||||
|
||||
controlsP2 = {
|
||||
left: 'a',
|
||||
right: 'd',
|
||||
jump: 'w',
|
||||
attack: 't',
|
||||
bomb: 'y'
|
||||
};
|
||||
|
||||
//character sprite
|
||||
}
|
||||
class Background {
|
||||
constructor(dayImg, nightImg) {
|
||||
|
|
@ -106,6 +85,7 @@ class Player {
|
|||
}
|
||||
|
||||
update() {
|
||||
// moving
|
||||
if (this.keys[this.controls.left]) {
|
||||
this.vx = -5;
|
||||
this.facing = "left";
|
||||
|
|
@ -120,8 +100,14 @@ class Player {
|
|||
this.vx = 0;
|
||||
this.state = "idle";
|
||||
}
|
||||
|
||||
|
||||
//shoot anim
|
||||
if (this.state === 'shoot' && millis() - this.lastFrameChange > this.attackFrameDuration) {
|
||||
this.state = this.onGround ? 'idle' : 'jump'; // 공격 끝나면 원래 상태로
|
||||
this.frame = 0;
|
||||
}
|
||||
|
||||
//ground judge
|
||||
this.vy += gravity;
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
|
|
@ -165,7 +151,10 @@ class Player {
|
|||
if (this.power.fastFire || frameCount % 20 === 0) {
|
||||
const direction = this.facing === "right" ? 10 : -10;
|
||||
projectiles.push(new Projectile(this.x, this.y, direction));
|
||||
|
||||
this.lastFrameChange = millis();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
dropBomb() {
|
||||
|
|
@ -229,37 +218,199 @@ class Player {
|
|||
|
||||
|
||||
let backgroundManager;
|
||||
let P1imgs = [];
|
||||
let P2imgs = [];
|
||||
let itemimgs = [];
|
||||
function setup() {
|
||||
createCanvas(800,600);
|
||||
createCanvas(800, 1600);
|
||||
const bgsource = spriteSheets.backgrounds;
|
||||
const bgDay = createImage(512, 512);
|
||||
const bgWidth = 512;
|
||||
const bgHeight = 512
|
||||
const bgDay = createImage(bgWidth, bgHeight);
|
||||
bgDay.copy(bgsource,
|
||||
514, 1565,
|
||||
512, 512,
|
||||
0, 0,
|
||||
512, 512);
|
||||
const bgNight = createImage(512, 512);
|
||||
514, 1565, bgWidth, bgHeight,
|
||||
0, 0, bgWidth, bgHeight);
|
||||
const bgNight = createImage(bgWidth, bgHeight);
|
||||
bgNight.copy(bgsource,
|
||||
514, 5721,
|
||||
512, 512,
|
||||
0, 0,
|
||||
512, 512);
|
||||
514, 5721, bgWidth, bgHeight,
|
||||
0, 0, bgWidth, bgHeight);
|
||||
backgroundManager = new Background(bgDay, bgNight);
|
||||
console.log("background load done...");
|
||||
//background setup done...
|
||||
//player key setting
|
||||
controlsP1 = {
|
||||
left: 'ArrowLeft',
|
||||
right: 'ArrowRight',
|
||||
jump: 'ArrowUp',
|
||||
attack: '[',
|
||||
bomb: ']'
|
||||
};
|
||||
|
||||
controlsP2 = {
|
||||
left: 'a',
|
||||
right: 'd',
|
||||
jump: 'w',
|
||||
attack: 't',
|
||||
bomb: 'y'
|
||||
};
|
||||
console.log("player key setting done...");
|
||||
//player img setting
|
||||
const chracterSource = spriteSheets.characters;
|
||||
const chracterWidth = 32;
|
||||
const chracterHeight = 32;
|
||||
|
||||
const marioIdle = createImage(chracterWidth, chracterHeight);
|
||||
marioIdle.copy(chracterSource, 1, 98, chracterWidth, chracterHeight, 0, 0, chracterWidth, chracterHeight);
|
||||
const marioWalk1 = createImage(chracterWidth, chracterHeight);
|
||||
marioWalk1.copy(chracterSource, 75, 98, chracterWidth, chracterHeight, 0, 0, chracterWidth, chracterHeight);
|
||||
const marioWalk2 = createImage(chracterWidth, chracterHeight);
|
||||
marioWalk2.copy(chracterSource, 108, 98, chracterWidth, chracterHeight, 0, 0, chracterWidth, chracterHeight);
|
||||
const marioWalk3 = createImage(chracterWidth, chracterHeight);
|
||||
marioWalk3.copy(chracterSource, 141, 98, chracterWidth, chracterHeight, 0, 0, chracterWidth, chracterHeight);
|
||||
const marioJump = createImage(chracterWidth, chracterHeight);
|
||||
marioJump.copy(chracterSource, 215, 98, chracterWidth, chracterHeight, 0, 0, chracterWidth, chracterHeight);
|
||||
const marioAttack = createImage(chracterWidth, chracterHeight);
|
||||
marioAttack.copy(chracterSource, 627, 98, chracterWidth, chracterHeight, 0, 0, chracterWidth, chracterHeight);
|
||||
P1imgs = {
|
||||
idle: [marioIdle], // idle은 이미지 1장만
|
||||
walk: [marioWalk1, marioWalk2, marioWalk3], // walk는 3장으로 애니메이션
|
||||
jump: [marioJump], // jump는 이미지 1장
|
||||
shoot: [marioAttack] // shoot도 이미지 1장
|
||||
}
|
||||
|
||||
const luigiIdle = createImage(chracterWidth, chracterHeight);
|
||||
luigiIdle.copy(chracterSource, 1, 629, chracterWidth, chracterHeight, 0, 0, chracterWidth, chracterHeight);
|
||||
const luigiWalk1 = createImage(chracterWidth, chracterHeight);
|
||||
luigiWalk1.copy(chracterSource, 75, 629, chracterWidth, chracterHeight, 0, 0, chracterWidth, chracterHeight);
|
||||
const luigiWalk2 = createImage(chracterWidth, chracterHeight);
|
||||
luigiWalk2.copy(chracterSource, 108, 629, chracterWidth, chracterHeight, 0, 0, chracterWidth, chracterHeight);
|
||||
const luigiWalk3 = createImage(chracterWidth, chracterHeight);
|
||||
luigiWalk3.copy(chracterSource, 141, 629, chracterWidth, chracterHeight, 0, 0, chracterWidth, chracterHeight);
|
||||
const luigiJump = createImage(chracterWidth, chracterHeight);
|
||||
luigiJump.copy(chracterSource, 215, 629, chracterWidth, chracterHeight, 0, 0, chracterWidth, chracterHeight);
|
||||
const luigiAttack = createImage(chracterWidth, chracterHeight);
|
||||
luigiAttack.copy(chracterSource, 627, 629, chracterWidth, chracterHeight, 0, 0, chracterWidth, chracterHeight);
|
||||
P2imgs = {
|
||||
idle: [luigiIdle], // idle은 이미지 1장만
|
||||
walk: [luigiWalk1, luigiWalk2, luigiWalk3], // walk는 3장으로 애니메이션
|
||||
jump: [luigiJump], // jump는 이미지 1장
|
||||
shoot: [luigiAttack] // shoot도 이미지 1장
|
||||
}
|
||||
console.log("player image loading done...");
|
||||
// chracter image setting done..
|
||||
// other sprite loading -> item : character, enemy에 몇개씩 있음음 그림마다 다 달라서 그냥 다 정의할게요 귀찮다..
|
||||
const specialSource = spriteSheets.specialweapon;
|
||||
const objWidth = 16;
|
||||
const objHeight = 16;
|
||||
|
||||
const mushImg = createImage(objWidth, objHeight);
|
||||
mushImg.copy(chracterSource, 1, 2126, objWidth, objHeight, 0, 0, objWidth, objHeight);
|
||||
const poisonImg = createImage(objWidth, objHeight);
|
||||
poisonImg.copy(chracterSource, 1, 2143, objWidth, objHeight, 0, 0, objWidth, objHeight);
|
||||
const giantImg = createImage(2 * objWidth, 2 * objHeight);
|
||||
giantImg.copy(chracterSource, 35, 2143, 2 * objWidth, 2 * objHeight, 0, 0, 2 * objWidth, 2 * objHeight);
|
||||
const fireImg_normal = createImage(objWidth / 2, objHeight / 2);
|
||||
fireImg_normal.copy(chracterSource, 101, 2177, objWidth / 2, objHeight / 2, 0, 0, objWidth / 2, objHeight / 2);
|
||||
const bombImg = createImage(objWidth, objHeight);
|
||||
bombImg.copy(chracterSource, 194, 2143, objWidth, objHeight, 0, 0, objWidth, objHeight);
|
||||
const fireImg_inchant = createImage(2 * objWidth, objHeight);
|
||||
fireImg_inchant.copy(specialSource, 258, 191, 2 * objWidth, objHeight, 0, 0, 2 * objWidth, objHeight);
|
||||
const missile = createImage(4 * objWidth, 4 * objHeight);
|
||||
missile.copy(specialSource, 127, 356, 4 * objWidth, 4 * objHeight, 0, 0, 4 * objWidth, 4 * objHeight);
|
||||
|
||||
itemimgs = {
|
||||
mush : [mushImg],
|
||||
poison : [poisonImg],
|
||||
giant : [giantImg],
|
||||
fire : [fireImg_normal],
|
||||
fire_reinforce : [fireImg_inchant],
|
||||
bomb : [bombImg],
|
||||
bigmissile : [missile]
|
||||
}
|
||||
console.log("obj img loading done...");
|
||||
//object img loading done...
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function draw() {
|
||||
// 🔲 배경 및 바닥
|
||||
backgroundManager.draw();
|
||||
|
||||
// 임시 바닥
|
||||
fill(100);
|
||||
rect(0, groundY, width, 100);
|
||||
|
||||
// 🟩 디버그용 이미지 시각화 (캐릭터 및 아이템)
|
||||
let margin = 20;
|
||||
let size = 48; // 출력 이미지 크기
|
||||
let y = 600; // 출력 시작 위치
|
||||
|
||||
textSize(14);
|
||||
fill(0);
|
||||
noStroke();
|
||||
|
||||
// Player 1 이미지
|
||||
text("Player 1", margin, y);
|
||||
y += margin;
|
||||
for (const state in P1imgs) {
|
||||
text(state, margin, y + size / 2);
|
||||
for (let i = 0; i < P1imgs[state].length; i++) {
|
||||
image(P1imgs[state][i], margin + 80 + i * (size + 10), y, size, size);
|
||||
}
|
||||
y += size + 20;
|
||||
}
|
||||
|
||||
// Player 2 이미지
|
||||
y += margin;
|
||||
text("Player 2", margin, y);
|
||||
y += margin;
|
||||
for (const state in P2imgs) {
|
||||
text(state, margin, y + size / 2);
|
||||
for (let i = 0; i < P2imgs[state].length; i++) {
|
||||
image(P2imgs[state][i], margin + 80 + i * (size + 10), y, size, size);
|
||||
}
|
||||
y += size + 20;
|
||||
}
|
||||
|
||||
// 아이템 이미지
|
||||
y += margin * 2;
|
||||
text("Items (raw list)", margin, y);
|
||||
y += margin;
|
||||
|
||||
const rawItems = [
|
||||
{ name: "Mushroom", img: mushImg },
|
||||
{ name: "Poison", img: poisonImg },
|
||||
{ name: "Giant", img: giantImg },
|
||||
{ name: "Fire Normal", img: fireImg_normal },
|
||||
{ name: "Bomb", img: bombImg },
|
||||
{ name: "Fire Inchant", img: fireImg_inchant },
|
||||
{ name: "Missile", img: missile }
|
||||
];
|
||||
|
||||
for (let i = 0; i < rawItems.length; i++) {
|
||||
const x = margin + i * (size + 30);
|
||||
image(rawItems[i].img, x, y, size, size);
|
||||
textAlign(CENTER);
|
||||
text(rawItems[i].name, x + size / 2, y + size + 14);
|
||||
}
|
||||
|
||||
// 🟦 itemimgs 객체 기반 출력
|
||||
y += size + 50;
|
||||
text("Items (from itemimgs)", margin, y);
|
||||
y += margin;
|
||||
|
||||
let i = 0;
|
||||
for (const key in itemimgs) {
|
||||
const x = margin + i * (size + 30);
|
||||
image(itemimgs[key][0], x, y, size, size);
|
||||
textAlign(CENTER);
|
||||
text(key, x + size / 2, y + size + 14);
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function keyPressed(){
|
||||
if(key === ' '){//spacebar(임시시)
|
||||
backgroundManager.modeChange();
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user