js自定义按键键，实现小人移动
该文章的思想及内容我已经全部写到代码中，望读者认真阅读思考，该代码CV即可使用
- 效果图：
2.源代码：思想以及内容全部在内，请认真看代码
(HTML代码):
<body>
<div id="div1">
<table align="center">
<tr>
<th colspan="2">修改按键设置</th>
</tr>
<tr>
<td>上:</td>
<td>
<input type="text" id="inTop" onkeyup="setKey(this.id)" /><br/>
</td>
</tr>
<tr>
<td>下:</td>
<td>
<input type="text" id="inBottom" onkeyup="setKey(this.id)" /><br/>
</td>
</tr>
<tr>
<td>左:</td>
<td>
<input type="text" id="inLeft" onkeyup="setKey(this.id)" /><br/>
</td>
</tr>
<tr>
<td>右:</td>
<td>
<input type="text" id="inRight" onkeyup="setKey(this.id)" /><br/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="确定" onclick="fun()" />
</td>
</tr>
</table>
</div>
<div id="div2">
<img id="img1" src="dt3.gif" />
</div>
</body>
(CSS代码):
<style>
#img1{width: 100px; height: 100px; position: absolute;}
#div1{ width: 100%; height: 200px;}
#div2{ width: 1520px; height: 500px; border: 2px solid black;}
</style>
(JS代码):
请务必认真读取js代码，思路内容全在里面
<script>
// 定义全局变量
var MyTop = null;
var MyBottom = null;
var MyLeft = null;
var MyRight = null;
/**
* 方法作用：键盘按下获取每个输入框对应的 键值
* 方法思想：通过onkeyup事件调用这个方法，来获取键值并且赋值给全局变量，用于其他方法使用
* 如果出现定义的键值相同，会提示用户定义的键重复了
* @param {Object} name
*/
function setKey(name){
if(name == "inTop"){
MyTop = event.keyCode;
echo(name);
}
if(name == "inBottom"){
if(MyTop != event.keyCode){
MyBottom = event.keyCode;
echo(name);
}else{
alert("与上面按键重复了！")
}
}
if(name == "inLeft"){
if(MyTop != event.keyCode && MyBottom != event.keyCode){
MyLeft = event.keyCode;
echo(name);
}else{
alert("与上面按键重复了！")
}
}
if(name == "inRight"){
if(MyTop != event.keyCode && MyBottom != event.keyCode && MyLeft != event.keyCode){
MyRight = event.keyCode;
echo(name);
}else{
alert("与上面按键重复了！")
}
}
}
/**
* 方法作用：自定义好键后，点击确定后执行这个方法，让小人移动
* 方法思想：利用定义好的键值，通过不断改变小人的top，bottom，left，right来实现小人的移动
*/
function fun(){
document.onkeydown = function(){
var oImg = document.getElementById("img1");
if(event.keyCode == MyTop){
oImg.style.top = oImg.offsetTop - 100 + 'px';
// 作用：让小人不能出过自己设置的边界
// 思想: 当小人到达设置好的最小临界点时,让他等于这个临界点,从而做到不能再向那个方向移动了
if(oImg.offsetTop < 200){
oImg.style.top = 200 + 'px';
}
}else if(event.keyCode == MyBottom){
oImg.style.top = oImg.offsetTop + 100 + 'px';
// 让小人不能出过自己设置的边界
if(oImg.offsetTop > 680){
oImg.style.top = 600 + 'px';
}
}else if(event.keyCode == MyLeft){
oImg.style.left = oImg.offsetLeft - 100 + 'px';
// 让小人不能出过自己设置的边界
if(oImg.offsetLeft < 0){
oImg.style.left = 0 + 'px';
}
}else if(event.keyCode == MyRight){
oImg.style.left = oImg.offsetLeft + 100 + 'px';
// 让小人不能出过自己设置的边界
if(oImg.offsetLeft > 1420){
oImg.style.left = 1420 + 'px';
}
}
}
}
/**
* 方法作用：回显到输入框value，让用户看到自己定义的键的value
* 方法思想：因为键盘上每个键值都对应的有自己的字符串，用指定的键值来设置指定的字符串，实现回显到input框中
* @param {Object} name
*/
function echo(name){
switch (event.keyCode){
case 17:document.getElementById(name).value = "Atrl";
break;
case 16:document.getElementById(name).value = "Shift";
break;
case 20:document.getElementById(name).value = "Caps";
break;
case 27:document.getElementById(name).value = "Esc";
break;
case 91:document.getElementById(name).value = "Fn";
break;
case 18:document.getElementById(name).value = "Alt";
break;
case 32:document.getElementById(name).value = "空格";
break;
case 13:document.getElementById(name).value = "回车";
break;
case 13:document.getElementById(name).value = "Enter";
break;
case 37:document.getElementById(name).value = "←";
break;
case 38:document.getElementById(name).value = "↑";
break;
case 39:document.getElementById(name).value = "→";
break;
case 40:document.getElementById(name).value = "↓";
break;
default:
break;
}
}
</script>
如果该文章对您有帮助，请多多转发点赞，能得到你们的赞同就是我前进的动力！加油！
