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

2024-12-01 17:49:42

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

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

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

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

width: 600px;
height: 420px;

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

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

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

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); // 切换人物动作
 }
})

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

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

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

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

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

自取链接

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

javascript实现拼图游戏

本文实例为大家分享了javascript实现拼图游戏的具体代码,供大家参考,具体内容如下 <div id="container">  <div id="game">  <div id="d1" onclick="move(1)">1</div> <!--小DIV,也就是
JavaScript实现打字游戏

本文实例为大家分享了JavaScript实现打字游戏的具体代码,供大家参考,具体内容如下效果图: 需求分析: 1.在char这个div里面显示要输入的字母,大写 2.在result这个div里面时时显示正确率,比如98% 3.给文档绑定按键事件 4.如果输入的内容和char里面一致,显示正确动画:animated zoomIn,并更换输入的字母 5.如果输入的内容和char里面不一致,显示错误动画:animated shake error 6.不管是正确还是错误都时时更新result里面的正确
基于JavaScript实现简单扫雷游戏

对于10年前的人来说,扫雷肯定是家喻户晓,由于当时的科技并不是很发达,大家对于电脑游戏的了解,可能都是从扫雷开始的,今天就交大家一种用js原生代码写一个简单的扫雷游戏,话不多说,直接上干货: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid
原生JS实现点击数字小游戏

原生JS实现点击数字小游戏,供大家参考,具体内容如下最近公司在季度测试中出了一道很有趣的测试题,要求使用我们自己的黑科技–IVX来实现,感兴趣的朋友可以去了解哦,是真的黑科技,在这里我还是用原生JS来实现吧,题目是这样的: 实现一个点击数字的小游戏:依次点击容器中随机生成的数字元素,生成的数字元素会在5S后消失,你将凭借记忆点击按照数字升序依次点击生成的数字方可通过该关卡游戏. 话不多说直接看运行效果图: 上代码: <!DOCTYPE html> <html lang="en
JavaScript 实现生命游戏

目录概念介绍逻辑规则完整代码主要实现概念介绍元胞自动机(Cellular Automata),是 20 世纪 50 年代初由计算机之父冯·诺依曼(John von Neumann)为了模拟生命系统所具有的自复制功能而提出来的. 生命游戏(Game of Life),或者叫它的全称 John Conway's Game of Life,是英国数学家约翰·康威在 1970 年代所发明的一种元胞自动机. 逻辑规则在二维平面方格里,每个细胞有两种状态:存活或死亡,而下一时刻的状态完全受它周
原生js实现自定义难度的扫雷游戏

本文实例为大家分享了js实现扫雷游戏的具体代码,供大家参考,具体内容如下游戏功能: 1.有四个难度 2.可以自定难度 1.html相关代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
用js实现拼图小游戏

本文实例为大家分享了js实现拼图小游戏的具体代码,供大家参考,具体内容如下一.js拼图是什么? 用js做得小游戏二.使用步骤 1.先创建div盒子 <style> div,body{ margin: 0; height: 0; } #box{ width: 800px; height: 800px; background-color: burlywood; position: relative; } #box div { width: 200px; height: 200px; backg
js实现贪吃蛇游戏含注释

本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下两个小时完成的,有点简陋. 直接看效果.打开调试面板,在resource面板,新建snippet 粘贴以下代码,右键snippet,run. clearInterval(timer); document.body.innerHTML = ""; //每秒移动多少格 let speed = 10; let speedUpMul = 3; //是否能穿墙 let isThroughTheWall = true; /
原生js实现2048小游戏

2048小游戏,供大家参考,具体内容如下首先2048小游戏离不开16个格子,我们通过html和css创建好对应的标签和样式,然后开始js逻辑 <div id="box">//一个盒子里面16个小div <div id="son"></div> <div id="son"></div> <div id="son"></div> <div
如何利用JavaScript编写一个格斗小游戏

拖延症晚期的我原本计划趁着周末写个年终总结,但是一直没有什么思路,想来想去也没想到要写啥就胡乱写了这么一个小东西. 一直比较痴迷游戏行业,可能我不太适合做前端,应该去学C++.... 首先当然是选择一张背景图,作为整个场景中的地图,而且要大要高清.布局到页面中. 然后通过可视区值展示这张图片的一小部分.我这里用的是宽600,高420的,超出直接隐藏掉. width: 600px; height: 420px; 这样一个简单的场景就写好了,接着我们需要在这个场景中加入我们的人物.也就是游戏中的角色
利用Python编写一个记忆翻牌游戏

目录导语开发工具环境搭建先睹为快原理简介导语昨天看到有留言竟然说我是月更博主,我明明更新地这么勤快(心虚.jpg).看吧,昨天刚更新过,今天又来更新了. 今天还是带大家写个小游戏吧,不过老是用pygame也没啥意思,这次我们换点新花样,用python自带的tkinter包写一个记忆翻牌小游戏呗. 废话不多说,让我们愉快地开始吧~ 开发工具 Python版本:3.7.4 相关模块: pygame模块: tkinter模块: pillow模块: 以及一些python自带的模块. 环境搭
利用JavaScript编写一个花里胡哨的点击按钮

目录正片结构就两行样式表现正片小轮播图滑动滚播,好不好看你说了算. 视频演示结构就两行 <main> <div class="grid"> <div class="grid__item theme-1"> <button class="action"><svg class="icon icon--rewind"> <use xlink:href=&
利用Java编写24点小游戏的实例代码

话不多说直接给大家上代码 package com.company; import java.util.*; /** * 24点小游戏 * 游戏规则:系统自动生成4个1-10的随机整数,玩家通过加减乘除操作,得到结果为24,每个数字只能使用一次 */ public class Game24Player { final String[] patterns = {"nnonnoo", "nnonono", "nnnoono", "nnnono
基于JavaScript编写一个翻卡游戏

目录前言翻卡动画生成随机分布数组均匀元素下的随机算法不均匀元素下的随机算法生成最终数组点击事件完整代码前言首先将这个游戏需求拆分成三个部分: 翻卡动画生成随机分布数组点击事件翻卡动画假如我们的盒子模型不是个二维的平面,而是有个三维的体积,让它可以有正反两面,那我们在做的时候是不是只要将它真实的翻个面就可以了.让我们来想想将它变成三维的方法. 之后发现了这个属性: transform: translateZ(1px); 使用了它,就可以把盒子内部的元素与盒子的底部撑出个
打豆豆小游戏用javascript编写的[打豆豆]小游戏

闲来无事,花了两天时间,用javascript 写了一个打豆豆的游戏,至于怎么玩的就不细说了,到网上搜一下就知道了,很简单. 下面是源码,发布出来供大家学习交流. 由于本程序没有用到一个图片,所以界面在ie下豆豆都是方形的比较扎眼,建议用chrome浏览器运行,或者firefox 演示地址:http://www.imkoko.com/app/dadoudou.php 不多说,上代码复制代码代码如下: <!DOCTYPE html> <html> <head> <
JavaScript编写一个贪吃蛇游戏

写的比较乱,有个逻辑错误:蛇吃了果果后应该是蛇尾加一节,写成了蛇头部增加一节- -. 可用键盘的上下左右键操作: 效果图: 代码如下: <html> <head> <title> 贪吃蛇 </title> <style type="text/css"> body{margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:n
JavaScript编写的网页小游戏，很给力

以下为游戏界面: 以下为游戏代码: <html> <head> <script language="JavaScript">   var timerID = null; var INT = 40; var loadFLG = 0; var gameFLG = 0; var missFLG = 0; var
利用Java编写一个出敬业福的小程序

目录 1.前言 2.定义工具类 3.生成"福"主类 4.运行测试 5.素材图片 1.前言 “福”的由来: 姜太公封一大批神仙时,却把自己的妻子叶氏封为穷神,还告诉她说:“有福的地方,你不能去.”从此,家家过年贴福字,就是告诉穷神,我这里是有福的地方,你千万不能进来.福字,就是摆脱穷困.追求幸福的象征. 福字之所以倒贴,传说起于清代恭亲王府.那年春节前夕,大管家按例写了几个斗大的“福”字,叫人贴于王府的大门上.有个家丁目不识丁,竟将“福”字头朝下贴上.恭亲王福晋十分气恼,欲鞭罚惩戒.可这
如何在微信小程序实现一个幸运转盘小游戏

本人主要介绍如何在微信小程序里面开发一个幸运转盘的小游戏,里面主要用到javascript和 css 语法,就可以轻松实现一个简单的幸运转盘(以6个奖品区为例). 前言本次教程需要你掌握一定量 javascript 和 css 基础知识,并且你需要有小程序一定的开发经验,具体需要掌握知识点有: css 的 position.transform.transition.overflow javascript基本随机算法 wxs语法小程序内置动画api 效果图小程序开发思路开发思路有三部分,第

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

相关推荐

随机推荐