//variables for game objects var player; var rotator; var collidables; //variables for input from player var mouseDown; //variables which are globally used anywhere var can; var c; var collidablesClass = [Point, Bomb, BombRotating, BombFast, BombSin]; //all possible collidables var frame; var lost; //start of the program: window.onload = function(){ can = document.getElementById("can"); can.width = window.innerWidth; can.height = window.innerHeight; c = can.getContext("2d"); reset(); //input on touch device can.addEventListener("touchstart", function(e){ if(lost){ lost = false; reset(); return; } e.preventDefault(); var angle = Math.atan2(e.touches[0].clientY - can.height/2, e.touches[0].clientX - can.width/2); rotator.setRotation(angle); }); can.addEventListener("touchmove", function(e){ e.preventDefault(); var angle = Math.atan2(e.touches[0].clientY - can.height/2, e.touches[0].clientX - can.width/2); rotator.setRotation(angle); }); //input on non touch device can.addEventListener("mousedown", function(e){ if(lost){ lost = false; reset(); return; } e.preventDefault(); var angle = Math.atan2(e.clientY - can.height/2, e.clientX - can.width/2); rotator.setRotation(angle); mouseDown = true; }); can.addEventListener("mousemove", function(e){ if(mouseDown) { e.preventDefault(); var angle = Math.atan2(e.clientY - can.height / 2, e.clientX - can.width / 2); rotator.setRotation(angle); } }); can.addEventListener("mouseup", function (e) { e.preventDefault(); mouseDown = false; }); loop(); }; //resets the game function reset(){ player = new Player(can.width/2, can.height/2, 50); rotator = new Rotator(can.width/2, can.height/2, 100, Math.PI*7/6); collidables = []; mouseDown = false; frame = 0; lost = false; } //game-loop function loop(){ c.fillStyle = "#FFFFFF"; c.fillRect(0, 0, can.width, can.height); player.show(c); rotator.show(c); for(var i=0;i=0;i--){ collidables[i].update(); if(rotator.touchingCollidable(collidables[i]) || player.touchingCollidable(collidables[i])){ collidables.splice(i, 1); } } if(player.points <= 0){ lost = true; } }else{ //lost screen c.fillStyle = "#333333"; c.font = "64px Comic Sans MS"; c.textAlign = "center"; c.textBaseline = "middle"; c.fillText("press to retry", can.width/2, can.height/3); } frame++; requestAnimationFrame(loop); } //player keeps track of points function Player(x, y, radius){ this.x = x; this.y = y; this.radius = radius; this.points = 100; this.score = 0; this.show = function(c){ c.lineWidth = this.width; c.fillStyle = "#0099ff"; c.beginPath(); c.arc(this.x, this.y, this.radius, 0, 2*Math.PI); c.fill(); c.fillStyle = "#FFFFFF"; c.font = "25px Comic Sans MS"; c.textAlign = "center"; c.textBaseline = "middle"; c.fillText(this.points.toFixed(1), this.x, this.y - 15); c.font = "10px Comic Sans MS"; c.fillText(this.score.toFixed(2) + " sec", this.x, this.y + 15); }; this.update = function(){ this.points -= 0.01; this.score += 1/60; }; this.touchingCollidable = function(collidable){ if(collidable.distance < this.radius){ if(collidable instanceof Point){ this.points += 10; }else{ this.points -= 15; if(this.points < 0){ this.points = 0; } } return true; } return false; }; } //controlled by the player, destroys anything touching it function Rotator(x, y, radius, size){ this.x = x; this.y = y; this.radius = radius; this.rotation = 0; this.goalAngle = 0; this.size = size; this.width = 10; this.show = function(c){ c.lineWidth = this.width; c.strokeStyle = "#000000"; c.beginPath(); c.arc(this.x, this.y, this.radius, this.rotation, this.rotation + this.size); c.stroke(); }; this.update = function(){ if(this.rotation > 2*Math.PI){ this.rotation -= 2*Math.PI; } if(this.rotation < 0){ this.rotation += 2*Math.PI; } var add1 = (this.goalAngle - this.rotation) / 5; var add2 = (this.goalAngle + 2*Math.PI - this.rotation) / 5; if(Math.abs(add1) < Math.abs(add2)){ this.rotation += add1; }else{ this.rotation += add2; } }; this.setRotation = function(angle){ this.goalAngle = angle + (2*Math.PI - this.size)/2; }; this.touchingCollidable = function(collidable){ if(Math.abs(collidable.distance - this.radius) < this.width + collidable.radius){ if(this.rotation + this.size > 2*Math.PI){ return !(collidable.angle < this.rotation && collidable.angle > this.rotation + this.size - 2*Math.PI); }else{ return (collidable.angle > this.rotation && collidable.angle < this.rotation + this.size); } } }; } /* general collidable (for extention purposes): function Collidable(x, y, angle, distance){ this.x = x; (middle of canvas) this.y = y; (middle of canvas) this.angle = angle; (angle from middle to this) this.distance = distance; (distance from middle to this) this.radius = 10; (radius of this) (rotating vars) (additional vars) this.show = function(c){ (c is the canvas context) ... } this.update = function(){ ... } } */ //increases the points of the player when hitting him function Point(x, y, angle, distance){ this.x = x; this.y = y; this.angle = angle; this.distance = distance; this.radius = 10; this.show = function(c){ c.fillStyle = "#0099ff"; c.lineWidth = 1; c.beginPath(); c.arc(this.x + this.distance * Math.cos(this.angle), this.y + this.distance * Math.sin(this.angle), this.radius, 0, 2*Math.PI); c.fill(); }; this.update = function(){ this.distance -= 3; }; } //decreases the points of the player when hitting him function Bomb(x, y, angle, distance){ this.x = x; this.y = y; this.angle = angle; this.distance = distance; this.radius = 10; this.rotation = Math.random(); this.rotationAdd = (Math.random()-0.5)/10; this.show = function(c){ c.fillStyle = "#FF0000"; c.lineWidth = 1; c.beginPath(); c.moveTo(this.x + this.distance * Math.cos(this.angle) + this.radius * Math.cos(this.rotation), this.y + this.distance * Math.sin(this.angle) + this.radius * Math.sin(this.rotation)); for(var i=1;i<3;i++){ c.lineTo(this.x + this.distance * Math.cos(this.angle) + this.radius * Math.cos(this.rotation + 2*Math.PI*(i/3)), this.y + this.distance * Math.sin(this.angle) + this.radius * Math.sin(this.rotation + 2*Math.PI*(i/3))); } c.fill(); }; this.update = function(){ this.distance -= 2; this.rotation += this.rotationAdd; }; } //decreases the points of the player when hitting him function BombRotating(x, y, angle, distance){ this.x = x; this.y = y; this.angle = angle; this.distance = distance; this.radius = 10; this.rotation = Math.random(); this.rotationAdd = (Math.random()-0.5)/10; this.angleAdd = (Math.random()-0.5)/50; this.show = function(c){ c.fillStyle = "#FF0000"; c.lineWidth = 1; c.beginPath(); c.moveTo(this.x + this.distance * Math.cos(this.angle) + this.radius * Math.cos(this.rotation), this.y + this.distance * Math.sin(this.angle) + this.radius * Math.sin(this.rotation)); for(var i=1;i<3;i++){ c.lineTo(this.x + this.distance * Math.cos(this.angle) + this.radius * Math.cos(this.rotation + 2*Math.PI*(i/3)), this.y + this.distance * Math.sin(this.angle) + this.radius * Math.sin(this.rotation + 2*Math.PI*(i/3))); } c.fill(); c.fillStyle = "#9900FF"; c.beginPath(); c.moveTo(this.x + this.distance * Math.cos(this.angle) + this.radius * Math.cos(this.rotation + 2*Math.PI*(0.5/3)), this.y + this.distance * Math.sin(this.angle) + this.radius * Math.sin(this.rotation + 2*Math.PI*(0.5/3))); for(var i=1.5;i<3;i++){ c.lineTo(this.x + this.distance * Math.cos(this.angle) + this.radius * Math.cos(this.rotation + 2*Math.PI*(i/3)), this.y + this.distance * Math.sin(this.angle) + this.radius * Math.sin(this.rotation + 2*Math.PI*(i/3))); } c.fill(); }; this.update = function(){ this.distance -= 2; this.angle += this.angleAdd; this.rotation += this.rotationAdd; if(this.angle > 2*Math.PI){ this.angle -= 2*Math.PI; } if(this.angle < 0){ this.angle += 2*Math.PI; } }; } //decreases the points of the player when hitting him function BombFast(x, y, angle, distance){ this.x = x; this.y = y; this.angle = angle; this.distance = distance; this.radius = 10; this.rotation = Math.random(); this.rotationAdd = (Math.random()-0.5)/10; this.show = function(c){ c.fillStyle = "#FF00AA"; c.lineWidth = 1; c.beginPath(); c.moveTo(this.x + this.distance * Math.cos(this.angle) + this.radius * Math.cos(this.rotation), this.y + this.distance * Math.sin(this.angle) + this.radius * Math.sin(this.rotation)); for(var i=1;i<3;i++){ c.lineTo(this.x + this.distance * Math.cos(this.angle) + this.radius * Math.cos(this.rotation + 2*Math.PI*(i/3)), this.y + this.distance * Math.sin(this.angle) + this.radius * Math.sin(this.rotation + 2*Math.PI*(i/3))); } c.fill(); }; this.update = function(){ this.distance -= 4; this.rotation += this.rotationAdd; }; } //decreases the points of the player when hitting him function BombSin(x, y, angle, distance){ this.x = x; this.y = y; this.angle = angle; this.distance = distance; this.radius = 10; this.rotation = Math.random(); this.rotationAdd = (Math.random()-0.5)/10; this.timeStep = 0; this.show = function(c){ c.fillStyle = "#ff9900"; c.lineWidth = 1; c.beginPath(); c.moveTo(this.x + this.distance * Math.cos(this.angle) + this.radius * Math.cos(this.rotation), this.y + this.distance * Math.sin(this.angle) + this.radius * Math.sin(this.rotation)); for(var i=1;i<6;i++){ c.lineTo(this.x + this.distance * Math.cos(this.angle) + this.radius * Math.cos(this.rotation + 2*Math.PI*(i/3)), this.y + this.distance * Math.sin(this.angle) + this.radius * Math.sin(this.rotation + 2*Math.PI*(i/3))); } c.fill(); }; this.update = function(){ this.distance -= 2; this.rotation += this.rotationAdd; this.angle += Math.sin(this.timeStep/12)/30; if(this.angle > 2*Math.PI){ this.angle -= 2*Math.PI; } if(this.angle < 0){ this.angle += 2*Math.PI; } this.timeStep++; }; }

Protect || game