sourcecode Arsip - Farazinux https://farazinux.com/tag/sourcecode/ Belajar Bareng, Sukses Bareng Tue, 06 Aug 2024 09:52:05 +0000 en-US hourly 1 https://farazinux.com/wp-content/uploads/2022/04/icon-farazinux-2-150x150.png sourcecode Arsip - Farazinux https://farazinux.com/tag/sourcecode/ 32 32 Sourcecode Game HTML Javascript | Tetris Menumpuk Bata https://farazinux.com/sourcecode-game-html-javascript-tetris-menumpuk-bata/ https://farazinux.com/sourcecode-game-html-javascript-tetris-menumpuk-bata/#respond Tue, 06 Aug 2024 09:51:57 +0000 https://farazinux.com/?p=6332 Sourcecode Game HTML Javascript yang farazinux.com kali ini bagikan adalah source code game tetris. Sebuah game jadul alias kuno atau lawas namun tetap sangat mengasikkan untuk dimainkan dalam rangka mengusir gabut dan rasa bosan. Game tetris adalah game lawas dan sangat populer. Cara bermainnya adalah anda akan diberikan batu bata dengan beberapa bentuk yang sangat […]

Artikel Sourcecode Game HTML Javascript | Tetris Menumpuk Bata pertama kali tampil pada Farazinux.

]]> Sourcecode Game HTML Javascript yang farazinux.com kali ini bagikan adalah source code game tetris. Sebuah game jadul alias kuno atau lawas namun tetap sangat mengasikkan untuk dimainkan dalam rangka mengusir gabut dan rasa bosan.

Game tetris adalah game lawas dan sangat populer. Cara bermainnya adalah anda akan diberikan batu bata dengan beberapa bentuk yang sangat khas. Tugas anda adalah menumpuk kotak atau batu bata tersebut dengan rapi, sehingga membentuk barisan batu bata yang tidak berlobang.

Main Game Tetris HTML Javascript

Berikut ini adalah game tetris yang dibuat dengan html dan javascript. Untuk memainkannya silahkan tekan tombol spasi pada keyboard anda. Sedangkan untuk berhenti sejenak anda dapat menekan tombol esc pada keyboard.

Beberapa tombol yang diperlukan untuk memainkan game Tetris ini adalah tombol spasi, esc dan tombol panah atas, bawah, kanan dan kiri keyboard. Adapun kegunaan masing-masing tombol tersebut adalah sebagai berikut:

  • Tombol spasi untuk memulai aplikasi game tetris.
  • Tombol esc untuk menjeda atau berhenti dari game tetris.
  • Tombol panah ke atas untuk merotasi bentuk blok yang sedang berjalan.
  • Tombol panah ke bawah untuk mempercepat blok turun ke bawah.
  • Tombol panah ke kanan untuk menggeser blok yang sedang berjalan ke arah kanan.
  • Tombol panah ke kiri untuk menggeser blok yang sedang berjalan ke arah kiri.

Untuk lebih jelasnya silahkan mainkan aplikasi game tetris berbasis html dan javascript di bawah ini.

Main Langsung

Sourcecode Game Tetris

Game tetris ini hanya menggunakan dua file yaitu html dan javascript. Untuk sourcecode game tetris berbasis html dan javascript ini silahkan perhatikan sourcecode berikut ini:

1. File html (index.hmtl)

<!DOCTYPE html>
<html>

<head>
  <title>Numpuk Boto Farazinux</title>
  <style>
    body {
      font-family: Helvetica, sans-serif;
    }

    #tetris {
      margin: 1em auto;
      padding: 1em;
      border: 4px solid black;
      border-radius: 10px;
      background-color: #F8F8F8;
    }

    #stats {
      display: inline-block;
      vertical-align: top;
    }

    #canvas {
      display: inline-block;
      vertical-align: top;
      background: url(texture.jpg);
      box-shadow: 10px 10px 10px #999;
      border: 2px solid #333;
    }

    #menu {
      display: inline-block;
      vertical-align: top;
      position: relative;
    }

    #menu p {
      margin: 0.5em 0;
      text-align: center;
    }

    #menu p a {
      text-decoration: none;
      color: black;
    }

    #upcoming {
      display: block;
      margin: 0 auto;
      background-color: #E0E0E0;
    }

    #score {
      color: red;
      font-weight: bold;
      vertical-align: middle;
    }

    #rows {
      color: blue;
      font-weight: bold;
      vertical-align: middle;
    }

    #stats {
      position: absolute;
      bottom: 0em;
      right: 1em;
    }

    @media screen and (min-width: 0px) and (min-height: 0px) {
      #tetris {
        font-size: 0.75em;
        width: 250px;
      }

      #menu {
        width: 100px;
        height: 200px;
      }

      #upcoming {
        width: 50px;
        height: 50px;
      }

      #canvas {
        width: 100px;
        height: 200px;
      }
    }

    /* 10px chunks */
    @media screen and (min-width: 400px) and (min-height: 400px) {
      #tetris {
        font-size: 1.00em;
        width: 350px;
      }

      #menu {
        width: 150px;
        height: 300px;
      }

      #upcoming {
        width: 75px;
        height: 75px;
      }

      #canvas {
        width: 150px;
        height: 300px;
      }
    }

    /* 15px chunks */
    @media screen and (min-width: 500px) and (min-height: 500px) {
      #tetris {
        font-size: 1.25em;
        width: 450px;
      }

      #menu {
        width: 200px;
        height: 400px;
      }

      #upcoming {
        width: 100px;
        height: 100px;
      }

      #canvas {
        width: 200px;
        height: 400px;
      }
    }

    /* 20px chunks */
    @media screen and (min-width: 600px) and (min-height: 600px) {
      #tetris {
        font-size: 1.50em;
        width: 550px;
      }

      #menu {
        width: 250px;
        height: 500px;
      }

      #upcoming {
        width: 125px;
        height: 125px;
      }

      #canvas {
        width: 250px;
        height: 500px;
      }
    }

    /* 25px chunks */
    @media screen and (min-width: 700px) and (min-height: 700px) {
      #tetris {
        font-size: 1.75em;
        width: 650px;
      }

      #menu {
        width: 300px;
        height: 600px;
      }

      #upcoming {
        width: 150px;
        height: 150px;
      }

      #canvas {
        width: 300px;
        height: 600px;
      }
    }

    /* 30px chunks */
    @media screen and (min-width: 800px) and (min-height: 800px) {
      #tetris {
        font-size: 2.00em;
        width: 750px;
      }

      #menu {
        width: 350px;
        height: 700px;
      }

      #upcoming {
        width: 175px;
        height: 175px;
      }

      #canvas {
        width: 350px;
        height: 700px;
      }
    }

    /* 35px chunks */
    @media screen and (min-width: 900px) and (min-height: 900px) {
      #tetris {
        font-size: 2.25em;
        width: 850px;
      }

      #menu {
        width: 400px;
        height: 800px;
      }

      #upcoming {
        width: 200px;
        height: 200px;
      }

      #canvas {
        width: 400px;
        height: 800px;
      }
    }

    /* 40px chunks */
  </style>
</head>

<body>

  <div id="tetris">
    <div id="menu">
      <p id="start"><a href="javascript:play();">Untuk Main Pencet Spasi, untuk jeda pencet Esc.</a></p>
      <p><canvas id="upcoming"></canvas></p>
      <p>score <span id="score">00000</span></p>
      <p>rows <span id="rows">0</span></p>
      <p>Untuk donasi atau Nyawer <a href="https://saweria.co/ipunx"><span id="score">Klik di sini</span></a>
      </p>
    </div>
    <canvas id="canvas">
      Sorry, this example cannot be run because your browser does not support the &lt;canvas&gt; element
    </canvas>
  </div>

  <script src="stats.js"></script>
  <script>

    //-------------------------------------------------------------------------
    // base helper methods
    //-------------------------------------------------------------------------

    function get(id) { return document.getElementById(id); }
    function hide(id) { get(id).style.visibility = 'hidden'; }
    function show(id) { get(id).style.visibility = null; }
    function html(id, html) { get(id).innerHTML = html; }

    function timestamp() { return new Date().getTime(); }
    function random(min, max) { return (min + (Math.random() * (max - min))); }
    function randomChoice(choices) { return choices[Math.round(random(0, choices.length - 1))]; }

    if (!window.requestAnimationFrame) { // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
      window.requestAnimationFrame = window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback, element) {
          window.setTimeout(callback, 1000 / 60);
        }
    }

    //-------------------------------------------------------------------------
    // game constants
    //-------------------------------------------------------------------------

    var KEY = { ESC: 27, SPACE: 32, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40 },
      DIR = { UP: 0, RIGHT: 1, DOWN: 2, LEFT: 3, MIN: 0, MAX: 3 },
      stats = new Stats(),
      canvas = get('canvas'),
      ctx = canvas.getContext('2d'),
      ucanvas = get('upcoming'),
      uctx = ucanvas.getContext('2d'),
      speed = { start: 0.6, decrement: 0.005, min: 0.1 }, // how long before piece drops by 1 row (seconds)
      nx = 10, // width of tetris court (in blocks)
      ny = 20, // height of tetris court (in blocks)
      nu = 5;  // width/height of upcoming preview (in blocks)

    //-------------------------------------------------------------------------
    // game variables (initialized during reset)
    //-------------------------------------------------------------------------

    var dx, dy,        // pixel size of a single tetris block
      blocks,        // 2 dimensional array (nx*ny) representing tetris court - either empty block or occupied by a 'piece'
      actions,       // queue of user actions (inputs)
      playing,       // true|false - game is in progress
      dt,            // time since starting this game
      current,       // the current piece
      next,          // the next piece
      score,         // the current score
      vscore,        // the currently displayed score (it catches up to score in small chunks - like a spinning slot machine)
      rows,          // number of completed rows in the current game
      step;          // how long before current piece drops by 1 row

    //-------------------------------------------------------------------------
    // tetris pieces
    //
    // blocks: each element represents a rotation of the piece (0, 90, 180, 270)
    //         each element is a 16 bit integer where the 16 bits represent
    //         a 4x4 set of blocks, e.g. j.blocks[0] = 0x44C0
    //
    //             0100 = 0x4 << 3 = 0x4000
    //             0100 = 0x4 << 2 = 0x0400
    //             1100 = 0xC << 1 = 0x00C0
    //             0000 = 0x0 << 0 = 0x0000
    //                               ------
    //                               0x44C0
    //
    //-------------------------------------------------------------------------

    var i = { size: 4, blocks: [0x0F00, 0x2222, 0x00F0, 0x4444], color: 'cyan' };
    var j = { size: 3, blocks: [0x44C0, 0x8E00, 0x6440, 0x0E20], color: 'blue' };
    var l = { size: 3, blocks: [0x4460, 0x0E80, 0xC440, 0x2E00], color: 'orange' };
    var o = { size: 2, blocks: [0xCC00, 0xCC00, 0xCC00, 0xCC00], color: 'yellow' };
    var s = { size: 3, blocks: [0x06C0, 0x8C40, 0x6C00, 0x4620], color: 'green' };
    var t = { size: 3, blocks: [0x0E40, 0x4C40, 0x4E00, 0x4640], color: 'purple' };
    var z = { size: 3, blocks: [0x0C60, 0x4C80, 0xC600, 0x2640], color: 'red' };

    //------------------------------------------------
    // do the bit manipulation and iterate through each
    // occupied block (x,y) for a given piece
    //------------------------------------------------
    function eachblock(type, x, y, dir, fn) {
      var bit, result, row = 0, col = 0, blocks = type.blocks[dir];
      for (bit = 0x8000; bit > 0; bit = bit >> 1) {
        if (blocks & bit) {
          fn(x + col, y + row);
        }
        if (++col === 4) {
          col = 0;
          ++row;
        }
      }
    }

    //-----------------------------------------------------
    // check if a piece can fit into a position in the grid
    //-----------------------------------------------------
    function occupied(type, x, y, dir) {
      var result = false
      eachblock(type, x, y, dir, function (x, y) {
        if ((x < 0) || (x >= nx) || (y < 0) || (y >= ny) || getBlock(x, y))
          result = true;
      });
      return result;
    }

    function unoccupied(type, x, y, dir) {
      return !occupied(type, x, y, dir);
    }

    //-----------------------------------------
    // start with 4 instances of each piece and
    // pick randomly until the 'bag is empty'
    //-----------------------------------------
    var pieces = [];
    function randomPiece() {
      if (pieces.length == 0)
        pieces = [i, i, i, i, j, j, j, j, l, l, l, l, o, o, o, o, s, s, s, s, t, t, t, t, z, z, z, z];
      var type = pieces.splice(random(0, pieces.length - 1), 1)[0];
      return { type: type, dir: DIR.UP, x: Math.round(random(0, nx - type.size)), y: 0 };
    }


    //-------------------------------------------------------------------------
    // GAME LOOP
    //-------------------------------------------------------------------------

    function run() {

      showStats(); // initialize FPS counter
      addEvents(); // attach keydown and resize events

      var last = now = timestamp();
      function frame() {
        now = timestamp();
        update(Math.min(1, (now - last) / 1000.0)); // using requestAnimationFrame have to be able to handle large delta's caused when it 'hibernates' in a background or non-visible tab
        draw();
        stats.update();
        last = now;
        requestAnimationFrame(frame, canvas);
      }

      resize(); // setup all our sizing information
      reset();  // reset the per-game variables
      frame();  // start the first frame

    }

    function showStats() {
      stats.domElement.id = 'stats';
      get('menu').appendChild(stats.domElement);
    }

    function addEvents() {
      document.addEventListener('keydown', keydown, false);
      window.addEventListener('resize', resize, false);
    }

    function resize(event) {
      canvas.width = canvas.clientWidth;  // set canvas logical size equal to its physical size
      canvas.height = canvas.clientHeight; // (ditto)
      ucanvas.width = ucanvas.clientWidth;
      ucanvas.height = ucanvas.clientHeight;
      dx = canvas.width / nx; // pixel size of a single tetris block
      dy = canvas.height / ny; // (ditto)
      invalidate();
      invalidateNext();
    }

    function keydown(ev) {
      var handled = false;
      if (playing) {
        switch (ev.keyCode) {
          case KEY.LEFT: actions.push(DIR.LEFT); handled = true; break;
          case KEY.RIGHT: actions.push(DIR.RIGHT); handled = true; break;
          case KEY.UP: actions.push(DIR.UP); handled = true; break;
          case KEY.DOWN: actions.push(DIR.DOWN); handled = true; break;
          case KEY.ESC: lose(); handled = true; break;
        }
      }
      else if (ev.keyCode == KEY.SPACE) {
        play();
        handled = true;
      }
      if (handled)
        ev.preventDefault(); // prevent arrow keys from scrolling the page (supported in IE9+ and all other browsers)
    }

    //-------------------------------------------------------------------------
    // GAME LOGIC
    //-------------------------------------------------------------------------

    function play() { hide('start'); reset(); playing = true; }
    function lose() { show('start'); setVisualScore(); playing = false; }

    function setVisualScore(n) { vscore = n || score; invalidateScore(); }
    function setScore(n) { score = n; setVisualScore(n); }
    function addScore(n) { score = score + n; }
    function clearScore() { setScore(0); }
    function clearRows() { setRows(0); }
    function setRows(n) { rows = n; step = Math.max(speed.min, speed.start - (speed.decrement * rows)); invalidateRows(); }
    function addRows(n) { setRows(rows + n); }
    function getBlock(x, y) { return (blocks && blocks[x] ? blocks[x][y] : null); }
    function setBlock(x, y, type) { blocks[x] = blocks[x] || []; blocks[x][y] = type; invalidate(); }
    function clearBlocks() { blocks = []; invalidate(); }
    function clearActions() { actions = []; }
    function setCurrentPiece(piece) { current = piece || randomPiece(); invalidate(); }
    function setNextPiece(piece) { next = piece || randomPiece(); invalidateNext(); }

    function reset() {
      dt = 0;
      clearActions();
      clearBlocks();
      clearRows();
      clearScore();
      setCurrentPiece(next);
      setNextPiece();
    }

    function update(idt) {
      if (playing) {
        if (vscore < score)
          setVisualScore(vscore + 1);
        handle(actions.shift());
        dt = dt + idt;
        if (dt > step) {
          dt = dt - step;
          drop();
        }
      }
    }

    function handle(action) {
      switch (action) {
        case DIR.LEFT: move(DIR.LEFT); break;
        case DIR.RIGHT: move(DIR.RIGHT); break;
        case DIR.UP: rotate(); break;
        case DIR.DOWN: drop(); break;
      }
    }

    function move(dir) {
      var x = current.x, y = current.y;
      switch (dir) {
        case DIR.RIGHT: x = x + 1; break;
        case DIR.LEFT: x = x - 1; break;
        case DIR.DOWN: y = y + 1; break;
      }
      if (unoccupied(current.type, x, y, current.dir)) {
        current.x = x;
        current.y = y;
        invalidate();
        return true;
      }
      else {
        return false;
      }
    }

    function rotate() {
      var newdir = (current.dir == DIR.MAX ? DIR.MIN : current.dir + 1);
      if (unoccupied(current.type, current.x, current.y, newdir)) {
        current.dir = newdir;
        invalidate();
      }
    }

    function drop() {
      if (!move(DIR.DOWN)) {
        addScore(10);
        dropPiece();
        removeLines();
        setCurrentPiece(next);
        setNextPiece(randomPiece());
        clearActions();
        if (occupied(current.type, current.x, current.y, current.dir)) {
          lose();
        }
      }
    }

    function dropPiece() {
      eachblock(current.type, current.x, current.y, current.dir, function (x, y) {
        setBlock(x, y, current.type);
      });
    }

    function removeLines() {
      var x, y, complete, n = 0;
      for (y = ny; y > 0; --y) {
        complete = true;
        for (x = 0; x < nx; ++x) {
          if (!getBlock(x, y))
            complete = false;
        }
        if (complete) {
          removeLine(y);
          y = y + 1; // recheck same line
          n++;
        }
      }
      if (n > 0) {
        addRows(n);
        addScore(100 * Math.pow(2, n - 1)); // 1: 100, 2: 200, 3: 400, 4: 800
      }
    }

    function removeLine(n) {
      var x, y;
      for (y = n; y >= 0; --y) {
        for (x = 0; x < nx; ++x)
          setBlock(x, y, (y == 0) ? null : getBlock(x, y - 1));
      }
    }

    //-------------------------------------------------------------------------
    // RENDERING
    //-------------------------------------------------------------------------

    var invalid = {};

    function invalidate() { invalid.court = true; }
    function invalidateNext() { invalid.next = true; }
    function invalidateScore() { invalid.score = true; }
    function invalidateRows() { invalid.rows = true; }

    function draw() {
      ctx.save();
      ctx.lineWidth = 1;
      ctx.translate(0.5, 0.5); // for crisp 1px black lines
      drawCourt();
      drawNext();
      drawScore();
      drawRows();
      ctx.restore();
    }

    function drawCourt() {
      if (invalid.court) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        if (playing)
          drawPiece(ctx, current.type, current.x, current.y, current.dir);
        var x, y, block;
        for (y = 0; y < ny; y++) {
          for (x = 0; x < nx; x++) {
            if (block = getBlock(x, y))
              drawBlock(ctx, x, y, block.color);
          }
        }
        ctx.strokeRect(0, 0, nx * dx - 1, ny * dy - 1); // court boundary
        invalid.court = false;
      }
    }

    function drawNext() {
      if (invalid.next) {
        var padding = (nu - next.type.size) / 2; // half-arsed attempt at centering next piece display
        uctx.save();
        uctx.translate(0.5, 0.5);
        uctx.clearRect(0, 0, nu * dx, nu * dy);
        drawPiece(uctx, next.type, padding, padding, next.dir);
        uctx.strokeStyle = 'black';
        uctx.strokeRect(0, 0, nu * dx - 1, nu * dy - 1);
        uctx.restore();
        invalid.next = false;
      }
    }

    function drawScore() {
      if (invalid.score) {
        html('score', ("00000" + Math.floor(vscore)).slice(-5));
        invalid.score = false;
      }
    }

    function drawRows() {
      if (invalid.rows) {
        html('rows', rows);
        invalid.rows = false;
      }
    }

    function drawPiece(ctx, type, x, y, dir) {
      eachblock(type, x, y, dir, function (x, y) {
        drawBlock(ctx, x, y, type.color);
      });
    }

    function drawBlock(ctx, x, y, color) {
      ctx.fillStyle = color;
      ctx.fillRect(x * dx, y * dy, dx, dy);
      ctx.strokeRect(x * dx, y * dy, dx, dy)
    }

    //-------------------------------------------------------------------------
    // FINALLY, lets run the game
    //-------------------------------------------------------------------------

    run();

  </script>

</body>

</html>

2. File javascript (stats.js)

// stats.js r6 - http://github.com/mrdoob/stats.js
var Stats=function(){function s(a,g,d){var f,c,e;for(c=0;c<30;c++)for(f=0;f<73;f++)e=(f+c*74)*4,a[e]=a[e+4],a[e+1]=a[e+5],a[e+2]=a[e+6];for(c=0;c<30;c++)e=(73+c*74)*4,c<g?(a[e]=b[d].bg.r,a[e+1]=b[d].bg.g,a[e+2]=b[d].bg.b):(a[e]=b[d].fg.r,a[e+1]=b[d].fg.g,a[e+2]=b[d].fg.b)}var r=0,t=2,g,u=0,j=(new Date).getTime(),F=j,v=j,l=0,w=1E3,x=0,k,d,a,m,y,n=0,z=1E3,A=0,f,c,o,B,p=0,C=1E3,D=0,h,i,q,E,b={fps:{bg:{r:16,g:16,b:48},fg:{r:0,g:255,b:255}},ms:{bg:{r:16,g:48,b:16},fg:{r:0,g:255,b:0}},mb:{bg:{r:48,g:16,
b:26},fg:{r:255,g:0,b:128}}};g=document.createElement("div");g.style.cursor="pointer";g.style.width="80px";g.style.opacity="0.9";g.style.zIndex="10001";g.addEventListener("click",function(){r++;r==t&&(r=0);k.style.display="none";f.style.display="none";h.style.display="none";switch(r){case 0:k.style.display="block";break;case 1:f.style.display="block";break;case 2:h.style.display="block"}},!1);k=document.createElement("div");k.style.backgroundColor="rgb("+Math.floor(b.fps.bg.r/2)+","+Math.floor(b.fps.bg.g/
2)+","+Math.floor(b.fps.bg.b/2)+")";k.style.padding="2px 0px 3px 0px";g.appendChild(k);d=document.createElement("div");d.style.fontFamily="Helvetica, Arial, sans-serif";d.style.textAlign="left";d.style.fontSize="9px";d.style.color="rgb("+b.fps.fg.r+","+b.fps.fg.g+","+b.fps.fg.b+")";d.style.margin="0px 0px 1px 3px";d.innerHTML='<span style="font-weight:bold">FPS</span>';k.appendChild(d);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";k.appendChild(a);
m=a.getContext("2d");m.fillStyle="rgb("+b.fps.bg.r+","+b.fps.bg.g+","+b.fps.bg.b+")";m.fillRect(0,0,a.width,a.height);y=m.getImageData(0,0,a.width,a.height);f=document.createElement("div");f.style.backgroundColor="rgb("+Math.floor(b.ms.bg.r/2)+","+Math.floor(b.ms.bg.g/2)+","+Math.floor(b.ms.bg.b/2)+")";f.style.padding="2px 0px 3px 0px";f.style.display="none";g.appendChild(f);c=document.createElement("div");c.style.fontFamily="Helvetica, Arial, sans-serif";c.style.textAlign="left";c.style.fontSize=
"9px";c.style.color="rgb("+b.ms.fg.r+","+b.ms.fg.g+","+b.ms.fg.b+")";c.style.margin="0px 0px 1px 3px";c.innerHTML='<span style="font-weight:bold">MS</span>';f.appendChild(c);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";f.appendChild(a);o=a.getContext("2d");o.fillStyle="rgb("+b.ms.bg.r+","+b.ms.bg.g+","+b.ms.bg.b+")";o.fillRect(0,0,a.width,a.height);B=o.getImageData(0,0,a.width,a.height);try{performance&&performance.memory&&performance.memory.totalJSHeapSize&&
(t=3)}catch(G){}h=document.createElement("div");h.style.backgroundColor="rgb("+Math.floor(b.mb.bg.r/2)+","+Math.floor(b.mb.bg.g/2)+","+Math.floor(b.mb.bg.b/2)+")";h.style.padding="2px 0px 3px 0px";h.style.display="none";g.appendChild(h);i=document.createElement("div");i.style.fontFamily="Helvetica, Arial, sans-serif";i.style.textAlign="left";i.style.fontSize="9px";i.style.color="rgb("+b.mb.fg.r+","+b.mb.fg.g+","+b.mb.fg.b+")";i.style.margin="0px 0px 1px 3px";i.innerHTML='<span style="font-weight:bold">MB</span>';
h.appendChild(i);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";h.appendChild(a);q=a.getContext("2d");q.fillStyle="#301010";q.fillRect(0,0,a.width,a.height);E=q.getImageData(0,0,a.width,a.height);return{domElement:g,update:function(){u++;j=(new Date).getTime();n=j-F;z=Math.min(z,n);A=Math.max(A,n);s(B.data,Math.min(30,30-n/200*30),"ms");c.innerHTML='<span style="font-weight:bold">'+n+" MS</span> ("+z+"-"+A+")";o.putImageData(B,0,0);F=j;if(j>
v+1E3){l=Math.round(u*1E3/(j-v));w=Math.min(w,l);x=Math.max(x,l);s(y.data,Math.min(30,30-l/100*30),"fps");d.innerHTML='<span style="font-weight:bold">'+l+" FPS</span> ("+w+"-"+x+")";m.putImageData(y,0,0);if(t==3)p=performance.memory.usedJSHeapSize*9.54E-7,C=Math.min(C,p),D=Math.max(D,p),s(E.data,Math.min(30,30-p/2),"mb"),i.innerHTML='<span style="font-weight:bold">'+Math.round(p)+" MB</span> ("+Math.round(C)+"-"+Math.round(D)+")",q.putImageData(E,0,0);v=j;u=0}}}};

Download Sourcecode Game Tetris HTML dan JavaScript

Game tetris ini dapat anda unduh lengkap file nya dalam bentuk zip. Silahkan ekstrak dan jalankan di web browser kesayangan anda. Atau anda juga dapat langsung memainkannya dengan klik tombol main.

Main Game
Downoad

Demikianlah game tetris ini kami bagikan untuk anda semua. Happy gaming dan happy coding ya.

Artikel Sourcecode Game HTML Javascript | Tetris Menumpuk Bata pertama kali tampil pada Farazinux.

]]> https://farazinux.com/sourcecode-game-html-javascript-tetris-menumpuk-bata/feed/ 0 Sourcecode New Year Countdown | HTML, CSS, JS https://farazinux.com/sourcecode-new-year-countdown-html-css-js/ https://farazinux.com/sourcecode-new-year-countdown-html-css-js/#respond Mon, 25 Dec 2023 22:46:01 +0000 https://farazinux.com/?p=5467 Sourcecode New Year Countdown – Tahun baru sudah dekat di depan mata. Pastinya hitung mundur merupakan tampilan yang cukup penting untuk kita ketahui. Lalu, bagaimana cara kita membuat hitung mundur otomatis atau countdown tahun baru? Berikut ini adalah beberapa contoh sorucecode dan tampilan countdown tahun baru. Hitung mundur tahun baru ini dapat kita buat dengan […]

Artikel Sourcecode New Year Countdown | HTML, CSS, JS pertama kali tampil pada Farazinux.

]]> Sourcecode New Year Countdown – Tahun baru sudah dekat di depan mata. Pastinya hitung mundur merupakan tampilan yang cukup penting untuk kita ketahui. Lalu, bagaimana cara kita membuat hitung mundur otomatis atau countdown tahun baru?

Berikut ini adalah beberapa contoh sorucecode dan tampilan countdown tahun baru. Hitung mundur tahun baru ini dapat kita buat dengan bahasa pemrograman HTML, CSS dan Javascript. 3 bahasa pemrograman yang sangat populer dan lazim dengan mudah kita gunakan.

Hanya dengan HTML, CSS dan Javascript kita dapat membuat tampilan countdown tahun baru di web atau blog kita. Oleh karena itu, berikut ini adalah contoh sourcecode dan preview tampilan hitung mundur atau countdown tahun baru.

Karena hanya menggunakan HTML, CSS dan Javascript kita tidak harus menggunakan web server untuk menjalankannya. HTML, CSS dan Javascript langsung dapat dibaca oleh web browser. Jadi, anda tinggal copy paste file html, css dan javascript di bawah ini.

1. Tampilan Hitung Mundur New Year

Tampilan hitung mundur countdown tahun baru berikut ini walaupun sederhana namun sangat elegan untuk kita gunakan. Dengan paduan warna dasar merah dan tulisan emas dengan sedikit animasi yang sangat elegan.

Preview Countdown Happy New Year

Berikut ini adalah preview tampilan countdown perhitungan tahun baru. Untuk menggunakannya silahkan copas coding di bawah ini mulai dari file html, css dan javascript.

Donasi Ikhlas

HTML

Copy paste script html berikut ini dengan file editor anda seperti Visual Studio Code, Atom, atau file editor lain kesayangan anda. Kemudian simpanlah pada satu folder dengan nama file index.html.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>New Year Countdown</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
  <div class="middle">
    <h1 class="label">New Year Countdown
    </h1>
    <div class="time">
      <span>
                        <div id="d">00</div>
                        Days
                    </span>
      <span>
                        <div id="h">00</div>
                        Hours
                    </span>
      <span>
                        <div id="m">00</div>
                        Minutes
                    </span>
      <span>
                        <div id="s">00</div>
                        Seconds
                    </span>
    </div>
  </div>
</body>
<script src="script.js"></script>
</html>

CSS

Agar tampilan dapat tertata rapi dan indah, maka kita membutuhkan file CSS. Cascading Style Sheet atau lebih kita kenal dengan CSS merupakan file yang berfungsi mengatur tampilan web.

Untuk membuat tampilan indah hitung mundur seperti di atas, maka dibutuhkan CSS di bawah ini. Sama halnya dengan file html, buatlah file pada folder yang sama dengan file html. Kemudian simpanlah dengan nama file style.css.

@import url("https://fonts.googleapis.com/css?family=Aleo");

:root {
  font-family: "Aleo", sans-serif;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: rgb(119, 13, 13);
  background: radial-gradient(
    circle,
    rgba(119, 13, 13, 0.92) 64%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

canvas {
  width: 100%;
  height: 100%;
}

/* Thanks Traversy Media for this text background animation tut:
   
*/
.label {
  font-size: 2.2rem;
  background: url("https://res.cloudinary.com/nikita-rudenko/image/upload/v1544906837/stripe_c982eebe592d6c30f2034f5ce80b1fc6.png");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: moveBg 30s linear infinite;
}

@keyframes moveBg {
  0% {
    background-position: 0% 30%;
  }
  100% {
    background-position: 1000% 500%;
  }
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  user-select: none;
}

.time {
  color: #d99c3b;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
}

.time span {
  padding: 0 14px;
  font-size: 0.8rem;
}

.time span div {
  font-size: 3rem;
}

@media (max-width: 740px) {
  .label {
    font-size: 1.7rem;
  }
  .time span {
    padding: 0 16px;
    font-size: 0.6rem;
  }
  .time span div {
    font-size: 2rem;
  }
}

JavaScript (JS)

Agar bisa berfungsi dalam perhitungan mundur atau countdown tahun baru. Maka kita juga sangat membutuhkan file javascript (js). Oleh karena itu, silahkan copy dan pastekan script di bawah ini dalam file yang sama dengan file html dan css di atas. Kemudian simpanlah file tersebut dengan nama script.js.

class Snowflake {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.vx = 0;
    this.vy = 0;
    this.radius = 0;
    this.alpha = 0;

    this.reset();
  }

  reset() {
    this.x = this.randBetween(0, window.innerWidth);
    this.y = this.randBetween(0, -window.innerHeight);
    this.vx = this.randBetween(-3, 3);
    this.vy = this.randBetween(2, 5);
    this.radius = this.randBetween(1, 4);
    this.alpha = this.randBetween(0.1, 0.9);
  }

  randBetween(min, max) {
    return min + Math.random() * (max - min);
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;

    if (this.y + this.radius > window.innerHeight) {
      this.reset();
    }
  }
}

class Snow {
  constructor() {
    this.canvas = document.createElement("canvas");
    this.ctx = this.canvas.getContext("2d");

    document.body.appendChild(this.canvas);

    window.addEventListener("resize", () => this.onResize());
    this.onResize();
    this.updateBound = this.update.bind(this);
    requestAnimationFrame(this.updateBound);

    this.createSnowflakes();
  }

  onResize() {
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.canvas.width = this.width;
    this.canvas.height = this.height;
  }

  createSnowflakes() {
    const flakes = window.innerWidth / 4;

    this.snowflakes = [];

    for (let s = 0; s < flakes; s++) {
      this.snowflakes.push(new Snowflake());
    }
  }

  update() {
    this.ctx.clearRect(0, 0, this.width, this.height);

    for (let flake of this.snowflakes) {
      flake.update();

      this.ctx.save();
      this.ctx.fillStyle = "#FFF";
      this.ctx.beginPath();
      this.ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
      this.ctx.closePath();
      this.ctx.globalAlpha = flake.alpha;
      this.ctx.fill();
      this.ctx.restore();
    }
    requestAnimationFrame(this.updateBound);
  }
}

new Snow();

////////////////////////////////////////////////////////////
// Simple CountDown Clock

const d = document.getElementById("d");
const h = document.getElementById("h");
const m = document.getElementById("m");
const s = document.getElementById("s");

function getTrueNumber(num) {
  return num < 10 ? "0" + num : num;
}

function calculateRemainingTime() {
  const comingYear = new Date().getFullYear() + 1;
  const comingDate = new Date(`Jan 1, ${comingYear} 00:00:00`);

  const now = new Date();
  const remainingTime = comingDate.getTime() - now.getTime();
  const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
  const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const mins = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  const secs = Math.floor((remainingTime % (1000 * 60)) / 1000);

  d.innerHTML = getTrueNumber(days);
  h.innerHTML = getTrueNumber(hours);
  m.innerHTML = getTrueNumber(mins);
  s.innerHTML = getTrueNumber(secs);

  return remainingTime;
}

function initCountdown() {
  const interval = setInterval(() => {
    const remainingTimeInMs = calculateRemainingTime();

    if (remainingTimeInMs <= 1000) {
      clearInterval(interval);
      initCountdown();
    }
  }, 1000);
}

initCountdown();

2. Sourcecode Hitung Mundur New Year

Sama halnya dengan countdown di atas, berikut ini adalah countdown tahun baru yang menarik. Dengan tampilan tata surya yang indah dan menawan. Silahkan copas file html, css dan javascript di bawah ini dalam satu folder dengan nama index.html, style.css dan script.js.

Preview

Donasi Ikhlas

HTML

<link rel="stylesheet" href="style.css">

<div class="solar-system">

    <div class="orbit orbit-sun"></div>
    
    <div class="orbit orbit-mercury" id="position-mercury">
        <div class="planet planet-mercury" id="opacity-mercury">
            <img src="https://cdn.josetxu.com/img/planet-mercury.png" alt="mercury">
        </div>
    </div>
    
    <div class="orbit orbit-venus" id="position-venus">
        <div class="planet planet-venus" id="opacity-venus">
            <img src="https://cdn.josetxu.com/img/planet-venus.png" alt="venus">
        </div>
    </div>
    
    <div class="orbit orbit-earth" id="position-earth">
        <div class="planet planet-earth" id="opacity-earth">
            <img src="https://cdn.josetxu.com/img/planet-earth.png" alt="earth">
        </div>
    </div>
    
    <div class="orbit orbit-mars" id="position-mars">
        <div class="planet planet-mars" id="opacity-mars">
            <img src="https://cdn.josetxu.com/img/planet-mars.png" alt="mars">
        </div>
    </div>
    
    <div class="orbit orbit-asteroids" id="position-asteroids">
        <div class="planet planet-asteroids" id="opacity-asteroids">
            <img src="https://cdn.josetxu.com/img/planets-asteroid-belt.png" alt="asteroids">
            <img src="https://cdn.josetxu.com/img/planets-asteroid-belt.png" alt="asteroids">
        </div>
    </div>
    <div class="lines">
    <div class="new-year-line">NEW YEAR <span id='cronoNewYear'></span></div>
    <div class="winter-solstice-line">WINTER SOLSTICE <span id="cronoWinterSolstice"></span></div>
    <div class="spring-equinox-line">SPRING EQUINOX <span id="cronoSpringEquinox"></span></div>
    <div class="summer-solstice-line">SUMMER SOLSTICE <span id="cronoSummerSolstice"></span></div>
    <div class="autumn-equinox-line">AUTUMN EQUINOX <span id="cronoAutumnEquinox"></span></div>
    </div>
    
</div>

<div class="arrows">
    <span id="up" onclick="goUp()"></span>
    <span id="down" onclick="goDown()"></span>
    <span id="right" onclick="goRight()"></span>
    <span id="left" onclick="goLeft()"></span>
</div>

<div id="warning"><p>it seems that the earth has gone out of its orbit... <button id="reload" onclick="location.reload()">RE-ORBIT</button></p></div>
<script src="script.js"></script>

CSS

html {
    box-sizing: border-box;
  }
  html *,
  html *:before,
  html *:after {
    box-sizing: inherit;
  }
  
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-size: 62.5%;
    background-color: #121212;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
  }
  
  .solar-system {
    position: relative;
    width: 100%;
    max-width: 700px;
    padding-top: 100%;
    right: 0;
    bottom: 0;
    transition: all 1.5s ease 0s;
  }
  
  .solar-system.top-pos {
      bottom: -45%;
      transition: all 1.5s ease 0s;
  }
  .solar-system.bot-pos {
      bottom: 45%;
      transition: all 1.5s ease 0s;
  }
  .solar-system.right-pos {
      right: 50%;
      transition: all 1.5s ease 0s;
  }
  .solar-system.left-pos {
      right: -50%;
      transition: all 1.5s ease 0s;
  }
  
  @media (min-width: 700px) {
    .solar-system {
      padding-top: 700px;
    }
  }
  
  
  /*** ORBITS ***/
  
  .orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px dotted rgb(84 84 84 / 15%);
    border-radius: 100%;
    transform: translate(-50%, -50%);
  }
  .orbit-sun {
      width: calc(50%);
      height: calc(50%);
      border: 1px dotted #ff6600;
      background: #ffcc00;
  }
  .orbit-sun:before {
      content: "";
      background: #ff660017;
      width: 99%;
      height: 99%;
      display: block;
      margin-left: 0.5%;
      margin-top: 0.5%;
      border-radius: 100%;
      box-shadow: 0 0 10em 5em #ff66006b, 0 0 100px 50px #ff66006b inset, 0 0 10px 5px #ffcc00f2;
  }
  .orbit.orbit-sun:after {
      content: "SUN";
      color: #ffa200;
      top: 50%;
      position: absolute;
      left: -3.5em;
      transition: left 1s ease 0s;
  }
  .solar-system.right-pos .orbit-sun:after {
      left: calc(3.5em + 350px);
      transition: left 1s ease 0s;
  }
  .orbit-mercury {
      width: calc(100%);
      height: calc(100%);
      transform: translate(-50%, -50%);
  }
  .orbit-venus {
      width: calc(150%);
      height: calc(150%);
      transform: translate(-50%, -50%);
  }
  .orbit-earth {
      width: calc(200%);
      height: calc(200%);
      /* transform: translate(-50%, -50%) rotate(-10deg) !important; */
  }
  .orbit-earth:after {
      content: "";
      border: 2px solid red;
      width: 1em;
      height: 1em;
      display: block;
      position: relative;
      border-color: #54cbeb #54cbeb transparent transparent;
      transform: rotate(-50deg);
      border-width: 2px 2px 0 0;
      top: 52.75%;
      left: -0.5em; 	
      animation: blinker 2s linear infinite;
  }
  .orbit-mars {
      width: calc(280%);
      height: calc(280%);
      transform: translate(-50%, -50%);
  }
  .orbit-asteroids {
      width: calc(380%);
      height: calc(380%);
      transform: translate(-50%, -50%) rotate(0deg);
  }
  
  
  
  /*** PLANETS ***/
  
  .planet {
    position: absolute;
    top: 50%;
    border-radius: 100%;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0s ease 0s;
  }
  .planet-mercury {
      left: -6px;
      width: 10px;
      height: 10px;
      transition-duration: 1s;
      background: #bcc1c9;
  }
  .planet-venus {
      left: -8px;
      width: 14px;
      height: 14px;
      transition-duration: 2s;
      background: #ec5f24
  }
  .planet-earth {
      left: -13px;
      width: 24px;
      height: 24px;
      transition-duration: 3s;
      z-index: 1;
  }
  .planet-mars {
      left: -9px;
      width: 18px;
      height: 18px;
      transition-duration: 4s;
      background: #d83e3c;
  }
  .planet-asteroids {
      left: -40px;
      width: calc(100% + 80px);
      height: 1700px;
      transition: all 5s ease 0s;
  }
  .planet-mercury:before {
      content: "MERCURY";
      color: #bcc1c9;
      margin-left: 15px;
      top: 0px;
      position: absolute;
      height: 10px;
      line-height: 10px;
  }
  .planet-venus:before {
      content: "VENUS";
      color: #ec5f24;
      margin-left: 21px;
      top: 1px;
      position: absolute;
      height: 14px;
      line-height: 14px;
  }
  .planet-earth:before {
      content: "EARTH";
      color: #54cbeb;
      margin-left: 29px;
      top: 1px;
      position: absolute;
      height: 24px;
      line-height: 24px;
  }
  .planet-mars:before {
      content: "MARS";
      color: #d83e3c;
      margin-left: 23px;
      top: 1px;
      position: absolute;
      height: 18px;
      line-height: 18px;
  }
  .planet-asteroids:before, .planet-asteroids:after {
      content: "ASTEROID BELT";
      color: #666666;
      margin-left: 8em;
      top: 36.75%;
      position: absolute;
  }
  .planet-asteroids:after {
      right: 8em;
  }
  .planet-asteroids img + img {
      position: absolute;
      right: 0;
      transform: rotate(180deg);
  }
  .planet-mars:after, .planet-venus:after, .planet-mercury:after, .planet-earth:after {
      content: "";
      background: linear-gradient(105deg, rgba(0,0,0,1), rgba(0,0,0,0.6), transparent, transparent);
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 100%;
      box-shadow: 0 0 3px 2px #ffffff26;
      opacity: 0.8;
      position: absolute;
      top: 0;
      left: 0;
  }
  .planet-earth:after {
      box-shadow: 0 0 5px 3px #54cbeb5c;
  }
  .planet img {
      width: 100%;
  }
  
  .planet-asteroids img {
      width: initial;
  }
  
  
  
  /*** SELECTED DAYS ***/
  
  .new-year-line, .winter-solstice-line, .spring-equinox-line, .summer-solstice-line, .autumn-equinox-line {
      width: 12em;
      border-bottom: 2px dotted white;
      position: absolute;
      left: -13.35em;
      top: 50%;
      z-index: -1;
      color: white;
      margin-top: -13px;
      margin-left: -50%;
      height: 14px;
      line-height: 1em;
  }
  .new-year-line:after, .winter-solstice-line:after, .spring-equinox-line:after, .summer-solstice-line:after, .autumn-equinox-line:after {
      content: "";
      width: 28px;
      height: 28px;
      display: block;
      float: right;
      position: absolute;
      background: #ffffff00;
      right: -28px;
      top: -1px;
      border: 2px dotted #fff;
      border-radius: 100%;
  }
  
  .winter-solstice-line {
      margin-top: 120px;
      left: -12.05em;
  }
  .spring-equinox-line {
      top: -47.25%;
      left: 58.35%;
  }
  .summer-solstice-line {
    top: 30.35%;
    left: 178.75%;
  }
  .autumn-equinox-line {
      top: 148.5%;
    left: 97.5%;
  }
  
  #cronoNewYear, #cronoWinterSolstice, #cronoSpringEquinox, #cronoSummerSolstice, #cronoAutumnEquinox {
      left: 0;
      position: absolute;
      color: #fff;
      width: 100%;
      bottom: -17px;
      font-size: 1.1em;
  }
  #cronoNewYear span, #cronoWinterSolstice span , #cronoSpringEquinox span, #cronoSummerSolstice span, #cronoAutumnEquinox span {
      font-size: 0.75em;
      color: #666;
  }
  
  
  
  /*** WARNING ***/
  
  #warning {
      position: fixed;
      left: 2em;
      bottom: 2em;
      background: rgb(0 0 0 / 0.75);
      height: 5em;
      width: 45em;
      font-size: 1.35em;
      color: #ffa200;
      z-index: 3;
      text-transform: uppercase;
      padding: 0;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  #warning:before {
      content: " ! ";
      z-index: 2;
      font-size: 1.9em;
      margin-left: 1.15em;
      color: #ffa200;
      font-weight: bold;
      margin-top: 5px;
  }
  #warning:after {
      content: "";
      background: #ffa200;
      position: absolute;
      left: 0;
      width: 5em;
      height: 5em;
      z-index: 0;
  }
  #warning p {
      display: block !important;
      float: left;
      width: 100%;
      margin: 0 !important;
      padding-left: 2.5em;
  }
  #warning p:before {
      content: "";
      position: absolute;
      z-index: 1;
      border: 1.75em solid transparent;
      border-bottom: 2.85em solid #040404;
      left: 0.775em;
      top: -0.75em;
  }
  #reload {
      background: rgb(255 162 0);
      border: 0;
      border-radius: 1px;
      padding: 0.5em 0.75em;
      margin-left: 1.5em;
      cursor: pointer;
      outline: none;
  }
  #reload:hover {
      background: #54cbeb;
  }
  
  
  
  /* ARROWS */
  .arrows {
      position: fixed;
      left: 0;
      top: 0px;
      width: 100vw;
      height: 100vh;
  }
  
  .arrows span {
      background: #ffffff;
      padding: 0.5em !important;
      position: absolute;
      cursor: pointer;
      margin: 1em;
      width: 3em;
      height: 3em;
      border-radius: 2px;
      text-align: center;
      line-height: 2em;
      opacity: 0.05;
      box-shadow: 0 0 3px -2px #000;
      transition: all 0.4s ease 0s;
  }
  .arrows span:hover {
      opacity: 0.9;
  }
  .arrows span:before {
      content: "";
      border: 4px solid #121212;
      width: 1.35em;
      height: 1.35em;
      float: left;
      border-left-width: 0;
      border-bottom-width: 0;
      transform: rotate(-45deg);
      margin-left: 0.3em;
      margin-top: 0.6em;
      border-radius: 3px;
  }
  
  .arrows span#down:before {
      transform: rotate(135deg);
      margin-top: 0;
  }
  .arrows span#right:before {
      transform: rotate(45deg);
      margin-left: 0.1em;
      margin-top: 0.35em;
  }
  .arrows span#left:before {
      transform: rotate(-135deg);
      margin-top: 0.3em;
      margin-left: 0.5em;
  }
  
  .arrows span#up, .arrows span#down {
      left: calc(50% - 2.5em);
  }
  .arrows span#down {
      bottom: 0;
  }
  .arrows span#right, .arrows span#left {
      bottom: calc(50% - 2.5em);
  }
  .arrows span#right {
      left: calc(100% - 5em);
  }
  
  .arrows span.active {
      opacity: 0.9;
  }
  
  
  /* ANIMATIONS */
  
  @keyframes blinker {
      0%   { opacity:0;   top:52.85%;}
      40%  { opacity:1;   top:51%;   }
      50%  { opacity:0;   top:51%;   }
      60%  { opacity:1;   top:51%; }
      100% { opacity:0;   top:48.25%;}
  }
  @keyframes spin {
      from {transform: rotate(0deg) }
      to {transform: rotate(-360deg);}
  }

Javascript (JS)

//prevent loading error
document.getElementById('warning').remove();

//short getElementById
elem = function (id){ return document.getElementById(id); }

//get next year
var nextYear = new Date().getFullYear() + 1;

//count until date
var newYearDate = new Date("Jan 1, "+ nextYear + " 00:00:00").getTime();

//title angles
var todayDate = new Date().getTime();	
/**///todayDate = new Date("Apr 3, 2021 00:00:00").getTime();
var todaySecondsLeft = (newYearDate - todayDate) / 1000;
var todayDays = parseInt(todaySecondsLeft / 86400);

var plaDeg = parseInt(todayDays-365);
var degMax = Math.abs(plaDeg) + 15;
var degMin = Math.abs(plaDeg) - 15; 

//planets positions
var randMer = Math.floor(Math.random() * (degMax - degMin + 1)) + degMin;
var randVen = Math.floor(Math.random() * (degMax - degMin + 1)) + degMin;
var randMar = Math.floor(Math.random() * (degMax - degMin + 1)) + degMin;
var style = document.createElement('style'); style.innerHTML = '.orbit-mercury {transform: translate(-50%, -50%) rotate('+randMer+'deg)} .orbit-venus {transform: translate(-50%, -50%) rotate('+randVen+'deg)} .orbit-mars {transform: translate(-50%, -50%) rotate('+randMar+'deg)} .planet-mercury {transform:rotate(-'+randMer+'deg)} .planet-venus {transform:rotate(-'+randVen+'deg)} .planet-mars {transform:rotate(-'+randMar+'deg)} .planet-earth {transform:rotate('+parseInt(todayDays-365)+'deg)} .planet-venus {transform:rotate(-'+randVen+'deg)} '; document.head.appendChild(style);

/*screen position*/
function qSel(sel){	return document.querySelector(sel); }
var screenPos = qSel('.solar-system').classList;
if(todayDays<367){ screenPos.add('left-pos');     }
if(todayDays<335){ screenPos.add('top-pos'); 	  }
if(todayDays<280){ screenPos.remove('left-pos');  } 
if(todayDays<230){ screenPos.add('right-pos');    }
if(todayDays<185){ screenPos.remove('top-pos');   }
if(todayDays<158){ screenPos.add('bot-pos');      }
if(todayDays<120){ screenPos.remove('right-pos'); }
if(todayDays<60) { screenPos.add('left-pos'); 	  }
if(todayDays<30) { screenPos.remove('bot-pos');   }


/*arrows*/
function goUp(){ 
    arrowOn('up');
    if(screenPos.contains('bot-pos')){screenPos.remove('bot-pos');} else {screenPos.add('top-pos');}
}
function goDown(){
    arrowOn('down');
    if(screenPos.contains('top-pos')){screenPos.remove('top-pos');} else {screenPos.add('bot-pos');}
}
function goRight(){
    arrowOn('right');
    if(screenPos.contains('left-pos')){screenPos.remove('left-pos');} else {screenPos.add('right-pos');}
}
function goLeft(){	
    arrowOn('left');
    if(screenPos.contains('right-pos')){screenPos.remove('right-pos');} else {screenPos.add('left-pos');}
}
function arrowOn(id){
    elem(id).classList.add('active');
    setTimeout(function(){ elem(id).classList.remove('active'); }, 1000);
}

//detecting arrow key presses
document.addEventListener('keydown', function(e) {
    switch (e.keyCode) {
        case 37: goLeft();  break;
        case 38: goUp();   break;
        case 39: goRight();	break;
        case 40: goDown();	break;
    }
});


//countdown vars
var days, hours, minutes, seconds;

//countdown interval
var countDown = setInterval(function() {

    var rightNow = new Date().getTime();
    /**///rightNow = new Date("Apr 3, 2021 00:00:00").getTime();
    var timeTo = newYearDate - rightNow;
    
    days = Math.floor(timeTo / (1000 * 60 * 60 * 24));
    hours = Math.floor((timeTo % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    minutes = Math.floor((timeTo % (1000 * 60 * 60)) / (1000 * 60));
    seconds = Math.floor((timeTo % (1000 * 60)) / 1000);
    
    if(hours<10)hours="0"+hours; 
    if(minutes<10)minutes="0"+minutes; 
    if(seconds<10)seconds="0"+seconds; 
    
    /*new year*/
    var newYearDays;
    if (days<0){ elem("cronoNewYear").style.display='none';	newYearDays = days.toString().substr(1); } else { newYearDays="-"+days; }
    elem("cronoNewYear").innerHTML = days + " <span>DAYS</span> &nbsp;" + hours + ":" + minutes + ":" + seconds + " <span>LEFT</span>";		
    
    /*leap year*/
    var leapYear = new Date().getFullYear();
    if(((leapYear % 4 == 0) && (leapYear % 100 != 0)) || (leapYear % 400 == 0)) {
        rotationDeg = newYearDays * 0.9836065573770491;
    } else {
        rotationDeg = newYearDays * 0.9863013698630136;
    }
    
    /*earth position*/
    elem("position-earth").style.transform = 'translate(-50%, -50%) rotate('+rotationDeg+'deg';
    
    /*winter solstice*/
    var winSolsDays;
    var wsDays=days-11;			
    if (wsDays<0){ elem("cronoWinterSolstice").style.display='none'; } else { winSolsDays=wsDays	}
    elem("cronoWinterSolstice").innerHTML = winSolsDays + " <span>DAYS</span> &nbsp;" + hours + ":" + minutes + ":" + seconds + " <span>LEFT</span>";
    
    /*spring equinox*/
    var sprEquiDays;
    var seDays=days-286;			
    if (seDays<0){ elem("cronoSpringEquinox").style.display='none';	} else { sprEquiDays=seDays	}
    elem("cronoSpringEquinox").innerHTML = sprEquiDays + " <span>DAYS</span> &nbsp;" + hours + ":" + minutes + ":" + seconds + " <span>LEFT</span>";
    
    /*summer solstice*/
    var sumSolsDays;
    var ssDays=days-194;			
    if (ssDays<0){ elem("cronoSummerSolstice").style.display='none'; } else { sumSolsDays=ssDays	}
    elem("cronoSummerSolstice").innerHTML = sumSolsDays + " <span>DAYS</span> &nbsp;" + hours + ":" + minutes + ":" + seconds + " <span>LEFT</span>";
    
    /*autumn equinox*/
    var autEquiDays;
    var aeDays=days-101;			
    if (aeDays<0){ elem("cronoAutumnEquinox").style.display='none';	} else { autEquiDays=aeDays	}
    elem("cronoAutumnEquinox").innerHTML = autEquiDays + " <span>DAYS</span> &nbsp;" + hours + ":" + minutes + ":" + seconds + " <span>LEFT</span>";
    
    /*initial opacity*/
    var opacityList = document.querySelectorAll('.planet');
    for(i=0;i<opacityList.length;i++){
        opacityList[i].style.opacity = '1';
    }

    if (timeTo < 0) {
        clearInterval(countDown);
    }
    
}, 1000);

Artikel Sourcecode New Year Countdown | HTML, CSS, JS pertama kali tampil pada Farazinux.

]]> https://farazinux.com/sourcecode-new-year-countdown-html-css-js/feed/ 0 Source Code StopWatch dengan HTML, CSS dan Javascript https://farazinux.com/source-code-stopwatch-dengan-html-css-dan-javascript/ https://farazinux.com/source-code-stopwatch-dengan-html-css-dan-javascript/#respond Sat, 18 Feb 2023 14:26:35 +0000 https://farazinux.com/?p=3694 Source code stopwatch HTML – Stopwatch adalah alat pengukur waktu, biasa digunakan untuk menghitung waktu ketika pertandingan olah raga. Selain itu, stopwatch juga sekarang banyak digunakan ibu-ibu dalam menghitung waktu memasak. Karena pentingnya stopwatch, kita juga dapat membuat sendiri dengan hanya memanfaatkan HTML, CSS dan Javascript. Walaupun dengan script yang sangat sederhana, namun tampilan yang […]

Artikel Source Code StopWatch dengan HTML, CSS dan Javascript pertama kali tampil pada Farazinux.

]]> Source code stopwatch HTML – Stopwatch adalah alat pengukur waktu, biasa digunakan untuk menghitung waktu ketika pertandingan olah raga. Selain itu, stopwatch juga sekarang banyak digunakan ibu-ibu dalam menghitung waktu memasak.

Karena pentingnya stopwatch, kita juga dapat membuat sendiri dengan hanya memanfaatkan HTML, CSS dan Javascript. Walaupun dengan script yang sangat sederhana, namun tampilan yang dihasilkan juga sudah tergolong menarik dan mudah digunakan.

Persiapan Coding Stopwatch HTML

Karena hanya menggunakan html, css dan javascript kita tidak perlu repot-repot menginstall web server. Kita cukup membuka file html yang kita buat dengan web browser secara langsung.

Langkah awal adalah kita buat folder yang menampung file code html, css dan javascript. Misalnya, kita buat folder stopwatch yang berisi tiga file yaitu index.html, style.css dan script.js.

Copy Paste Source Code STOPWATCH

Selanjutnya setelah semua persiapan di atas telah kita lakukan, langkah berikutnya adalah copy paste source code stopwatch di bawah ini.

1. HTML

File pertama yang kita butuhkan adalah file html. HTML berfungsi untuk menampung struktur file aplikasi stopwatch. Selain itu, html merupakan file yang dapat langsung dibaca oleh web browser.

Silahkan copy paste script html berikut ke dalam file index.html yang kita telah buat sebelumnya. Setelah itu, simpan (save) file tersebut.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Stopwatch App</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <h1>Stopwatch</h1>
      <p id="timer">00:00:00:00</p>
      <div class="controls">
        <button id="start" onclick="startTimer()">Start</button>
        <button id="stop" onclick="stopTimer()">Stop</button>
        <button id="reset" onclick="resetTimer()">Reset</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

2. CSS

Sama seperti halnya html, css di bawah ini tinggal anda copy paste ke dalam file style.css yang telah anda persiapkan sebelumnya. File css adalah file yang berfungsi untuk mengatur tampilan aplikasi stopwatch agar lebih menarik dan enak dipandang.

.container {
  text-align: center;
  margin-top: 50px;
}

h1 {
  font-size: 40px;
  margin-bottom: 20px;
}

#timer {
  font-size: 60px;
  font-weight: bold;
  margin-bottom: 30px;
}

.controls {
  display: flex;
  justify-content: center;
}

button {
  font-size: 20px;
  margin: 0 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

3. Javascript

Langkah terakhir adalah copy paste file javascript di bawah ini ke dalam file script.js. File javascript adalah file logic aplikasi agar aplikasi dapat berjalan dengan baik sesuai dengan keinginan.

Jangan lupa setelah paste file ini ke dalam script.js untuk menyimpannya (save). Pastikan ketiga file di atas sudah anda simpan semua.

let milliseconds = 0;
let seconds = 0;
let minutes = 0;
let hours = 0;
let timer;

function startTimer() {
  timer = setInterval(runTimer, 10);
}

function runTimer() {
  milliseconds++;
  if (milliseconds == 100) {
    milliseconds = 0;
    seconds++;
    if (seconds == 60) {
      seconds = 0;
      minutes++;
      if (minutes == 60) {
        minutes = 0;
        hours++;
      }
    }
  }
  document.getElementById("timer").innerHTML = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds) + ":" + (milliseconds > 9 ? milliseconds : "0" + milliseconds);
}

function stopTimer() {
  clearInterval(timer);
}

function resetTimer() {
  clearInterval(timer);
  milliseconds = 0;
  seconds = 0;
  minutes = 0;
  hours = 0;
  document.getElementById("timer").innerHTML = "00:00:00:00";
}

Demikianlah source code stopwatch html, css dan javascript yang gratis dan bebas anda modifikasi. Terus ikuti farazinux.com untuk selalu mendapatkan informasi terbaru seputar dunia teknologi, desain, template dan hal-hal lain yang sedang tranding.

Artikel Source Code StopWatch dengan HTML, CSS dan Javascript pertama kali tampil pada Farazinux.

]]> https://farazinux.com/source-code-stopwatch-dengan-html-css-dan-javascript/feed/ 0 Source Code Game Matematika dengan HTML, CSS dan Javascript https://farazinux.com/source-code-game-matematika-dengan-html-css-dan-javascript/ https://farazinux.com/source-code-game-matematika-dengan-html-css-dan-javascript/#respond Thu, 16 Feb 2023 09:10:10 +0000 https://farazinux.com/?p=3664 Source code game matematika – Belajar matematika sering menjadi momok yang menakutkan. Namun, bagaimana apabila belajar matematika dengan game? Tentu akan lebih menarik dan menyenangkan untuk anak-anak kita. Lebih seru lagi kalau kita buat sendiri game matematika. Bagaimana caranya? Kali ini akan kami bagikan source code game matematika dengan menggunakan html, css dan javascript. Sehingga […]

Artikel Source Code Game Matematika dengan HTML, CSS dan Javascript pertama kali tampil pada Farazinux.

]]> Source code game matematika – Belajar matematika sering menjadi momok yang menakutkan. Namun, bagaimana apabila belajar matematika dengan game? Tentu akan lebih menarik dan menyenangkan untuk anak-anak kita.

Lebih seru lagi kalau kita buat sendiri game matematika. Bagaimana caranya? Kali ini akan kami bagikan source code game matematika dengan menggunakan html, css dan javascript. Sehingga game matematika ini dapat kita buka dengan mudah hanya dengan aplikasi web browser seperti Chrome, Mozila, Opera, Microsoft Edge atau aplikasi web browser lainnya.

Di bawah ini adalah source code membuat aplikasi game matematika sederhana untuk anak-anak. Pastinya anda tinggal copy paste script html, css dan javascript di bawah ini.

Source Code Game

Langkah pertama adalah persiapkan terlebih dahulu folder yang akan menampung tiga file. Ketiga file yang disiapkan dalam satu folder yang sama adalah index.html, style.css dan script.js.

1. HTML

HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur dan konten dari halaman web. Fungsi utama HTML adalah untuk menyediakan tag atau tanda yang mendefinisikan bagaimana sebuah dokumen web akan ditampilkan di browser.

Setelah kita memahami fungsi dari html, maka copy dan pastekan script di bawah ini pada file index.html yang telah kita buat seperti langkah di atas. Jangan lupa klik save untuk menyimpan script yang sudah kita pastekan.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Game Matematika untuk Anak-Anak</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Game Matematika untuk Anak-Anak</h1>
    <div id="question"></div>
    <form>
      <input type="number" id="answer">
      <button type="submit">Jawab</button>
    </form>
    <div id="result"></div>
    <button id="next">Selanjutnya</button>
    <script src="script.js"></script>
  </body>
</html>

2. CSS

CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dan tata letak halaman web yang dibuat menggunakan HTML. Fungsi utama CSS adalah untuk memisahkan presentasi tampilan halaman web dari struktur dan konten halaman.

Dari penjelasan fungsi css di atas, maka kita memahami bahwa agar tampilan game matematika ini lebih menarik maka kita tambahkan file style.css. Silahkan adan copy dan pastekan script css di bawah ini pada file style.css.

Setelah kita pastekan, kemudian save (simpan) file tersebut. Anda dapat pula memodifikasi css di bawah agar lebih sesuai dengan selera anda masing-masing.

#question {
  font-size: 24px;
  margin-bottom: 20px;
}

#answer {
  font-size: 24px;
  width: 100px;
}

#result {
  font-size: 24px;
  margin-top: 20px;
}

#next {
  font-size: 24px;
  display: none;
}

3. JavaScript

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat interaksi dan efek dinamis pada halaman web. Fungsi utama JavaScript adalah untuk memberikan interaksi pengguna pada halaman web dan meningkatkan pengalaman pengguna.

Nah, logic atau kendali dari aplikasi game matematika sederhana ini ada pada file script.js. Karena file javascript ini adalah pengendali dari aplikasi game matematika yang akan kita buat.

let question = document.getElementById("question");
let answer = document.getElementById("answer");
let result = document.getElementById("result");
let next = document.getElementById("next");

let num1, num2, op, correctAnswer;

generateQuestion();

document.addEventListener("submit", function(event) {
  event.preventDefault();
  
  if (parseInt(answer.value) == correctAnswer) {
    result.innerHTML = "Jawaban benar!";
    next.style.display = "inline";
  } else {
    result.innerHTML = "Jawaban salah. Coba lagi!";
  }
});

document.addEventListener("click", function(event) {
  if (event.target.id == "next") {
    generateQuestion();
    answer.value = "";
    result.innerHTML = "";
    next.style.display = "none";
  }
});

function generateQuestion() {
  num1 = Math.floor(Math.random() * 10) + 1;
  num2 = Math.floor(Math.random() * 10) + 1;
  op = Math.floor(Math.random() * 2);
  
  if (op == 0) {
    question.innerHTML = num1 + " + " + num2 + " = ?";
    correctAnswer = num1 + num2;
  } else {
    question.innerHTML = num1 + " - " + num2 + " = ?";
    correctAnswer = num1 - num2;
  }
}

Disclaimer

Game matematika yang farazinux.com bagikan ini masih sangat sederhana. Silahkan anda modifikasi lebih lanjut untuk lebih seru dan menariknya permainan game matematika ini. Selamat mencoba dan happy coding.

Artikel Source Code Game Matematika dengan HTML, CSS dan Javascript pertama kali tampil pada Farazinux.

]]> https://farazinux.com/source-code-game-matematika-dengan-html-css-dan-javascript/feed/ 0