// Created by r8w9 /* Created by ___ ___ _ _( _ )_ __ __/ _ \ | '_/ _ \ V V /\_ / |_| \___/\_/\_/ /_/ Assist by 「ＨＡＰＰＹＴＯＨＥＬＰ」, he was happy again. Created camera effect and made bigger world. Assist by Martin, he did multitouch and drew arrows. 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"; this.direction = "right"; // Speed, velocity, jumping, grounded this.speed = 3; this.vel = {x: 3, y: 0}; this.jumping = false; this.grounded = false; // Gravity and friction this.friction = 0.8; this.gravity = 0.3; // 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.vel.y = -this.speed * 3; } }; // Draw HEALTH BAR this.score = function(){ c.beginPath(); c.save(); c.rect(this.x, this.y - 10, this.score_width, this.score_height); c.fillStyle = this.score_color; c.fill(); c.stroke(); c.restore(); c.closePath(); }; // Shooting function - shooting is handled in GAMELOOP // because of GAMELOOP's currentTime timing // Added directions to guide shots properly this.shoot = function() { var direction; // If player's direction === left // then bullet's direction = left if(this.direction === "left"){ direction = "left"; } // If player's direction === right // then bullet's direction = right else if(this.direction ==="right"){ direction = "right"; } else {this.direction = "right";} var __bullet = new Bullet(this.x, this.y, 8, 3, direction); _bullets.push(__bullet); }; // Draw method - conditions are in update 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(); c.closePath(); }; // 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 // 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; } // If grounded, velocityY is set to 0 if(this.grounded){ this.vel.y = 0; } //////////////////////////////////////// // 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.vel.x *= 0.1; //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.vel.y = 0; } else if (dir === "t") { player.vel.y *= -0.1; 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); } } } // If dead if(this.score_width <= 0){ // Reset values this.score_width = 5; this.x = 0; this.y = ( canvas.height - 40 - 90 ); this.vel.x = this.vel.y = 0; right_down = left_down = up_down = false; // Had to delete alert because when it was there // game was bugged > nonstop jumping with hero player :X //alert("You DED!"); //(function(){alert("You DED!")}()); } // If collect all suns, then you WIN ! ;> if(this.score_width >= this.width){ // Reset values this.score_width = 5; this.x = 0; this.y = ( canvas.height - 40 - 90 ); obst.x = (Math.random() * canvas.width) * scale; obst.y = Math.random() * canvas.height - 100; this.vel.x = this.vel.y = 0; right_down = left_down = up_down = false; alert("You WON!"); } // Gravity and friction this.vel.y += this.gravity; this.vel.x *= this.friction; // Movement //this.x += right_down ? this.vel.x : left_down ? -this.vel.x : 0; if(right_down) { this.direction = "right"; this.x += this.vel.x++; //log(this.direction); } if(left_down) { this.direction = "left"; this.x += this.vel.x--; //log(this.direction); } // Jump if(up_down) {this.jump();} // Shoot // Moved into GAMELOOP to handle timing ;) //if(shoot_down) {this.shoot();} // Gravity this.y += this.vel.y; // Call draw and score methods this.draw(); // HP Bar - score this.score(); }; } //////////////////////////////////// //////////// 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); // More on Player.shoot() method // Array of bullets var _bullets = []; function Bullet(x, y, width, height, dir){ this.x = x; this.y = y; this.width = width; this.height = height; this.dir = dir; this.speed = 0; this.draw = function(){ c.beginPath(); c.save() c.rect(this.x + player.width / 2, this.y, this.width, this.height); c.fillStyle = "white"; c.fill(); c.stroke(); c.restore(); c.closePath(); // If player is turned right (more on Player.shoot() method) if(this.dir === "right"){ this.speed = 3; } // If player is turned left (more on Player.shoot() method) else if(this.dir === "left"){ this.speed = -3; } else {this.speed = 2;} // Bullet movement this.x += this.speed; /* // Collisions between bullet's and block's for(var _ = _bullets.length - 1; _ >= 0; _--){ for(var __ = _blocks.length - 1; __ >= 0; __--){ if(collision( _bullets[_], _blocks[__] )){ _bullets.splice(_, 1); _blocks.splice(__, 1); break; } } } */ }; this.update = function(){ this.draw(); } } // Suns array //var _Suns = []; // Sun class function Sun(x, y, width, height, speed){ this.x = x; this.y = y; this.width = width; this.height = height; this.speed = speed; this.color = "#FBFF00"; // Draw method this.draw = function(){ c.beginPath(); c.save() c.rect(this.x, this.y, this.width, this.height); //c.lineWidth = 2; c.shadowBlur = 10; c.shadowColor = "white"; c.fillStyle = this.color; c.fill(); c.restore(); c.closePath(); }; // 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 // Collision between hero player and Sun (finishing box) if(collision(player, obst)){ this.x = (Math.random() * canvas.width) * scale; this.y = Math.random() * canvas.height - 100; player.score_width += 5; } this.draw(); }; } //////////////////////////////////// //////////// new OBJECT //////////// //////////////////////////////////// // Draw Sun (final item that should be collected) var obst = new Sun(/*x = */ Math.random() * canvas.width * scale , /*y = */ Math.random() * canvas.height - 100 , /*width = */ 50 , /*height = */ 50, /*speed = */ 0); // 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 // Draw method this.draw = function(){ c.beginPath(); c.save() c.rect(this.x, this.y, this.width, this.height); //c.shadowBlur = 30; //c.shadowColor = "black"; c.lineWidth = 0.7; c.fillStyle = this.color; c.strokeStyle = "#000"; c.fill(); c.stroke(); c.restore(); c.closePath(); }; this.update = function(){ this.draw(); }; } //////////////////////////////////// //////////// new OBJECT //////////// //////////////////////////////////// // 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(); // Platform class (floor) // It's pushed into _blocks array // to keep collision detection // as same as blocks. function Platform(x, y, width, height){ this.x = x; this.y = y; this.width = width; this.height = height; this.color = "#8B4513"; // Draw method this.draw = function(){ c.beginPath(); c.save(); c.rect(this.x, this.y, this.width, this.height); c.fillStyle = this.color; //c.strokeStyle = "#000"; c.fill(); //c.stroke(); c.restore(); c.closePath(); }; // Update method this.update = function(){ this.draw(); }; } //////////////////////////////////// //////////// new OBJECT //////////// //////////////////////////////////// // Floor platform block (pushed into _blocks array) 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); // 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.save(); c.fillStyle = "white"; c.font = "1em Arial"; c.fillText("*", this.x, this.y); c.restore(); c.closePath(); }; this.update = function(){ this.draw(); } } //////////////////////////////////// //////////// new OBJECT //////////// //////////////////////////////////// // Draw Stars function drawStars(){ for (var _ = 0; _ < 123; _++){ var star = new Star(); _stars.push(star); } }drawStars(); // Controls class function Controls(x, y, width, height, dir){ this.x = x; this.y = y; this.width = width; this.height = height; this.dir = dir; // Direction // Draw method this.draw = function(){ //c.save() //c.fillStyle = "rgba(0, 0, 0, 0.5)"; c.rect(this.x, this.y, this.width, this.height); //c.strokeStyle = "#000"; //c.fill(); //c.stroke(); //c.restore(); //c.closePath(); // Arrow drawings by Martin var m = 10, // margin left right top and bottom w = this.width-2*m, h = this.height-2*m, d = h/2, t = 12, // tail thickness => tail is = x = this.x, y = this.y; // If left || right || up arrow if(this.dir === "left"){ // Left arrow c.save(); c.fillStyle = "rgba(0, 0, 0, 0.4)"; //c.fill(); c.lineWidth = 0.5; c.stroke(); c.beginPath(); c.moveTo(x+m,y+h/2+m); c.lineTo(x+m+d,y+m); c.lineTo(x+m+d,y+h/2+m-t/2); c.lineTo(x+m+d+w-d,y+h/2+m-t/2); c.lineTo(x+m+d+w-d,y+h/2+m+t/2); c.lineTo(x+m+d,y+h/2+m+t/2); c.lineTo(x+m+d,y+h+m); c.lineTo(x+m,y+h/2+m); c.fill(); c.restore(); c.closePath(); } else if(this.dir === "right"){ // Right arrow c.save(); c.fillStyle = "rgba(0, 0, 0, 0.4)"; //c.fill(); c.lineWidth = 0.5; c.stroke(); c.beginPath(); c.moveTo(x+w+m,y+h/2+m); c.lineTo(x+w+m-d,y+m); c.lineTo(x+w+m-d,y+h/2+m-t/2); c.lineTo(x+m,y+h/2+m-t/2); c.lineTo(x+m,y+h/2+m+t/2); c.lineTo(x+m+w-d,y+h/2+m+t/2); c.lineTo(x+m+w-d,y+h+m); c.lineTo(x+w+m,y+h/2+m); c.fill(); c.restore(); c.closePath(); } else if(this.dir === "up"){ // Up arrow c.save(); c.fillStyle = "rgba(0, 0, 0, 0.4)"; //c.fill(); c.lineWidth = 0.5; c.stroke(); c.beginPath(); c.moveTo(this.x + 8, this.y + 35); c.lineTo(this.x + 28, this.y + 10); c.lineTo(this.x + 48, this.y + 35); c.fill(); c.stroke(); c.restore(); c.closePath(); } else if(this.dir ==="shoot"){ // Shoot c.save(); c.fillStyle = "rgba(0, 0, 0, 0.4)"; c.lineWidth = 0.5; c.stroke(); c.beginPath(); c.fill(); c.stroke(); c.restore(); c.closePath(); } }; // Update method this.update = function(){ this.draw(); }; } // Draw Controls objects var left = new Controls(2, canvas.height - 82, 80, 50, "left"); var right = new Controls(90, canvas.height - 82, 80, 50, "right"); var up = new Controls(canvas.width - 60, canvas.height - 82, 57, 50, "up"); var shoot = new Controls(canvas.width - 60, canvas.height - 135, 57, 50, "shoot"); /////////////////////////////////////////////// //////////////// ///////////////// /////////////////////////////////////////////// ///////////////////////////////////////////// ////////////// 4. TOUCH OBJECT ////////////// ///////////////////////////////////////////// // Touch objects var shoot_down, right_down, left_down, up_down; // up_down lol // Touch function to get touch position function getTouchXY(e) { shoot_down = right_down = left_down = up_down = false; for(var i in e.touches) { var x = e.touches[i].clientX, y = e.touches[i].clientY, t = {x:x, y:y, width:10, height:10}; if(collision2(t,shoot)) shoot_down = true; if(collision2(t,right)) right_down = true; if(collision2(t,left)) left_down = true; if(collision2(t,up)) up_down = true; } } // Stop Touch function function stopTouchXY(e){ var x = e.changedTouches[0].clientX, y = e.changedTouches[0].clientY, t = {x: x, y: y, width:10, height:10}, sc = collision2(t, shoot), rc = collision2(t, right), lc = collision2(t, left), uc = collision2(t, up); if(sc) shoot_down = false; if(rc) right_down = false; if(lc) left_down = false; if(uc) up_down = false; } // Listener that gives X and Y on touchmove window.addEventListener("touchstart", getTouchXY); window.addEventListener("touchmove", getTouchXY); window.addEventListener("touchend", stopTouchXY); window.addEventListener("touchcancel", stopTouchXY); ///////////////////////////////////////////// //////////////// /////////////// ///////////////////////////////////////////// // Draw Sun (called in game loop with currentTime and lastTime) //function drawSun(){ // for (var _ = 0; _ < 1; _++){ //x, y, width, height, speed // var obst = new Sun(/*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); // _Suns.push(obst); // } //}//drawSun(); ///////////////////////////////////////////// //////////// COLLISION DETECTION //////////// ///////////////////////////////////////////// // Classic aabb collision 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 } // Modified aabb collision for more precise touches function collision2(a,b){ return a.x - a.width/2 < b.x + b.width && a.x + a.width/2 > b.x && a.y < b.y + b.height && a.y + a.height > b.y; } // 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 // figures out on which side we are colliding (top, bottom, left, or right) if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) { 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 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(); } // Draw bullets and splice them for (var i = _bullets.length - 1; i >= 0; i--){ _bullets[i].update(); if (_bullets[i].x < 0 || _bullets[i].x > canvas.width * scale){ _bullets.splice(i, 1); } } // Set a cooldown on shooting if(shoot_down){ if(currentTime >= lastTime + 300){ lastTime = currentTime; player.shoot(); //log(lastTime, currentTime); } } // Collisions between bullet's and block's // I had to move this here into gameloop from Bullet's class for(var _ = _bullets.length - 1; _ >= 0; _--){ for(var __ = _blocks.length - 1; __ >= 0; __--){ if(collision( _bullets[_], _blocks[__] )){ _bullets.splice(_, 1); _blocks.splice(__, 1); break; //log("Spliced!"); } } } // Collision between bullets and Sun // Same as collision between Sun obj and Player obj for(var _ = _bullets.length - 1; _ >= 0; _--){ if(collision( _bullets[_], obst )){ _bullets.splice(_, 1); player.score_width += 5; obst.x = (Math.random() * canvas.width) * scale; obst.y = Math.random() * canvas.height - 100; } } // Update Sun (finishing block that should be collected) // Draw Sun (final item that should be collected) obst.update(); // Restore for camera effect c.restore(); // Update left, right and up left.update(); // right.update(); // up.update(); shoot.update(); // Run GAMELOOP }GAMELOOP(); }; // End of onload

cubr