//Cubey: A Simple Platformer
//Started: 4/24/2018
//Ended: 4/25/2018
//This is still a work in progress (WIP)...
//Things to do:
//Add a scene transition
//Add more levels (until 10-20-ish)
//Fix the lava and portal hitboxes
//Maybe add animations and particles
//Add an end screen (maybe with death count)
//Code starts here:
var scene = 'menu';
var blocks = [];
var currentLevel = 0;
var keys = [];
var Arrows = [HAND, ARROW];
var pc1 = 194;
var pc2 = 225;
var pc3 = 255;
var loadGoogleFont = (function () {
return this.Function ( "gfName",
"gfName = gfName.replace ( /\\s+/g, '+' );" +
"var subsets = Array.prototype.slice.call ( arguments, 1, arguments.length - 1 );" +
"var url = 'https://fonts.googleapis.com/css?family=' + gfName + ( subsets.length > 0 ? '&subset=' + subsets : '' ), callback = arguments [ arguments.length - 1 ];" +
"var gfs = document.querySelectorAll('link[href=\"' + url+'\"]');" +
"if (!gfs.length) {" +
"var f = document.createElement('link');" +
"f.setAttribute('rel', 'stylesheet');" +
"f.setAttribute('type', 'text/css');" +
"f.onload = callback;" +
"f.setAttribute('href', url);" +
"document.head.appendChild(f);" +
"} else if (typeof callback === 'function') {" +
"callback.call(gfs[0]);" +
"}"
);
})();
loadGoogleFont("Fredoka One");
var f1 = createFont ("Fredoka One");
var f = createFont ("Fredoka One");
var keyPressed = function(){keys[keyCode] = true;};
var keyReleased = function(){keys[keyCode] = false;};
var Block = function(x, y, type){
this.x = x;
this.y = y;
this.w = 36;
this.h = 36;
this.type = type;
};
Block.prototype.draw = function(){
switch(this.type){
case 'block':
fill(191, 191, 191);
stroke(255, 255, 255);
strokeWeight(3.5);
rect(this.x, this.y, 40, 40,10);
break;
case 'portal':
strokeWeight(3.5);
fill(194, 225, 255);
rect(this.x, this.y, 40, 40,10);
break;
case 'lava':
strokeWeight(3.5);
fill(255, 195, 99);
rect(this.x, this.y, 40, 40,10);
break;
case 'invisible':
noStroke();
noFill();
rect(this.x, this.y, 40, 40,10);
break;
}
};
var levels = [
[[0,0,0,0,0,0,0,0,0,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,2,2,2,2,0,2,2,0],
[0,2,2,2,0,2,0,2,1,0],
[0,0,0,0,0,0,0,0,0,0]],
[[0,0,0,0,0,0,0,0,0,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,2,2,2,0,2,2,2,0],
[0,0,2,2,2,2,2,2,1,0],
[0,2,2,2,2,2,2,2,0,0],
[0,2,2,2,0,2,2,2,2,0],
[0,2,2,2,0,3,3,3,3,0],
[0,0,0,0,0,0,0,0,0,0]],
[[0,0,0,0,0,0,0,0,0,0],
[1,2,2,2,2,2,2,2,2,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,0,3,0,0,2,2,2,0],
[0,2,2,2,2,2,2,2,0,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,2,2,2,2,2,0,2,0],
[0,2,2,2,0,0,2,2,2,0],
[0,0,3,3,0,0,3,3,3,0]],
[[0,0,0,0,0,0,0,0,0,0],
[0,2,2,2,2,2,2,3,3,0],
[0,2,2,2,2,2,2,2,3,0],
[0,2,0,0,2,2,2,2,3,0],
[0,2,2,0,2,2,2,2,2,0],
[0,0,2,0,2,2,2,2,2,0],
[0,2,2,0,2,2,2,2,2,1],
[0,2,0,0,2,2,2,2,0,0],
[0,2,2,0,3,3,3,3,3,0],
[0,0,0,0,0,0,0,0,0,0]],
[[0,0,0,0,0,0,0,0,0,0],
[1,2,2,2,2,2,2,2,2,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,0,0,2,2,2,0,2,0],
[0,2,2,2,2,2,0,2,2,0],
[0,3,3,3,3,0,2,2,0,0],
[0,0,0,0,0,2,2,0,2,0],
[0,2,2,2,2,2,0,2,2,0],
[0,2,2,2,2,0,3,3,3,0],
[0,0,0,0,0,0,0,0,0,0]],
[[0,0,0,0,0,0,0,0,0,0],
[3,2,2,2,2,2,2,2,1,0],
[3,2,2,0,0,0,0,0,0,0],
[3,2,2,2,2,2,2,2,2,0],
[0,0,0,0,0,0,2,2,2,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,2,2,2,2,2,2,0,0],
[0,2,2,0,2,2,0,2,2,0],
[0,2,2,0,3,3,0,3,3,0],
[0,0,0,0,0,0,0,0,0,0]],
[[0,0,0,0,0,0,0,0,0,0],
[1,2,2,2,2,2,2,2,2,0],
[0,0,2,2,2,2,2,2,2,0],
[0,2,2,2,2,2,3,2,2,0],
[0,0,3,0,0,2,0,2,0,0],
[0,2,2,2,2,2,0,2,2,0],
[0,2,2,2,2,2,0,0,2,0],
[0,2,2,0,2,2,2,2,2,0],
[0,2,2,0,3,2,2,2,0,0],
[0,0,0,0,0,0,0,0,0,0]],
[[0,0,0,0,0,0,0,0,1,0],
[0,0,0,2,2,2,2,2,2,0],
[0,2,2,2,0,0,2,2,2,0],
[0,2,2,2,2,2,2,2,0,0],
[0,2,2,0,2,0,0,2,2,0],
[0,0,2,0,2,2,2,2,2,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,0,2,0,0,2,0,2,0],
[0,2,0,2,2,0,3,0,3,0],
[0,0,0,0,0,0,0,0,0,0]],
];
var readMap = function(){
blocks = [];
for(var i = 0; i < levels[currentLevel].length; i++){
for(var j = 0; j < levels[currentLevel][i].length; j++){
switch(levels[currentLevel][j][i]){
case 0:
blocks.push(new Block(i * 40, j * 40, 'block'));
break;
case 1:
blocks.push(new Block(i * 40, j * 40, 'portal'));
break;
case 3:
blocks.push(new Block(i * 40, j * 40, 'lava'));
break;
case 4:
blocks.push(new Block(i * 40, j * 40, 'invisible'));
break;
}
}
}
};
readMap();
var Player = function(){
this.x = 40;
this.y = 320;
this.w = 40;
this.h = 40;
this.xvel = 0;
this.yvel = 0;
this.falling = true;
this.gravity = 0.4;
this.jumpHeight = 9;
this.maxFallSpeed = 12;
this.moveSpeed = 0.5;
this.maxMoveSpeed = 5;
this.update = function(platforms){
if(keys[LEFT]){
this.xvel -= this.moveSpeed;
}
if(keys[RIGHT]){
this.xvel += this.moveSpeed;
}
if(!keys[LEFT] && !keys[RIGHT]){
if(this.xvel > 0){
this.xvel -= this.moveSpeed;
}
if(this.xvel < 0){
this.xvel += this.moveSpeed;
}
if(this.xvel < 0.1 && this.xvel > 0){
this.xvel = 0;
}
if(this.xvel > -0.1 && this.xvel < 0){
this.xvel = 0;
}
}
if(keys[UP] && !this.falling){
this.yvel = -this.jumpHeight;
}
this.yvel += this.gravity;
if(this.yvel > this.maxFallSpeed){
this.yvel = this.maxFallSpeed;
}
if(this.xvel > this.maxMoveSpeed){
this.xvel = this.maxMoveSpeed;
}
if(this.xvel < -this.maxMoveSpeed){
this.xvel = -this.maxMoveSpeed;
}
this.x += this.xvel;
this.collideWith(this.xvel, 0, blocks);
this.falling = true;
this.y += this.yvel;
this.collideWith(0, this.yvel, blocks);
};
this.collideWith = function(xv, yv, platforms){
for (var i = 0; i < blocks.length; i++){
var p = blocks[i];
if( this.y + this.h > p.y && this.y < p.y + p.h && this.x + this.w > p.x && this.x < p.x + p.w){
if(yv > 0){
this.yvel = 0;
this.falling = false;
this.y = p.y - this.h;
if(blocks[i].type === 'portal'){
currentLevel++;
readMap();
this.x = 40;
this.y = 320;
return;
}
if(blocks[i].type === 'lava'){
this.x = 40;
this.y = 320;
}
}
if(yv < 0) {
this.yvel = 0;
this.falling = true;
this.y = p.y + p.h;
if(blocks[i].type === 'portal'){
currentLevel++;
readMap();
this.x = 40;
this.y = 320;
return;
}
if(blocks[i].type === 'lava'){
this.x = 40;
this.y = 320;
}
}
if(xv > 0) {
this.xvel = 0;
this.x = p.x - this.w;
if(blocks[i].type === 'portal'){
currentLevel++;
readMap();
this.x = 40;
this.y = 320;
return;
}
if(blocks[i].type === 'lava'){
this.x = 40;
this.y = 320;
}
}
if(xv < 0) {
this.xvel = 0;
this.x = p.x + p.w;
if(blocks[i].type === 'portal'){
currentLevel++;
readMap();
this.x = 40;
this.y = 320;
return;
}
if(blocks[i].type === 'lava'){
this.x = 40;
this.y = 320;
}
}
}
}
};
this.draw = function(){
fill(189, 255, 138);
stroke(255, 255, 255);
strokeWeight(3.5);
rect(this.x, this.y, this.w, this.h, 10);
};
};
var p = new Player();
draw = function() {
if(scene === 'menu'){
noStroke();
fill(212, 212, 212);
rect(0,0,400,400);
fill(207, 207, 207);
noStroke();
triangle(0,0,500,0,0,500);
fill(212, 212, 212);
triangle(0,0,400,0,0,400);
fill(207, 207, 207);
triangle(0,0,300,0,0,300);
fill(212, 212, 212);
triangle(0,0,150,0,0,150);
//logo
rotate(20);
strokeWeight(4);
stroke(255, 255, 255);
fill(189, 255, 138);
rect(104,13,71,71,12);
rotate(-20);
textFont(f1,80);
fill(191, 191, 191);
text("C",88,126);
text("ubey",141,126);
fill(255, 255, 255);
text("C",86,124);
text("ubey",139,124);
//play button
fill(pc1, pc2, pc3);
stroke(255, 255, 255);
strokeWeight(5);
ellipse(198,238,122,122);
fill(191,191,191);
textSize(85);
text("▶",169,266);
fill(255, 255, 255);
text("▶",168,264);
if(mouseX > 147 && mouseX < 247 && mouseY > 187 && mouseY < 287){
cursor(Arrows[0]);
pc1 = 209;
pc2 = 233;
pc3 = 255;
} else{
cursor(Arrows[1]);
pc1 = 194;
pc2 = 225;
pc3 = 255;
}
if(mouseIsPressed && mouseX > 147 && mouseX < 247 && mouseY > 187 && mouseY < 287){
scene = "level1";
}
if(scene === "level1"){
cursor(Arrows[1]);
}
//bg
fill(191, 191, 191);
strokeWeight(3.5);
rect(0,358,40,40,10);
rect(0,318,40,40,10);
rect(0,278,40,40,10);
rect(40,358,40,40,10);
rect(80,358,40,40,10);
rect(80,318,40,40,10);
rect(360,358,40,40,10);
rect(360,318,40,40,10);
rect(320,358,40,40,10);
rect(200,358,40,40,10);
//lava
fill(255, 195, 99);
rect(280,358,40,40,10);
rect(240,358,40,40,10);
rect(160,358,40,40,10);
rect(120,358,40,40,10);
}
if(scene === 'level1'){
fill(212, 212, 212);
rect(0,0,400,400,10);
fill(207, 207, 207);
noStroke();
triangle(0,0,500,0,0,500);
fill(212, 212, 212);
triangle(0,0,400,0,0,400);
fill(207, 207, 207);
triangle(0,0,300,0,0,300);
p.update(blocks);
p.draw();
for(var i = 0; i < blocks.length; i++){
blocks[i].draw();
if(currentLevel === 0){
textSize(33);
textFont(f,33);
fill(191, 191, 191);
text("Get to the Portal",66,97);
text("to go to the next",66,135);
text("level",66,177);
fill(255, 255, 255);
text("Get to the Portal",64,95);
text("to go to the next",64,133);
text("level",64,175);
}
if(currentLevel === 1){
textFont(f,33);
fill(191, 191, 191);
text("Don't touch the",66,97);
text("lava",66,135);
fill(255, 255, 255);
text("Don't touch the",64,95);
text("lava",64,133);
}
}
}
};
10 Responses
Write a comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.