504 lines
13 KiB
JavaScript
504 lines
13 KiB
JavaScript
let player;
|
|
let gravity = 0.8;
|
|
|
|
let projectiles = [];
|
|
let specialProjectiles = [];
|
|
let bombs = [];
|
|
|
|
let groundY = 500;
|
|
let keys = {};
|
|
let powerUps = [];
|
|
let deathZoneX;
|
|
let deathZoneY = 600;
|
|
let controlsP1, controlsP2;
|
|
|
|
let spriteSheets = {};
|
|
|
|
function preload() {
|
|
//sprite download
|
|
spriteSheets.backgrounds= loadImage("assets/Mario-Background.png");
|
|
spriteSheets.characters = loadImage("assets/Mario-Character+Item.png");
|
|
spriteSheets.specialweapon = loadImage("assets/Mario-Enemy.png");
|
|
spriteSheets.tileset = loadImage("assets/Mario-Tileset.png");
|
|
|
|
}
|
|
class Background {
|
|
constructor(dayImg, nightImg) {
|
|
this.bgDay = dayImg;
|
|
this.bgNight = nightImg;
|
|
this.mode = 'day';
|
|
this.currentImg = this.bgDay;
|
|
this.tileW = dayImg.width;
|
|
this.tileH = dayImg.height;
|
|
}
|
|
|
|
setMode(mode) {
|
|
if (mode === "day") {
|
|
this.mode = "day";
|
|
this.currentImg = this.bgDay;
|
|
}
|
|
else if (mode === "night") {
|
|
this.mode = "night";
|
|
this.currentImg = this.bgNight;
|
|
}
|
|
else {
|
|
console.log("error");
|
|
}
|
|
}
|
|
modeChange(){
|
|
this.setMode(this.mode === "day" ? "night" : "day");
|
|
}
|
|
draw() {
|
|
for (let y = 0; y < height; y += this.tileH) {
|
|
for (let x = 0; x < width; x += this.tileW) {
|
|
image(this.currentImg, x, y);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
class Player {
|
|
constructor(x,y, imgSet, controls){
|
|
this.x = x;
|
|
this.y = y;
|
|
this.vx = 0;
|
|
this.vy = 0;
|
|
this.width = 32;
|
|
this.height = 32;
|
|
|
|
this.onGround = false;
|
|
this.jumpCount = 0;
|
|
this.deathCount = 10;
|
|
this.imgSet = imgSet;
|
|
|
|
this.controls = controls;//custom keyset
|
|
this.keys = {};// key pressed 상태 추적적
|
|
|
|
this.bombHoldStartTime = null;
|
|
this.skill = {
|
|
resist: false,
|
|
fastFire: false,
|
|
isGiant: false,
|
|
itemCount: 0
|
|
}
|
|
this.facing = "right";
|
|
this.state = "idle";
|
|
this.frame = 0;
|
|
}
|
|
|
|
update() {
|
|
// moving
|
|
if (this.keys[this.controls.left]) {
|
|
this.vx = -5;
|
|
this.facing = "left";
|
|
}
|
|
else if (this.keys[this.controls.right]) {
|
|
this.vx = 5;
|
|
this.facing = "right";
|
|
}
|
|
else {
|
|
this.vx = 0;
|
|
}
|
|
|
|
//ground judge
|
|
this.vy += gravity;
|
|
this.x += this.vx;
|
|
this.y += this.vy;
|
|
|
|
if (this.y + this.height >= groundY) {
|
|
this.y = groundY - this.height;
|
|
this.vy = 0;
|
|
this.onGround = true;
|
|
this.jumpCount = 0;
|
|
}
|
|
else {
|
|
this.onGround = false;
|
|
this.state = "jump";
|
|
}
|
|
|
|
//낙사
|
|
if (this.y > deathZoneY) {
|
|
this.deathCount--;
|
|
this.state = "dead";
|
|
this.respawn();
|
|
}
|
|
|
|
this.animationCnt++;
|
|
}
|
|
|
|
respawn(){
|
|
this.x = 100;
|
|
this.y = 100;
|
|
this.vx = 0;
|
|
this.vy = 0;
|
|
}
|
|
|
|
jump() {
|
|
if(this.jumpCount < 2) {
|
|
this.vy = -15;
|
|
this.jumpCount++;
|
|
}
|
|
}
|
|
|
|
//3 attack logic
|
|
shoot() {
|
|
if (this.skill.fastFire || frameCount % 20 === 0) {
|
|
const direction = this.facing === "right" ? 20 : -20;
|
|
projectiles.push(new Projectile(this.x, this.y, direction));
|
|
}
|
|
}
|
|
|
|
dropBomb() {
|
|
const bombX = this.x + this.width / 2;
|
|
const bombY = this.y;
|
|
bombs.push(new Bomb(bombX, bombY));
|
|
}
|
|
|
|
fireBigMissile() {
|
|
console.log("받아라 비장의무기~~");
|
|
const dir = this.facing === "right" ? 5 : -5;
|
|
specialProjectiles.push(new BigMissile(this.x, this.y, dir));
|
|
this.skill.itemCount = this.skill.itemCount - 3;
|
|
}
|
|
//end..
|
|
|
|
handleKeyPressed(k) {
|
|
this.keys[k] = true;
|
|
if (k === this.controls.jump) this.jump();
|
|
if (k === this.controls.attack) this.shoot();
|
|
if (k === this.controls.bomb) {
|
|
if (this.skill.itemCount >= 3 && this.bombHoldStartTime === null) {
|
|
this.bombHoldStartTime = millis();
|
|
}
|
|
else {
|
|
this.dropBomb();
|
|
}
|
|
}
|
|
}
|
|
|
|
handleKeyReleased(k) {
|
|
this.keys[k] = false;
|
|
|
|
if (k === this.controls.bomb && this.bombHoldStartTime !== null) {
|
|
const heldDuration = millis() - this.bombHoldStartTime;
|
|
|
|
if (heldDuration >= 2000 && this.skill.itemCount >= 3) {
|
|
this.fireBigMissile(); // 대형 미사일 발사
|
|
this.skill.itemCount = this.skill.itemCount - 3; // 카운트 초기화
|
|
}
|
|
|
|
// 초기화 (2초 미만이어도 시간 초기화)
|
|
this.bombHoldStartTime = null;
|
|
}
|
|
}
|
|
|
|
draw() {
|
|
const img = this.imgSet[this.state][this.frame];
|
|
push(); // 1) 상태 저장
|
|
if (this.facing === 'left') {
|
|
// (선택) 기준점을 옮긴 뒤 뒤집으면 좀 더 직관적입니다.
|
|
translate(this.x + this.width, this.y);
|
|
scale(-1,1);
|
|
image(img, 0, 0, this.width, this.height);
|
|
} else {
|
|
image(img, this.x, this.y, this.width, this.height);
|
|
}
|
|
pop(); // 2) 좌표계 원상복구
|
|
}
|
|
|
|
}
|
|
|
|
class Projectile {
|
|
constructor(x, y, vx, width, height) {
|
|
this.x = x;
|
|
this.y = y;
|
|
this.vx = vx;
|
|
this.width = width;
|
|
this.height = height;
|
|
this.spawnTime = millis();
|
|
this.lifetime = 10000;
|
|
this.shouldDestroy = false;
|
|
}
|
|
|
|
update(targets) {
|
|
this.x += this.vx;
|
|
|
|
for (const t of targets) {
|
|
if(this.hits(t)) {
|
|
const knockback = this.vx;
|
|
t.vx += knockback;
|
|
this.shouldDestroy = true;
|
|
}
|
|
}
|
|
if (millis() - this.spawnTime > this.lifetime) {
|
|
this.shouldDestroy = true;
|
|
}
|
|
}
|
|
|
|
draw() {
|
|
fill(255, 100, 0);
|
|
ellipse(this.x, this.y, this.width, this.height);
|
|
}
|
|
|
|
destroy() {
|
|
return this.shouldDestroy;
|
|
}
|
|
|
|
// 충돌 체크 메서드
|
|
hits(target) {
|
|
return (
|
|
this.x < target.x + target.width &&
|
|
this.x + this.width > target.x &&
|
|
this.y < target.y + target.height &&
|
|
this.y + this.height > target.y
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
class Bomb {
|
|
constructor(x,y) {
|
|
this.x = x;
|
|
this.y = y;
|
|
this.width = 16;
|
|
this.height = 16;
|
|
this.timer = 120;
|
|
}
|
|
|
|
update() {
|
|
this.timer --;
|
|
if(this.timer <=0){
|
|
this.explode();
|
|
}
|
|
}
|
|
|
|
explode() {
|
|
console.log("exploded");
|
|
}
|
|
|
|
draw() {
|
|
fill(255,0,0);
|
|
rect(this.x, this.y, this.width, this.height);
|
|
}
|
|
}
|
|
|
|
class BigMissile {
|
|
constructor(x,y,vx) {
|
|
this.x = x;
|
|
this.y = y;
|
|
this.vx = vx;
|
|
this.width = 64;
|
|
this.height = 64
|
|
|
|
this.spawnTime = millis();
|
|
this.lifetime = 20000;
|
|
this.shouldDestroy = false;
|
|
}
|
|
update(targets) {
|
|
this.x += this.vx;
|
|
for (const t of targets) {
|
|
if (this.hits(t)) {
|
|
const knockback = this.vx * 0.1;
|
|
t.vx += knockback;
|
|
}
|
|
}
|
|
if (millis() - this.spawnTime > this.lifetime) {
|
|
this.shouldDestroy = true;
|
|
}
|
|
}
|
|
draw() {
|
|
fill(255, 0, 255);
|
|
rect(this.x, this.y, this.width, this.height);
|
|
}
|
|
destroy() {
|
|
return this.shouldDestroy;
|
|
}
|
|
}
|
|
|
|
class Item {
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleProjectiles() {
|
|
for (let i = projectiles.length - 1; i >= 0; i--) {
|
|
projectiles[i].update([player1, player2]);
|
|
projectiles[i].draw();
|
|
if (projectiles[i].destroy()) {
|
|
projectiles.splice(i, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleBombs() {
|
|
for (let i = bombs.length - 1; i >= 0; i--) {
|
|
const b = bombs[i];
|
|
b.update();
|
|
b.draw();
|
|
if (b.exploded) {
|
|
bombs.splice(i, 1); // 제거
|
|
}
|
|
}
|
|
}
|
|
function handleSpecialProjectiles() {
|
|
for (let i = specialProjectiles.length - 1; i >= 0; i--) {
|
|
specialProjectiles[i].update([player1, player2]);
|
|
specialProjectiles[i].draw();
|
|
if (specialProjectiles[i].destroy()) {
|
|
specialProjectiles.splice(i, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
let backgroundManager;
|
|
let P1imgs = [];
|
|
let P2imgs = [];
|
|
let itemimgs = [];
|
|
function setup() {
|
|
createCanvas(800, 1600);
|
|
const bgsource = spriteSheets.backgrounds;
|
|
const bgWidth = 512;
|
|
const bgHeight = 512
|
|
const bgDay = createImage(bgWidth, bgHeight);
|
|
bgDay.copy(bgsource,
|
|
514, 1565, bgWidth, bgHeight,
|
|
0, 0, bgWidth, bgHeight);
|
|
const bgNight = createImage(bgWidth, bgHeight);
|
|
bgNight.copy(bgsource,
|
|
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...
|
|
|
|
player1 = new Player(0, 0, P1imgs, controlsP1);
|
|
player2 = new Player(0, 0, P2imgs, controlsP2);
|
|
|
|
}
|
|
|
|
|
|
function draw() {
|
|
|
|
backgroundManager.draw();
|
|
rect(0, groundY, width, 100);
|
|
|
|
player1.update();
|
|
player1.draw();
|
|
player2.update();
|
|
player2.draw();
|
|
|
|
handleProjectiles();
|
|
handleBombs();
|
|
handleSpecialProjectiles();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function keyPressed(){
|
|
if(key === ' '){//spacebar(임시시)
|
|
backgroundManager.modeChange();
|
|
}
|
|
player1.handleKeyPressed(key);
|
|
player2.handleKeyPressed(key);
|
|
}
|
|
function keyReleased() {
|
|
player1.handleKeyReleased(key);
|
|
player2.handleKeyReleased(key);
|
|
}
|
|
|