•••| 卡牌遊戲誕生記 |•••

時間  2019-11-11
標籤 遊戲 誕生 欄目 遊戲 简体版
原文   原文鏈接

他們經歷了各類討論、不斷嘗試、一遍又一遍……最終把做品作成了以下模樣：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=Edge">
<meta name="author" content="Reddy.Huang,i@0u0b.com"/>
<base href="http://cool.miaov.com/170309/card/">
<title>妙味課堂-JS中級課程小組練習-卡牌</title>
<link rel="stylesheet" href="./src/css/reset.css">
<link rel="stylesheet"href="./src/css/main.css">
<link rel="stylesheet"href="./src/css/font-awesome.min.css">
</head>
<body>
<div>
<img src="./src/img/common/main-bg.jpg"alt="bg-normal" style="display: none;">
<img src="./src/img/common/background_night.png"alt="bg-gacha" style="display: none;">
<img src="./src/img/common/game1.jpg"alt="bg-game1" style="display: none;">
<canvas id="dot"style="background:linear-gradient(to bottom, #9cc2c9, #8468b8);">
<p>your browser not support canvas</p>
</canvas>
</div>
<div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<p>加載中</p>
</div>
<nav>
<ul>
<li><ahref="javascript:;"><i></i>首頁</a></li>
<li><a href="javascript:;"><i></i>卡牌展開摺疊效果</a></li>
<li><a href="javascript:;"><i></i>模擬抽卡</a></li>
<li><a href="javascript:;"><i></i>簡易卡牌對戰遊戲</a></li>
<li><a href="javascript:;"><i></i>翻轉消除遊戲</a></li>
</ul>
</nav>
<a href="javascript:;"id="return-main-nav"><i class="fa fa-arrow-left"></i></a>
<section id="section0">
<div>
<h1>卡牌動效展現頁</h1>
</div>
</section>
<section id="section1">
<div id="click-navigation">
<spanonclick="cm.transform2d(cm.right)">right</span>
<spanonclick="cm.transform2d(cm.left)">left</span>
<spanonclick="cm.transform2d(cm.horizontalSpread)">horizontalSpread</span>
<spanonclick="cm.transform2d(cm.rightSpread)">rightSpread</span>
<spanonclick="cm.transform2d(cm.leftSpread)">leftSpread</span>
<span onclick="cm.transform2d(cm.rotate330)">rotate330</span>
<spanonclick="cm.transform2d(cm.rotate360)">rotate360</span>
<spanonclick="cm.prevCard()"><</span>
<spanonclick="cm.nextCard()">></span>
<input type="text"name="" value=""placeholder="添加卡牌的張數"/>
<input type="button" name=""class="btn" value="添加" />
</div>
<ul id="card-container">
<li v-for="card in list"@mousedown.prevent @click="spread">
<em></em>
<img:src="card.img" alt="">
<divclass="info">
<h4>{{ card.name}}</h4>
<p></p>
</div>
</li>
</ul>
</section>
<section id="section2">
<div>
<ul>
<liclass="bling-1"></li>
<liclass="bling-2"></li>
</ul>
<ul>
<liclass="effect-1"></li>
<liclass="effect-2"></li>
</ul>
</div>
<div>
<div>
<divclass="book"></div>
<img src="./src/img/gacha/click.png"alt="">
<imgsrc="./src/img/gacha/arrow.png" alt="">
</div>
<ul id="s2">
<li
:class="{
neww: card.isNew,
dead: card.isDead,
r: card.rarity.r,
sr: card.rarity.sr,
ssr:card.rarity.ssr
}"
v-for="card inlist">
<em></em>
<img:src="card.img" alt="">
<divclass="info">
<h4>{{ card.name}}</h4>
<p>{{ card.des}}</p>
</div>
<divclass="property">
<iclass="attack">{{ card.attack }}</i>
<iclass="defense"><span>{{ card.defense}}</span></i>
</div>
<divclass="shadow"></div>
</li>
</ul>
</div>
</section>
<section id="game-table-0">
<div>
<ul>
<li
:class="{
neww: card.isNew,
dead: card.isDead,
r: card.rarity.r,
sr: card.rarity.sr,
ssr:card.rarity.ssr
}"
v-for="card inaList">
<em></em>
<img:src="card.img" alt="">
<divclass="info">
<h4>{{ card.name}}</h4>
</div>
<div>
<iclass="attack">{{ card.attack }}</i>
<iclass="defense"><span>{{ card.health}}</span></i>
</div>
</li>
</ul>
</div>
<div>
<ul>
<li
:class="{
neww: card.isNew,
dead: card.isDead,
r: card.rarity.r,
sr: card.rarity.sr,
ssr:card.rarity.ssr
}"
v-for="card indList">
<em></em>
<img:src="card.img" alt="">
<divclass="info">
<h4>{{ card.name}}</h4>
</div>
<divclass="property">
<iclass="attack">{{ card.attack }}</i>
<i><span>{{card.health }}</span></i>
</div>
</li>
</ul>
</div>
<ul>
</ul>
</section>
<section id="game-table-1">
<ul id="gt"></ul>
</section>
<div></div>
<div>
<div></div>
<p>關於本項目</p>
<div>
<p style="font-size: 18px">參考開源項目：</p>
<p><ahref="https://github.com/supperjet/Dot">supperjet/Dot</a></p>
<p><ahref="https://github.com/Kagami-src/MerusutoChristina">Kagami-src/MerusutoChristina</a></p>
<p style="font-size: 18px; margin-top: 10px">非商業使用素材：</p>
<p><a href="http://mlk.qijee.com/">梅露可物語</a></p>
<p><a href="http://www.beva.com/">貝拉卡片翻翻看</a></p>
</div>
<div>
<input type="button" value="肯定"/>
</div>
</div>
<scriptsrc="./build/js/vue.min.js"></script>
<script src="./build/js/polyfill.js"></script>
<script src="./src/js/cardsData.js"></script>
<script src="./build/js/tool.js"></script>
<script src="./build/js/card.js"></script>
</body>
</html>
​歡迎加入新的學習交流羣568663768，按期更新羣文件學習資料javascript

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程