Final project

Monster Slayer

<head>
  <title>Final Project</title>
  <meta charset="UTF-8" />
  <link href="https://cdn.jsdelivr.net/npm/reset-css@4.0.1/reset.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet" />
</head>

Prepare - Head

<div class="bg"></div>
<div class="ui center aligned grid ready-to-start" id="intro">
  <div class="row" style="padding-bottom: 0;">
    <div id="game-title-box">
      <h1 class="ui header" id="game-title">
        <div class="ui image">
          <img
            src="https://fontmeme.com/permalink/181114/8525b852e5cdd8b351c05820b0e6cfb1.png"
            alt=""
            />
        </div>
      </h1>
      <div class="bottom-content">
        <button class="ui inverted brown button" id="btn-start">
        旅途開始
        </button>
      </div>
    </div>
  </div>
  <div class="row" style="padding-top: 0;">
    <div class="ui steps" id="progress-menu">
      <div class="active step">
        <i class="truck icon"></i>
        <div class="content">
          <div class="title">關卡 1</div>
          <div class="description">初生之犢 - 擊退小怪</div>
        </div>
      </div>
      <div class="step">
        <i class="payment icon"></i>
        <div class="content">
          <div class="title">關卡 2</div>
          <div class="description">小試身手 - 擊退小怪</div>
        </div>
      </div>
      <div class="step">
        <i class="payment icon"></i>
        <div class="content">
          <div class="title">關卡 3</div>
          <div class="description">躊躇滿志 - 擊退小怪</div>
        </div>
      </div>
      <div class="step">
        <i class="payment icon"></i>
        <div class="content">
          <div class="title">關卡 BOSS</div>
          <div class="description">勢如破竹 - 解決菁英</div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="game-dimmer"></div>
<div class="ui middle aligned centered grid" id="playground">
  <div class="row">
    <div class="five wide column">
      <div class="ui centered card" id="player-card">
        <div class="image">
          <img src="http://i63.tinypic.com/9ihd0p.jpg" />
        </div>
        <div class="content">
          <div class="header">
            <div class="name">冒險者</div>
            <span class="lives">
              <i class="red heart icon"></i>
              <i class="red heart icon"></i>
              <i class="red heart icon"></i>
              <i class="heart outline icon"></i>
              <i class="heart outline icon"></i>
            </span>
          </div>
          <div class="meta"style="margin-top: 6px;">
            等級 <span name="level">1</span>
          </div>
          <div class="description">「願勝利女神與我同在」</div>
        </div>
      </div>
    </div>
    <div class="five wide column">
      <div class="ui centered card" id="monster-card">
        <div class="image" id="monster-photo">
          <img src="http://i64.tinypic.com/svgjo6.jpg" alt="" />
        </div>
        <div class="content">
          <div class="header">
            <div class="name">飛行嘶嘶蛇</div>
            <span class="lives">
              <i class="red heart icon"></i>
              <i class="red heart icon"></i>
              <i class="red heart icon"></i>
              <i class="heart outline icon"></i>
              <i class="heart outline icon"></i>
            </span>
          </div>
          <div class="meta"><span class="date">等級 1</span></div>
          <div class="description">「嘶嘶嘶~」</div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="window-centered-box">
  <img
    src="https://www.pngarts.com/files/1/Battle-PNG-Download-Image.png"
    alt=""
    id="btn-battle"
    title="點此以攻擊怪物"
    />
</div>

Prepare - Body(1)

<div class="ui mini modal" id="name-modal">
  <div class="header">稍等，冒險者，還未請教您的大名...</div>
  <div class="content">
    <div class="ui form">
      <div class="fluid field">
        <input type="text" placeholder="Full Name" name="player-name">
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui approve green button">開始</div>
  </div>
</div>

Prepare - Body(2) - Name Modal

<div class="ui basic tiny modal" id="action-modal">
  <div class="header" id="turn-title">第 1 回合</div>
  <div class="ui basic segment">
    <p>請選擇攻擊方式：</p>
    <div class="ui center aligned three column grid">
      <div class="column">
        <div class="attack">
          <img src="http://i66.tinypic.com/23r0f48.jpg" id="paper"/>
        </div>
      </div>
      <div class="column">
        <div class="attack">
          <img src="http://i64.tinypic.com/x0o9aq.jpg" id="scissors"/>
        </div>
      </div>
      <div class="column">
        <div class="attack">
          <img src="http://i67.tinypic.com/2hhkw7k.jpg" id="stone"/>
        </div>
      </div>
    </div>
  </div>
</div>

Prepare - Body(3) - Action Modal

<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
<script src="script.js"></script>

Prepare - Body(4) - Scripts

body {
  overflow: hidden;
  height: 100vh;
}

.bg {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url(https://dbkrblog.files.wordpress.com/2016/07/info1_11.png) 0 0 no-repeat / cover;
  filter: brightness(0.5);
}

#game-title-box {
  display: flex;
  align-items: flex-end;
  position: relative;
  width: 100%;
  height: 150px;
  border: 5px solid #540101;
  border-bottom: none;
  padding: 1rem;
}

#game-title-box .bottom-content {
  flex: 0 0 120px;
  margin-bottom: -32px;
  text-align: center;
}

#game-title {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 16px;
  right: 16px;
  left: 16px;
  bottom: 32px;
  margin: 0;
  padding: 1.5rem;
  text-align: center;
  background: linear-gradient(
    -10deg,
    rgba(187, 189, 52, 0.81) -21%,
    rgba(84, 1, 1, 0.88) 35%,
    rgba(62, 0, 0, 0.88) 67%,
    #cc1d1dbf 110%
  );
  box-shadow: 0 5px 12px 2px #2b0101, 0 2px 3px -1px #1d1d1d;
  z-index: 1;
  transition: all 0s;
}
#game-title .image {
  width: 386px;
  transform: scaleX(1.15);
}

#game-title-box:before,
#game-title-box:after {
  content: "";
  display: block;
  position: relative;
  bottom: -16px;
  flex: 2 0 0;
  height: 1px;
  border-radius: 3px 0 0 0;
  border-bottom: 5px solid #540101;
  z-index: 2;
}
#game-title-box:before {
  left: -19px;
}
#game-title-box:after {
  right: -19px;
}

#btn-start {
  position: relative;
  z-index: 999;
}

#intro {
  position: relative;
  transition: transform 0.6s;
  z-index: 2;
}

#progress-menu {
  width: 100%;
  z-index: 0;
  opacity: 1;
  transition: opacity 0.8s;
  transition-delay: 1.2s;
}

#intro.ready-to-start {
  transform: translateY(40vh);
  transition: transform 0s;
}
#intro.ready-to-start #progress-menu {
  opacity: 0;
  transition: opacity 0s;
}
#intro.ready-to-start #game-title-box {
  width: 600px;
  transition: width 0.6s 0.8s;
}

/* 開始遊戲後 */
#intro:not(.ready-to-start) {
  transform: translateY(0);
  transition-delay: 0.6s;
}
#intro:not(.ready-to-start) #game-title-box {
  height: 118px;
  transition: all 0.6s 0.6s;
}
#intro:not(.ready-to-start) #game-title-box:before,
#intro:not(.ready-to-start) #game-title-box:after {
  opacity: 0;
}

#intro:not(.ready-to-start) #game-title {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 1.5rem;
  border-bottom: 5px solid #540101;
  transition: all 0.6s;
}

#intro:not(.ready-to-start) #btn-start {
  display: none;
}

/* 通用樣式 */
.ui.steps .step {
  background: linear-gradient(rgba(107, 73, 0, 0.84) 5%, rgba(1, 39, 11, 0.86));
  color: #adca42;
}
.ui.steps .step.active {
  background: linear-gradient(
    rgba(105, 28, 15, 0.87) 5%,
    rgba(148, 23, 98, 0.85)
  );
}
.ui.steps .step.active .title {
  color: #5dc2c7;
}
.ui.steps .step:after,
.ui.steps .step.active:after {
  background: #f9db3e;
}
.ui.steps .step .description {
  color: #adca42;
}

.ui.card {
  background: transparent;
  box-shadow: none;
}

/* 修改字體 */
.ui *,
.ui.header,
.ui.button,
.ui.steps .step .title {
  font-family: "微軟正黑體", "Microsoft Jen Hei";
}

.ui.card .image {
  background: transparent;
}
.ui.card > .content,
.ui.cards > .card > .content {
  background: rgba(255, 234, 172, 0.65);
}

#playground {
  height: calc(100vh - 200px);
  display: flex;
  align-items: center;
}

.game-dimmer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #181818;
  z-index: 1;
  opacity: 1;
  transition: all 1s;
}

.game-dimmer.disabled {
  z-index: -1;
  opacity: 0;
  transition-delay: 0.6s;
}

/* input[name=player-name] {
  width: 100 !important;
} */

.window-centered-box {
  position: fixed;
  top: calc(50% + 200px / 2);
  left: 50%;
  transform: translate3D(-50%, -50%, 0);
  width: 100px;
  height: 100px;
}

#btn-battle {
  width: 100%;
  cursor: pointer;
  transition: all .25s;
}

#btn-battle.active {
  filter: brightness(1.25);
  transform: scale(1.25);
}

.attack {
  position: relative;
  border: none;
}

.attack:before, .attack:after {
  content: "";
  position: absolute;
  top: -4px;
  right: 10px;
  bottom: -4px;
  left: 10px;
  opacity: 0;
  transition: opacity .4s;
}

.attack [class^=label] {
  position: absolute;
  padding: 4px 6px;
}

.attack.me:before {
  border: 1px solid rgb(40, 108, 253);
}

.attack .label-me {
  left: 11px;
  top: -3px;
  right: auto;
  bottom: auto;
  background: rgb(40, 108, 253);
}

.attack.monster:after {
  top: -2px;
  bottom: -2px;
  right: 8px;
  left: 8px;
  border: 1px solid rgb(255, 71, 71);
}

.attack .label-monster {
  right: 9px;
  bottom: -1px;
  top: auto;
  left: auto;
  background: rgb(255, 71, 71);
}

.attack.selected:before, .attack.selected:after {
  opacity: 1;
}

.attack.selected img {
  animation: blink 1s forwards;
}

@keyframes blink {
  0% {
    filter: brightness(1);
  }
  33% {
    filter: brightness(2);
  }
  67% {
    filter: brightness(1.2);
  }
  100% {
    filter: brightness(1.5);
  }
}

Prepare - CSS

Are you ready?

Let's collide with monsters!

var startGame = false; // 是否進入遊戲
var currentStage = 1; // 當前關卡
var currentRound = 1; // 當前回合
// 各關卡背景
var stageBg = [
  "https://dbkrblog.files.wordpress.com/2016/07/info1_11.png",
  "https://dbkrblog.files.wordpress.com/2016/07/info1_10.png",
  "https://dbkrblog.files.wordpress.com/2016/07/info1_22.png",
  "https://dbkrblog.files.wordpress.com/2016/07/20160706053006a0egagut4p0g3onr.jpg"
];
// 各關卡怪獸
var monsters = [
  {
    name: "飛行嘶嘶蛇",
    level: 1,
    lives: 3,
    photo: "http://i64.tinypic.com/svgjo6.jpg",
    comment: "嘶嘶嘶~"
  },
  {
    name: "戴奧辛大閘蟹",
    level: 2,
    lives: 3,
    photo: "http://skullstonegame.com/press/images/skullstone_flying_snake.png",
    comment: "猜猜我被賣到哪裡去？"
  },
  {
    name: "巨石強森怪",
    level: 3,
    lives: 4,
    photo: "http://skullstonegame.com/press/images/skullstone_golem.png",
    comment: "R.O.C.K!"
  },
  {
    name: "單身400年的繃帶怪",
    level: 5,
    lives: 5,
    photo: "https://dbkrblog.files.wordpress.com/2016/09/disgael.png",
    comment: "妹子妹子妹子妹子A_A"
  }
];
// 主角
var player = {
  name: "冒險者",
  level: 1,
  lives: 5,
}
// 一些遊戲UI flag
var attack_modal_show = false;
var disabled_select_weapon = false;
var is_battling = false;

Declare necessary variable

Get the name of your character 

$("#btn-start").click(function() {
  $("input[name=player-name]").val(player.name);
  $("#name-modal").modal({
    closable: false,
    onApprove : function() {
      // 1. 試著取得name-modal中輸入框的值，再改變player物件裡的名稱
      var name = $("輸入框").val();
      player.??? = name;
      
      // Don't move below
      $("#intro").removeClass("ready-to-start");
      $(".game-dimmer").addClass("disabled");
    }
  }).modal("show");
});

Render Characters Info

$("#btn-start").click(function() {
  $("input[name=player-name]").val(player.name);
  $("#name-modal").modal({
    closable: false,
    onApprove : function() {
      // 1. 試著取得name-modal中輸入框的值，再改變player物件裡的名稱
      /* 
         Answer of part 1...
      */
      
      /*
         2. 宣告一函式 renderInfo(name, character)，其功能為顯示player及monster資訊;
      */
      renderInfo("player", player);
      renderInfo("monster", 「當前關卡的怪獸物件」);

      
      // Don't move below
      $("#intro").removeClass("ready-to-start");
      $(".game-dimmer").addClass("disabled");
    }
  }).modal("show");
});

function renderInfo(name, character) {
  var card = $(`#${name}-card`);
  card.find(".name").text(character.name);
  card.find(".level").text(character.level);
  card.find(".description").text(character.scripts);
  card.find(".lives").empty();
  var heart = "<i class='red heart icon'></i>";
  for (var i = 0; i < character.lives; i++) {
    card.find(".lives").append(heart);
  }
}

Make a hover effect of attack button

$("#btn-battle").mouseover(function() {
  // 滑鼠移上去，使用 $(selector).addClass(some_class) 為按鈕增加 active 這class
  $(this).addClass(???);
});

$("#btn-battle").mouseleave(function() {
  // 滑鼠移出，使用 $(selector).removeClass(some_class) 為按鈕移除 active 這class
  $(this).removeClass(???);
});

/*
  可合併寫成
  $("#btn-battle").mouseover(function() {
    $(this).addClass("active");
  }).mouseleave(function() {
    $(this).removeClass("active");
  });
*/

JQuery final project

By David Tsui

Made with Slides.com

JQuery final project

  • 426

More from David Tsui