如何利用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 相关文章推荐
JavaScript的parseInt 进制问题
May 07 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
JavaScript canvas实现流星特效
May 20 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
产品工艺师的岗位职责
2013/11/15 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
青春寄语大全
2014/04/09 职场文书
蓝颜请假条
2014/04/11 职场文书
合同协议书格式
2014/04/18 职场文书
秋收起义观后感
2015/06/11 职场文书
2016年党建工作简报
2015/11/26 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA