游戏里WASD移动控制人物的操作，用js写出的效果，简单易上手！

游戏里的人物控制需要通过上下键或者WASD键来控制人物的前进后退。

那么我们就来写一个这样的效果吧！

这个效果说简单也很简单无非就是通过按键来操作。code的按键操作。

接下来就上我们的效果图了。

样式很简单我直接将代码拷贝过来！

第一步就是将样式复制过来

.box1{width: 400px;height: 400px;background: yellowgreen;margin: 0 auto;position: relative;}.box2{width: 50px;height: 50px;background:aqua;position: absolute;
}

第二步就是html了布局

<div class="box1"><div class="box2"> </div>
</div>

第三步就是js代码了

var odiv1=document.getElementsByClassName("box1")[0];var odiv2=document.getElementsByClassName("box2")[0];window.onkeydown=function(e){通过监听按键按下时的操作var e=e||window.event;//alert(e.keyCode)//获取当前元素到body的距离 var T=odiv2.offsetTop//盒子距离最顶部的距离var L=odiv2.offsetLeft/盒子距离最左边的距离if (e.keyCode==87) {//判断当前按键是不是w按键var T=T-5if(T<0){T=0}odiv2.style.top=T+"px"}if (e.keyCode==83) {//判断当前按键是不是S按键var T=T+5if (T>odiv1.offsetWidth-odiv2.offsetWidth) {T=odiv1.offsetWidth-odiv2.offsetWidth                    }odiv2.style.top=T+"px"}if (e.keyCode==65) {//判断当前按键是不是A按键var L=L-5if(L<0){L=0}odiv2.style.left=L+"px"}if (e.keyCode==68) {//判断当前按键是不是D按键var L=L+5if(L>odiv1.offsetHeight-odiv2.offsetHeight){L=odiv1.offsetHeight-odiv2.offsetHeight}odiv2.style.left=L+"px"}
}

总结：

以上就能实现游戏中控制人物行动的前进后退的操作了。

如果有不懂的可以随时来咨询。谢谢！

游戏里WASD移动控制人物的操作，用js写出的效果，简单易上手！相关推荐

【C 语言】文件操作 ( 配置文件读写 | 写出或更新配置文件 | 追加键值对数据 | 更新键值对数据 )
文章目录一.追加键值对数据二.更新键值对数据三.完整代码示例一.追加键值对数据在上一篇博客 [C 语言]文件操作 ( 配置文件读写 | 写出或更新配置文件 | 逐行遍历文件文本数据 | 获取 ...
本行没有输入值结余隐藏_仓库库存管理系统，内含逻辑公式，自动结余库存！操作简单易上手...
仓库库存管理系统,内含逻辑公式,自动结余库存!操作简单易上手仓库出入库管理系统入库单出入库单号自动生成,如需修改前缀,可根据提示自行修改.在设置中,根据实际情况对必须填写的项输入,方便后期可自动 ...
操作ChatGPT竟写出毁灭人类计划书！“AI正在指数级发展”
Datawhale干货技术:ChatGPT,来源:量子位 "网红AI"ChatGPT,又被玩出了新花样! 这次,在一位工程师的诱导下,ChatGPT竟写出了毁灭人类的计划书. 步 ...
【C 语言】文件操作 ( 配置文件读写 | 写出或更新配置文件 | 函数形参设置 | 确保打开文件成功 | 统计文件大小 )
文章目录一.函数形参设置二.确保打开文件成功三.统计文件大小一.函数形参设置函数形参设置 : 该函数的作用是写出或更新配置项 , 遍历每行数据 , 检查 key 键是否存在 , 如果存在 ...
能运行游戏的服务器,这才算全服第一！这款游戏里玩家能控制整个服务器，为所欲为！...
游戏私服,在一般玩家眼里,就是小作坊偷偷摸摸搞的一个非法游戏服务器,里面一堆数据魔改,让土豪花钱爽玩,其本质上属于网络盗版. 然而,财大气粗的腾讯最近居然也打算开始搞"私服".更神 ...
python手机小游戏刷分器_如何用5行Python代码写出刷分游戏脚本！Python真牛！
几天前, 我母上大人在我们家群里发了一条消息一看这文案, 就知道又是一个骗流量的小游戏, 一看就让人没什么兴趣... 但是出于对我母上大人的尊(hào)重(qí)我还是点进来看了一下游戏链接: 游 ...
操作简单易上手人性化系统让OPPO R11s用着更省心
一款好的手机由好的系统.好的设计在好的硬件基础上组成.R11s拥有强大的硬件基础,再次基础上OPPO为R11s深入的进行了系统优化和设计. 全球有超过2亿年轻人正在使用OPPO手机,而ColorOS就 ...
平日无聊就用Python写一个简单的【棋牌游戏11点】吧简单易上手
老铁们,近日为了巩固python的学习,我也开始随心写一些python实现小功能的博客,那么今天我们要写的,就是这个扑克牌十一点,我们开始吧! 扑克牌11点一.游戏规则介绍二.扑克牌赋值的实现三 ...
扑克牌图片一张一张_扑克牌玩法 | 简单易上手的扑克游戏，重点是你没玩过！...
扑克牌玩法系列: Six Card Golf 这个世界很奇妙,地球人吃着同样的鸡肉,却有千变万化的吃法,例如白切鸡.宫保鸡丁.K记炸鸡.新奥尔良烤鸡-- 注意!这不是美食类推文同理,这世界上有着同一 ...

游戏里WASD移动控制人物的操作，用js写出的效果，简单易上手！

游戏里WASD移动控制人物的操作，用js写出的效果，简单易上手！相关推荐

最新文章

热门文章