本文實例為大家分享了js鍵盤事件實現人物行走的具體代碼，供大家參考，具體內容如下

描述：

小時候喜歡玩的一個游戲，魔塔，實現了人物的行走，以及跳躍，當然是2D的效果。

用到的圖：

效果：

代碼：

Title

html

{

background-color: deepskyblue;

}

div

{

width: 32px;

height: 32px;

background-image: url("img/Actor01-Braver03.png");

position: absolute;

}

var key=0;

var bool=false;

var speed=2;//每次行走的距離

var actor;//人物div

const HEIGHT=33;//人物的高

const WIDTH=32;//人物的寬

var arr=[1,3,2,0];//4排圖像 代表 下 左 右 上

var num=0;

var jumpBool=false;

var actorSkinSpeed=8;

var jumpSpeed=-15;

init();

function init() {

window.addEventListener("keydown",keyHandler);

window.addEventListener("keyup",keyHandler);

actor=document.querySelector("div");

setInterval(animation,16);

//按鍵驅動不能實現 實現的是通過按鍵觸發相應動畫 實現我們的人物的幀動畫 跳轉

}

function keyHandler(e) {

bool=e.type==="keydown";

key=e.keyCode;

if(!bool){

num=0;

actor.style.backgroundPositionX=-num*WIDTH+"px";

}

if(key===32 && !jumpBool){//跳躍 空格驅動

jumpBool=true;

}

}

function animation() {

jump();

if(!bool)return;

walk();//單方向行走 實現

changeDirection();//方向確定時 內部行走的實現

}

function jump() {

if(!jumpBool)return;

jumpSpeed+=1;

if(jumpSpeed===15){

jumpBool=false;

jumpSpeed=-15;

return;

}

actor.style.top=actor.offsetTop+jumpSpeed+"px";

}

function changeDirection() {

actorSkinSpeed--;

if(actorSkinSpeed>0) return;

actorSkinSpeed=8;

num++;

if(num>3) num=0;

actor.style.backgroundPositionX=-num*WIDTH+"px";

}

function walk() {

switch (key){

case 37://左 ×1 第二排

actor.style.left=actor.offsetLeft-speed+"px";

actor.style.backgroundPositionY=-arr[0]*HEIGHT+"px";

break;

case 38://上 ×3 第四排

actor.style.top=actor.offsetTop-speed+"px";

actor.style.backgroundPositionY=-arr[1]*HEIGHT+"px";

break;

case 39://右 ×2 第三排

actor.style.left=actor.offsetLeft+speed+"px";

actor.style.backgroundPositionY=-arr[2]*HEIGHT+"px";

break;

case 40://下 ×0 第一排

actor.style.top=actor.offsetTop+speed+"px";

actor.style.backgroundPositionY=-arr[3]*HEIGHT+"px";

break;

}

}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的java怎么实现人物的行走,js键盘事件实现人物的行走的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。