第一篇笔记-制作具有RPG要素的互动式健身会员系统

这是一篇记录我大专写到一半的笔记文,单纯是觉得写code写出了一点成就感,也是为了能记住曾经走过的歪路。

我还尚未从资策会C#班毕业,是个菜逼中的菜逼,目前正在赶工大专,我们的题目是结合健身房会员制度与简单rpg游戏功能要素,透过纪录真实的训练量,来使虚拟脚色成长,并能够用那只虚拟脚色进行打怪升级。
虽然身在C#班,不过这次大专我主要是负责前端,包含主介面以及技能树介面,等之後前後端架构完成後才会参与到整合的部分。

这篇笔记今天主要要说的是背包功能,身为一个外行嫩嫩,首先会做的一定是GOOGLE,看有没有哪个前辈也跟我一样想不开用前端三宝做一个看上去像是游戏内背包的东西。

意外的是不管我用中文还是英文,都没有找到想像中的解答。
身为新手,当时是感到一阵晕,主要是这个大专的主题是我所提出的,当初本来想说网页游戏那麽多,背包系统应该不难找到类似的,结果大多只找到静态素材,而非具有"装备"这一具体的动态功能。

我觉得冥冥之中算是要我真的实打实的硬干吧!至少从我写文章的当下,我是庆幸我没有找到现成的解答,而是靠原生前端三宝手刻出一个像模像样的背包系统。
https://ithelp.ithome.com.tw/upload/images/20210730/20139997l8uA5J0Kc7.jpg


首先是巨肥的html

<div id="itemBox">
                <a href = "javascript:void(0)" onclick = "document.getElementById('openBag').style.display='block';">
                    <img id="boxImg" src="img/box.png"></a>

                    <div class="rpgui-content" id="openBag">
                        <div class="rpgui-container framed rpgui-draggable" id ="inventory">
                            <div style="height: 10%;"><a href = "javascript:void(0)" onclick = "document.getElementById('openBag').style.display='none';">Close</a></div>
                            <div class="selectBar">

                                <select class="rpgui-dropdown" >
                                    <option selected>Potion</option>
                                    <option>Weapon</option>
                                    <option>Sheild</option>
                                    <option>Scroll</option>
                                    <option>Item</option>
                                </select>
                            </div>


                            <hr />

                            <div class="rpgui-icon empty-slot">
                                <div class="itemImg" id="item_001">
                                    <div class="disc">
                                        <div class="rpgui-container framed-grey" style="width:100%; height:100%; left:0px; top:0px;">
                                            <label>POWER UP YOUR STR!!!</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="rpgui-icon empty-slot">
                                <div class="itemImg" id="item_002">
                                    <div class="disc">
                                        <div class="rpgui-container framed-grey" style="width:100%; height:100%; left:0px; top:0px;">
                                            <label>POWER UP YOUR VTI!!!</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="rpgui-icon empty-slot">
                                <div class="itemImg" id="item_003">
                                    <div class="disc">
                                        <div class="rpgui-container framed-grey" style="width:100%; height:100%; left:0px; top:0px;">
                                            <label>POWER UP YOUR AGI!!!</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <br /><br />

                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <br /><br />

                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <br /><br />

                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <br /><br />

                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <div class="rpgui-icon empty-slot"></div>
                            <br /><br />
                        </div>
                    </div>
            </div>

不要笑!不要笑!

我是很想用JS动态生成表格的,但是因为写死表格对於後端传送物品进来找位置放会少很多麻烦,我们专题至少会从打怪、商城、以及赠送取得物品,因此在这里写死表格会对有限时间的大专有比较好的帮助(藉口~)

背包的css部分乏善可陈,主要就是有hover物品介绍的功能与调整版面排列,就不先赘述(因为也巨肥无比)

在来是今天主要想记录的JS部分

//装备药水:实现药水单向(若装备栏内没药水可直接装备)、双向置换(若装备栏内已经有药水,直接点击新药水会进行置换),

var x = document.getElementsByClassName('rpgui-icon empty-slot')
for(var j=0;j<=29;j++){
    var child = x[j].firstElementChild
    if(child!=null){
         child.addEventListener("click",function(){
            var Data = document.getElementById('potion_col')
            //装备栏已有物品,做置换
            if(Data.firstElementChild!=null && this.parentNode!=Data){
                var x_copy = this
                x_copy.style['height']='100%';
                x_copy.style['width']='100%';
                var p = this.parentNode;
                this.remove();
                Data.firstElementChild.style['height']='13%';
                Data.firstElementChild.style['width']='13%';
                Data.append(x_copy);
                p.append(Data.firstElementChild)
            }
            //装备栏没有物品,直接装备
            else{
                var x_copy = this
                this.remove();
                x_copy.style['height']='100%';
                x_copy.style['width']='100%';
                Data.append(x_copy);
            }
        })
    }
}


//解除药水:可透过点击下方药水装备栏返回药水回仓库,会自动找空格填入

var y = document.getElementById('potion_col')
y.addEventListener("click",function(){
    var y_copy=y.firstChild
    y_copy.style['height']='13%';
    y_copy.style['width']='13%';
    var Data = document.getElementsByClassName('rpgui-icon empty-slot')
     for(var i=0; i<=29;i++){
         if (Data[i].firstElementChild==null){
            Data[i].append(y_copy);
            break;
         }
     }
})

再次声明,我真的很菜,目前只会用最笨的方法实现功能,以上程序码绝对有更好的写法,不过因为在後端班学的前端实在是捉急,看到这手刻的CODE能够实现我想要的效果,我已经泪流满面了TT

下一篇再来详解我的手刻过程~


<<:  visual studio blend

>>:  如何利用 Gsap ScrollTrigger 做出滚动动画? Vue 专案 载入 ScrollTrigger

虹语岚访仲夏夜-25(专业的小四篇)

好久没有看到的小七...好像也没多久,昨天才见过,但因为昨晚的那个恐布经历,我现在好想看到她,好想听...

DAY12 资料室--Vuex辅助函数让代码更简洁

前言 各位捧由,相信经过几天的研究後,我们现在对Vuex都有多一些的了解啦! 不晓得各位有没有觉得,...

[Day10] Vite 出小蜜蜂~Function Composition!

Day10 接下来,要帮 Squid 也装上 Laser, 敌人的 Laser 跟我们的外观是不一样...

Day03:认识MVT

背景知识 首先必须先知道网站的运作分为client(客户端)和server(服器端)两者比次运作 从...

Day 04 - Credit Enquires 与 Short Stock Source

本篇重点 Credit Enquires Short Stock Source Pandas Dat...