/* Created by ___ ___ _ _( _ )_ __ __/ _ \ | '_/ _ \ V V /\_ / |_| \___/\_/\_/ /_/ Assist by「ＨＡＰＰＹＴＯＨＥＬＰ」, he was happy again. Created camera effect and make the world larger document.querySelector(".loadingOverlay").style.display = "none"; */ /////////////////////////////////// //////////// UTILITIES //////////// /////////////////////////////////// // Selector function id(arg){ return document.getElementById(arg); } // Short console.log var log = console.log; // Dirty error handling function stoperror(){ return true; } window.onerror = stoperror; /////////////////////////////////////////////// //////////// ONLOAD INITIALIZATION //////////// /////////////////////////////////////////////// window.onload = function(){ var canvas = id("canvas"); var c = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight - 5; // Scale to enlarge world // canvas.width * scale is used later on var scale = 5; /////////////////////////////////////////////// //////////////// GAME OBJECTS ///////////////// /////////////////////////////////////////////// // Player class function Player(x, y, width, height){ this.x = x; this.y = y; this.width = width; this.height = height; this.color = "#354458"; // Gravity, velocity in Y (for gravity) and // velocity x for movement // Keys in array for pressed keys to handle simultaneous controls this.speed = 3; this.velX = 0; this.velY = 0; this.jumping = false; this.grounded = false; this.keys = []; this.friction = 0.8; this.gravity = 0.3; // For movement in X axis // Active flag + orgin x, y and current x, y axis this.active = false; this.originX = 0; this.currentX = 0; this.originY = 0; this.currentY = 0; // HP BAR this.score_color = "green"; this.score_width = 5; // this.width; // Same width as player width this.score_height = 8; // Jump method (if not jumping and grounded, you can jump) this.jump = function(){ if(!this.jumping && this.grounded){ this.jumping = true; this.grounded = false; this.velY = -this.speed * 3; } }; // Draw method this.draw = function(){ c.beginPath(); c.save(); c.rect(this.x, this.y, this.width, this.height); c.shadowBlur = 20; c.shadowColor = "black"; c.fillStyle = this.color; c.strokeStyle = "#000"; c.fill(); c.stroke(); c.restore(); }; // Draw HEALTH BAR this.score = function(){ c.beginPath(); c.rect(this.x, this.y - 10, this.score_width, this.score_height); c.fillStyle = this.score_color; c.fill(); c.stroke(); }; // Update method this.update = function(){ // Boundaries if(this.x + this.width > canvas.width * scale) this.x = canvas.width * scale - this.width; // Right if(this.x < 0) this.x = 0; // Left if(this.y + this.height > canvas.height) this.y = canvas.height - this.height; // Bottom if(this.y < 0) this.y = 0; // Top // !!! Delete this and create // blocks as floor // to make blanks // Grounded on the bottom if (this.y >= (canvas.height - this.height)){ // Bottom this.y = (canvas.height - this.height - 1); // If grounded on the floor, jumping = false, grounded = true //this.jumping = false; //this.grounded = true; // Kill player when fall out of floor this.score_width = 0; } // If player is above floor then not grounded so use gravity if(this.y < (canvas.height - this.height - 1)){ this.grounded = false; } // Gravity and friction this.velX *= this.friction; this.velY += this.gravity; //this.grounded = false; // If grounded, velocityY is set to 0 if(this.grounded){ this.velY = 0; } // Movement this.x += player.velX; this.y += player.velY; // Call draw and score methods this.draw(); // Avoid drawing hp bar - not needed here ;> this.score(); }; } // Obstacles array //var _obstacles = []; // Obstacle class function Obstacle(x, y, width, height, speed){ this.x = x; this.y = y; this.width = width; this.height = height; this.speed = speed; this.color = "#FBFF00"; this.draw = function(){ c.beginPath(); c.strokeStyle = "white"; c.lineWidth = 2; c.shadowBlur = 10; c.shadowColor = "white"; c.fillStyle = this.color; c.rect(this.x, this.y, this.width, this.height); c.fill(); c.stroke(); }; this.update = function(){ //this.x -= this.speed; // Boundaries if(this.x + this.width > canvas.width * scale) this.x = canvas.width * scale - this.width; // Right if(this.x < 0) this.x = 0; // Left if(this.y + this.height > canvas.height) this.y = canvas.height - this.height; // Bottom if(this.y < 0) this.y = 0; // Top this.draw(); }; } // Array for blocks var _blocks = []; // Game colors var gameColors = ["#5E412F", "#DA4624", "#6E9ECF", "#75EB00", "#FF85CB", "#FF432E", "#354458", "#542733", "#EB65A0", "#982395", "#260126", " #59323C", " #F2EEB3", "#8C6954", "#ED1C24", "#20457C", "#160A47", "#F05A28", "#3A0256", "#591E23", "#73503C", "#0C98CF", "#775BA3", "#493621", "#82683B", "#F76835", "#999900", "#000000", "#D75C37", "#CC0063"]; // Block class function Block(x, y, width, height){ this.x = x; this.y = y; this.width = width; this.height = height; this.color = gameColors[Math.floor(Math.random() * gameColors.length)]; // Index random color this.draw = function(){ c.beginPath(); c.rect(this.x, this.y, this.width, this.height); //c.shadowBlur = 30; //c.shadowColor = "black"; c.fillStyle = this.color; c.strokeStyle = "#000"; c.fill(); c.stroke(); }; this.update = function(){ this.draw(); }; } // Platform class (floor) function Platform(x, y, width, height){ this.x = x; this.y = y; this.width = width; this.height = height; this.color = "#8B4513"; this.draw = function(){ c.beginPath(); c.rect(this.x, this.y, this.width, this.height); c.fillStyle = this.color; //c.strokeStyle = "#000"; c.fill(); //c.stroke(); }; this.update = function(){ this.draw(); }; } // Array for stars var _stars = [] function Star(){ this.x = Math.random() * canvas.width * scale; this.y = Math.random() * canvas.height/1.5; this.draw = function(){ c.beginPath(); c.fillStyle = "white"; c.font = "1em Arial"; c.fillText("*", this.x, this.y); }; this.update = function(){ this.draw(); } } //////////////////////////////////// //////////// new OBJECT //////////// //////////////////////////////////// // Player object // 40 - 60 for fall down, for effect :) var player = new Player(/*x = */10, /*y = */(canvas.height - 40 - 60 ), /*width = */30, /*height = */30); // Floor platform block var platform = new Platform(-canvas.width/2 - 50, canvas.height - 30, canvas.width, 30); _blocks.push(platform); var platform2 = new Platform(canvas.width/1.3, canvas.height - 30, canvas.width/2, 30); _blocks.push(platform2); var platform3 = new Platform(canvas.width * 2, canvas.height - 30, canvas.width/3, 30); _blocks.push(platform3); var platform4 = new Platform(canvas.width * 2.6, canvas.height - 30, canvas.width/2, 30); _blocks.push(platform4); var platform5 = new Platform(canvas.width * 3.3, canvas.height - 30, canvas.width/2, 30); _blocks.push(platform5); var platform6 = new Platform(canvas.width * 4, canvas.height - 30, canvas.width/2, 30); _blocks.push(platform6); var platform7 = new Platform(canvas.width * 4.8, canvas.height - 30, canvas.width, 30); _blocks.push(platform7); // Draw blocks function drawBlocks(){ for (var _ = 0; _ < 160; _++){ //x, y, width, height, speed var blck = new Block(/*x = */Math.random() * canvas.width * scale, /*y = */Math.random() * canvas.height - 100, /*width = */ 60, /*height = */ 10); _blocks.push(blck); } }drawBlocks(); // Draw Obstacle (final item that should be collected) var obst = new Obstacle(/*x = */ Math.random() * canvas.width * scale , /*y = */ Math.random() * canvas.height - 100 , /*width = */ 50 , /*height = */ 50, /*speed = */ 0); // Draw Obstacle (called in game loop with currentTime and lastTime) //function drawObstacle(){ // for (var _ = 0; _ < 1; _++){ //x, y, width, height, speed // var obst = new Obstacle(/*x = */(canvas.width * scale) * 1.5, /*width = */ Math.floor((Math.random() * 20) + 8), /*height = */ Math.floor((Math.random() * 10) + 6), /*speed = */ Math.floor(Math.random() * 3.5) + 1); // _obstacles.push(obst); // } //}//drawObstacle(); // Draw Stars function drawStars(){ for (var _ = 0; _ < 123; _++){ var star = new Star(); _stars.push(star); } }drawStars(); ///////////////////////////////////// //////////// PC CONTROLS //////////// ///////////////////////////////////// document.body.addEventListener("keydown", function (e) { player.keys[e.keyCode] = true; }); document.body.addEventListener("keyup", function (e) { player.keys[e.keyCode] = false; }); document.addEventListener("keydown", spaceJump, false); document.addEventListener("keydown", goLeft, false); document.addEventListener("keydown", goRight, false); function goLeft(e){ if(player.keys[37] ){ player.velX -= 1.4; } } function goRight(e){ if(player.keys[39] ){ player.velX += 1.4; } } function spaceJump(e){ if(player.keys[38] || player.keys[32]){ // Jump player.jump(); } } ///////////////////////////////////////////////// /*********** CONTROLS for new OBJECT ***********/ ///////////////////////////////////////////////// // Grab - on mousedown or touchstart set active = true // And origin + current x, y values = e.clientX,Y values function grab(e){ player.active = true; player.originX = player.currentX = e.clientX || e.touches[0].clientX; player.originY = player.currentY = e.clientY || e.touches[0].clientY; } document.addEventListener("mousedown", grab); document.addEventListener("touchstart", grab); // Move - on mouse/touch move and only when active === true (already grabbed) // Set current X, Y values to e.clientX, Y || e.touches[0].clientX, Y function move(e){ if (player.active){ player.currentX = e.clientX || e.touches[0].clientX; player.currentY = e.clientY || e.touches[0].clientY; var yDiff = player.originY - player.currentY; if (yDiff > 60) { // yDiff > 60 px then jump // Up = jump with my hero player player.jump(); } // Reset value yDiff = null; } } document.addEventListener("mousemove", move); document.addEventListener("touchmove", move); // Release - on release set active to false and cancel function release(e){ player.active = false; } document.addEventListener("mouseup", release); document.addEventListener("touchend", release); /* SWIPE CONTROLS ARE MOVED DIRECTLY TO function move(e) to avoid multi touches //////////////////////////////////////// //////////// SWIPE CONTROLS //////////// //////////////////////////////////////// // Listeners document.addEventListener("touchstart", handleTouchStart, false); document.addEventListener("touchmove", handleTouchMove, false); // x and y values var xDown = null, yDown = null; // Get first touch //function getTouches(evt) { // return evt.touches || evt.originalEvent.touches; //} // Touch starts function handleTouchStart(evt) { //var firstTouch = getTouches(evt)[0]; xDown = evt.touches[0].clientX; yDown = evt.touches[0].clientY; } // Handle touch move function handleTouchMove(evt) { if (!xDown || !yDown) { return; } var xUp = evt.touches[0].clientX; var yUp = evt.touches[0].clientY; var xDiff = xDown - xUp; var yDiff = yDown - yUp; if (Math.abs(xDiff) > Math.abs(yDiff)) { if (xDiff > 0) { // Left } else { // Right } } else { if (yDiff > 0) { // Up = jump with my hero player player.jump(); } else { // Down } } // Reset values xDown = null; yDown = null; } */ ///////////////////////////////////////////// //////////// COLLISION DETECTION //////////// ///////////////////////////////////////////// function collision(a, b) { return a.x < b.x + b.width && // Right a.x + a.width > b.x && // Left a.y < b.y + b.height && // Bottom a.y + a.height > b.y; // Top } // http://www.somethinghitme.com/2013/04/16/creating-a-canvas-platformer-tutorial-part-tw/ function colCheck(shapeA, shapeB) { // get the vectors to check against var vX = (shapeA.x + (shapeA.width / 2)) - (shapeB.x + (shapeB.width / 2)), vY = (shapeA.y + (shapeA.height / 2)) - (shapeB.y + (shapeB.height / 2)), // add the half widths and half heights of the objects hWidths = (shapeA.width / 2) + (shapeB.width / 2), hHeights = (shapeA.height / 2) + (shapeB.height / 2), colDir = null; // if the x and y vector are less than the half width or half height, they we must be inside the object, causing a collision if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) { // figures out on which side we are colliding (top, bottom, left, or right) var oX = hWidths - Math.abs(vX), oY = hHeights - Math.abs(vY); if (oX >= oY) { if (vY > 0) { colDir = "t"; shapeA.y += oY; } else { colDir = "b"; shapeA.y -= oY; } } else { if (vX > 0) { colDir = "l"; shapeA.x += oX; } else { colDir = "r"; shapeA.x -= oX; } } } return colDir; } ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // Time handling - not used right now var lastTime = 0; var lastTime2 = 0; ////////////////////////////////////////// //////////// G A M E L O O P //////////// ////////////////////////////////////////// function GAMELOOP(currentTime){ // Main animation window.requestAnimationFrame(GAMELOOP); // Begin c.beginPath(); // Clear canvas c.clearRect(0, 0, canvas.width, canvas.height); //////////////////////////////////////// //////////// UPDATE OBJECTS //////////// //////////////////////////////////////// // Save and translate for camera effect c.save(); c.translate(-player.x + canvas.width/2, 0); // Update Stars for(var s = _stars.length - 1; s >= 0; s--){ _stars[s].update(); } // Update player player.update(); // Floor plat // Moved to _blocks array because collisions // are controlled from this array // and I am too lazy to write another collision check ;> // platform.update(); //Update blocks for(var k = _blocks.length - 1; k >= 0; k--){ _blocks[k].update(); } // Update obstacle (finishing block that should be collected) // Draw Obstacle (final item that should be collected) obst.update(); // If active && jumping then slow movement speed if (player.active && player.jumping){ player.x -= (player.originX - player.currentX) / (canvas.width/9) * 0.9; //console.log(player.grounded, movSpeed); //player.y = player.y - (player.originY - player.currentY) / movSpeed; } // If active && NOT jumping then fast movement speed if (player.active && !player.jumping){ player.x -= (player.originX - player.currentX) / (canvas.width/14) * 0.9; //console.log(player.grounded, movSpeed, canvas.width/10); //player.y = player.y - (player.originY - player.currentY) / movSpeed; } /* // Obstacles update for(var k = _obstacles.length - 1; k >= 0; k--){ _obstacles[k].update(); // If obstacle goes out of display, splice it if(_obstacles[k].x + _obstacles[k].width < 0){ _obstacles.splice(k, 1); } } */ /* // Draw obstacles every n secs if(currentTime >= lastTime + 3000){ lastTime = currentTime; drawObstacle(); } */ // Collision between hero player and obstacle (finishing box) if(collision(player, obst)){ obst.x = (Math.random() * canvas.width) * scale; obst.y = Math.random() * canvas.height - 100; player.score_width += 5; } // If dead if(player.score_width <= 0){ alert("You DED!"); // Reset values player.score_width = 5; player.x = 0; player.y = (canvas.height - 40 - 90 ); // Prevent movement controls player.active = false; } // If collect all blocks, then you WIN ! ;> if(player.score_width >= player.width){ alert("You WON!"); // Reset values player.score_width = 5; player.x = 0; player.y = (canvas.height - 40 - 90 ); // Prevent movement controls player.active = false; obst.x = (Math.random() * canvas.width) * scale; obst.y = Math.random() * canvas.height - 100; } //////////////////////////////////////// // Collisions from somethinghitme.com // //////////////////////////////////////// for (var l = _blocks.length - 1; l >= 0; l--) { var dir = colCheck(player, _blocks[l]); if (dir === "l" || dir === "r") { player.velX = 0; player.jumping = false; } else if (dir === "b") { // If player stays on platform // then is grounded, not jumping and // most important // velocity Y = 0 // to prevent gravity! // Also if player is above ground with no collision // this.grounded = false (more in update method) // to use gravity player.grounded = true; player.jumping = false; player.velY = 0; } else if (dir === "t") { player.velY *= -0.2; player.jumping = false; // Decrease block's height _blocks[l].height /= 2; // If blocks height <= 2, splice it x) if( _blocks[l].height <= 2 ){ _blocks.splice(l, 1); } } } // Restore for camera effect c.restore(); // Run GAMELOOP }GAMELOOP(); }; // End of onload

Jumping Cube