-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscript.js
More file actions
95 lines (65 loc) · 2.56 KB
/
script.js
File metadata and controls
95 lines (65 loc) · 2.56 KB
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
93
94
95
// let field = document.getElementById('field');
let ctx = field.getContext("2d"); // Контекст для рисования
document.body.style.backgroundImage = `url("img/background.jpg")`
field.width = window.innerWidth;
field.height= window.innerHeight;
// Корабль №1
let player = {
sprite: new Image(),
size: {x: 100, y:100},
pos: {x: 0, y: 0}
}
// Пуля
let bullet = {
sprite: new Image(),
size: {x: -22.5, y: 63},
pos: {x: 123, y: 35}
}
$(document).ready(function () {
player.sprite.src = "img/shuttle.png";
player.sprite.width = player.size.x;
player.sprite.height = player.size.y;
bullet.sprite.src = "img/bullet1.png";
player.sprite.width = player.size.x;
player.sprite.height = player.size.y;
let bg = new Image(field.width, field.height);
bg.src = "img/background.jpg";
bg.onload = ()=>{
ctx.drawImage(bg, 0, 0);
}
});
$(field).on("click", function(){
// Анимация пули для корабля №1
let start = Date.now();
let y_position = bullet.pos.y // Изначальное положение пули по оси Y
let timer = setInterval(function() {
let timePassed = Date.now() - start;
bullet.pos.y = (y_position); // Скорость движения пули
y_position -= 17;
if (timePassed > 200){
// Заканчиваем анимацию
clearInterval(timer);
// Возвращаем пулю на место
bullet.pos.x = player.pos.x + 123;
bullet.pos.y = player.pos.y + 35;
}
});
});
function renderObject(sprite, posX, posY){
//console.log(sprite)
ctx.drawImage(sprite, posX, posY);
}
$(field).on("mousemove", function(e){
//Положение корабля
player.pos.x = e.offsetX - player.size.x;
player.pos.y = e.offsetY - player.size.y;
//Положение пули
bullet.pos.x = e.offsetX - bullet.size.x;
bullet.pos.y = e.offsetY - bullet.size.y;
});
setInterval(function(){
ctx.clearRect(0, 0, field.width, field.height) // Удаляем картинку каждую 1 секунду 60 раз
// Отрисовка корабля и пули
renderObject(player.sprite, player.pos.x, player.pos.y);
renderObject(bullet.sprite, bullet.pos.x, bullet.pos.y);
}, 1000/60);