Mini game Halloween "Shoot the zombie"

Shoot the zombie

Hãy cùng tạo trang game Bằn Zombie cho website của bạn. Luật chơi rất đơn giản: bạn hãy ngắm bắn những con Zombie trong khoảng thời gian 10s bằng cách click vào chúng.

CSS

@import url(http://fonts.googleapis.com/css?family=Sancreek);

/* ==================
General layout classes
======================   */
body {
  background-color: teal;
  text-align: center;
  color: #ccc;
  font-family: sans-serif;
}

h1 {
  font-family: "Sancreek";
  font-size: 3em;
  margin-bottom: 0;
}

h2 { bna5
  display:inline-block; 
  background-color: #ccc;
  color: #777;
  padding: 10px;
  margin: 10px auto;
}

h2:hover {
  background-color: #222;
  cursor: pointer;
}

.game_info, .speel_zone {
  width: 400px;
  margin: 0 auto;
}

.speel_zone {
  cursor: url(http://www.rw-designer.com/cursor-extern.php?id=38558);
  
  /*cursor:url(/img/magnify.cur), -moz-zoom-in, auto;*/
  border: 3px solid #ccc;
  height: 400px;
  position: relative;
}

/* zombie div  */
.zombie {
  position: relative;
  width: 80px;
  height: 80px;
  background: url(http://icons.iconarchive.com/icons/yootheme/halloween/512/geek-zombie-icon.png);
  background-size:80px;
  display: none;
}

.final_score {
  font-family: "Sancreek";
  font-size: 5em;
  line-height: 400px;
}

.game_started {
  display: none;
}

.score {
  float: left;
}

.timer {
  float: right;
}


/* =========== HELPERS ========= */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

Javascript

<script type='text/javascript'>
//<![CDATA[
(function($) {
  // start game
  // set global variables
  var score, timer_interval, timer = 0;
  
  $( '.start_game' ).click(function() {
    start_game();
  });
  
  $( '.zombie' ).click(function() {
    $(this).css('top', getRandom(0, 320)+'px');
    $(this).css('left', getRandom(0, 320)+'px');
    score += 1;
    show_score();
  });
  
  function show_score(){
    $('.score').text('Score: '+score);
  }
  
  function show_timer(){
    $('.timer').text('Timer: '+timer);
  }
  
  function show_final_score(){
    $('.final_score').text('Score: '+score);
    $( '.final_score' ).show();
  }
  
  function start_game(){
    $( '.game_not_started' ).hide();
    $( '.final_score' ).hide();
    $( '.game_started' ).show();
    $( '.zombie' ).show();
    
    
    score = 0;
    show_score();
    
    timer = 10;
    timer_interval = setInterval(timer_countdown, 100);
    show_timer();
  }
  
  function stop_game(){
    $( '.hide' ).show();
    $( '.game_not_started' ).show();
    $( '.game_started' ).hide();
    $( '.final_score' ).show();
    $( '.zombie' ).hide();
    show_final_score();
  }
  

  function timer_countdown(){
    timer -= 0.1;
    timer = Math.round(timer*10)/10;
    if (timer <= 0)
    {
      clearInterval(timer_interval);
      stop_game();
    }
    
    show_timer();
  }
  
})(jQuery);

// ========= HELPERS ===============
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
//]]>
</script>

HTML

<h1>Shoot the zombie</h1>
<div class='game_info clearfix'>
  <div class="game_not_started">
    <h2 class='start_game'>Start game</h2>
  </div>
  <div class="game_started">
    <span class="score"></span>
    <span class="timer"></span>
  </div>
</div>

<div class="speel_zone">
  
  <div class='zombie'></div>
  <div class="final_score"></div>
</div>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm