自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(16)
  • 收藏
  • 关注

翻译 从零开始 Keras :搭建你的第一个神经网络

优秀外文博文搬运 + 翻译原作者:Victor Zhou链接:Keras for Beginners: Building Your First Neural Network @ Victor Zhou本文为转载翻译内容,文章内容著作权归原作者所有本文翻译已获得原作者授权以下为翻译内容(斜体加粗部分为博主补充内容,非原文内容):Keras 是 Python 中一种简单易用但却非常强大深度学习库。在这篇博文中,我们将认识到用 Keras 去建立一个前馈型神经网络,训练并用它解决实际问题是多么的

2021-06-11 15:40:02 595

翻译 Softmax 函数的简单解释

优秀外文博文搬运 + 翻译原作者:Victor Zhou链接:A Simple Explanation of the Softmax Function本文为转载翻译内容,文章内容著作权归原作者所有本文翻译已获得原作者授权以下为翻译内容(斜体加粗部分为博主补充内容,非原文内容):什么是 Softmax?如何使用它?怎么用 Python 实现一个 Softmax?Softmax 会将任意的实数转换成概率,经常用于机器学习。Softmax 函数背后的数学原理很简单:这里作者的描述有点点不是很能

2021-06-09 10:07:05 406

翻译 从零开始机器学习:神经网络原理 + Python 简单实例

优秀外文博文搬运 + 翻译原作者:Machine Learning for Beginners: An Introduction to Neural Networks @ Victor Zhou本文为转载翻译内容,文章内容著作权归原作者所有(侵删)This translation is posted here for learning exchange only, no commercial activities.If this translation violates your copyright

2021-06-02 12:36:47 1567

原创 HTML+JS+websocket 实现联机“游戏王”对战(十三)- 实机演示视频

最后一章啦,这章主要放个demo演示,然后讨论一些待改进的细节问题。启动游戏先来完整回顾下如何启动游戏并联机:(1)进入服务端ygo-server.js所在的文件夹,打开命令行窗口:(2)之后输入命令node ygo-server.js启动服务端:(3)接下来找到客户端的 html 文件,用浏览器打开,连接上服务端,就可以对战啦!连接成功后服务端的命令行里会有提示:这里为了测试方便是在同一台电脑上打开了两个客户端,服务器地址是 localhost。(3)之后双方玩家进行操作时若发

2021-05-24 14:27:42 1064 1

原创 HTML+JS+websocket 实现联机“游戏王”对战(十二)- 消息发送具体场景

客户端发送消息的具体场景这章最后总结下游戏客户端中具体哪些函数调用了消息发送。代码中发送消息的地方均有注释。(1)抽卡:首先我方抽牌时手牌会增加,需要让对方同步我们的手牌数;/*抽取牌组最上方一张卡至手卡 */function drawCard() { for (var i=0; i<8; i++) { var handID = 'p1-hand' + i.toString(); element = document.getElementById(.

2021-05-19 17:18:24 600 1

原创 HTML+JS+websocket 实现联机“游戏王”对战(十一)- 客户端消息的收发

客户端消息的发送与接收上一章我们介绍了服务端的搭建,用于接收并转发消息,这章来实现客户端的联机机制。客户端的联机分为发送和接收,当玩家执行某些操作时会发送一条 message 通知另一位玩家(由服务端做中介转发),同样,客户端也可以接收另一位玩家的 message,执行某些操作。在联机之前我们需要两个基本变量:var playerID = "player1"; //独立玩家IDvar ws = new WebSocket("ws://localhost:9999/");玩家ID以及服务端的地.

2021-05-18 10:16:11 632

原创 HTML+JS+websocket 实现联机“游戏王”对战(十)- 搭建游戏服务端

搭建游戏 WebSocket 服务端第二章联机模式的那篇博文里我们提到过,这个游戏双方玩家的通信方法是通过服务端做中介来相互传递指令。当一方玩家执行某个操作时,会将该操作的相关指令发给服务端,服务端接收后简单处理一下传给另外一位玩家,之后另外一位玩家接收并重现该指令,这样就在自己的界面里同步了对方玩家所执行的操作,比如抽牌,召唤,放置等等。现在轮到我们来具体实现一下这个做中介的服务端:这个服务端的消息传递机制很像上一章csdn大佬博文中的聊天室案例。我们首先在服务端构建一个空的用户数组 playe.

2021-05-10 11:24:20 1177 1

原创 HTML+JS+websocket 实现联机“游戏王”对战(九)- 实现简单websocket通信

实现简单 websocket 通信1. WebSocket 简介:有关websocket的简介,不了解websocket的朋友可以参考下CSDN大佬的这篇博文(侵删):websocket 学习,简单应用 - @广积粮缓称王这篇博文详细地介绍了websocket的工作原理和简单应用,并且还有几个非常简洁实用的案例。2. 搭建简易WebSocket服务端:我们在这里也实现一个简单的WebSocket服务端与客户端,方便后面介绍。首先我们需要下载并安装node.js:搜索node.js,官网.

2021-05-08 10:59:13 1435

原创 HTML+JS+websocket 实现联机“游戏王”对战(八)- 返回手卡,卡组

功能按键的实现(三)书接上回,把功能按键介绍完。1. 返回手卡:返回手卡的操作在情况分类上较多,代码可能会比较乱,先整理一下。选中某张卡片并执行返回手牌时,主要有几个不同的情况:卡片来源于场上1.1 卡片属于我方1.2 卡片属于对方(必须是表侧表示的卡片)卡片来源于卡组或墓地2.1 卡片属于我方牌组/墓地2.2 卡片属于对方墓地不同情况下的执行逻辑与调用的函数有所不同。“返回手卡”不允许直接操作对方牌组。要执行“返回手卡”操作首先需要选中一张卡片,Selected.

2021-05-02 18:01:58 774

原创 HTML+JS+websocket 实现联机“游戏王”对战(七)- 墓地,副控制面板

功能按键的实现(二)文接上回,继续介绍功能按键。1. 墓地与送去墓地:先来实现下墓地系统。和卡组系统几乎一样,一个字符串数组,存储卡片url:var P1Tomb = []; //我方墓地(卡片src)当有新卡片送入墓地时,把它的图片路径 PUSH 进去,若需拿出卡片则用 splic() 将其从墓地剔出。执行送去墓地的操作前,我们仍然需要先选中一张卡片,全局对象 SelectedCard 会像缓存一样帮我们记录选中卡片的相关信息。为了简化函数,送去墓地函数 sendtoTomb 只允.

2021-04-27 21:42:14 448

原创 HTML+JS+websocket 实现联机“游戏王”对战(六)- 卡片放置,战场更新

功能按键的实现(一)1.卡片放置:卡片的攻击,防御,背盖防御召唤以及发动,覆盖,这些操作都可归类为玩家向战场上放置卡片,卡片放置函数可通过传递不同参数来分别执行这些功能。实现卡片放置主要有几个步骤:(1)选中手牌某一张卡片,并记录卡片信息:这个操作由我们前面章节介绍的卡片选中系统来完成,当我们选中某张卡片后会用一个全局对象记录卡片的来源类型(手牌/场上),卡片序号,卡牌图片 url 等信息供其他函数使用。(2)寻找场上的空卡槽:确定怪兽/魔法陷阱区域的某个空卡槽,如果没有空卡槽剩余则无法执行.

2021-04-27 21:41:10 603

原创 HTML+JS+websocket 实现联机“游戏王”对战(五)- 卡片选中系统

I.卡片选中系统大部分卡片的操作功能都是针对单张卡片的,比如召唤,盖卡,回到卡组,返回手牌,送去墓地。执行这些操作前玩家必须先选定需要操作的对象,即某一张卡片。这个时候我们就需要建立一个卡片选中系统,在玩家选定卡片时记录该卡的相关信息,以便我们对选中的卡片执行相应的操作。1.全局变量:首先我们需要一个用来随时存储被选中卡片相关信息的全局对象 SelectedCard:var SelectedCard = { //被选中的卡对象 type: "null", //卡的来源类型(手牌,场上.

2021-04-15 21:49:27 1027 1

原创 HTML+JS+websocket 实现联机“游戏王”对战(四)- 卡组系统

这章开始我们结合 js 代码看看游戏具体功能的实现。大致的规划是先介绍贯穿整个游戏对局的基础功能,之后再针对不同的功能按键和功能板块来逐一介绍。函数中涉及联机的功能会放在实现联机的章节具体介绍。卡组系统首先来介绍下整个游戏存放素材的主体,卡组的实现。1.卡组结构:游戏的卡组本质上是一个简单的字符串数组,在游戏初始化时就加载存储了每一张卡牌图片的路径(或者URL)。卡组在结构上是一个堆栈,遵循后进先出(LIFO)的原则,即每次送入牌组的卡片默认放在牌组的最上方,若不进行洗牌,那么最后被放入的卡片将在

2021-04-14 18:11:48 962

原创 HTML+JS+websocket 实现联机“游戏王”对战(三)- 界面布局

这章开始要上一些代码了,没什么优化也比较偷懒,见谅。界面布局先来看看游戏界面的整体布局,完整HTML代码放在最后了:这里的HTML代码非常冗余,以后会尝试引入PHP+面向对象的方法简化代码结构。另外游戏界面几乎所有元素的position属性都偷懒统一使用absolute且固定长宽(部分采用百分比,具体可以查看项目的css文件)。这意味着整个游戏界面的大小,每个区域的位置或是每个区域之间的相对位置,都不会随着浏览器的窗口大小的变动而变动。也就是说,如果你在小屏电脑(或缩小的浏览器窗口)上打开该游戏.

2021-03-31 16:39:29 1126 1

原创 HTML+JS+websocket 实现联机“游戏王”对战(二)- 联机模式

HTML+JS+websocket 实战 “游戏王”(Yu-Gi-Oh) 联机卡牌对战(二)概览在介绍详细的游戏实现思路之前,先来谈谈游戏的核心——联机模式的实现思路。虽然游戏主体是HTML+JS且运行在浏览器上,但比起页游,该游戏的实现更像是端游,即游戏的主要文件及素材(卡牌图片,音效等)都是提安放(下载)到本地,需要的时候从本地调用。而负责实现联机的服务端只存储少量的用户信息(如用户id),用于玩家间的信息传递。具体的联机流程如下:整体的联机模式很简易,采用前后端分离的方法。服务端在存储了双方

2021-03-30 16:14:08 1417

原创 HTML+JS+websocket 实现联机“游戏王”对战(一)

HTML+JS+websocket 实战 “游戏王”(Yu-Gi-Oh) 联机卡牌对战(一)前言应某友人的要求,同时作为练手项目,花几天时间写了个“游戏王”的联机卡牌对战游戏,游戏内容大致是这样的:客户端是原生的HTML+JS,服务端基于Node.js(本地服务器),通信协议用的WebSocket。可以看到游戏界面有很多操作按钮,因为游戏的操作模式是完全仿线下卡牌的游玩模式,也就是不带任何规则判定和卡牌脚本。带规则判定的游戏实现起来复杂度较高,而且光是给每张卡牌的效果编写运行脚本就是一个极其浩

2021-03-30 16:11:53 2740

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除