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)
})
}())
素材圖
