Space invaders style doodle using javascript on canvas
Nothing beats wasting time, coding random bits and pieces.
See the Pen yvwip by Sandro Dzneladze (@idev_ge) on CodePen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
// Steup canvas var invadersCanvas = document.getElementById("space-invaders"); var invadersContext = invadersCanvas.getContext("2d"); function draw_invader_boss(pixel,init_x,init_y,color) { invadersContext.fillStyle = color; // Arms and shoulders invadersContext.fillRect(init_x,init_y,pixel,pixel); invadersContext.fillRect(init_x,init_y - pixel,pixel,pixel); invadersContext.fillRect(init_x,init_y - pixel*2,pixel,pixel); invadersContext.fillRect(init_x,init_y - pixel*3,pixel,pixel); invadersContext.fillRect(init_x + pixel,init_y - pixel*3,pixel,pixel); invadersContext.fillRect(init_x + pixel,init_y - pixel*4,pixel,pixel); invadersContext.fillRect(init_x + pixel*2,init_y - pixel*4,pixel,pixel); invadersContext.fillRect(init_x + pixel*2,init_y - pixel*5,pixel,pixel); invadersContext.fillRect(init_x + pixel*3,init_y - pixel*5,pixel,pixel); invadersContext.fillRect(init_x + pixel*4,init_y - pixel*5,pixel,pixel); invadersContext.fillRect(init_x + pixel*5,init_y - pixel*5,pixel,pixel); invadersContext.fillRect(init_x + pixel*6,init_y - pixel*5,pixel,pixel); invadersContext.fillRect(init_x + pixel*6,init_y - pixel*4,pixel,pixel); invadersContext.fillRect(init_x + pixel*7,init_y - pixel*4,pixel,pixel); invadersContext.fillRect(init_x + pixel*7,init_y - pixel*3,pixel,pixel); invadersContext.fillRect(init_x + pixel*8,init_y - pixel*3,pixel,pixel); invadersContext.fillRect(init_x + pixel*8,init_y - pixel*2,pixel,pixel); invadersContext.fillRect(init_x + pixel*8,init_y - pixel,pixel,pixel); invadersContext.fillRect(init_x + pixel*8,init_y,pixel,pixel); // Belly invadersContext.fillRect(init_x + pixel*2,init_y - pixel*3,pixel*5,pixel*4); // Eye divider invadersContext.fillRect(init_x + pixel*4,init_y - pixel*4,pixel,pixel); // Leg left invadersContext.fillRect(init_x + pixel*3,init_y + pixel,pixel,pixel); invadersContext.fillRect(init_x + pixel*3,init_y + pixel*2,pixel,pixel); var leftL = 0; setInterval(function(){ if (leftL == 0) { invadersContext.fillStyle = color; invadersContext.fillRect(init_x + pixel*2,init_y + pixel*2,pixel,pixel); leftL = 1; } else { invadersContext.clearRect(init_x + pixel*2,init_y + pixel*2,pixel,pixel); leftL = 0; } }, 400); // Leg right invadersContext.fillRect(init_x + pixel*5,init_y + pixel,pixel,pixel); invadersContext.fillRect(init_x + pixel*5,init_y + pixel*2,pixel,pixel); var rightL = 0; setInterval(function(){ if (rightL == 0) { invadersContext.fillStyle = color; invadersContext.fillRect(init_x + pixel*6,init_y + pixel*2,pixel,pixel); rightL = 1; } else { invadersContext.clearRect(init_x + pixel*6,init_y + pixel*2,pixel,pixel); rightL = 0; } }, 400); } draw_invader_boss(10,20,90,"blue"); draw_invader_boss(10,150,90,"green"); draw_invader_boss(10,280,90,"black"); draw_invader_boss(10,410,90,"red"); |
Leave a Reply