// Created by Christian Barraza // Code by Christian Barraza. alert("How to play!" + "\n\n" + "Match your color (polarization) to the walls to pass through them. Red walls cannot be passed through." + "\n\n" + "Use SPACEBAR to change polarization and the ARROW KEYS to move your ship. (Note: You may have to click the screen first because of SoloLearn)." + "\n\n" + "You could also use the large buttons on the screen if you're on mobile." + "\n\n" + "The longer you last, the higher you score. But the game will speed up the longer you go." + "\n\n" + "Also, keep in mind your ship wraps around the screen." + "\n\n" + "Good luck!" + "\n\n" + "This code was taken by Christian Barraza, except I added a high score shout-out, so comment your scores down below!" + "\n\n" + "Mr.BoopyDooper : 1232" + "\n\n" + "Hey! Have you heard of my game contest? If you haven't, check out my post to find out more!"); window.onload = function() { // Initial Setup var canvas = document.querySelector('canvas'); var c = canvas.getContext('2d'); canvas.width = innerWidth; canvas.height = innerHeight; // Canvas variables var mouse = { x: innerWidth / 2, y: innerHeight / 2 }; var colors = [ 'rgba(236, 12, 55, .7)', 'rgba(0, 236, 223, .7)', 'rgba(223, 197, 0, .7)' ]; var limitedColors = [ 'rgba(0, 236, 223, .7)', 'rgba(223, 197, 0, .7)' ]; // Global variables var restart; var score = 0; var playerPolarization = "positive"; var mouseDown = false; // Checks to see if the player is clicking on the screen. var movingUp = true; // Checks to see if a player is pointing up. var movingLeft = false; // Checks to see if a player is moving left. var movingRight = false; // Checks to see if a player is moving right. var playerSpeed = 4; var wallSpeed1 = 2.4; var wallSpeed2 = 1.4; var wallSpeed = wallSpeed1; var walls = []; // Array to store our randomly generated walls. // Event Listeners window.addEventListener('mousemove', function() { mouse.x = event.clientX; mouse.y = event.clientY; }); window.addEventListener('mousedown', function() { mouseDown = true; // console.log("Mouse X: " + mouse.x + " Mouse Y: " + mouse.y); // console.log("Mouse down."); }); window.addEventListener('mouseup', function() { mouseDown = false; // console.log("Mouse up."); }); window.addEventListener('touchstart', function() { mouse.x = event.changedTouches[0].clientX; mouse.y = event.changedTouches[0].clientY; mouseDown = true; // console.log("Mouse X: " + mouse.x + " Mouse Y: " + mouse.y); // console.log("Mouse down."); }); document.onkeydown = function(event) { switch (event.keyCode) { case 37: // console.log('left'); movingLeft = true; movingRight = false; movingUp = false; break; case 38: // console.log('up'); movingLeft = false; movingRight = false; movingUp = true; break; case 39: // console.log('right'); movingLeft = false; movingRight = true; movingUp = false; break; case 32: // console.log('space'); player.changePolarization(); break; } }; addEventListener('touchend', function() { mouseDown = false; // console.log("Mouse up."); }); addEventListener('resize', function() { canvas.width = innerWidth; canvas.height = innerHeight; init(); }); // Utility Functions function randomIntFromRange(min, max) { return Math.floor(math.random() * (max - min + 1) + min); } function randomColor(colors) { return colors[Math.floor(Math.random() * colors.length)]; } function calculateCollision(player, wall) { if(player.y - player.height < wall.y + wall.height && player.y - player.height > wall.y && player.x - player.size > wall.x && player.x + player.size < wall.x + wall.width && playerPolarization !== wall.polarization && movingUp === true && wall.orientation === 'horizontal') // If moving up and wall is horizontal; { wallSpeed1 = 0; wallSpeed2 = 0; playerSpeed = 0; restart = confirm("Game Over!" + '\n' + "Press OK to restart the game!" + '\n\n' + "Don't forget to comment your high score!" + '\n\n' + "Score: " + score); if(restart) { init(); } else { init(); location.replace('https://www.sololearn.com/Profile/4905817'); } } if(player.y - player.size < wall.y + wall.height && player.y - player.size > wall.y && player.x - player.height > wall.x && player.x + player.size < wall.x + wall.width && playerPolarization !== wall.polarization && movingLeft === true && wall.orientation === 'horizontal') // If moving left and wall is horizontal; { wallSpeed1 = 0; wallSpeed2 = 0; playerSpeed = 0; restart = confirm("Game Over!" + '\n' + "Press OK to restart the game!" + '\n\n' + "Don't forget to comment your high score!" + '\n\n' + "Score: " + score); if(restart) { init(); } else { init(); location.replace('https://www.sololearn.com/Profile/4905817'); } } if(player.y - player.size < wall.y + wall.height && player.y - player.size > wall.y && player.x - player.size > wall.x && player.x + player.height < wall.x + wall.width && playerPolarization !== wall.polarization && movingRight === true && wall.orientation === 'horizontal') // If moving right and wall is horizontal; { wallSpeed1 = 0; wallSpeed2 = 0; playerSpeed = 0; restart = confirm("Game Over!" + '\n' + "Press OK to restart the game!" + '\n\n' + "Don't forget to comment your high score!" + '\n\n' + "Score: " + score); if(restart) { init(); } else { init(); location.replace('https://www.sololearn.com/Profile/4905817'); } } if(player.y - player.height < wall.y + wall.height && player.y + player.size > wall.y && player.x - player.size < wall.x + wall.width && player.x + player.size > wall.x && playerPolarization !== wall.polarization && movingUp === true && wall.orientation === 'vertical') // If moving up and wall is vertical; { wallSpeed1 = 0; wallSpeed2 = 0; playerSpeed = 0; restart = confirm("Game Over!" + '\n' + "Press OK to restart the game!" + '\n\n' + "Don't forget to comment your high score!" + '\n\n' + "Score: " + score); if(restart) { init(); } else { init(); location.replace('https://www.sololearn.com/Profile/4905817'); } } if(player.y - player.size < wall.y + wall.height && player.y + player.size > wall.y && player.x - player.height < wall.x + wall.width && player.x + player.size > wall.x && playerPolarization !== wall.polarization && movingLeft === true && wall.orientation === 'vertical') // If moving left and wall is vertical; { wallSpeed1 = 0; wallSpeed2 = 0; playerSpeed = 0; restart = confirm("Game Over!" + '\n' + "Press OK to restart the game!" + '\n\n' + "Don't forget to comment your high score!" + '\n\n' + "Score: " + score); if(restart) { init(); } else { init(); location.replace('https://www.sololearn.com/Profile/4905817'); } } if(player.y - player.size < wall.y + wall.height && player.y + player.size > wall.y && player.x - player.size < wall.x + wall.width && player.x + player.height > wall.x && playerPolarization !== wall.polarization && movingRight === true && wall.orientation === 'vertical') // If moving left and wall is vertical; { wallSpeed1 = 0; wallSpeed2 = 0; playerSpeed = 0; restart = confirm("Game Over!" + '\n' + "Press OK to restart the game!" + '\n\n' + "Don't forget to comment your high score!" + '\n\n' + "Score: " + score); if(restart) { init(); } else { init(); location.replace('https://www.sololearn.com/Profile/4905817'); } } } // Objects function Button(x, y, radius, color, type, text) { this.x = x; this.y = y; this.radius = radius; this.color = color; this.type = type; this.text = text; this.update = function() { this.draw(); if(mouseDown && mouse.x > this.x - this.radius && mouse.x < this.x + this.radius && mouse.y > this.y - this.radius && mouse.y < this.y + this.radius && this.type == "polarization") { mouseDown = false; // console.log("Polarization was " + polarization); player.changePolarization(); } if(mouseDown && mouse.x > this.x - this.radius && mouse.x < this.x + this.radius && mouse.y > this.y - this.radius && mouse.y < this.y + this.radius && this.type == "up") { // console.log("Polarization was " + polarization); mouseDown = false; movingLeft = false; movingRight = false; movingUp = true; } if(mouseDown && mouse.x > this.x - this.radius && mouse.x < this.x + this.radius && mouse.y > this.y - this.radius && mouse.y < this.y + this.radius && this.type == "left") { mouseDown = false; // console.log("Polarization was " + polarization); movingUp = false; movingRight = false; movingLeft = true; } if(mouseDown && mouse.x > this.x - this.radius && mouse.x < this.x + this.radius && mouse.y > this.y - this.radius && mouse.y < this.y + this.radius && this.type == "right") { mouseDown = false; // console.log("Polarization was " + polarization); movingLeft = false; movingUp = false; movingRight = true; } }; this.draw = function() { c.beginPath(); c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); c.strokeStyle = this.color; c.stroke(); c.fillStyle = this.color; if(mouseDown && mouse.x > this.x - this.radius && mouse.x < this.x + this.radius && mouse.y > this.y - this.radius && mouse.y < this.y + this.radius) { c.fill(); } c.font = "18px Arial"; c.fillText(this.text, this.x, this.y); c.textAlign = "center"; c.textBaseline = 'middle'; c.closePath(); }; } function Wall(x, y, width, height, color, polarization, orientation) { this.x = x; this.y = y; this.width = width; this.height = height; this.color = color; this.polarization = polarization; this.orientation = orientation; this.update = function() { this.draw(); this.moveDown(); }; this.draw = function() { c.beginPath(); c.rect(this.x, this.y, this.width, this.height); c.fillStyle = this.color; c.fill(); c.closePath(); }; this.moveDown = function() { this.y += wallSpeed; }; } function Player(x, y, size, height) { this.x = x; this.y = y; this.size = size; this.height = height; this.changePolarization = function() { if(playerPolarization === "positive") { playerPolarization = "negative"; } else if(playerPolarization === "negative") { playerPolarization = "positive"; } // console.log("Changing polarization to " + playerPolarization); }; this.update = function() { this.draw(); }; this.draw = function() { if(movingUp) { c.beginPath(); c.arc(this.x, this.y, this.size, 0, Math.PI, false); c.lineTo(this.x, this.y - this.height); c.lineTo(this.x + this.size, this.y); c.fillStyle = 'black'; } if(movingRight) { c.beginPath(); c.arc(this.x, this.y, this.size, 0.5 * Math.PI, 1.5 * Math.PI, false); c.lineTo(this.x + this.height, this.y); c.lineTo(this.x, this.y + this.size); c.fillStyle = 'black'; } if(movingLeft) { c.beginPath(); c.arc(this.x, this.y, this.size, 1.5 * Math.PI, 0.5 * Math.PI, false); c.lineTo(this.x - this.height, this.y); c.lineTo(this.x, this.y - this.size); c.fillStyle = 'black'; } if(playerPolarization === "positive") { c.strokeStyle = 'rgba(223, 197, 0, 1)'; } else if(playerPolarization === "negative") { c.strokeStyle = 'rgba(0, 236, 223, 1)'; } c.fill(); c.stroke(); c.closePath(); if(playerPolarization === "positive") { c.beginPath(); c.rect(this.x - (this.size/2), this.y - 2, this.size, 3); c.fillStyle = 'white'; c.fill(); c.strokeStyle = 'white'; c.stroke(); c.rect(this.x - 1, this.y - (this.size / 2), 3, this.size); c.fillStyle = 'white'; c.fill(); c.strokeStyle = 'white'; c.stroke(); c.closePath(); } else if (playerPolarization === "negative") { c.beginPath(); c.rect(this.x - (this.size/2), this.y - 2, this.size, 3); c.fillStyle = 'white'; c.fill(); c.strokeStyle = 'white'; c.stroke(); c.closePath(); } }; this.moveUp = function() { wallSpeed = wallSpeed1; }; this.moveLeft = function() { wallSpeed = wallSpeed2; this.x -= playerSpeed; if(this.x - this.height < 0) { this.x = canvas.width - this.size; } }; this.moveRight = function() { wallSpeed = wallSpeed2; this.x += playerSpeed; if(this.x + this.height > canvas.width) { this.x = 0 + this.size; } }; } function speedUp() { wallSpeed1 += 0.2; wallSpeed2 += 0.2; playerSpeed += 0.2; } // Implementation function init() { c.clearRect(0, 0, innerWidth, innerHeight); playerPolarization = "positive"; score = 0; mouseDown = false; // Checks to see if the player is clicking on the screen. movingUp = true; // Checks to see if a player is pointing up. movingLeft = false; // Checks to see if a player is moving left. movingRight = false; // Checks to see if a player is moving right. playerSpeed = 3; wallSpeed1 = 2.4; wallSpeed2 = 1.4; wallSpeed = wallSpeed1; walls = []; y = -10; player.x = innerWidth / 2; player.y = innerHeight - 80; walls.push(new Wall(width * 1 - 5, 0, 10, width * 6, 'rgba(223, 197, 0, .7)', 'positive', 'vertical')); walls.push(new Wall(width * 2 - 5, 0, 10, width * 6, 'rgba(0, 236, 223, .7)', 'negative', 'vertical')); createWalls(); } // Animation Loop function animate() { for(var i = 0; i < walls.length; i++) { calculateCollision(player, walls[i]); } requestAnimationFrame(animate); c.clearRect(0, 0, canvas.width, canvas.height); c.fillStyle = 'white'; c.font = "12px Arial"; c.fillText("Score: " + score, innerWidth - 100, 20); player.update(); changePolarization.update(); if(movingUp) { player.moveUp(); } if (movingLeft) { player.moveLeft(); } if(movingRight) { player.moveRight(); } moveUp.update(); moveLeft.update(); moveRight.update(); for (var i = 0; i < walls.length; i++) { walls[i].update(); } } var width = innerWidth / 3; var y = -10; // Object calls walls.push(new Wall(width * 1 - 5, 0, 10, width * 6, 'rgba(223, 197, 0, .7)', 'positive', 'vertical')); walls.push(new Wall(width * 2 - 5, 0, 10, width * 6, 'rgba(0, 236, 223, .7)', 'negative', 'vertical')); function createWalls() { for(var n = 0; n <= 600; n++) { for(var i = 0; i <= 3; i++) { var width = innerWidth / 3; var x = width * i; var width = innerWidth / 3; var height = 10; var color = randomColor(colors); var polarization; if(i === 1 && n % 2 === 0) { color = randomColor(limitedColors); } if((i === 0 || i === 2) && n % 2 !== 0) { color = randomColor(limitedColors); } if(color === 'rgba(236, 12, 55, .7)') { polarization = "none"; } else if (color === 'rgba(0, 236, 223, .7)') { polarization = "negative"; } else if (color === 'rgba(223, 197, 0, .7)') { polarization = "positive"; } walls.push(new Wall(x, y, width, height, color, polarization, 'horizontal')); if(i === 1 || i === 2) { color = randomColor(colors); if(i === 1 && n % 2 === 0) { color = randomColor(limitedColors); } if(i === 2 && n % 2 !== 0) { color = randomColor(limitedColors); } if(color === 'rgba(236, 12, 55, .7)') { polarization = "none"; } else if (color === 'rgba(0, 236, 223, .7)') { polarization = "negative"; } else if (color === 'rgba(223, 197, 0, .7)') { polarization = "positive"; } walls.push(new Wall(x - 5, y - width, height, width, color, polarization, 'vertical')); } if(i == 2) { y -= width + height; } } } } var changePolarization = new Button(innerWidth - (innerWidth - 100), innerHeight - 180, 60, "rgba(206, 225, 255, 0.5)", "polarization", "Polarize"); var moveUp = new Button(innerWidth - 120, innerHeight - 220, 40, "rgba(206, 225, 255, 0.5)", "up", "Up"); var moveLeft = new Button(innerWidth - 180, innerHeight - 140, 40, "rgba(206, 225, 255, 0.5)", "left", "Left"); var moveRight = new Button(innerWidth - 60, innerHeight - 140, 40, "rgba(206, 225, 255, 0.5)", "right", "Right"); var player = new Player(innerWidth / 2, innerHeight - 80, 18, 36); // Function calls setInterval(speedUp, 6000); setInterval(function(){score++;}, 100); createWalls(); animate(); };

Polarize**GAME**

PolarizeGAME