Вы можете использовать понимание условного списка:
>>> dff[[c for c in dff if dff[c].isnull().sum() < 2]]
A B
0 -0.819004 0.919190
1 0.922164 0.088111
2 0.188150 0.847099
3 NaN -0.053563
4 1.327250 -0.376076
5 3.724980 0.292757
6 -0.319342 NaN
7 -1.051529 0.389843
8 -0.805542 -0.018347
9 -0.816261 -1.627026
Вы можете использовать объект Player
и изменить его свойства x
и y
.
Создайте также объект K
, чтобы установить логическое значение используемых в настоящее время ключей чисел.
Чем внутри петли, как requestAnimationFrame
переместить игрока:
const Player = {
el: document.getElementById('mouse'),
x: 200,
y: 100,
speed: 2,
move() {
// If no collision with map or tiles... (TODO!)
this.el.style.transform = `translate(${this.x}px, ${this.y}px)`;
}
};
const K = {
fn(ev) {
ev.preventDefault();
const k = ev.which;
if (k >= 37 && k <= 40) K[k] = ev.type === "keydown"; // If is arrow
}
};
const update = () => {
// 1 / Math.sqrt(2) = 0.7071.. (Diagonal)
let dist = K[38] && (K[37] || K[39]) || K[40] && (K[37] || K[39]) ? 0.707 : 1;
dist *= Player.speed;
if (K[37]) Player.x -= dist;
if (K[38]) Player.y -= dist;
if (K[39]) Player.x += dist;
if (K[40]) Player.y += dist;
Player.move();
}
document.addEventListener('keydown', K.fn);
document.addEventListener('keyup', K.fn);
(function engine() {
update();
window.requestAnimationFrame(engine);
}());
#mouse{
position: absolute;
left: 0; top: 0;
width: 20px; height: 20px;
background: #000; border-radius: 50%;
}
Click here to focus, and use arrows
<div id="mouse"></div>
A [ 1123] более простой пример , который перемещает элемент на Npx шагов и повторяется до тех пор, пока вы удерживаете клавишу нажатой (как при наборе текста), будет:
const Player = {
el: document.getElementById('mouse'),
x: 0,
y: 0,
step: 10,
move() {
this.el.style.transform = `translate(${this.x}px, ${this.y}px)`;
}
};
const keysHandler = (ev) => {
const k = ev.which;
if (k>=37 && k<=40) {
ev.preventDefault();
({
'37' () {Player.x -= Player.step},
'38' () {Player.y -= Player.step},
'39' () {Player.x += Player.step},
'40' () {Player.y += Player.step},
}[k]());
Player.move();
}
}
document.addEventListener('keydown', keysHandler);
#mouse{
position: absolute;
left: 0; top: 0;
width: 20px; height: 20px;
background: #000; border-radius: 50%;
}
Click here to focus, and use arrows
<div id="mouse"></div>
Вы устанавливаете значение 10 каждый раз, сначала используйте значение split
:
else if (key.keyCode == 40){
mouse.style.top = parseInt(mouse.style.top.split("px")[0]) + 10 + "px";
}
Даже если в другом ответе использовалось parseInt
, лучше хранить переменные внутри кода
var x = 0;
var y = 0;
document.onkeydown = function(key){
if (key.keyCode == 38){
y -= 10;
} else if (key.keyCode == 39){
x += 10;
} else if (key.keyCode == 37){
x -= 10;
} else if (key.keyCode == 40){
y += 10;
};
document.getElementById("block").style.left = x+"px";
document.getElementById("block").style.top = y+"px";
};
#block
{
top: 0;
left: 0;
position: absolute;
width: 30px;
height: 60px;
background: teal;
}
<div id="block">