// VECTOR DEFINITION ========== function Vector(x=0, y=0) { this.x = x; this.y = y; } Vector.prototype.add = function(vector) { return new Vector (this.x + vector.x, this.y + vector.y); } Vector.prototype.adds = function(vector) { this.x += vector.x; this.y += vector.y; } Vector.prototype.sub = function(vector) { return new Vector (this.x - vector.x, this.y - vector.y); } Vector.prototype.subs = function(vector) { this.x -= vector.x; this.y -= vector.y; } Vector.prototype.mult = function(num) { return new Vector (num*this.x, num*this.y); } Vector.prototype.mults = function(num) { this.x *= num; this.y *= num; } Vector.prototype.div = function(num) { return new Vector (this.x/num, this.y/num); } Vector.prototype.divs = function(num) { this.x /= num; this.y /= num; } Vector.prototype.scale = function(vector) { return new Vector (this.x*vector.x, this.y*vector.y); } Vector.prototype.scales = function(vector) { this.x *= vector.x; this.y *= vector.y; } Object.defineProperty(Vector.prototype, 'xy', { get: function() { return [this.x, this.y]; }, set: function(value) { this.x = value[0]; this.y = value[1]; } }); Object.defineProperty(Vector.prototype, 'length', { get: function() { return Math.hypot(this.x, this.y); }, set: function(value) { let len = this.length; this.x *= value/len; this.y *= value/len; } }); Object.defineProperty(Vector.prototype, 'cos', { get: function() { return this.x / Math.hypot(this.x, this.y); } }); Object.defineProperty(Vector.prototype, 'sin', { get: function() { return this.y / Math.hypot(this.x, this.y); } }); // ==================== // TRANSFORM DEFINITION ========== function Transform() { this.matrix = [0, 0, // translate 1, 1, // scale 1, 0]; // rotate (cw) this.move = function(vector) { this.matrix[0] += vector.x; this.matrix[1] += vector.y; } this.rotate = function(angle) { let sina = this.matrix[5]; let cosa = this.matrix[4]; let sinda = Math.sin(angle); let cosda = Math.cos(angle); let sinb = sina*cosda + cosa*sinda; let cosb = cosa*cosda - sina*sinda; this.matrix[5] = sinb; this.matrix[4] = cosb; } this.trig = function(vector) { this.matrix[4] = vector.cos; this.matrix[5] = vector.sin; } this.getInverse = function() { let trsf = new Transform(); trsf.matrix = [ -this.matrix[0], -this.matrix[1], 1/this.matrix[2], 1/this.matrix[3], this.matrix[4], -this.matrix[5] ]; return trsf; } this.applyToPoint = function(vector) { let sx, sy, rotx, roty; //scaling sx = vector.x*this.matrix[2]; sy = vector.y*this.matrix[3]; //rotating rotx = sx*this.matrix[4]-sy*this.matrix[5]; roty = sx*this.matrix[5]+sy*this.matrix[4]; //translating vector.x = rotx + this.matrix[0]; vector.y = roty + this.matrix[1]; return vector; } this.applyToPath = function(path) { let newPath = []; let sx, sy, rotx, roty, x, y; for(let i = 0; i < path.length; i += 2) { //scaling sx = path[i]*this.matrix[2]; sy = path[i+1]*this.matrix[3]; //rotating rotx = sx*this.matrix[4]-sy*this.matrix[5]; roty = sx*this.matrix[5]+sy*this.matrix[4]; //translating x = rotx + this.matrix[0]; y = roty + this.matrix[1]; newPath.push(x); newPath.push(y); } return newPath; } } Object.defineProperty (Transform.prototype, 'translate', { get: function() { return new Vector(this.matrix[0], this.matrix[1]); }, set: function(vector) { this.matrix[0] = vector.x; this.matrix[1] = vector.y; } }); Object.defineProperty(Transform.prototype, 'scale', { get: function() { return new Vector(this.matrix[2], this.matrix[3]); }, set: function(vector) { this.matrix[2] = vector.x; this.matrix[3] = vector.y; } }); Object.defineProperty(Transform.prototype, 'angle', { get: function() { return Math.atan(this.matrix[5]/this.matrix[4]); }, set: function(value) { this.matrix[4] = Math.cos(value); this.matrix[5] = Math.sin(value); } }); // ==================== // MESH DEFINITION ========== var DrawMeshTarget; // canvas function Mesh(path=[]) { this.path = path; this.pushPoint = function(vector) { this.path.push(vector.x); this.path.push(vector.y); } this.draw = function(transform) { let path = transform.applyToPath(this.path); let target = DrawMeshTarget; target.beginPath(); target.moveTo(path[0], path[1]); for(let i = 2; i < path.length; i += 2) target.lineTo(path[i], path[i+1]); target.closePath(); target.stroke(); } this.isInside = function(x, y) { let px1, py1, px2, py2; for(let i = 2; i < this.path.length; i += 2) { [px1,py1,px2,py2] = this.path.slice(i-2, 4); if((y-py1)*(y-py2) < 0) { let k = px1 + (px2-px1)*(y-py1)/(py2-py1); if(k >= x) return true; } } return false; } } // ==================== // SPRITE DEFINITION ========== function Sprite() { this.mesh = new Mesh; this.transform = new Transform; this.color = 'white'; this.behaviors = []; this.update = function() { for(let b of this.behaviors) b.update(); } this.draw = function() { DrawMeshTarget.fillStyle = this.color; this.mesh.draw(this.transform); DrawMeshTarget.fill(); } this.addBehavior = function(b) { b.container = this; this.behaviors.push(b); } } // ==================== // INPUT HANDLER DEFINITION var Input = { pos: new Vector, newpos: new Vector, delta: new Vector, clicked: false, dragging: false, dragStart: false, dragEnd: false, dragStart: new Vector, ratio: new Vector }; Input.Delta = function() { return this.newpos.sub(this.pos).scale(this.ratio); } Input.update = function() { this.delta.xy = this.pos.xy; this.pos.xy = this.newpos.xy; this.delta = this.pos.sub (this.delta).scale(this.ratio); this.clicked = false; this.dragEnd = false; this.dragStart = false; } Input.handleClick = function(event) { this.clicked = true; this.newpos.xy = [event.pageX, event.pageY]; } Input.handleDragStart = function(event) { this.dragging = this.dragStart = true; this.dragStart.xy = this.pos.xy = this.newpos.xy = [event.touches[0].pageX, event.touches[0].pageY]; } Input.handleDragMove = function(event) { this.newpos.xy = [event.touches[0].pageX, event.touches[0].pageY]; } Input.handleDragEnd = function(event) { this.dragging = false; this.dragEnd = true; } Input.link = function(element) { canvas.onclick = e => this.handleClick(e); canvas.ontouchstart = e => this.handleDragStart(e); canvas.ontouchmove = e => this.handleDragMove(e); canvas.ontouchend = e => this.handleDragEnd(e); this.ratio.x = canvas.width/window.innerWidth; this.ratio.y = canvas.height/window.innerHeight; if(this.ratio.length > 3) console.log("some errors with resizing, plz restart: " + this.ratio.xy) } // ==================== // TIME HANDLING ===== var Time = { time: 0, // ms from now delta: 0, // ms _start: Date.now(), paused: false }; Time.reset = function() { this._start = Date.now(); this.time = 0; } Time.update = function() { let newTime = Date.now(); if(!this.paused) { this.delta = newTime - this.time - this._start; this.time = newTime - this._start; } else { this.delta = 0; this._start = newTime - this.time; } } Time.pause = function() { this.paused = true } Time.resume = function() { this.paused = false } Object.defineProperty(Time, 's', { get: function() { return Time.time / 1000; } }); Object.defineProperty(Time, 'dt', { get: function() { return Time.delta / 1000; } }) // ==================== // SOME BEHAVIORS ===== function ColliderBehavior() { this.container = null; this.target = null; // other sprite this.overlapped = false; this.colpoint; this.oncollide = (x, y) => {}; // collision point this.onoverlap = () => {}; this.hasCollision = function() { let cp = this.container.transform.applyToPath (this.container.mesh.path); let tp = this.target.transform.applyToPath (this.target.mesh.path); let count = 0; for(let i = 0; i < tp.length; i += 2) { let x = tp[i], y = tp[i+1]; let px1, py1, px2, py2; px1 = cp[cp.length-2]; py1 = cp[cp.length-1]; px2 = cp[0]; py2 = cp[1]; if((y-py1)*(y-py2) < 0) if(!(x>px1 && x>px2)) if(px1>x && px2>x) count++; else { let k = px1 + (px2-px1)*(y-py1)/(py2-py1); if(k >= x) count++; } for(let i = 2; i < cp.length; i += 2) { //[px1,py1,px2,py2] = cp.slice(i-2, 4); px1 = cp[i-2]; py1 = cp[i-1]; px2 = cp[i]; py2 = cp[i+1]; if((y-py1)*(y-py2) >= 0) continue; if(x>px1 && x>px2) continue; if(px1>x && px2>x) { count++; continue; } { let k = px1 + (px2-px1)*(y-py1)/(py2-py1); if(k >= x) count++; } } if(count % 2 == 1) { this.colpoint = new Vector(x, y); return true; } } return false; } this.update = function() { let collis = this.hasCollision(); if(!this.overlapped && collis) this.oncollide(...this.colpoint.xy); else if(collis) this.onoverlap(); this.overlapped = collis; } } function PhysicsBehavior() { this.container = null; this.speed = new Vector; // px/s this.maxSpeed = Infinity; this.update = function() { let obj = this.container; obj.transform.move(this.speed.mult(Time.dt)); } this.stop = function() { this.speed.xy = [0, 0]; } this.accelerate = function(vector) { this.speed.adds(vector); this.speed.length = Math.min (this.speed.length, this.maxSpeed); } } // ==================== // ++++++++++++++++++++ // LEVEL MANAGEMENT function Level() { this.player = new Sprite; this.bound = new Sprite; this.progress = new Sprite; this.score = 1; this.ended = false; this.enemies = []; this.speed = 0; this.bullets = []; // ⬆️angular velocity deg. // spetial data for level action this.levelData = null; this.bIndex = 0; this.sIndex = 0; /* format for this value: { name: 'level name', author: 'author', duration: null, // autosets in editor (in sec) enemies: 4, // level enemies count spin: [ // rotation motion of game field { time: 4, // s from level start speed: -30, // deg }, {}, ... ], bullets: [ { id: 2, // enemy id, which shoot [toPlayer: true, // std to center ] [type: 1, // (std 1=▶️) 2=🔷 3=🔵 ] [lifetime: 3, // s. For type=2 ] amount: 5, // amount for one shoot speed: 200, // px per second time: 20, // s, from start level duration: 0, // s, (0=one shoot) cone: 30, // deg, cone angle offset: -5 // deg, offset from target } ] } */ } // define objects' meshes and transformation Level.prototype.init = function() { // global circle mesh this.circleMesh = new Mesh; { let k = 40; // quality value (min 30) let p = new Vector(0.5, 0); let t = new Transform; t.angle = 2*Math.PI / k; for(let i = 0; i < k; i++) { this.circleMesh.pushPoint(p); p = t.applyToPoint(p); } } this.player.mesh = this.bound.mesh = this.progress.mesh = this.circleMesh; this.player.transform.translate = this.bound.transform.translate = this.progress.transform.translate = new Vector(300, 400); this.player.transform.scale = new Vector(20, 20); this.bound.transform.scale = new Vector(560, 560); this.progress.transform.scale = new Vector; // define enemies let count = this.lvlData.enemies; for(let i = 0; i < count; i++) { let enemy = new Sprite; enemy.mesh = this.circleMesh; enemy.transform.translate = new Vector(300, 400); enemy.transform.scale = new Vector(40, 40); let a = i/count*2*Math.PI - Math.PI/2; enemy.transform.move(new Vector (Math.cos(a), Math.sin(a)).mult(300)); enemy.angle = a + Math.PI/2; this.enemies.push(enemy); } } // preloads all bullets and rotations // in time ordered in the lvlData object // + replaces continuous shoots with static Level.prototype.preloadData = function(data) { let cop = a => { return Object.assign({}, a) }; let bullets = data.bullets.map(cop); let spins = data.spins.map(cop); this.lvlData = Object.assign({}, data); this.lvlData.bullets = bullets; this.lvlData.spins = spins; // extracting continuos bullets for(let i = this.lvlData.bullets.length; i-- > 0;) if(this.lvlData.bullets[i].duration > 0) { let times = this.lvlData.bullets[i].duration; times = Math.floor(10 * times); while(times > 0) { let tmp = Object.assign ({}, this.lvlData.bullets[i]); tmp.time += times*0.1; this.lvlData.bullets.push(tmp); times--; } delete this.lvlData.bullets[i]; } // filtering this.lvlData.bullets = this.lvlData.bullets. filter(b => b !== undefined); // sorting let s = (a, b) => {return a.time-b.time}; this.lvlData.bullets.sort(s); this.lvlData.spins.sort(s); } // mainloop for gameplay Level.prototype.start = function() { this.init(); Time.reset(); let level = this; this.mainloop = setInterval(function() { if(!Time.paused) level.handleInput(); level.update(); //level.render(); }, 1000/60); this.render(); } // ends game Level.prototype.end = function() { clearInterval(this.mainloop); this.ended = true; } // dont call manually! Level.prototype.handleInput = function() { // applying player's position if(Input.dragging) { let speed = Input.Delta(); this.player.transform.move(speed); // if out of bounds - go to center if(Math.hypot(...this.player.transform. translate.sub(new Vector(300, 400)). xy) > 280 - 20) { let t = this.player.transform.translate; t.subs(new Vector(300, 400)); t.length = 280 - 20; t.adds(new Vector(300, 400)); this.player.transform.translate = t; } // setting scales and rotation let x = speed.length; if(x != 0) { this.player.transform.matrix[3] = 20*Math.exp(-x/10); let max = 15; this.player.transform.matrix[2] = max-1/(x-1/(20-max)); this.player.transform.trig(speed); } else this.player.transform.scale = this.player.transform.scale.mult(9). add(new Vector(20, 20)).div(10); } else if(Input.dragEnd) this.player.transform.scale = new Vector(20, 20); } Level.prototype.update = function() { this.checkShoot(); this.checkSpin(); this.updateEnemies(); this.updateBullets(); this.updateProgress(); Time.update(); Input.update(); } Level.prototype.checkShoot = function() { //console.log(Time.s); if(this.bIndex < this.lvlData.bullets.length && this.lvlData.bullets[this.bIndex].time <= Time.s) this.shoot(); //console.log(this.lvlData.bullets[this.bIndex].time); } Level.prototype.shoot = function() { let bul = this.lvlData.bullets[this.bIndex++]; bul.offset *= Math.PI/180; bul.cone *= Math.PI/180; //alert(bul.speed + bul.amount); for(let i = 0; i < bul.amount; i++) { let a = bul.offset + bul.cone* (i/(bul.amount)-1/2); let bullet = new Sprite; bullet.transform.translate = this.enemies[bul.id].transform.translate; bullet.addBehavior(new PhysicsBehavior); bullet.mesh = new Mesh([-5,-5,10,0,-5,5]); if(bul.type == 2) { bullet.mesh = new Mesh([0,0,-12,12,-24,0,-12,-12]); let level = this; bullet.behaviors[0].update = function() { if((bullet.lifetime -= Time.dt) > 0) bullet.behaviors[0].accelerate (level.player.transform.translate. sub(bullet.transform.translate).mult(0.75)); bullet.transform.move(bullet. behaviors[0].speed.mult(Time.dt)); bullet.transform.trig (bullet.behaviors[0].speed); } bullet.behaviors[0].maxSpeed = bul.speed; bullet.lifetime = bul.lifetime || 3; } else if(bul.type == 3) { bullet.mesh = this.circleMesh; bullet.transform.scale = new Vector(40, 40); } if(bul.toPlayer) bullet.behaviors[0].speed = this.player.transform.translate.sub (bullet.transform.translate); else bullet.behaviors[0].speed = new Vector(300, 400).sub (bullet.transform.translate); a += Math.atan2 (bullet.behaviors[0].speed.y, bullet.behaviors[0].speed.x); bullet.behaviors[0].speed = new Vector (Math.cos(a), Math.sin(a)).mult(bul.speed); bullet.transform.trig(bullet.behaviors[0].speed); // collider here bullet.addBehavior(new ColliderBehavior); bullet.behaviors[1].target = this.player; bullet.behaviors[1].oncollide = (x, y) => { if(bullet.color != 'red') { bullet.color = 'red'; this.score -= 1/this.lvlData.bullets.length; } }; this.bullets.push(bullet); } } Level.prototype.checkSpin = function() { if(this.sIndex >= this.lvlData.spins.length) return; let sp1 = this.lvlData.spins[this.sIndex]; let sp2; if(this.sIndex+1 < this.lvlData.spins.length) sp2 = this.lvlData.spins[this.sIndex+1]; else sp2 = {time: Infinity, speed: 0}; this.speed += Time.dt * (sp2.speed-sp1.speed)/(sp2.time-sp1.time); if(Time.s > sp2.time) { this.speed = sp2.speed; this.sIndex++; } } Level.prototype.updateEnemies = function() { let da = this.speed*Math.PI/180*Time.dt; for(let enemy of this.enemies) { let t = enemy.transform.translate; t.subs(new Vector(300, 400)); enemy.angle += da; let a = enemy.angle - Math.PI/2; t = new Vector (300 + 300*Math.cos(a), 400 + 300*Math.sin(a)); enemy.transform.translate = t; } } Level.prototype.updateBullets = function() { for(let bullet of this.bullets) bullet.update(); this.bullets = this.bullets.filter(bullet => { let pos = bullet.transform.translate; pos.subs(new Vector(300, 400)); if(pos.length < 280) return true; let speed = bullet.behaviors[0].speed; return pos.x*speed.x + pos.y*speed.y < 0; }); } Level.prototype.updateProgress = function() { let prog = Time.s / this.lvlData.duration; prog = Math.min(prog, 1); this.progress.transform.scale = this.bound.transform.scale.mult(prog); if(Time.s - this.lvlData.duration > 2) { this.end(); showScore(Math.max(0,Math.floor(100*this.score))); } } Level.prototype.render = function() { let level = this; setTimeout(function r() { //let level = level1; DrawMeshTarget.fillStyle = 'white'; DrawMeshTarget.fillRect (0, 0, canvas.width, canvas.height); DrawMeshTarget.lineWidth = 3; level.bound.draw(); DrawMeshTarget.lineWidth = 1; level.progress.draw(); DrawMeshTarget.lineWidth = 5; level.player.draw(); DrawMeshTarget.lineWidth = 2; for(let enemy of level.enemies) enemy.draw(); for(let bullet of level.bullets) bullet.draw(); if(!level.ended) window.requestAnimationFrame(r); }, 1000/60); } // ++++++++++++++++++++ // ==================== window.onload = function() { var canvas = document.getElementById('canvas'); Input.link(canvas); DrawMeshTarget = canvas.getContext('2d'); }

Soundodger [CLONE] (native JS)