Реализовал логику поворотов персонажа при нажатии клавиш: ←, →, ↑, ↓. Но есть проблема, т.к. привязался к градусам, то при нахождении в позиции Up и необходимости сделать поворот Left, получается угол 270
градусов, что есть не естественным для пользователя. Подскажите, как решить этот вопрос? Код ниже.
document.onkeydown = function (event){
if (event.key == 'ArrowRight'){
Player.direction.transform = 0;
};
if (event.key == 'ArrowLeft') {
Player.direction.transform = 180;
};
if (event.key == 'ArrowDown'){
Player.direction.transform = 90;
};
if (event.key == 'ArrowUp'){
Player.direction.transform = -90;
};
Player.renderPosition(htmlPlayer,Player);
};
Весь код:
<div id="dot" style="
position: fixed;
border-radius: 50%;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
transition: transform .3s;
-webkit-transition: transform .3s;
-moz-transition: transform .3s;
-o-transition: transform .3s;">
</div>
var htmlPlayer = $('#dot');
var GameMap = {
width: $(window).width(),
height: $(window).height()
};
var Player = {
sizes: {
width: 36,
height: 36
},
position: {
top: 0,
left: 0
},
direction: {
transform: 0
},
speed: 1.5,
backgroundImage: 'img/player.png',
setPosition: function(pos){
switch(pos){
case 'top':
this.position.top = 0;
this.position.left = GameMap.width / 2 - (this.sizes.width/2);
break
case 'left':
this.position.left = 0;
this.position.top = GameMap.height / 2 - (this.sizes.height/2);
break
case 'center':
this.position.top = GameMap.height / 2 - (this.sizes.height/2);
this.position.left = GameMap.width / 2 - (this.sizes.width/2);
break
case 'bottom':
this.position.top = GameMap.height - (this.sizes.height);
this.position.left = GameMap.width / 2 - (this.sizes.width/2);
break
case 'right':
this.position.top = GameMap.height / 2 - (this.sizes.height/2);
this.position.left = GameMap.width - (this.sizes.width);
break
}
},
renderPosition: function(elm,Player){
elm.css({
left: Player.position.left + 'px',
top: Player.position.top + 'px',
width: Player.sizes.width + 'px',
height: Player.sizes.height + 'px',
transform: 'rotate' + '('+ Player.direction.transform + 'deg)',
'background-image': 'url('+ Player.backgroundImage +')',
});
}
};
Player.setPosition('center');
Player.renderPosition(htmlPlayer,Player);
document.onkeydown = function (event){
if (event.keyCode) {
Player.backgroundImage = 'img/player.gif';
}
if (event.keyCode == 37){
if(Player.position.left <= 0){
Player.position.left = 0;
}else{
Player.position.left-=Player.speed;
}
}
if (event.keyCode == 38){
if(Player.position.top <= 0){
Player.position.top = 0;
}else{
Player.position.top-=Player.speed;
}
}
if (event.keyCode == 39){
if(Player.position.left >= GameMap.width-Player.sizes.width){
Player.position.left = GameMap.width-Player.sizes.width;
}else{
Player.position.left+=Player.speed;
}
}
if (event.keyCode == 40){
if (Player.position.top >= GameMap.height-Player.sizes.height) {
Player.position.top = GameMap.height-Player.sizes.height;
}else{
Player.position.top+=Player.speed;
}
}
if (event.keyCode == 37) {
Player.direction.transform = 180;
}
if (event.keyCode == 38){
Player.direction.transform = -90;
}
if (event.keyCode == 39){
Player.direction.transform = 0;
}
if (event.keyCode == 40){
Player.direction.transform = 90;
}
Player.renderPosition(htmlPlayer,Player);
console.log(Player.direction.transform);
};
document.onkeyup = function(evt){
if (event.keyCode) {
Player.backgroundImage = 'img/player.png';
}
Player.renderPosition(htmlPlayer,Player);
};
});
Интересует момент с поворотами. При той логике, что задал, с положения (event.keyCode == 37)
в положение (event.keyCode == 38)
будет поворот в 270 градусов. Подскажите варианты решения?
var htmlPlayer = $('#dot');
var GameMap = {
width: $(window).width(),
height: $(window).height()
};
var Player = {
sizes: {
width: 36,
height: 36
},
position: {
top: 0,
left: 0
},
direction: {
transform: 0
},
speed: 1.5,
backgroundImage: 'img/player.png',
setPosition: function(pos) {
switch (pos) {
case 'top':
this.position.top = 0;
this.position.left = GameMap.width / 2 - (this.sizes.width / 2);
break
case 'left':
this.position.left = 0;
this.position.top = GameMap.height / 2 - (this.sizes.height / 2);
break
case 'center':
this.position.top = GameMap.height / 2 - (this.sizes.height / 2);
this.position.left = GameMap.width / 2 - (this.sizes.width / 2);
break
case 'bottom':
this.position.top = GameMap.height - (this.sizes.height);
this.position.left = GameMap.width / 2 - (this.sizes.width / 2);
break
case 'right':
this.position.top = GameMap.height / 2 - (this.sizes.height / 2);
this.position.left = GameMap.width - (this.sizes.width);
break
}
},
renderPosition: function(elm, Player) {
elm.css({
left: Player.position.left + 'px',
top: Player.position.top + 'px',
width: Player.sizes.width + 'px',
height: Player.sizes.height + 'px',
transform: 'rotate' + '(' + Player.direction.transform + 'deg)',
'background-image': 'url(' + Player.backgroundImage + ')',
});
}
};
Player.setPosition('center');
Player.renderPosition(htmlPlayer, Player);
document.onkeydown = function(event) {
if (event.keyCode) {
Player.backgroundImage = 'img/player.gif';
}
if (event.keyCode == 37) {
if (Player.position.left <= 0) {
Player.position.left = 0;
} else {
Player.position.left -= Player.speed;
}
}
if (event.keyCode == 38) {
if (Player.position.top <= 0) {
Player.position.top = 0;
} else {
Player.position.top -= Player.speed;
}
}
if (event.keyCode == 39) {
if (Player.position.left >= GameMap.width - Player.sizes.width) {
Player.position.left = GameMap.width - Player.sizes.width;
} else {
Player.position.left += Player.speed;
}
}
if (event.keyCode == 40) {
if (Player.position.top >= GameMap.height - Player.sizes.height) {
Player.position.top = GameMap.height - Player.sizes.height;
} else {
Player.position.top += Player.speed;
}
}
if (event.keyCode == 37) {
Player.direction.transform = 180;
}
if (event.keyCode == 38) {
Player.direction.transform = -90;
}
if (event.keyCode == 39) {
Player.direction.transform = 0;
}
if (event.keyCode == 40) {
Player.direction.transform = 90;
}
Player.renderPosition(htmlPlayer, Player);
console.log(Player.direction.transform);
};
document.onkeyup = function(evt) {
if (event.keyCode) {
Player.backgroundImage = 'img/player.png';
}
Player.renderPosition(htmlPlayer, Player);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dot" style="
position: fixed;
border-radius: 50%;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
transition: transform .3s;
-webkit-transition: transform .3s;
-moz-transition: transform .3s;
-o-transition: transform .3s;">
</div>
(Полная картина)
Интересует момент с поворотами. При той логике, что задал, с положения (event.keyCode == 37) в положение (event.keyCode == 38) будет поворот в 270градусов. Подскажите варианты решения?
if a == 270 then a = -90
вам подойдет, и если нет, то почему, какие доп.условия?