<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body, dl, dd, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ol, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none
}
#wrap{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: #8CC1DE;
}
</style>
</head>
<body>
<div id="wrap"></div>
<script>
let oWrap = document.getElementById("wrap");
let moveFn = {
87:function w() {
oWrap.style.top = `${oWrap.offsetTop-2}px`;
timeArr[87] = requestAnimationFrame(w);
},
65:function a() {
oWrap.style.left = `${oWrap.offsetLeft-2}px`;
timeArr[65] = requestAnimationFrame(a);
},
83:function s() {
oWrap.style.top = `${oWrap.offsetTop+2}px`;
timeArr[83] = requestAnimationFrame(s);
},
68:function d() {
oWrap.style.left = `${oWrap.offsetLeft+2}px`;
timeArr[68] = requestAnimationFrame(d);
}
};
let timeArr = {};
document.addEventListener("keydown", f);
function f(ev) {
let keyCode = ev.keyCode;
// 这个判断是为了不重复添加速度 越来越快那种
if ((!moveFn[keyCode]) || timeArr[keyCode]) return;
moveFn[keyCode]();
}
document.addEventListener("keyup", fn);
function fn(ev) {
let keyCode = ev.keyCode;
if (!timeArr[keyCode])return;
cancelAnimationFrame(timeArr[keyCode]);
timeArr[keyCode] = undefined;
}
</script>
</body>
</html>
Python3Turtle