let model = { movementPattern: 'L R L D', } const octopus = { init: () => { this.count = 0; const canvas = document.getElementById('canvas'); canvas.height = innerHeight; canvas.width = innerWidth; let coordinates = new Map(); this.ctx = canvas.getContext('2d'); backgroundView.init(); allyView.init(); enemyView.init(); setInterval(() => { ctx.clearRect(0, 0, innerWidth, innerHeight); backgroundView.render(); allyView.render(); enemyView.render(); missileView.create(); }, 1000); }, move: obj => { if (obj.movementPattern.length > 3) { obj.movementPattern.length = 3 }; if (obj.count >= obj.movementPattern.length) { obj.count = 1 } else { obj.count++; } switch (obj.movementPattern[obj.count - 1]) { case 'L': obj.x -= obj.speed * 50; break; case 'R': obj.x += obj.speed * 50; break; case 'U': obj.y -= obj.speed * 50; break; case 'D': obj.y += obj.speed * 50; break; } return obj; }, shuffle: arr => { let i, j, temp; for (i = arr.length - 1; i > 0; i--) { j = Math.floor(Math.random() * (i + 1)); temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } return arr; }, delete: (objList) => { for (let coordinate of this.coordinates[0]) { for (let obj of objList) { if(obj.x > innerWidth || obj.x < 0){ objList.splice(objList.indexOf(obj)); console.log(obj.x + '>' + innerWidth)} } } for (let coordinate of this.coordinates[1]) { for (let obj of objList) { if(obj.y > innerHeight || obj.y < 0){ objList.splice(objList.indexOf(obj)); console.log(obj.y + '>' + innerHeight)} } } return objList; }, getCoordinates: () => { this.coordinates = [[], []]; for (let i = 25; i < innerWidth; i += 50) { this.coordinates[0][this.coordinates[0].length] = i + 1; } for (let i = 25; i < innerHeight; i += 50) { this.coordinates[1][this.coordinates[1].length] = i + 1; } return this.coordinates; } } const backgroundView = { init: () => { }, render: () => { ctx.fillStyle = '#000'; ctx.fillRect(0, 0, innerWidth, innerHeight); ctx.strokeStyle = 'lightgreen'; ctx.beginPath() for (let i = 25; i < innerWidth; i += 50) { ctx.moveTo(i, 0) ctx.lineTo(i, innerHeight); ctx.stroke(); } for (let i = 25; i < innerHeight; i += 50) { ctx.moveTo(0, i) ctx.lineTo(innerWidth, i); ctx.stroke(); } } } const allyView = { init: () => { this.allyList = []; for (let i = 0; i < 10; i++) { this.ally = allyView.create(); this.allyList[this.allyList.length] = this.ally; } }, create: () => { this.ally = { speed: Math.round(Math.random() * 4) + 1, health: Math.round(Math.random() * 4) + 1, x: this.coordinates[0][Math.round(Math.random() * this.coordinates[0].length)], y: this.coordinates[1][Math.round(Math.random() * this.coordinates[1].length)], count: 0, movementPattern: octopus.shuffle(['L', 'R', 'U', 'D']) } return this.ally; }, render: () => { this.allyList = octopus.delete(this.allyList); ctx.fillStyle = 'lightgreen'; for (let i of this.allyList) { i = octopus.move(i); ctx.fillRect(i.x, i.y, 48, 48); } return this.allyList; } } const enemyView = { init: () => { this.enemyList = []; for (let i = 0; i < 10; i++) { enemyView.create(); } }, create: () => { this.enemy = { speed: Math.round(Math.random() * 4) + 1, health: Math.round(Math.random() * 4) + 1, x: this.coordinates[0][Math.round(Math.random() * this.coordinates[0].length)], y: this.coordinates[1][Math.round(Math.random() * this.coordinates[1].length)], count: 0, movementPattern: octopus.shuffle(['L', 'R', 'U', 'D']) } this.enemyList[this.enemyList.length] = this.enemy; }, render: () => { this.enemyList = octopus.delete(this.enemyList); ctx.fillStyle = 'deepskyblue'; for (let i of this.enemyList) { i = octopus.move(i); ctx.fillRect(i.x, i.y, 48, 48); } return this.enemyList; } } const missileView = { init: () => { }, render: () => { }, create: () => { //console.log(this.allyList) /* let enemyList = []; this.enemyList.forEach(e => enemyList[enemyList.length] = octopus.move(e)); let allyList = []; this.allyList.forEach(e => allyList[allyList.length] = octopus.move(e)); //console.log(enemyList); this.matches = []; for (let i = 0; i + 1 < enemyList.length; i++) { for (let c = 0; c < allyList.length; c++) { let ally = allyList[c]; let enemy = enemyList[i]; if (enemy.y != ally.y) { this.matches[this.matches.length] = enemy; enemyList.splice(enemyList.indexOf(enemyList, 1)); } } } for (let i = 0; i + 1 < matches.length; i++) { ctx.fillStyle = 'red'; ctx.fillRect(matches[i].x, matches[i].y, 48, 48); } */ } } onload = () => { octopus.init(); }

Defend the Base v.1.0 [Contest]