emmmmmm，这个小小的游戏，其实也是模仿别人的拉，但是，我自己又做了一个另外功能的。哈哈哈哈！！
按钮点击类型
看下大概的效果呗，就是有九个选项，按下不同的方向，就能让小人转变方向进行移动。
核心：定时器、动画、点击事件对象。案例核心就是这三点。
动画的话，其实是分两部分，首先，我们得让小人自己动起来，核心就是利用定时器改变img得src属性。其次我们需要让动起来的小人向上向下或其他方向移动，移动就改变img的偏移量，这里我用的是offset系列。这里得难点就是我们总不能添加九个点击事件一一对应添加侦听器吧，这样代码太冗余。这里是巧妙的使用了img的id、图片方向以及事件对象三者相互结合来解决的问题。
点击事件：巧妙的运用了通过事件对象target属性获取触发事件的元素，进而获取id，然后去匹配不同方向的图片。在点击中，有效区域只能是我们设置的按钮，就是要处理点击到空白地方出现的问题。还有就是要注意点击停止按钮时，小人的状态。
文字可能有些苍白哈，主要是解释一下实现的核心点，好理解一些。上代码拉。代码中有很详细的介绍的哈。
window.onload = function () {
// 需求：
// 1. 小人自身要运动起来 核心：改变img的src
// 2. 小人按照指定方向移动 核心：点击事件+动画+定时器
(function () {
var runImg = document.querySelector("#RPG");
var btnArea = document.querySelector(".btnArea");
var i = 0;
var rpgRunning = null;
var stopImg = "down"; // 停止时 状态为面向我们
var speed = 10;
btnArea.addEventListener('click', function (e) {
// 使用一个变量记录点击事件对象的id 用来判断是哪个方向
var flag = e.target.id;
// q1. 点击空白处 报错解决方法
if (flag == '') {
return;
}
// q2. 先点击stop报错 解决方法
// 不先点击stop不报错
if (flag == 'stop') {
clearInterval(rpgRunning);
runImg.src = 'img/' + stopImg + '-' + 0 + '.png';
return;
}
// q3. 不清除定时器的话 动画会乱掉 当点击不同方向的动画时，动画紊乱
// 调用定时器必须先清除一下定时器保证只有一个定时器启动
clearInterval(rpgRunning);
rpgRunning = setInterval(function () {
// 1.先让自己动起来
i++;
// if (i > 4) {
// i = 1;
// } 等价 i = i%4 但是放的位置不同
runImg.src = 'img/' + flag + '-' + i + '.png';
i = i % 4;
// 2. 不同方向的移动
// 判断不同的方向
switch (flag) {
case "down":
runImg.style.top = runImg.offsetTop + speed + "px";
break;
case "up":
runImg.style.top = runImg.offsetTop - speed + "px";
break;
case "left":
runImg.style.left = runImg.offsetLeft - speed + "px";
break;
case "right":
runImg.style.left = runImg.offsetLeft + speed + "px";
break;
case "lu":
runImg.style.left = runImg.offsetLeft - speed + "px";
runImg.style.top = runImg.offsetTop - speed + "px";
break;
case "rightUp":
runImg.style.left = runImg.offsetLeft + speed + "px";
runImg.style.top = runImg.offsetTop - speed + "px";
break;
case "ld":
runImg.style.left = runImg.offsetLeft - speed + "px";
runImg.style.top = runImg.offsetTop + speed + "px";
break;
case "rd":
runImg.style.left = runImg.offsetLeft + speed + "px";
runImg.style.top = runImg.offsetTop + speed + "px";
break;
}
}, 100)
})
}())
}
结构和样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Running</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.btnArea {
position: absolute;
right: 50px;
top: 50px;
/* border: 1px solid #000; */
width: 150px;
height: 150px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.btnArea input {
width: 40px;
height: 40px;
border-radius: 5px;
outline: none;
background-color: orange;
color: #fff;
font-weight: bold;
border: none;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="btnArea">
<input type="button" value="左上" id="lu">
<input type="button" value="向上" id="up">
<input type="button" value="右上" id="rightUp">
<input type="button" value="向左" id="left">
<input type="button" value="停止" id="stop">
<input type="button" value="向右" id="right">
<input type="button" value="左下" id="ld">
<input type="button" value="向下" id="down">
<input type="button" value="右下" id="rd">
</div>
<img src="img/down-0.png" id="RPG">
</body>
</html>
键盘类型
就是基于上个案例自己做了一个按键盘上下左右键实现移动的功能。
核心点都类似，使用键盘事件判断用户按的是哪个字符的ASCII码，其他的地方都是类似类似的。
代码：
(function () {
var runImg = document.querySelector("img");
var rpgRuning = null;
var speed = 10;
var i = 0;
var stopImg = "down";
document.addEventListener('keydown', function (e) {
var flag = e.keyCode;
// 37 left
// 38 up
// 39 right
// 40 down
console.log(flag);
if (flag == 37) {
flag = "left";
} else if (flag == 38) {
flag = "up";
} else if (flag == 39) {
flag = "right";
} else if (flag == 40) {
flag = "down";
} else if (flag == 32) {
clearInterval(rpgRuning);
runImg.src = 'img/' + stopImg + '-' + 0 + '.png';
return;
} else {
clearInterval(rpgRuning);
return;
}
// 自己动
clearInterval(rpgRuning);
rpgRuning = setInterval(function () {
i++;
runImg.src = 'img/' + flag + '-' + i + '.png';
i = i % 4;
// 判断方向 移动
switch (flag) {
case "left":
runImg.style.left = runImg.offsetLeft - speed + "px";
break;
case "up":
runImg.style.top = runImg.offsetTop - speed + "px";
break;
case "right":
runImg.style.left = runImg.offsetLeft + speed + "px";
break;
case "down":
runImg.style.top = runImg.offsetTop + speed + "px";
break;
}
}, 100)
})
}())
素材图
