js键盘事件实现人物的行走 - CSDN文库

194 浏览量更新于2023-05-11 收藏 40KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

js键盘事件实现人物的行走键盘事件实现人物的行走

主要为大家详细介绍了js键盘事件实现人物的行走，文中示例代码介绍的非常详细，具有一定的参考价值，感兴

趣的小伙伴们可以参考一下

本文实例为大家分享了js键盘事件实现人物行走的具体代码，供大家参考，具体内容如下

描述：描述：

小时候喜欢玩的一个游戏，魔塔，实现了人物的行走，以及跳跃，当然是2D的效果。

用到的图：

效果：效果：

代码：代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

html

{

background-color: deepskyblue;

}

div

{

width: 32px;

height: 32px;

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

position: absolute;

}

</style>

</head>

<body>

<div></div>

<script>

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();//单方向行走实现

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38613154

粉丝: 14
资源: 987

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈