/***********CAMERA OPTION****************/
// Set this to true to enable camera mode
var cameraEnabled = true;
/****************************************/
noStroke();
textAlign(CENTER,CENTER);
textFont(createFont("Impact"));
// Current page
var page = "Game";
// Whatever level you are on
var level = 0;
/*** Frame Rates ***/
var fps = 80;
var updateFrameRate = function() {
frameRate(fps);
};
//Set the frame rate
updateFrameRate();
// Arrays
var blocks = [];
var enemies = [];
var clouds = [];
var keys = [];
// Fading
var page = "Intro";
var fade = 0;
var fadeSpeed = 1;
// Player Spawn Points
var spawnX = 200;
var spawnY = 200;
/*
Block Chart:
p = Player
e = Enemy
Building Blocks:
n = Normal dull gray block
b = Brick
v = Tree leaves
d = Dirt
g = Grass
r = Rock or cobblestone
w = wood
t = Treetrunk
Death Blocks:
a = Acid
s = Spike
l = Lava
Physic Blocks:
P = Portal
W = Water
T = Trampoline
This is the standard level size. You can make it bigger or smaller if you want. :)
[
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
],
*/
// Actual Level*/
var levels = [
[
" ",
" ",
" ",
" ",
" ",
" ",
" ",
"vvv ",
"vvvv ",
"vvvv ",
"vvvv wwww ",
"vtv wwwwwww",
" t bbbbbb",
" t b b",
" t g pb",
"gg dgggggggbbbbbb",
"ddgWWWWWdddddddddddd",
"dddWWWWWWWWW rrdddd",
"dddWWWWddddWdr Pdddd",
"dddddddddddWdddddddd",
"dddddddddddddddddddd",
"dddddddddddddddddddd",
],
[
"nnnnnnnnnnnnnnnnnnnn",
"n n",
"n n",
"n n",
"n n",
"n n",
"n n",
"n n",
"n n",
"n n",
"np n",
"n Pn",
"n vvvvv vvn",
"n n",
"n n",
"n n",
"n n",
"n T v ev n",
"n p nssssnllllnaaaann",
"nnnnnnnnnnnnnnnnnnnn",
],
[
"nnnnnnnnnnnnnnnnnnnn",
"nrp n",
"n v n",
"n v n",
"n v n",
"n v n",
"n vvavav rrrrn",
"n r n",
"n rrar n",
"n rarr n",
"n a n",
"n a n",
"n a n",
"n a n",
"n a r n",
"n a r n",
"n r n",
"ne r r r s n",
"nvssssssssssssssssPn",
"nnnnnnnnnnnnnnnnnnnn",
],
[
"nnnnnnnnnnnnnnnnnnnn",
"n Pn",
"n vvvvv n",
"n va n",
"n vvvvv a n",
"n v n",
"n v n",
"n ssss n",
"n vvvvv n",
"n n",
"np n",
"n T n",
"n aaaa vv n",
"n vv n",
"n n",
"n n",
"n n",
"n T e v evn",
"n p nssssnllllnaaaann",
"nnnnnnnnnnnnnnnnnnnn",
],
[
"nnnnnnnnnnnnnnnnnnnn",
"np n",
"nvvv n",
"n r v n",
"n raaaa n",
"n v v n",
"n vv n",
"n aaaa n",
"n WWW v n",
"n aaaaav n",
"n n",
"n n",
"n vvvvvvssssssssssn",
"n nnan rrrn",
"n n",
"n n",
"n Pn",
"n nn Tnnnv e evn",
"nnnaaaaassnllllnaaaann",
],
[
"nnnnnnnnnnnnnnnnnnnn",
"neeeeeeeeeeeeeeeeeen",
"nrrrrrrrrrrrrrrrr n",
"n rn",
"n r n",
"n r Pn",
"n r n",
"n v v r n",
"n r n",
"n r n",
"np rr n",
"n r n",
"n vv n",
"n n n",
"n n",
"n n",
"n n",
"n T v ev n",
"n p nssssnllllnaaaann",
"nnnnnnnnnnnnnnnnnnnn",
],
[
"nnnnnnnnnnnnnnnnnnnn",
"neeeeeeeeeeeeeeeeeen",
"nrrrrrrrrrrrrrrrr n",
"n r n",
"n r n",
"n r n",
"n r P n",
"n v v r n",
"n r n",
"n r n",
"np r n",
"n r n",
"n vv n",
"n n n",
"n n",
"n n",
"n n",
"n T v ev n",
"n p nssssnllllnaaaann",
"nnnnnnnnnnnnnnnnnnnn",
],
[
"nnnnnnnnnnnnnnnnnnnn",
"nP eeeeeeeeeeeeeeeeeen",
"nrrrrrrrrrrrrrrrr n",
"n r n",
"n r n",
"n r n",
"n r n",
"n v v r n",
"n r n",
"n r n",
"np r r n",
"n r n",
"n vv n",
"n n n",
"n n",
"n n",
"n n",
"n T v ev n",
"n p nssssnllllnaaaann",
"nnnnnnnnnnnnnnnnnnnn",
],
[
"nnnnnnnnnnnnnnnnnnnn",
"n P ln",
"nrrrrrrrrrrrrrrrr ln",
"n ln",
"n rln",
"n r ln",
"n ln",
"n r ls ln",
"n r ln",
"n l ln",
"np r r ln",
"n ln",
"n llrll ln",
"n r ln",
"n l ln",
"n r ln",
"n T ln",
"n r e ln",
"n p nllllllllllllllnn",
"nnnnnnnnnnnnnnnnnnnn",
],
[
"nnnnnnnnnnnnnnnnnnnn",
"l P ln",
"lrrrrrrrrrrrrrrrr ln",
"l l ln",
"l l rrn",
"l l ln",
"l l ln",
"l l lr rln",
"l l l ln",
"l l l ln",
"l l ln",
"l l ln",
"l T TTTlTTTTTTTTln",
"l rrrrrrrrrrrr ln",
" T p l",
"rrrrrrrrrrrrrrrr l",
"l l l l ln",
"l ln",
"l ln",
"lP ln",
"rrTTTTTTTTTTTTTTTTTTln",
"nnnnnnnnnnnnnnnnnnnn",
],
[
"WWWWWWWWWWWWWWWWWWW",
"lWWWWWWWPaaaaaaaaln",
"lrrrrr rrrrrrrrrr lln",
"l r ln",
"l rr rr rrn",
"l rrTr rl rr ln",
"l rrrr r r ln",
"lrrr r rrrrrln",
"l r r r rrr ln",
"l r r s rr ln",
"l r r rr rr ln",
"l srrr Trrrr ln",
"l r r rr ln",
"l rr r ln",
"l T l",
"rrrarrarrarrarra l",
"l ln",
"l ln",
"l ln",
"lp ln",
"rrTTTTTTTTTTTTTTTTTTln",
"nnnnnnnnnnnnnnnnnnnn",
],
[
" ",
" ",
" ",
" ",
" ",
" ",
" ",
"vvv ",
"vvvv ",
"vvvv ",
"vvvv wwww ",
"vtv wwwwwww",
" t bbbbbb",
" t b b",
"Pt ge e b",
"gg dgggggggbbbbbb",
"ddgWWWWWdddddddddddd",
"WWWWWWWWWWWWWWWWWWWW",
"WWWWWWWWWWWWWrrrWWWW",
"lWWWWWWWWWWpWrrWWWWl",
"lWWWWWWWWWWrWWWWWWWl",
],
[
" ",
" ",
" ",
" ",
" ",
" ",
" ",
"vvv ",
"vvvv ",
"vvvv ",
"vvvv wwww ",
"vtv wwwwwww",
" t bbbbbb",
" t b b",
" t ge e b",
"gg dgggggggbbbbbb",
"ddgWWWWWdddddddddddd",
"WWWWWWWWWWWWWWWWWWWW",
"WWWWWWWWWWWWWrPrWWWW",
"WWWWWWWWWWWpWrrWWWWW",
"WWWWWWWWWWWrWWWWWWWW ",
],
[
"l p ",
"l rrrrrllllll ",
"l rrr rrr ",
"l r r lr ",
"l rrr r r ",
"l rl r ",
"lllllllllllllllllllllllllllllrrrrrrrlllllr r ",
"l l r lr ",
" l P r r ",
" aaaa l a r r r rl r ",
" rl a rrl r ",
" rrl r rrll l ",
" r r ",
" a rrll l l llllWWlllll ",
" rrrr l l r WWl ",
" rrr rr r rr rrrrrrrWWl ",
"rr rr r rrlrrrll rr WWl ",
"l WWW ",
" WWW ",
" lr ",
" rr rrrrllrrllrrrr rrlllrrr ",
" llllll rrrr rrrrr rrrrrrr",
],
[
"r eeeeeeeeeeeeeeeeeeeeeeeeeee r",
"r eeeeeeeeeeeeeeeeeeeeeeeeeeeer",
"rrr rrr rrrrrrrrr rr rrr r",
"r r",
"r WWWW r",
"r WWWW r",
"r WWWW r",
"r WWWW r",
"r rrrrrrrrrr rrrrrrrrr",
"r r",
"r r",
"r r",
"r r",
"r rrrrrrrrr rr r",
"lllllllllllllllllll lllllllllll",
"r eeeeeeeeeeeeeee eeeeeeeeee r",
"r eeeeeeeeeeeeeeee eeeeeeeeer",
"rrr rrr rrrrrrrrr rr rrr r",
"r r",
"r WWWW r",
"r WWWW r",
"r WWWW r",
"r WWWW r",
"r rrrrrrrrrr rrrrrrrrr",
"r r",
"r r",
"r r",
"r r",
"r rrrrrrrrr rr r",
"lllllllllllllllllll lllllllllll",
"r eeeeeeeeeeeeeeeeeeeeeeeeeee r",
"r eeeeeeeeeeeeeeeeeeeeeeeeeeeer",
"rrr rrr rrrrrrrrr rr rrr r",
"r r",
"r WWWW r",
"r WWWW r",
"r WWWW r",
"r WWWW r",
"r rrrrrrrrrr rrrrrrrrr",
"r r",
"r r",
"r r",
"r r",
"r rrrrrrrrr rr r",
"lllllllllllllllllll lllllllllll",
"r eeeeeeeeeeeeeeeeeeeeeeeeeee r",
"r eeeeeeeeeeeeeeeeeeeeeeeeeeeer",
"rrr rrr rrrrrrrrr rr rrr r",
"r r",
"r WWWW r",
"r WWWW r",
"r WWWW r",
"r WWWW r",
"r rrrrrrrrrr rrrrrrrrr",
"r r",
"r r",
"r r",
"r r",
"r rrrrrrrrr rr r",
"lllllllllllllllllll lllllllllll",
"r eeeeeeeeeeeeeeeeeeeeeeeeeee r",
"r eeeeeeeeeeeeeeeeeeeeeeeeeeeer",
"rrr rrr rrrrrrrrr rr rrr r",
"r r",
"r WWWW r",
"r WWWW r",
"r WWWW r",
"r WWWW r",
"r rrrrrrrrrr rrrrrrrrr",
"r r",
"r r",
"r r",
"r r",
"r rrrrrrrrr rr r",
"lllllllllllllllllll lllllllllll",
"r eeeeeeeeeeeeeeeeeeeeeeeeeee r",
"r eeeeeeeeeeeeeeeeeeeeeeeeeeeer",
"rrr rrr rrrrrrrrr rr rrr r",
"r r",
"r WWWW r",
"r WWWW r",
"r WWWW r",
"r WWWW r",
"r rrrrrrrrrr rrrrrrrrr",
"r r",
"r r",
"r r",
"r r",
"r P rrrrrrrrrr rr r",
"lllllllllllllllllll lllllllllll",
],
[
" gg g ",
" gg ",
" gg g g g gggg gggg g g g g gggg ",
" gg g g g g g g g g g g g ",
" gg g g g g g g g g g gggg ",
" gg g g g g g g g g g g ",
" g g ",
" l g g ",
" ssssssssl gg ",
" l ",
" ge l eg ",
" gggggggggggggggggggggggggggggggggggggggggg ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
],
];
// ^ Copy and Paste more levels to the end of this array
// Displays any objects in an array
var displayObjects = function(objects) {
for(var i = 0;i < objects.length; i ++) {
objects[i].draw();
}
};
// Rect Collision Function
var rectCollide = function(x, y, w, h, collX, collY, collW, collH) {
if(collX + collW > x && collX < x + w && collY + collH > y && collY < y + h) {
return true;
}
};
/*** Player Object ***/
var Player = function(x, y) {
// Object values
this.x = x;
this.y = y;
this.vel = 0;
this.gravity = 0;
};
Player.prototype.draw = function() {
/** Graphics **/
//Body
fill(208, 212, 91);
rect(this.x,this.y,20,20);
//Clothes
fill(99, 73, 29);
rect(this.x,this.y+12,20,8);
//Hair
fill(0, 0, 0);
rect(this.x,this.y,20,2);
//Eyes
fill(0, 0, 0);
ellipse(this.x+7+this.vel,this.y+7+constrain(this.gravity,-5,5),3,3);
ellipse(this.x+13+this.vel,this.y+7+constrain(this.gravity,-5,5),3,3);
/** Movement **/
// Applies and constrains velocity and gravity
this.y += this.gravity;
this.gravity += 0.1;
this.x += round(this.vel);
this.vel = constrain(this.vel, -4, 4);
// User control
if(keys[RIGHT]) {
this.vel += 0.3;
}
if(keys[LEFT]) {
this.vel -= 0.3;
}
if(keys[UP] && this.gravity === 0.1) {
this.gravity = -4;
}
// Implements friction
if(this.vel > 0) {
this.vel -= 0.1;
} else if(this.vel < 0) {
this.vel += 0.1;
}
// Kills the player if they go to far down
if(this.y > levels[level].length * 20) {
this.x = spawnX;
this.y = spawnY;
}
};
var players = [
new Player(spawnX,spawnY),
];
/*** Cloud Object ***/
var Cloud = function(x,y) {
//Object variables
this.x = x;
this.y = y;
this.speed = random(0.1,0.4);
};
Cloud.prototype.draw = function() {
fill(255, 255, 255,230);
rect(this.x,this.y,100,30);
rect(this.x+10,this.y-30,80,30);
this.x+=this.speed;
if(this.x>400) {
this.x=-100;
this.y=random(0,200);
this.speed=random(0.1,0.4);
}
};
/*** Enemy Object ***/
var Enemy = function(x,y) {
//Object Variables
this.x = x;
this.y = y;
this.speed = 1;
this.gravity = 0;
};
Enemy.prototype.draw = function() {
//Graphics
//Body
fill(17, 87, 6);
rect(this.x,this.y,20,20);
//Eyes
fill(0, 0, 0);
//Left
rect(this.x+5+this.speed*5,this.y+7,4,2);
//Right
rect(this.x+11+this.speed*5,this.y+7,4,2);
//Physics
//Applies speed and gravity
this.x+=this.speed;
this.y+=this.gravity;
this.gravity+=0.1;
//Player collisions
if(players[0].x+20>this.x&&players[0].xthis.y&&players[0].yblocks[i].x&&this.xblocks[i].y&&this.y+2blocks[i].y&&this.y+20=0) {
this.y = blocks[i].y-20;
this.gravity = 0;
} if(this.yblocks[i].y+10&&
this.gravity<0) {
this.y = blocks[i].y+20;
this.gravity = 0.1;
}
if(this.y+18>blocks[i].y&&this.yblocks[i].x&&this.x+20blocks[i].x+15) {
this.x = blocks[i].x+20;
this.speed=1;
}
}
}
}
};
/*** Block Object ***/
var Block = function(x,y,t) {
// Object values
this.x = x;
this.y = y;
this.t = t;
this.w = 20;
this.h = 20;
};
Block.prototype.draw = function() {
if(this.t==="Brick") {
//Brick Graphics
fill(163,67,57);
rect(this.x,this.y,20,20);
fill(200,200,200);
rect(this.x,this.y,2,10);
rect(this.x+10,this.y+10,2,10);
for(var i = 0;i <3;i++) {
rect(this.x,this.y+i*9,20,2);
}
} else if(this.t==="Rock") {
//Rock Graphics
fill(99, 99, 99);
rect(this.x,this.y,20,20);
fill(110, 108, 110);
ellipse(this.x+5,this.y+5,7,5);
ellipse(this.x+14,this.y+10,7,7);
ellipse(this.x+9,this.y+14,5,7);
ellipse(this.x+3,this.y+9,5,4);
} else if(this.t==="Leaf") {
//Leaf Graphics
fill(53, 117, 32);
rect(this.x,this.y,20,20);
} else if(this.t==="Dirt") {
//Dirt Graphics
fill(125, 101, 39);
rect(this.x,this.y,20,20);
} else if(this.t==="Grass") {
//Grass Graphics
fill(125, 101, 39);
rect(this.x,this.y,20,20);
fill(0, 255, 0);
triangle(this.x,this.y,this.x,this.y+7,this.x+10,this.y);
triangle(this.x+6,this.y,this.x+10,this.y+9,this.x+17,this.y);
triangle(this.x+11,this.y,this.x+20,this.y+8,this.x+20,this.y);
} else if(this.t==="Wood") {
//Wood Graphics
fill(189, 182, 51);
rect(this.x,this.y,20,5);
fill(214, 201, 54);
rect(this.x,this.y+5,20,5);
fill(189, 182, 51);
rect(this.x,this.y+10,20,5);
fill(214, 201, 54);
rect(this.x,this.y+15,20,5);
} else if(this.t==="Log") {
//Log Graphics
fill(138, 133, 35);
rect(this.x,this.y,20,20);
fill(130, 126, 45);
rect(this.x+3,this.y,5,20);
rect(this.x+12,this.y,5,20);
} else if(this.t==="Normal") {
//Block Graphics
fill(138, 138, 138);
rect(this.x,this.y,20,20);
}
//Player collsions
if(rectCollide(this.x, this.y, this.w, this.h, players[0].x, players[0].y, 20, 20)) {
if(rectCollide(this.x + round(players[0].vel) + 1, this.y, this.w - (round(abs(players[0].vel)) + 1), this.h / 2, players[0].x, players[0].y, 20, 20)) {
players[0].gravity = 0;
players[0].y = this.y - 20;
}
if(rectCollide(this.x + round(players[0].vel) + 1, this.y + this.h / 2, this.w - (round(abs(players[0].vel)) + 1), this.h / 2, players[0].x, players[0].y, 20, 20)) {
players[0].gravity = 0.1;
players[0].y = this.y + this.h;
}
if(rectCollide(this.x, this.y + round(players[0].gravity) + 1, this.w / 2, this.h - (round(abs(players[0].gravity)) + 1), players[0].x, players[0].y, 20, 20)) {
players[0].vel = 0;
players[0].x = this.x - 20;
}
if(rectCollide(this.x + this.w / 2, this.y + round(players[0].gravity) + 1, this.w / 2, this.h - (round(abs(players[0].gravity)) + 1), players[0].x, players[0].y, 20, 20)) {
players[0].vel = 0;
players[0].x = this.x + this.w;
smooth();
}
}
};
/*** Death Block Object ***/
// Description: blocks that can hurt you, lava acid spikes ect. ect.
var DeathBlock = function(x,y,t) {
//Object variables
this.x = x;
this.y = y;
this.t = t;
};
DeathBlock.prototype.draw = function() {
if(this.t==="Lava") {
// Lava Graphics
fill(255, 0, 0);
rect(this.x,this.y,20,20);
} else if(this.t==="Spike") {
// Spike Graphics
fill(171, 171, 171);
triangle(this.x,this.y+20,this.x+5,this.y,this.x+10,this.y+20);
triangle(this.x+10,this.y+20,this.x+15,this.y,this.x+20,this.y+20);
} else if(this.t==="Acid") {
// Acid Graphics
fill(23, 173, 0);
rect(this.x,this.y,20,20);
}
// Collisions
if(players[0].x+20>this.x&&players[0].xthis.y&&players[0].ythis.x&&players[0].xthis.y&&players[0].ythis.y&&players[0].y+20=0) {
players[0].y = this.y-20;
players[0].gravity = -5;
}
if(players[0].ythis.y + 10&&players[0].gravity<0) {
players[0].y = this.y + 20;
players[0].gravity = 0.1;
}
if(players[0].y+18>this.y&&players[0].ythis.x&&players[0].x+20this.x+15) {
players[0].vel = 0;
players[0].x = this.x+20;
}
}
}
}
if(this.t==="Water") {
// Water graphics
fill(0, 155, 155, 100);
rect(this.x,this.y,20,20);
smooth();
if(players[0].x+20>this.x&&players[0].xthis.y&&players[0].ythis.x&&players[0].xthis.y&&players[0].y 20) {
fadeSpeed = 1;
}
if(fade >= 400) {
page="Game";
}
// Implements the fade
fade += fadeSpeed;
// Fills the screen with a rect for fading
fill(255, 255, 255, fade);
rect(0, 0, 400, 400);
image(getImage("avatars/aqualine-ultimate"),147,153,117,86);
ellipse(200,200,120,100);
break;
case "Game":
// Background Color
background(0, 255, 255);
// Sun
fill(237, 237, 17);
ellipse(50, 50, 70 + cos(frameCount * 0.5) * 10, 70 + cos(frameCount * 0.5) * 10);
fill(255, 255, 0);
ellipse(50, 50, 60 + cos(frameCount * 0.5) * 10, 60 + cos(frameCount * 0.5) * 10);
//Draws the clouds
displayObjects(clouds);
pushMatrix();
if(cameraEnabled) {
translate(round(width/2 - players[0].x), round(height/2 - players[0].y));
}
players[0].draw();
displayObjects(blocks);
displayObjects(enemies);
//Restarts level
if(keys[82]) {
blocks = [];
players[0].gravity = 0.1;
players[0].vel = 0;
}
if(blocks.length === 0) {
loadLevel();
}
//Adds text to the end of the array
if(level === 2) {
text("why did i go in a cave",100,200);
fill(0, 0, 0);
}
if(level === 5) {
text(" YA WON ACTULLAY THIS WAS ALL A TRAP MUHAHAHAHAH\n I WILL BE BACK STRONGER\n (AND WITH A BETTER HIDEOUT\n and u chosen one WILL BE EXTINCT \n MUAHHAHAHAHAHAAHAHAH",200,200);
fill(0, 0, 0);
}
if(level === 12) {
text("haah there is no seconed part\nso u may continue\nchosen one\nim sending u on a \njourney across realms but first\n u must deal with the overlord\n umust know alot of info about him",200,200);
fill(0, 0, 0);
}
if(level === 0) {
text("aahhh what a wonderful day to stop the overlord\n might just start it now",200,200);
fill(0, 0, 0);
}
if(level === 5) {
text("OH NOOOO\n i better get out",100,380);
fill(0, 0, 0);
}
if(level === 1) {
text(" im heading to stop the overlord\n for destroying everyone i know\n (and also the world)",100,200);
fill(0, 0, 0);
}
if(level === 3) {
text("might as well find a way out",100,200);
fill(0, 0, 0);
}
if(level === 4) {
text("oh god he found me",300,3);
fill(0, 0, 0);
}
if(level === 0) {
textSize(15);
text("MUBARAK4G PRESENTS ULTIMTA",200,100);
fill(0, 0, 0);
}
if(level === 7) {
text("HOLD UP UR NOT DEAD\n U MUST REALLY BE REALLY CHOSEN!!!\nbut u will never find\n the new lava base i bought on lvl 6",200,200);
fill(0, 0, 0);
}
if(level === 8) {
textSize(15);
text("THE LAVA BASE",180,100);
fill(0, 0, 0);
}
if(level === 11) {
textSize(15);
text("im gonna guess that the overlord got killed by water\nbut everyone is still the rock guys thingy mibbobers\nguess the wirld is all to myself\nbut wait\ni sense something ULTIMITA?\nPART TTTWWWOOO\n AND IT'S COMING SOOONNN\n OOOGGGAAA BOOOGGGGG",180,100);
fill(0, 0, 0);
}
if(level === 9) {
text(" Did he say secret lava base",200,200);
fill(0, 0, 0);
}
if(level === 10) {
text("WHY IS THERE ACID IN A LAVA BASE",200,200);
fill(0, 0, 0);
}
popMatrix();
//This is credits, (optional)
fade += fadeSpeed;
fadeSpeed = -2;
if(fade <= 0) {
fadeSpeed = 0;
}
fill(255, 255, 255, fade);
rect(0, 0, 400, 400);
break;
}
};
/*** Key Events ***/
var keyPressed = function() {
keys[keyCode] = true;
};
var keyReleased = function() {
keys[keyCode] = false;
};
Edit the html in the top panel, see the result here.
Save your page and get a link to view it live, anywhere.