-
Notifications
You must be signed in to change notification settings - Fork 0
/
alien.html
92 lines (74 loc) · 3.29 KB
/
alien.html
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html>
<head>
</head>
<body>
<canvas style="margin-top: 30px; display: block;padding-left:0;padding-right:0;margin-left: auto;margin-right: auto;"
id ="myCanvas" width="520" height="520"></canvas>
<br>
<marquee>Mission🎖️Helix</marquee>
<marquee>Sukhdev Singh</marquee>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
var alienImageUrls = ["https://i.imgur.com/tvJOu59.png","https://i.imgur.com/e1pkJRF.png","https://i.imgur.com/aRumf1r.png","https://i.imgur.com/jjOPpWL.png","https://i.imgur.com/hsdEpsM.png","https://i.imgur.com/u5eNyl8.png","https://i.imgur.com/tvJOu59.png"];
// ctx.drawImage(alienImage,Object.x,Object.y,Object.width,Object.height);
var alienImages = [];
for (var i=0;i<alienImageUrls.length;i++){
var alienImage = new Image();
alienImage.src = alienImageUrls[i];
alienImages.push(alienImage);
}
var alien = {};
alien.x = 520/2;
alien.y = 520/2;
alien.width = 100;
alien.height = 100;
alien.speed = 7;
alien.images = alienImages;
var counter = 0;
function drawObject (object){
counter++;
var max = object.images.length;
ctx.drawImage(object.images[counter%max], object.x,object.y,object.width,object.height);
}
function update(){
// for removing back effect when image is moving
ctx.fillStyle = '#000000';
ctx.fillRect(0,0,520,520);
// add random x and y (-5 to +5)
var randomX = -5+ Math.random()*10;
var randomY = -5+ Math.random()*10;
alien.x += randomX;
alien.y += randomY;
for (var key in keyMap){
var currentController = keyMap[key];
if (currentController.active){
currentController.onactive();
}
console.log(JSON.stringify(keyMap))
}
drawObject(alien);
}
//for calling update fuctions in every 50ms
setInterval(update,50);
//step-2
var keyMap = {};
keyMap[38] = { name:'up', active:false, onactive: function(){alien.y -= alien.speed; } };
keyMap[40] = { name:'down', active:false, onactive: function(){alien.y += alien.speed; } };
keyMap[37] = { name:'left', active:false, onactive: function(){alien.x -= alien.speed; } };
keyMap[39] = { name:'right', active:false, onactive: function(){alien.x += alien.speed; } };
keyMap[32] = { name:'space', active:false, onactive: function(){ fireBullet(); } };
function handleKey(event,status){
var currentController = keyMap[event.keyCode];
console.log(status);
if(!!currentController){
currentController.active = status;
}
}
document.addEventListener('keydown', function(event){ handleKey(event,true);
});
document.addEventListener('keyup', function(event){ handleKey(event,false);
});
</script>
</body>
</html>