如何利用JavaScript编写一个格斗小游戏


Posted in Javascript onJanuary 06, 2021

拖延症晚期的我原本计划趁着周末写个年终总结,但是一直没有什么思路,想来想去也没想到要写啥就胡乱写了这么一个小东西。

一直比较痴迷游戏行业,可能我不太适合做前端,应该去学C++....

如何利用JavaScript编写一个格斗小游戏

首先当然是选择一张背景图,作为整个场景中的地图,而且要大要高清。布局到页面中。

如何利用JavaScript编写一个格斗小游戏

然后通过可视区值展示这张图片的一小部分。我这里用的是宽600,高420的,超出直接隐藏掉。

width: 600px;
height: 420px;

如何利用JavaScript编写一个格斗小游戏

这样一个简单的场景就写好了,接着我们需要在这个场景中加入我们的人物。也就是游戏中的角色。不过游戏贴图实在是太难了,我也没有时间自己去设计,所以直接在网上找了火柴人的gif好像是DNF的技能图,通过PS的处理,截取其中的几个重要动作,加入的到页面中。

如何利用JavaScript编写一个格斗小游戏

现在角色有了,地图也有了,我们应该让人物动起来了,我的做法是让人物固定在窗口的中心位置,当人物移动的时候通过移动背景来让人物看起来有动的效果。

所以我这里在监听键盘事件的时候做了两件事,第一是更换人物的贴图,让人物有动起来的姿势,第二是改变背景图的位置,看起来确实就是在跑。

如何利用JavaScript编写一个格斗小游戏

import Scene from './components/Scene';
import Games from './components/Games';
import Person from './components/Person';

const direct = { // 有效按键
 87: 'up',
 65: 'left',
 83: 'down',
 68: 'right',
 74: 'j',
 75: 'k',
 76: 'l',
 13: 'enter',
 27: 'esc'
}

const keys = []; // 当前按键

// 初始化窗口
const App = new Games();
const client = App.getEle();
// 初始化场景, 场景要放在窗口中
const scene = new Scene(bgi, client);
// 初始化人物,人物也要放在窗口中
const person = new Person({
 name: '隐冬',
 level: 1,
}, client)

// 监听按键
window.addEventListener('keydown', (e) => {
 const key = direct[e.keyCode];
 if (!keys.includes(key) && key) { // 有效按键
 keys.push(key);
 scene.move(keys); // 执行场景变换
 person.action(keys); // 切换人物动作
 }
})
// 监听按键
window.addEventListener('keyup', (e) => {
 const key = direct[e.keyCode];
 const idx = keys.indexOf(key);
 if (idx >= 0 && key) { // 有效按键
 keys.splice(idx, 1);
 scene.move(keys); // 执行场景变换
 person.action(keys); // 切换人物动作
 }
})

如何利用JavaScript编写一个格斗小游戏

然后这里加入血槽等级,人物名称,血量值。

如何利用JavaScript编写一个格斗小游戏

人物这里是一个class类,可以通过实例化的方式创建很多个人物,然后让他们满屏幕的乱跑,我这里通过实例化的时候判断人物是否是机器人,通过随机数的方式定义人物自己的动作。

如何利用JavaScript编写一个格斗小游戏

技能就比较难看了,也是网上随便找的效果图,看淡了,有就行要求别那么高。

如何利用JavaScript编写一个格斗小游戏

打斗也很简单,就是角色在放技能的时候计算周边其他的角色的距离,从而判定是否击中,然后让血量降低。公告系统,这些都有写,不过定时器太多造成了内存泄露我还得想想怎么优化一下。

如何利用JavaScript编写一个格斗小游戏

github地址分享给大家,感兴趣的同学可以自己写写,还挺有意思的,真的是越写越停不下来,我这是什么毛病。

自取链接

到此这篇关于如何利用JavaScript编写一个格斗小游戏的文章就介绍到这了,更多相关JavaScript写格斗小游戏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
详解express + mock让前后台并行开发
Jun 06 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
vuex的使用步骤
Jan 06 #Vue.js
一篇文章看懂JavaScript中的回调
Jan 05 #Javascript
原生js中运算符及流程控制示例详解
Jan 05 #Javascript
vue3.0中友好使用antdv示例详解
Jan 05 #Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 #Vue.js
在Angular项目使用socket.io实现通信的方法
Jan 05 #Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 #Javascript
You might like
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
python str字符串转uuid实例
2020/03/03 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
光声世纪笔试题目
2012/08/25 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
应用电子专业学生的自我评价
2013/10/16 职场文书
皮肤科医师岗位职责
2013/12/04 职场文书
水电维修专业推荐信
2014/09/06 职场文书
2014年就业工作总结
2014/11/26 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
保险公司增员口号
2015/12/25 职场文书
2019教师的学习计划
2019/06/25 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
Django 实现jwt认证的示例
2021/04/30 Python
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
redis数据结构之压缩列表
2022/03/21 Redis