#Codevember day #5 Sword

codevember-day-5-sword.markdown

#Codevember day #5 Sword

Player vs beast, created with pixijs. Some functions were made by kittycatattack. https://github.com/kittykatattack/learningPixi

A Pen by Kisokare on CodePen.

License.

index.html

<!-- USE YOUR ARROW KEYS: LEFT RIGHT AND UP UP IS FOR ATTACKING. TRY TO KILL THE MONSTER!!! -->

script.js

function keyboard(keyCode) {
	var key = {};
	key.code = keyCode;
	key.isDown = false;
	key.isUp = true;
	key.press = undefined;
	key.release = undefined;
	//The `downHandler`
	key.downHandler = function(event) {
		if (event.keyCode === key.code) {
			if (key.isUp && key.press) key.press();
			key.isDown = true;
			key.isUp = false;
		}
		event.preventDefault();
	};

	//The `upHandler`
	key.upHandler = function(event) {
		if (event.keyCode === key.code) {
			if (key.isDown && key.release) key.release();
			key.isDown = false;
			key.isUp = true;
		}
		event.preventDefault();
	};

	//Attach event listeners
	window.addEventListener("keydown", key.downHandler.bind(key), false);
	window.addEventListener("keyup", key.upHandler.bind(key), false);
	return key;
}

function hitTest(r1, r2) {
	//Define the variables we'll need to calculate
	var hit, combinedHalfWidths, combinedHalfHeights, vx, vy;

	//hit will determine whether there's a collision
	hit = false;

	//Find the center points of each sprite
	r1.centerX = r1.x + r1.width / 2;
	r1.centerY = r1.y + r1.height / 2;
	r2.centerX = r2.x + r2.width / 2;
	r2.centerY = r2.y + r2.height / 2;

	//Find the half-widths and half-heights of each sprite
	r1.halfWidth = r1.width / 2;
	r1.halfHeight = r1.height / 2;
	r2.halfWidth = r2.width / 2;
	r2.halfHeight = r2.height / 2;

	//Calculate the distance vector between the sprites
	vx = r1.centerX - r2.centerX;
	vy = r1.centerY - r2.centerY;

	//Figure out the combined half-widths and half-heights
	combinedHalfWidths = r1.halfWidth + r2.halfWidth;
	combinedHalfHeights = r1.halfHeight + r2.halfHeight;

	//Check for a collision on the x axis
	if (Math.abs(vx) < combinedHalfWidths) {
		//A collision might be occuring. Check for a collision on the y axis
		if (Math.abs(vy) < combinedHalfHeights) {
			//There's definitely a collision happening
			hit = true;
		} else {
			//There's no collision on the y axis
			hit = false;
		}
	} else {
		//There's no collision on the x axis
		hit = false;
	}

	//`hit` will be either `true` or `false`
	return hit;
}

function contain(sprite, container) {
	var collision = undefined;

	//Left
	if (sprite.x < container.x) {
		sprite.x = container.x;
		collision = "left";
	}

	//Top
	if (sprite.y < container.y) {
		sprite.y = container.y;
		collision = "top";
	}

	//Right
	if (sprite.x + sprite.width > container.width) {
		sprite.x = container.width - sprite.width;
		collision = "right";
	}

	//Bottom
	if (sprite.y + sprite.height > container.height) {
		sprite.y = container.height - sprite.height;
		collision = "bottom";
	}

	//Return the `collision` value
	return collision;
}

function dayNightCycle() {
	if (sun.x >= 570) {
		day.visible = false;
		day.dayTime = false;
		night.visible = true;

		sun.velocityX = 0;
		sun.x = -70;
		moon.velocityX = 0.5;
	}

	if (cloud.x >= 570) {
		cloud.x = -70;
	}

	if (cloud.x == -70) {
		if (cloud.delay != 0) {
			cloud.velocityX = 0;
			cloud.delay -= 1;
		} else {
			cloud.velocityX = Math.floor(Math.random() * 2.0 + 0.5);
			cloud.delay = Math.floor(Math.random() * 200 + 1);
		}
	}

	if (moon.x >= 570) {
		night.visible = false;
		day.visible = true;
		day.dayTime = true;

		moon.velocityX = 0;
		moon.x = -70;
		sun.velocityX = 0.5;
	}

	if (sun.x >= 0 && cloud.x >= 0 && hitTest(cloud, sun)) {
		day.visible = false;
		night.visible = false;
		cloudy.visible = true;
	} else {
		if (day.dayTime == true) {
			night.visible = false;
			day.visible = true;
			cloudy.visible = false;
		} else {
			day.visible = false;
			night.visible = true;
			cloudy.visible = false;
		}
	}
}

function islandBobbing() {
	if (island.y <= 250) {
		island.velocityY = 0.1;
	}
	if (island.y >= 255) {
		island.velocityY = -0.1;
	}
}

var app = new PIXI.Application(500, 500);
document.body.appendChild(app.view);

var day = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883576/day_zuqf0c.png"
);
var sun = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883577/sun_wvn6no.png"
);
var night = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883577/night_zfnzuv.png"
);
var cloudy = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883576/cloudy_t5sb6j.png"
);
var moon = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883577/moon_lvzoob.png"
);
var cloud = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883576/cloud_suqwht.png"
);
var island = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883577/island_yowe4p.png"
);
var starpic = PIXI.Texture.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883576/star_ufknbw.png"
);
var slime = new PIXI.Container();
var slimeTexture = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883577/beast_eq18yp.png"
);
var slimeHealthbar = new PIXI.Container();
var slimeHealthbarTexture = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509894634/monsterbar_iwl6qb.png"
);
var slimeFiller = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883576/fillerbeast_wo6xbf.png"
);

var player = new PIXI.Container();
var playerTexture = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883577/playerchill_zhqmbv.png"
);
var playerForward = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883577/playerforward_i8uawl.png"
);
var playerBackward = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883577/playerbackwards_qqw88v.png"
);
var playerAttack = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883576/playerattack_zalyrp.png"
);
var playerHealthbar = new PIXI.Container();
var playerHealthbarTexture = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509894634/playerbar_dbrbvg.png"
);
var playerFiller = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883576/fillerplayer_uxc2uw.png"
);

var sword = PIXI.Sprite.fromImage(
	"https://res.cloudinary.com/kisokare/image/upload/v1509883577/sword_kwrxoh.png"
);

var loser = new PIXI.Text("LOSER", {
	fontFamily: "Arial",
	fontSize: 80,
	fill: 0xff7070,
	align: "center"
});
var winner = new PIXI.Text("WINNER!", {
	fontFamily: "Arial",
	fontSize: 80,
	fill: 0x00912e,
	align: "center"
});

var gameIsWon = false;
var gameIsLost = false;

winner.anchor.set(0.5);
winner.x = app.renderer.width / 2;
winner.y = app.renderer.height / 2 - 100;
winner.alpha = 0;

loser.anchor.set(0.5);
loser.x = app.renderer.width / 2;
loser.y = app.renderer.height / 2 - 100;
loser.alpha = 0;

var stars = [];
var maxStars = 50;

island.x = app.renderer.width / 2;
island.y = app.renderer.height / 2;
island.anchor.set(0.5, 0);
island.velocityY = 0.1;

slime.addChild(slimeTexture);
slime.x = 350;
slime.y = island.y - 36;
slime.hp = 24;
slime.isAttacking = false;
slime.isJumpingUp = false;
slime.isJumpingDown = false;
slimeTexture.anchor.set(0.5);
slime.velocityX = 0;

playerForward.visible = false;
playerBackward.visible = false;
playerAttack.visible = false;

sword.y = 45;
sword.x = -5;
sword.rotation = -2;

player.addChild(playerTexture);
player.addChild(playerForward);
player.addChild(playerBackward);
player.addChild(playerAttack);
player.addChild(sword);
playerForward.x = -35;
player.x = 80;
player.y = island.y - 96;
player.hp = 13;
player.velocityX = 0;
player.isAttacking = false;
player.isFalling = false;

slimeHealthbar.addChild(slimeHealthbarTexture);

playerHealthbar.addChild(playerHealthbarTexture);

slimeHealthbar.y = -120;
slimeHealthbar.x = -65;

playerHealthbar.y = -50;
playerHealthbar.x = -25;

slime.addChild(slimeHealthbar);

player.addChild(playerHealthbar);

slimeFiller.y = 35;
slimeFiller.x = 5;
slimeFiller.scale.x = slime.hp;

playerFiller.y = 27;
playerFiller.x = 5;
playerFiller.scale.x = player.hp;

slimeHealthbar.addChild(slimeFiller);
playerHealthbar.addChild(playerFiller);

day.velocityY = 0;
day.dayTime = true;
night.velocityY = 0;

sun.x = -70;
sun.y = 80;
sun.anchor.set(0.5, 0.5);
sun.velocityX = 0.5;

cloud.x = -70;
cloud.y = 80;
cloud.anchor.set(0.5, 0.5);
cloud.velocityX = Math.floor(Math.random() * 2.0 + 0.5);
cloud.delay = Math.floor(Math.random() * 200 + 1);

cloudy.visible = false;

moon.x = -70;
moon.y = 80;
moon.anchor.set(0.5, 0.5);
moon.velocityX = 0;

var left = keyboard(37);
var up = keyboard(38);
var right = keyboard(39);
var down = keyboard(40);

left.press = function() {
	if (player.isAttacking == false && player.isFalling == false) {
		player.velocityX = -1;
		console.log(player.velocityX);
		playerTexture.visible = false;
		playerBackward.visible = true;
		playerForward.visible = false;
		playerAttack.visible = false;
		sword.y = 40;
		sword.x = -5;
		sword.rotation = 0;
	}
};
left.release = function() {
	playerTexture.visible = true;
	playerBackward.visible = false;
	playerForward.visible = false;
	playerAttack.visible = false;
	player.velocityX = 0;
	sword.y = 45;
	sword.x = -5;
	sword.rotation = -2;
};
up.press = function() {
	if (player.isFalling == false) {
		player.isAttacking = true;
		playerAttack.visible = true;
		playerTexture.visible = false;
		playerBackward.visible = false;
		playerForward.visible = false;
		sword.y = 25;
		sword.x = 8;
		sword.rotation = 0;
	}
};
up.release = function() {
	player.isAttacking = false;
	playerAttack.visible = false;
	playerTexture.visible = true;
	playerBackward.visible = false;
	playerForward.visible = false;
	sword.y = 45;
	sword.x = -5;
	sword.rotation = -2;
};
right.press = function() {
	if (player.isAttacking == false && player.isFalling == false) {
		player.velocityX = 1;
		playerTexture.visible = false;
		playerForward.visible = true;
		playerBackward.visible = false;
		playerAttack.visible = false;
		sword.y = 40;
		sword.x = -5;
		sword.rotation = 0;
	}
};
right.release = function() {
	playerTexture.visible = true;
	playerForward.visible = false;
	playerBackward.visible = false;
	playerAttack.visible = false;
	player.velocityX = 0;
	sword.y = 45;
	sword.x = -5;
	sword.rotation = -2;
};

app.stage.addChild(night);
app.stage.addChild(day);
app.stage.addChild(cloudy);
app.stage.addChild(sun);
/*app.stage.addChild(player);*/

for (var i = 0; i < maxStars; i++) {
	var star = new PIXI.Sprite(starpic);
	star.delay = Math.floor(Math.random() * 800 + 1);
	star.y = -20;
	star.x = Math.floor(Math.random() * 800 + -500);
	stars.push(star);
	app.stage.addChild(star);
}

app.stage.addChild(moon);
app.stage.addChild(cloud);
app.stage.addChild(slime);
app.stage.addChild(player);
app.stage.addChild(island);
app.stage.addChild(loser);
app.stage.addChild(winner);

app.ticker.add(function(delta) {
	/*player.x += player.velocityx;
	player.y += player.velocityy;
	contain(player, {x: 0, y: 0, width: 500, height: 500});*/

	night.y += night.velocityY;
	day.y += day.velocityY;
	sun.x += sun.velocityX;
	sun.rotation += 0.03;
	moon.x += moon.velocityX;
	cloud.x += cloud.velocityX;
	island.y += island.velocityY;
	slimeFiller.scale.x = slime.hp;
	playerFiller.scale.x = player.hp;
	slime.x += slime.velocityX;

	if (slime.isJumpingUp == false && slime.isJumpingDown == false) {
		slime.y = island.y - 36;
	}

	if (player.isFalling == false && player.hp != 0) {
		player.y = island.y - 36;
	}

	if (player.isAttacking == false) {
		player.x += player.velocityX; //48 428
	}

	if (player.x <= 48 || player.x >= 428) {
		player.isFalling = true;
	}

	if (player.isFalling == true) {
		player.velocityX = 0;
		player.y -= -4;
		playerTexture.visible = true;
		playerBackward.visible = false;
		playerForward.visible = false;
		playerAttack.visible = false;
		playerHealthbar.visible = false;

		if (playerTexture.rotation >= -3.1 && player.x <= 48) {
			playerTexture.anchor.set(0.5);
			playerTexture.rotation -= 0.1;
			sword.visible = false;
		}

		if (playerTexture.rotation <= 3.1 && player.x >= 428) {
			playerTexture.anchor.set(0.5);
			playerTexture.rotation += 0.1;
			sword.visible = false;
		}

		if (player.y >= 500) {
			playerTexture.anchor.set(0);
			playerHealthbar.visible = true;
			playerTexture.rotation = 0;
			sword.visible = true;
			player.isFalling = false;
			player.hp = 0;
		}
	}

	if (
		player.isAttacking == true &&
		hitTest(player, slime) == true &&
		(slime.x - player.x <= 50 && player.x - slime.x <= 50) &&
		slime.y >= island.y - 56
	) {
		if (slime.hp != 0) {
			slime.hp -= 1;
			if (slime.x < 380 && slime.x > 60) {
				slime.x += 40;
			} else {
				player.x -= 40;
			}

			player.isAttacking == false;
		}
	}

	if (
		slime.x >= player.x &&
		gameIsLost == false &&
		gameIsWon == false &&
		slime.hp >= 12
	) {
		slime.velocityX = -0.2;
	}

	if (
		slime.x <= player.x &&
		gameIsLost == false &&
		gameIsWon == false &&
		slime.hp >= 12
	) {
		slime.velocityX = 0.2;
	}

	if (
		slime.x - player.x <= 80 &&
		player.x - slime.x <= 80 &&
		slime.isAttacking == false &&
		(slime.isJumpingUp == false && slime.isJumpingDown == false)
	) {
		slime.isJumpingUp = true;
	}

	if (slime.y >= 130 && slime.isJumpingUp) {
		slime.y -= 4;

		if (slime.y <= 130 && slime.isJumpingUp) {
			slime.isJumpingUp = false;
			slime.isJumpingDown = true;
		}
	}

	if (slime.isJumpingDown && slime.y <= island.y - 36) {
		slime.y += 4;

		if (slime.y >= island.y - 36) {
			slime.isJumpingDown = false;
			if (slime.x - player.x <= 50 && player.x - slime.x <= 50) {
				slime.isAttacking = true;
			}
		}
	}

	if (
		slime.isAttacking == true &&
		(slime.x - player.x <= 80 && player.x - slime.x <= 80)
	) {
		if (player.hp != 0 && gameIsWon == false && slime.hp >= 12) {
			player.hp -= 1;
		}
		if (player.hp != 0 && gameIsWon == false && slime.hp < 12) {
			if(player.hp == 1){
				player.hp -= 1;
			}
			else{
				player.hp -= 2;
			}
			
		}
		slime.isAttacking = false;
	}

	if (player.hp == 0) {
		playerHealthbar.visible = false;
		slime.isJumpingDown = false;
		slime.isJumpingUp = false;
		sword.visible = false;

		if (loser.alpha != 1) {
			loser.alpha += 0.01;
			player.y += 1;
			gameIsLost = true;
		}
	}

	if (slime.hp == 0) {
		slimeHealthbar.visible = false;
		slime.isJumpingDown = false;
		slime.isJumpingUp = false;

		if (winner.alpha != 1) {
			winner.alpha += 0.01;
			slime.y += 50;
			gameIsWon = true;
		}
	}

	if (
		(gameIsLost == true || gameIsWon == true) &&
		(winner.alpha >= 1 || loser.alpha >= 1)
	) {
		slimeHealthbar.visible = true;
		playerHealthbar.visible = true;
		slime.x = 350;
		slime.y = island.y - 36;
		player.x = 80;
		player.y = island.y - 36;
		slime.hp = 24;
		player.hp = 13;
		winner.alpha = 0;
		loser.alpha = 0;
		sword.visible = true;
		gameIsLost = false;
		gameIsWon = false;
	}

	dayNightCycle();
	islandBobbing();
	if (day.dayTime == false) {
		for (var i = 0; i < stars.length; i++) {
			if (stars[i].delay != 0) {
				stars[i].delay -= 1;
			} else {
				stars[i].x += 2;
				stars[i].y += 2;

				if (stars[i].y >= 500) {
					stars[i].y = -20;
					stars[i].x = Math.floor(Math.random() * 800 + -500);
				}
			}
		}
	} else {
		for (var i = 0; i < stars.length; i++) {
			stars[i].y = -20;
			stars[i].delay = Math.floor(Math.random() * 800 + 1);
		}
	}
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>

style.css

body{
	background-color: #092d5e;
}

canvas{
	margin: 0 auto;
	display: block;
	margin-top: 80px;
}