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

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

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

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

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

我觉得冥冥之中算是要我真的实打实的硬干吧！至少从我写文章的当下，我是庆幸我没有找到现成的解答，而是靠原生前端三宝手刻出一个像模像样的背包系统。

首先是巨肥的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

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