007 Goldeneye N64 Watch

007-goldeneye-n64-watch.markdown

007 Goldeneye N64 Watch

A more updated version can be found here: https://github.com/showhaus/007JS

http://pedrumgolriz.com/007

A Pen by BAUS on CodePen.

License.

index.html

<div id="baus">
  <p id="gameTitle">Golden&#43;EYE</p>
  <p class="edition">Survival Edition by <a href="http://pedrumgolriz.com">BAUS</a> <span id="gameSubtitle">
  007&#42;
</span>
</div>
<div class="watch">
  <div class="active title">G WATCH V2.01 BETA</div>
  <div class="active subtitle">MISSION STATUS: <span id="status">INCOMPLETE</span></div>
  <div class="abort active subtitle"><span class="abortText">Abort Mission</span> </div>
  <img src="#" id="weaponImg" class="notransition" />
  <div class="active weapon">PP7 (silenced)<p class="weaponMenu"></p></div>
  <ul class="weaponMenu"></ul>
  <table class="controls">
    <tr>
      <td class="leftMouse">fire</td>
      <td class="rightMouse">aim/zoom</td>
    </tr>
    <tr>
      <td class="reload">reload</td>
      <td class="pause">(un)pause</td>
    </tr>
  </table>
  <div class="active ammo">16 </div>
  <div class="activebox"></div>
  
  <audio class="pausetheme" loop>
    <source src="http://pedrumgolriz.com/sounds/pause.mp3" type="audio/mpeg">
  </audio>
  <audio class="beep">
    <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/57826/scroll.mp3" type="audio/mpeg">
  </audio>
  <div id="sound"></div>
</div>
<p>Use left and right arrows to navigate through menu. Up and down will change weapons on second page</p>

script.js

//http://pedrumgolriz.com/007 
//Game Data variables
//prelim actions
//playOpeningAnimation();
//showMenu + options + levels etc..
var inGame = true; //setting true to simulate already in game
var left = 37,
    up = 38,
  right = 39,
   down = 40,
   enter = 13,
    lclick = 1,
    rclick = 3;
/*$(document).on('keydown', function(e) {
  var key = e.keyCode;
  e.preventDefault();
  e.stopPropagation();
  if(key == enter && inGame == true){
    pause();
    inGame = false;
  }
});*/
pause();

function pause() {
  $('.watch').show();
  //$('.pausetheme')[0].play();
  setInterval(function() {
    incomplete()
  }, 1000);
 // $('.beep').prop('volume', 0.1);

  function incomplete() {
    
    setTimeout(function() {
      $('#status').fadeOut("slow");
    }, 1500);
    setTimeout(function() {
      $('#status').fadeIn("slow");
    }, 1500);
  }
  var currentWeapon = 0,
    menu = 0;
  var weapons = [{
    "name": "PP7 (silenced)",
    "ammoType": "9mm",
    "ammo": "∞",
    "loaded": "7",
    "image": "https://i.imgur.com/Q0eAPwd.gif"
  }, {
    "name": "<br/>Klobb",
    "ammoType": "9mm",
    "ammo": "16",
    "loaded": "9",
    "image": "https://i.imgur.com/JCi23op.gif"
  }, {
    "name": "Sniper Rifle",
    "ammoType": "rifle",
    "ammo": "8",
    "loaded": "4",
    "image": "https://i.imgur.com/xjQW3o6.gif"
  }, {
    "name": "Cougar Magnum",
    "ammoType": "magnum",
    "ammo": "6",
    "loaded": "3",
    "image": "https://i.imgur.com/VcuVVo7.gif"
  }, {
    "name": "Throwing Knife",
    "ammoType": "tknife",
    "loaded": "2",
    "ammo": "",
    "image": "https://i.imgur.com/hwsMZj7.gif"
  }];
  var ammo = {
    "9mm": {
      "image": "https://i.imgur.com/9vKZbX5.gif?1"
    },
    "rifle": {
      "image": "https://i.imgur.com/Z4bVnf7.gif?1"
    },
    "magnum": {
      "image": "https://i.imgur.com/f9GnwXP.gif"
    },
    "unarmed": {
      "image": "https://i.imgur.com/aZXVoWv.png"
    },
    "tknife": {
      "image": "https://i.imgur.com/aZXVoWv.png"
    }
  };
  //Keypresses
  var key; //keypress
  incomplete();
  weaponImg();
  $('.abort').css({
    opacity: 0.5
  });
  $('.weapon').html(weapons[currentWeapon].name);
  $('.ammo').html(
    weapons[currentWeapon].loaded +
    '<img class="bullet" src="' + ammo[weapons[currentWeapon].ammoType].image + '"/>' +
    weapons[currentWeapon].ammo
  );
  $('.abort').on('tap keydown', function(e) {
    e.preventDefault();
    if (e.keyCode == 13 || e.which == 1) {
      closeWatch();
      //showLevelSelection();
      inGame = false;
    }
  });
  $(document).keydown(function(e) {
    key = e.keyCode;
    e.preventDefault();
    $('.weaponMenu').html('');
    weaponImg();
    $('.abort').blur();
    $('.abort').css({
      opacity: 0.5
    });
    $('#weaponImg').addClass('notransition');
    if(key == enter){
      closeWatch();
    }
    if (key == up && menu == 1) {
      playSound();
      if (currentWeapon == 0)
        currentWeapon = weapons.length - 1;
      else
        currentWeapon--;
    } else if (key == down && menu == 1) {
      playSound();
      if (currentWeapon == weapons.length - 1)
        currentWeapon = 0;
      else
        currentWeapon++;
    } else if (key == left && menu != 0) {
      menu--;
      $('.activebox').css('margin-left', parseInt($('.activebox').css('margin-left')) - 72 + 'px');
      playSound();
    } else if (key == right && menu != 4) {
      playSound();
      menu++;
      $('.activebox').css('margin-left', parseInt($('.activebox').css('margin-left')) + 72 + 'px');
    } else if (key == right && menu == 4) {
      playSound();
      menu = 0;
    } else if (key == left && menu == 0) {
      playSound();
      menu = 4;
      $('.activebox').css('margin-left', '515px');
    } else if (key == down && menu == 0) {
      playSound();
      $('.abort').css({
        opacity: 1
      });
      $('.abort').attr("tabindex", -1).focus();
    } else if (key == up && menu == 0) {
      $('.abort').css({
        opacity: 0.5
      });
      playSound();
      $('.abort').focus();
    }
    if (menu == 0) {
      weaponImg();
      $('.activebox').css('margin-left', '227px');
      $('.title, .abort, .subtitle, .weapon').css('visibility', 'visible');
    } else if (menu == 1) {
      $('#weaponImg').removeClass('notransition');
      $('.weaponMenu').show();
      weaponImg("onlyWeapon");
      $('.title, .abort, .subtitle').css('visibility', 'hidden');
      $.each(weapons, function(index, key) {
        var textOnly = key.name.replace(/(<([^>]+)>)/ig, '');
        $('.weaponMenu').append('<li><a href="#">' + textOnly + '</a></li>');
      });
      $("li:contains(" + weapons[currentWeapon].name.replace(/(<([^>]+)>)/ig, '') + ") a").addClass('focus');
    } else {
      hideWeapons();
      $('.title, .abort, .subtitle').css('visibility', 'hidden');
    }
    if(menu == 2){
      $('.controls').show();
    }
    else{
      $('.controls').hide();
    }
    $('.weapon').html(weapons[currentWeapon].name);
    $('.ammo').html(
      weapons[currentWeapon].loaded +
      '<img class="bullet" src="' + ammo[weapons[currentWeapon].ammoType].image + '"/>' +
      weapons[currentWeapon].ammo
    );
  });

  function playSound() {
    $('.beep')[0].play();
  }

  function weaponImg(wep) {
    $('img').attr('src', weapons[currentWeapon].image);
    if (!wep)
      $('.weapon, .ammo, #weaponImg').css('visibility', 'visible');
    else {
      $('.ammo, .weapon').css('visibility', 'hidden');
      $('#weaponImg').css('visibility', 'visible');
    }
  }

  function hideWeapons() {
    $('.weapon, .ammo, #weaponImg').css('visibility', 'hidden');
  }

  function closeWatch() {
    //show exit animation
    $('.watch').hide();
    $('.pausetheme')[0].pause();
    $('.pausetheme')[0].currentTime = 0;
    inGame = true;
  }
};

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  background-color: black;
  color: white;
}

@font-face {
  font-family: '007_goldeneyeregular';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/57826/007_goldeneye-webfont.eot');
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/57826/007_goldeneye-webfont.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/57826/007_goldeneye-webfont.woff2') format('woff2'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/57826/007_goldeneye-webfont.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/57826/007_goldeneye-webfont.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/57826/007_goldeneye-webfont.svg#007_goldeneyeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face{
  font-family: 'bond';
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57826/007.otf") format("opentype");
}

.watch {
  background: url('https://i.imgur.com/87uECYy.png') no-repeat center center;
  background-repeat: no-repeat;
  position: relative;
  width: 800px;
  height: 600px;
  margin: 0 auto;
  background-size: 800px 700px;
  font-family: 'bond';
  -webkit-transform: scale(1.1, 1);
  -moz-transform: scale(1.1, 1);
  -ms-transform: scale(1.1, 1);
  -o-transform: scale(1.1, 1);
  transform: scale(1.1, 1);
  background-color: black;
  zoom: 75%;
  display: none;
  /*webkit*/
}

.active {
  color: rgb(5, 143, 4);
}

.title {
  font-size: 18px;
  padding-top: 166px;
  text-align: center;
  -webkit-transform: scale(1.5, 1);
  -moz-transform: scale(1.5, 1);
  -ms-transform: scale(1.5, 1);
  -o-transform: scale(1.5, 1);
  transform: scale(1.5, 1);
}

.subtitle {
  font-size: 15px;
  padding-top: 11px;
  text-align: center;
  -webkit-transform: scale(1.525, 1);
  -moz-transform: scale(1.525, 1);
  -ms-transform: scale(1.525, 1);
  -o-transform: scale(1.525, 1);
  transform: scale(1.525, 1);
}

.weapon {
  width: 80px;
  text-align: center;
  font-size: 17px;
  -webkit-transform: scale(1.37, 1);
  -moz-transform: scale(1.3, 1);
  -ms-transform: scale(1.3, 1);
  -o-transform: scale(1.3, 1);
  transform: scale(1.3, 1);
  margin-top: 40px;
  margin-left: 240px;
  min-height: 40px;
  vertical-align: bottom;
  margin-bottom: 148px;
  bottom: 0;
  position: absolute;
}

.ammo {
  margin-left: 525px;
  text-align: right;
  margin-bottom: 148px;
  bottom: 0;
  position: absolute;
  font-size: 17px;
  -webkit-transform: scale(1.37, 1);
  -moz-transform: scale(1.3, 1);
  -ms-transform: scale(1.3, 1);
  -o-transform: scale(1.3, 1);
  transform: scale(1.3, 1);
}

.activebox {
  background-color: rgb(5, 143, 4);
  width: 59px;
  height: 13px;
  float: left;
  margin-bottom: 128px;
  bottom: 0;
  position: absolute;
  margin-left: 227px;
}

#status {
  display: inline-block;
  min-width: 50px;
}

#weaponImg {
  display: block;
  position: relative;
  margin: 0 auto;
  height: 50px;
  padding-top: 20px;
  -webkit-animation: rotate 2s linear infinite;
  -moz-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  border: 0;
  zoom: 200%;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotatey(360deg);
  }
}

@-moz-keyframes rotate {
  100% {
    -moz-transform: rotatey(360deg);
  }
}

@keyframes rotate {
  100% {
    transform: rotatey(360deg);
  }
}

.notransition {
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
}
#weaponImg:not(.notransition){
  opacity: .5;
}
.bullet {
  margin-bottom: -15px;
}
#gameTitle{
  font-family: "007_goldeneyeregular";
  font-size: 50px;
  text-align: center;
  color: gold;
  max-width: 100%;
  padding-right: 10px;
}
#gameSubtitle{
  font-family: "007_goldeneyeregular";
  color: silver;
  font-size: 75px;
  text-align: center;
  margin: 0px -180px 0 0;
  max-width: 100%;
  display: inline-block;
}
.edition{
  font-family: bond;
  color: silver;
  text-align: center;
  max-width: 100%;
  margin-top: -60px;
}
a{
  color: inherit;
  text-decoration: none;
}
.abort span{
  margin: 0 18px;
}
.focus {
    outline: 0;
  text-shadow: 0px 0px 1px #fff;
}
*:focus{
  outline: 0;
  text-shadow: 0px 0px 1px #fff;
}
.weaponMenu{
  display: none;
  margin-left: 225px;
  color: rgb(5, 143, 4);
}
.weaponMenu .focus{
  background: rgb(5, 143, 4);
  color: white;
}
.controls{
  display: none;
  text-align: right;
  margin: -200px auto;
}
.controls td{
    padding: 25px;
    font-size: 35px;
}
.leftMouse:before{
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/57826/1439252628_mouse_select_left.png') no-repeat 0 0;
  content: "";
  float: left;
  width: 32px;
  height: 32px;
  margin: 0 5px 0 0;
}
.rightMouse:before{
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/57826/1439252653_mouse_select_right.png') no-repeat 0 0;
  content: "";
  float: left;
  width: 32px;
  height: 32px;
  margin: 0 5px 0 0;
}
.reload:before{
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/57826/1439253716_key_R.png') no-repeat 0 0;
  content: "";
  float: left;
  width: 32px;
  height: 32px;
  margin: 0 5px 0 0;
  background-size: 32px;
}
.pause:before{
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/57826/1439253917_key_return.png') no-repeat 0 0;
  content: "";
  float: left;
  width: 32px;
  height: 32px;
  margin: 0 5px 0 0;
  background-size: 32px;
}