Download Adobe After Effect Terbaru 2021 Free

Hai kawan-kawan designer yang lagi belajar ataupun sudah pro. Kalian sednag mencari aplikasi adobe after effect gratisan atau bisa didownload tapi ogah bayar? Tenang ada kok diartikel ini. Tinggal download dan gratis tanpa harus bayar. Cukup ucapan terimakasih saja.

Sedikit basa basi tentang adobe after effect ini. Asal kamu tahu, diperlukan komputer dengan spesifikasi tinggi untuk menjalankan aplikasi adobe after effect ini. Minimal komputer kamu harus memiliki processor core i3 generasi terbaru dan ram di atas 8 gb agar tidak terjadi eror saat menjalankan apliaksi ini.

Dengan aplikasi ini kamu bisa mengedit video sesuka hati kamu dan menganimasikannya. Luar biasa deh pokoknya.

Harganya pun tergolong luar biasa juga bagi kamu yang sedang atau mulai belajar. Untuk licensi di creative cloudnya harga 300 ribu per bulan dan 4 jutaan untuk tahunan.

Download after effect terbaru gratis

Wah, ini bagi saya yang sedang belajar edit video bisa bangkrut duluan sebelum bisa edit video. Ammpuunn.

Sementara untuk memenuhi kebutuhan, kita dituntut untuk bisa edit video untuk keperluan sekolah ataupun pekerjaan.

Biasanya orang akan melakukan segala cara untuk mendapatkan aplikasi ini secara gratis dengan melakukan crack misal atau membeli aplikasi bajakannya.

Rekomendasi artikel lain: rental mobil lepas kunci Bali.

Resiko yang sangat tinggi bisa kamu dapatkan jika kamu menggunakan aplikasi bajakan yang rawan disisipi virus didalamnya. Bisa-bisa laptop kamu eror dan lebih parahnya kena ransomware yang sedang marak sekarang ini. Semua file kamu terenkripsi dan kamu dimintai uang untuk memulihkannya. Ngeriii.

Kabar baiknya kamu tak perlu lagi mendownload aplikasi-aplikasi semacam itu. Diartikel ini, kamu bisa download secara gratis aplikasi adobe after effect terbaru 2021. Cukup klik download dan ucapan terimakasih saja, tak perlu bayar-bayar club. Berikut ini link downloadnya.

Usahakan untuk berdoa dulu sebelum klik download aplikasi adobe after effect 2021 diatas agar tidak terjadi eror. wkwkwk. Sudah dulu dan jangan lupa tinggalkan koment serta ucapan terimakasih ya.

Download Adobe Illustrator 2021 Terbaru Tanpa Crack Free Gratis

Hai kawan-kawan, kalian sedang belajar design atau sedang mencari aplikasi design untuk meningkatkan kemampuan design kalian? Pakai aja adobe illustrator. Tools design yang satu ini sangat populer dikalangan para designer profesional diseluruh dunia.

Dengan adobe illustrator, kamu bisa membuat berbagai keperluan design seperti:

  • Membuat Logo
  • Mebuat VECTOR
  • Mengambar ilustrasi
  • Buat Banner iklan
  • Typografi
  • Membuat asset video dan lain-lain

Illustrator tidak serta merta bisa kamu gunakan dilaptop atau PC kamu, perlu komputer dengan spesifikasi tertentu untuk menjalankan adobe illustrator ini dengan baik.

Usahakan laptop kamu memiliki prosessor minimal core i3 dan ram 8 gb keatas. Ini agar illutrator tidak lag saat sedang dijalankan.

Adobe illustrator yang resmi dijual diluaran sana memiliki harga licensi sekitar 300 ribu per bulan di adobe creative cloud, dan sekitar 4 jutaan jika kamu ingin membeli tahunan.

Wah, ini bagi saya yang sedang belajar design bisa bangkrut duluan sebelum bisa design. Ammpuunn.

Sementara untuk memenuhi kebutuhan, kita dituntut untuk bisa design untuk keperluan sekolah ataupun pekerjaan.

Biasanya orang akan melakukan segala cara untuk mendapatkan aplikasi ini secara gratis dengan melakukan crack misal atau membeli aplikasi bajakannya.

Rekomendasi artikel lain: rental mobil lepas kunci Bali.

Resiko yang sangat tinggi bisa kamu dapatkan jika kamu menggunakan aplikasi bajakan yang rawan disisipi virus didalamnya. Bisa-bisa laptop kamu eror dan lebih parahnya kena ransomware yang sedang marak.

Kabar baiknya kamu tak perlu lagi mendownload aplikasi-aplikasi semacam itu. Diartikel ini saya sudah menyediakan aplikasi adobe illustrator versi terbaru 2021 yang bisa kamu download dengan gratis.

Kamu tak perlu lagi melakukan crack atau hal lainnya, cukup download dan install. Berikut ini link downloadnya, berdoa dulu sebelum klik tombolnya ya, semoga gak eror. wkwk

Nah, itu sedikit basa basi saya tentang download adobe illustrator terbaru 2021 yang bisa kamu download secara free. Cukup ucapan terimakasih saja jika kamu masih sempat untuk mengetiknya. Terimakasih sudah berkunjung.

Kode Game Puzzle Dari Html, Css dan Javascript

Hallo, berikut ini saya akan share kode game puzzle yang di buat dari html, css dan javascript. Script kode ini bisa kamu kembangkan sebagai bahan pembelajaran. Nah, tanpa basa basi berikut script kode nya.

Pertama-tama buat dulu file dengan nama index.html atau terserah kamu dan masukkan kode html, css dan javascript berikut ini.

<html><head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="index.css">
  </head><body>
    <div id="gradient"></div>
    <div id="page">
      <div id="Message-Container">
        <div id="message">
          <h1>Congratulations!</h1>
          <p>You are done.</p>
          <p id="moves"></p>
          <input id="okBtn" type="button" onclick="toggleVisablity('Message-Container')" value="Cool!">
        </div>
      </div>
      <div id="menu">
        <div class="custom-select">
          <select id="diffSelect">
                    <option value="10">Easy</option>
                    <option value="15">Medium</option>
                    <option value="25">Hard</option>
                    <option value="38">Extreme</option>                                      
                </select>
        </div>
        <input id="startMazeBtn" type="button" onclick="makeMaze()" value="Start">
      </div>
      <div id="view">
        <div id="mazeContainer">
          <canvas id="mazeCanvas" class="border" height="1100" width="1100"></canvas>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>
  

</body></html>

Kemudian buat file baru di folder yang sama dengan nama index.css dan masukkan kode css di bawah ini.

html,
body {
  width: 100vw;
  height: 100vh;
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#mazeContainer {
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  top: 75px;
  opacity: 0;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.3);
  margin: auto;
}
#mazeContainer #mazeCanvas {
  margin: 0;
  display: block;
  border: solid 1px black;
}

input,
select {
  -webkit-transition-property: background-color opacity;
  transition-property: background-color opacity;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.3);
  height: 45px;
  width: 150px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  color: white;
  display: inline-block;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
input:hover,
select:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
input:active,
select:active {
  background-color: black;
}
input:focus,
select:focus {
  outline: none;
}

.custom-select {
  display: inline-block;
}
.custom-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAh0lEQVQ4T93TMQrCUAzG8V9x8QziiYSuXdzFC7h4AcELOPQAdXYovZCHEATlgQV5GFTe1ozJlz/kS1IpjKqw3wQBVyy++JI0y1GTe7DCBbMAckeNIQKk/BanALBB+16LtnDELoMcsM/BESDlz2heDR3WePwKSLo5eoxz3z6NNcFD+vu3ij14Aqz/DxGbKB7CAAAAAElFTkSuQmCC");
  background-repeat: no-repeat;
  background-position: 125px center;
}

#Message-Container {
  visibility: hidden;
  color: white;
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
#Message-Container #message {
  width: 300px;
  height: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -150px;
}

#page {
  font-family: "Segoe UI", Arial, sans-serif;
  text-align: center;
  height: auto;
  width: auto;
  margin: auto;
}
#page #menu {
  margin: auto;
  padding: 10px;
  height: 65px;
  box-sizing: border-box;
}
#page #menu h1 {
  margin: 0;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 3.2rem;
}
#page #view {
  position: absolute;
  top: 65px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
}

.border {
  border: 1px black solid;
  border-radius: 5px;
}

#gradient {
  z-index: -1;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  color: #fff;
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
          animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 400px) {
  input, select {
    width: 120px;
  }
}

Selanjutnya buat file lagi dengan nama index,js dan masukkan kode di bawah ini

function rand(max) {
  return Math.floor(Math.random() * max);
}

function shuffle(a) {
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

function changeBrightness(factor, sprite) {
  var virtCanvas = document.createElement("canvas");
  virtCanvas.width = 500;
  virtCanvas.height = 500;
  var context = virtCanvas.getContext("2d");
  context.drawImage(sprite, 0, 0, 500, 500);

  var imgData = context.getImageData(0, 0, 500, 500);

  for (let i = 0; i < imgData.data.length; i += 4) {
    imgData.data[i] = imgData.data[i] * factor;
    imgData.data[i + 1] = imgData.data[i + 1] * factor;
    imgData.data[i + 2] = imgData.data[i + 2] * factor;
  }
  context.putImageData(imgData, 0, 0);

  var spriteOutput = new Image();
  spriteOutput.src = virtCanvas.toDataURL();
  virtCanvas.remove();
  return spriteOutput;
}

function displayVictoryMess(moves) {
  document.getElementById("moves").innerHTML = "You Moved " + moves + " Steps.";
  toggleVisablity("Message-Container");  
}

function toggleVisablity(id) {
  if (document.getElementById(id).style.visibility == "visible") {
    document.getElementById(id).style.visibility = "hidden";
  } else {
    document.getElementById(id).style.visibility = "visible";
  }
}

function Maze(Width, Height) {
  var mazeMap;
  var width = Width;
  var height = Height;
  var startCoord, endCoord;
  var dirs = ["n", "s", "e", "w"];
  var modDir = {
    n: {
      y: -1,
      x: 0,
      o: "s"
    },
    s: {
      y: 1,
      x: 0,
      o: "n"
    },
    e: {
      y: 0,
      x: 1,
      o: "w"
    },
    w: {
      y: 0,
      x: -1,
      o: "e"
    }
  };

  this.map = function() {
    return mazeMap;
  };
  this.startCoord = function() {
    return startCoord;
  };
  this.endCoord = function() {
    return endCoord;
  };

  function genMap() {
    mazeMap = new Array(height);
    for (y = 0; y < height; y++) {
      mazeMap[y] = new Array(width);
      for (x = 0; x < width; ++x) {
        mazeMap[y][x] = {
          n: false,
          s: false,
          e: false,
          w: false,
          visited: false,
          priorPos: null
        };
      }
    }
  }

  function defineMaze() {
    var isComp = false;
    var move = false;
    var cellsVisited = 1;
    var numLoops = 0;
    var maxLoops = 0;
    var pos = {
      x: 0,
      y: 0
    };
    var numCells = width * height;
    while (!isComp) {
      move = false;
      mazeMap[pos.x][pos.y].visited = true;

      if (numLoops >= maxLoops) {
        shuffle(dirs);
        maxLoops = Math.round(rand(height / 8));
        numLoops = 0;
      }
      numLoops++;
      for (index = 0; index < dirs.length; index++) {
        var direction = dirs[index];
        var nx = pos.x + modDir[direction].x;
        var ny = pos.y + modDir[direction].y;

        if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
          //Check if the tile is already visited
          if (!mazeMap[nx][ny].visited) {
            //Carve through walls from this tile to next
            mazeMap[pos.x][pos.y][direction] = true;
            mazeMap[nx][ny][modDir[direction].o] = true;

            //Set Currentcell as next cells Prior visited
            mazeMap[nx][ny].priorPos = pos;
            //Update Cell position to newly visited location
            pos = {
              x: nx,
              y: ny
            };
            cellsVisited++;
            //Recursively call this method on the next tile
            move = true;
            break;
          }
        }
      }

      if (!move) {
        //  If it failed to find a direction,
        //  move the current position back to the prior cell and Recall the method.
        pos = mazeMap[pos.x][pos.y].priorPos;
      }
      if (numCells == cellsVisited) {
        isComp = true;
      }
    }
  }

  function defineStartEnd() {
    switch (rand(4)) {
      case 0:
        startCoord = {
          x: 0,
          y: 0
        };
        endCoord = {
          x: height - 1,
          y: width - 1
        };
        break;
      case 1:
        startCoord = {
          x: 0,
          y: width - 1
        };
        endCoord = {
          x: height - 1,
          y: 0
        };
        break;
      case 2:
        startCoord = {
          x: height - 1,
          y: 0
        };
        endCoord = {
          x: 0,
          y: width - 1
        };
        break;
      case 3:
        startCoord = {
          x: height - 1,
          y: width - 1
        };
        endCoord = {
          x: 0,
          y: 0
        };
        break;
    }
  }

  genMap();
  defineStartEnd();
  defineMaze();
}

function DrawMaze(Maze, ctx, cellsize, endSprite = null) {
  var map = Maze.map();
  var cellSize = cellsize;
  var drawEndMethod;
  ctx.lineWidth = cellSize / 40;

  this.redrawMaze = function(size) {
    cellSize = size;
    ctx.lineWidth = cellSize / 50;
    drawMap();
    drawEndMethod();
  };

  function drawCell(xCord, yCord, cell) {
    var x = xCord * cellSize;
    var y = yCord * cellSize;

    if (cell.n == false) {
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x + cellSize, y);
      ctx.stroke();
    }
    if (cell.s === false) {
      ctx.beginPath();
      ctx.moveTo(x, y + cellSize);
      ctx.lineTo(x + cellSize, y + cellSize);
      ctx.stroke();
    }
    if (cell.e === false) {
      ctx.beginPath();
      ctx.moveTo(x + cellSize, y);
      ctx.lineTo(x + cellSize, y + cellSize);
      ctx.stroke();
    }
    if (cell.w === false) {
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x, y + cellSize);
      ctx.stroke();
    }
  }

  function drawMap() {
    for (x = 0; x < map.length; x++) {
      for (y = 0; y < map[x].length; y++) {
        drawCell(x, y, map[x][y]);
      }
    }
  }

  function drawEndFlag() {
    var coord = Maze.endCoord();
    var gridSize = 4;
    var fraction = cellSize / gridSize - 2;
    var colorSwap = true;
    for (let y = 0; y < gridSize; y++) {
      if (gridSize % 2 == 0) {
        colorSwap = !colorSwap;
      }
      for (let x = 0; x < gridSize; x++) {
        ctx.beginPath();
        ctx.rect(
          coord.x * cellSize + x * fraction + 4.5,
          coord.y * cellSize + y * fraction + 4.5,
          fraction,
          fraction
        );
        if (colorSwap) {
          ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
        } else {
          ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
        }
        ctx.fill();
        colorSwap = !colorSwap;
      }
    }
  }

  function drawEndSprite() {
    var offsetLeft = cellSize / 50;
    var offsetRight = cellSize / 25;
    var coord = Maze.endCoord();
    ctx.drawImage(
      endSprite,
      2,
      2,
      endSprite.width,
      endSprite.height,
      coord.x * cellSize + offsetLeft,
      coord.y * cellSize + offsetLeft,
      cellSize - offsetRight,
      cellSize - offsetRight
    );
  }

  function clear() {
    var canvasSize = cellSize * map.length;
    ctx.clearRect(0, 0, canvasSize, canvasSize);
  }

  if (endSprite != null) {
    drawEndMethod = drawEndSprite;
  } else {
    drawEndMethod = drawEndFlag;
  }
  clear();
  drawMap();
  drawEndMethod();
}

function Player(maze, c, _cellsize, onComplete, sprite = null) {
  var ctx = c.getContext("2d");
  var drawSprite;
  var moves = 0;
  drawSprite = drawSpriteCircle;
  if (sprite != null) {
    drawSprite = drawSpriteImg;
  }
  var player = this;
  var map = maze.map();
  var cellCoords = {
    x: maze.startCoord().x,
    y: maze.startCoord().y
  };
  var cellSize = _cellsize;
  var halfCellSize = cellSize / 2;

  this.redrawPlayer = function(_cellsize) {
    cellSize = _cellsize;
    drawSpriteImg(cellCoords);
  };

  function drawSpriteCircle(coord) {
    ctx.beginPath();
    ctx.fillStyle = "yellow";
    ctx.arc(
      (coord.x + 1) * cellSize - halfCellSize,
      (coord.y + 1) * cellSize - halfCellSize,
      halfCellSize - 2,
      0,
      2 * Math.PI
    );
    ctx.fill();
    if (coord.x === maze.endCoord().x && coord.y === maze.endCoord().y) {
      onComplete(moves);
      player.unbindKeyDown();
    }
  }

  function drawSpriteImg(coord) {
    var offsetLeft = cellSize / 50;
    var offsetRight = cellSize / 25;
    ctx.drawImage(
      sprite,
      0,
      0,
      sprite.width,
      sprite.height,
      coord.x * cellSize + offsetLeft,
      coord.y * cellSize + offsetLeft,
      cellSize - offsetRight,
      cellSize - offsetRight
    );
    if (coord.x === maze.endCoord().x && coord.y === maze.endCoord().y) {
      onComplete(moves);
      player.unbindKeyDown();
    }
  }

  function removeSprite(coord) {
    var offsetLeft = cellSize / 50;
    var offsetRight = cellSize / 25;
    ctx.clearRect(
      coord.x * cellSize + offsetLeft,
      coord.y * cellSize + offsetLeft,
      cellSize - offsetRight,
      cellSize - offsetRight
    );
  }

  function check(e) {
    var cell = map[cellCoords.x][cellCoords.y];
    moves++;
    switch (e.keyCode) {
      case 65:
      case 37: // west
        if (cell.w == true) {
          removeSprite(cellCoords);
          cellCoords = {
            x: cellCoords.x - 1,
            y: cellCoords.y
          };
          drawSprite(cellCoords);
        }
        break;
      case 87:
      case 38: // north
        if (cell.n == true) {
          removeSprite(cellCoords);
          cellCoords = {
            x: cellCoords.x,
            y: cellCoords.y - 1
          };
          drawSprite(cellCoords);
        }
        break;
      case 68:
      case 39: // east
        if (cell.e == true) {
          removeSprite(cellCoords);
          cellCoords = {
            x: cellCoords.x + 1,
            y: cellCoords.y
          };
          drawSprite(cellCoords);
        }
        break;
      case 83:
      case 40: // south
        if (cell.s == true) {
          removeSprite(cellCoords);
          cellCoords = {
            x: cellCoords.x,
            y: cellCoords.y + 1
          };
          drawSprite(cellCoords);
        }
        break;
    }
  }

  this.bindKeyDown = function() {
    window.addEventListener("keydown", check, false);

    $("#view").swipe({
      swipe: function(
        event,
        direction,
        distance,
        duration,
        fingerCount,
        fingerData
      ) {
        console.log(direction);
        switch (direction) {
          case "up":
            check({
              keyCode: 38
            });
            break;
          case "down":
            check({
              keyCode: 40
            });
            break;
          case "left":
            check({
              keyCode: 37
            });
            break;
          case "right":
            check({
              keyCode: 39
            });
            break;
        }
      },
      threshold: 0
    });
  };

  this.unbindKeyDown = function() {
    window.removeEventListener("keydown", check, false);
    $("#view").swipe("destroy");
  };

  drawSprite(maze.startCoord());

  this.bindKeyDown();
}

var mazeCanvas = document.getElementById("mazeCanvas");
var ctx = mazeCanvas.getContext("2d");
var sprite;
var finishSprite;
var maze, draw, player;
var cellSize;
var difficulty;
// sprite.src = 'media/sprite.png';

window.onload = function() {
  let viewWidth = $("#view").width();
  let viewHeight = $("#view").height();
  if (viewHeight < viewWidth) {
    ctx.canvas.width = viewHeight - viewHeight / 100;
    ctx.canvas.height = viewHeight - viewHeight / 100;
  } else {
    ctx.canvas.width = viewWidth - viewWidth / 100;
    ctx.canvas.height = viewWidth - viewWidth / 100;
  }

  //Load and edit sprites
  var completeOne = false;
  var completeTwo = false;
  var isComplete = () => {
    if(completeOne === true && completeTwo === true)
       {
         console.log("Runs");
         setTimeout(function(){
           makeMaze();
         }, 500);         
       }
  };
  sprite = new Image();
  sprite.src =
    "https://image.ibb.co/dr1HZy/Pf_RWr3_X_Imgur.png" +
    "?" +
    new Date().getTime();
  sprite.setAttribute("crossOrigin", " ");
  sprite.onload = function() {
    sprite = changeBrightness(1.2, sprite);
    completeOne = true;
    console.log(completeOne);
    isComplete();
  };

  finishSprite = new Image();
  finishSprite.src = "https://image.ibb.co/b9wqnJ/i_Q7m_U25_Imgur.png"+
  "?" +
  new Date().getTime();
  finishSprite.setAttribute("crossOrigin", " ");
  finishSprite.onload = function() {
    finishSprite = changeBrightness(1.1, finishSprite);
    completeTwo = true;
    console.log(completeTwo);
    isComplete();
  };
  
};

window.onresize = function() {
  let viewWidth = $("#view").width();
  let viewHeight = $("#view").height();
  if (viewHeight < viewWidth) {
    ctx.canvas.width = viewHeight - viewHeight / 100;
    ctx.canvas.height = viewHeight - viewHeight / 100;
  } else {
    ctx.canvas.width = viewWidth - viewWidth / 100;
    ctx.canvas.height = viewWidth - viewWidth / 100;
  }
  cellSize = mazeCanvas.width / difficulty;
  if (player != null) {
    draw.redrawMaze(cellSize);
    player.redrawPlayer(cellSize);
  }
};

function makeMaze() {
  //document.getElementById("mazeCanvas").classList.add("border");
  if (player != undefined) {
    player.unbindKeyDown();
    player = null;
  }
  var e = document.getElementById("diffSelect");
  difficulty = e.options[e.selectedIndex].value;
  cellSize = mazeCanvas.width / difficulty;
  maze = new Maze(difficulty, difficulty);
  draw = new DrawMaze(maze, ctx, cellSize, finishSprite);
  player = new Player(maze, mazeCanvas, cellSize, displayVictoryMess, sprite);
  if (document.getElementById("mazeContainer").style.opacity < "100") {
    document.getElementById("mazeContainer").style.opacity = "100";
  }
}

Untuk fungsi dari masing-masing kode diatas tidak dijelaskan disini ya, soalnya kalau dijelaskan bakal panjang banget.

Rekomendasi lain : Aplikasi rental mobil.

Cara menjalankannya tinggal drag file html tadi ke browser kamu dan tampilan nya akan seperti gambar di bawah ini.

kode game puzle dari html dan javascript

Nah, itu adalah kode atau script game puzle yang dibuat dengan html, css, dan javascript. Semoga bermanfaat dan terimakasih sudah berkunjung.

Kode Game Catur dari Html, Css dan Javascript

Hallo, kali ini saya akan membagikan script atau kode game catur dari html, css dan javascript. Script kode ini bisa kamu kembangkan sebagai bahan pembelajaran. Nah, tanpa basa basi berikut script kode nya.

Pertama-tama buat dulu file dengan nama index.html atau terserah kamu dan masukkan kode html, css dan javascript berikut ini.

<!doctype html>
<html>
 <head> 
  <title>Chess Engine</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <meta charset="UTF-8"> 
     <style>
      body {
    font-family:chess;
    margin: 0;
    background-color:#000;
}

.square {
    background:#fff;
    display:inline-block;
    border:1px solid #fff;
    text-align:center;
    position: absolute;
    cursor: pointer;
}
.heading{
color:white;
text-align:right;
}
.head{
color:white;
text-align:center;
}
.body{
border:2px solid white; 
height:110px;
margin :5px; 
font-size:12px;
}
.logo{
border:1px solid #fff; 
position:absolute;
top:47px; 
left:10px;
height:65px;
width:65px;
}

     </style>
 </head> 
 <body> 
  <div class="body">
  <div class="head">
   <h2><u>Simple Chess game with html</u></h2>
  </div>  
  <div class="heading">
  <h3>-<u>Powered by SPI-LAB</u></h3>
   <h4>-<u>Created by Arif Sardar</u></h4>
  </div>
   <img class="logo" src="https://spilabgroup.files.wordpress.com/2020/09/cropped-img_20200821_064756-4.jpg">
   </div>
   <div id="container"> 
   </div>
 
  <script>
  window.onload = function(){
    var w = window.innerWidth || 360;
    var h = window.innerHeight || 500;
    
    var tsw = (w > h) ? h : w;
    
    var sw = (tsw - 16)/8;
    
    var container = document.getElementById("container");
    for(var n = 0; n < 64; n++){
        var square = document.createElement("div");
        square.classList.add("square");
        square.classList.add("s"+n);
        square.style.height = sw + 'px';
        square.style.width = sw + 'px';
        square.style.top = 7+(h-tsw)/2+sw*(Math.floor(n/8)) + 'px';
        square.style.left = 7+(w-tsw)/2+sw*(Math.floor(n%8)) + 'px';
        square.style.fontSize = sw*3/4 + 'px';
        container.appendChild(square);
    }

    var fonts = {
        'k' : '&#9818;',
        'q' : '&#9819;',
        'r' : '&#9820',
        'b' : '&#9821;',
        'n' : '&#9822;',
        'p' : '&#9823;',
        'l' : '&#9812;',
        'w' : '&#9813;',
        't' : '&#9814;',
        'v' : '&#9815;',
        'm' : '&#9816;',
        'o' : '&#9817;',
        
    }
    
    var values = ['r','n','b','q','k','b','n','r','p','p','p','p','p','p','p','p',0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,'o','o','o','o','o','o','o','o','t','m','v','w','l','v','m','t'];
    var ck = false;
    var cr1 = false;
    var cr2 = false;
    var cl;
    
    var sqs = document.getElementsByClassName("square");

    for(var n = 0; n < 64; n++){
        if(values[n] !== 0){
           sqs[n].innerHTML = fonts[values[n]];
        }
        sqs[n].addEventListener("click",check);
    }
    
    function updateSquarecolor(){
        for(var n = 0; n < 64; n++){
            if(Math.floor(n/8)%2 === 0){
                if(n%2 === 0){
                    sqs[n].style.background = '#9ff';
                }
                else {
                    sqs[n].style.background = '#5fa';
                }
            }
            else {
                if(n%2 === 1){
                    sqs[n].style.background = '#9ff';
                }
                else {
                    sqs[n].style.background = '#5fa';
                }
            }
        }
    }
    
    updateSquarecolor();

    var moveable = false;
    var moveTarget = "";
    var moveScopes = [];


    function checkBlack(n,values){
        var target = values[n];
        var scopes = [];
        var x = n;
       
        if(target === "o"){
            x -= 8;
            if("prnbkq".indexOf(values[x-1]) >= 0 && x%8 != 0){
                scopes.push(x-1);
            }
            if("prnbkq".indexOf(values[x+1]) >= 0 && x%8 != 7){
                scopes.push(x+1);
            }
            if(x >= 0 && values[x] === 0){
                scopes.push(x);
                if(x >= 40){
                    if(x-8 >= 0 && values[x-8] === 0){
                        scopes.push(x-8);
                    }
                }
            }
        }
       
        else if(target === "t"){
            x = n;
            x -= 8;
            while(x >= 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x -= 8;
            }
            x = n;
            x += 8;
            while(x < 64){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x += 8;
            }
            x = n;
            x++;
            while(x%8 != 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x++;
            }
            x = n;
            x--;
            while(x%8 != 7){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x--;
            }
        }
        
        else if(target === "m"){
            x = n;
            if(x%8 > 1 && x%8 < 6){
                x -= 17;
                if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x -= 15;
                if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }

                x = n;
                x -= 10;
                if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x -= 6;
                if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x += 6;
                if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x += 10;
                if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x += 15;
                if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x += 17;
                if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
            }
            else {
                x = n;
                if(x%8 <= 1){
                    x = n;
                    x -= 15;
                    if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x -= 6;
                    if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x += 10;
                    if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x += 17;
                    if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                }
                x = n;
                if(x%8 === 1){
                    x -= 17;
                    if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x += 15;
                    if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                }
                if(x%8 >= 6){
                    x = n;
                    x -= 17;
                    if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x -= 10;
                    if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x += 6;
                    if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x += 15;
                    if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                }
                x = n;
                if(x%8 === 6){
                    x = n;
                    x -= 15;
                    if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x += 17;
                    if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                }
            }
        }
        
        else if(target === "v"){
            x = n;
            x -= 9;
            while(x >= 0 && x%8 !== 7){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x -= 9;
            }
            x = n;
            x += 7;
            while(x < 64 && x%8 !== 7){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x += 7;
            }
            x = n;
            x += 9;
            while(x%8 != 0 && x%8 !== 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x += 9;
            }
            x = n;
            x -= 7;
            while(x%8 != 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x -= 7;
            }
        }
       
        else if(target === "w"){
            x = n;
            x -= 8;
            while(x >= 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x -= 8;
            }
            x = n;
            x += 8;
            while(x < 64){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x += 8;
            }
            x = n;
            x++;
            while(x%8 != 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x++;
            }
            x = n;
            x--;
            while(x%8 != 7){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x--;
            }
            x = n;
            x -= 9;
            while(x >= 0 && x%8 !== 7){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x -= 9;
            }
            x = n;
            x += 7;
            while(x < 64 && x%8 !== 7){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x += 7;
            }
            x = n;
            x += 9;
            while(x%8 != 0 && x%8 !== 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x += 9;
            }
            x = n;
            x -= 7;
            while(x%8 != 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("prnbqk".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x -= 7;
            }
        }
        
        else if(target === "l"){
            x = n;
            x += 8;
            if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                scopes.push(x);
            }
            x = n;
            x -= 8;
            if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                scopes.push(x);
            }
            x = n;
            if(x%8 > 0){
                x = n;
                x -= 1;
                if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x -= 9;
                if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }

                x = n;
                x += 7;
                if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
            }
            x = n;
            if(x%8 < 7){
                x = n;
                x += 1;
                if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x += 9;
                if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x -= 7;
                if(("prnbqk".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
            }
            x = n;
            if(!ck){
                cl = false;
                if(!cr2){
                //    cl = false;
                    if(values[n+1] === 0 && values[n+2] === 0 && values[n+3] === "t"){
                        scopes.push(x+2);
                        cl = true;
                    }
                }
                if(!cr1){
                //    cl = false;
                    if(values[n-1] === 0 && values[n-2] === 0 && values[n-3] === 0 && values[n-4] === "t"){
                        scopes.push(x-2);
                        cl = true;
                    }
                }
            }
        }
        if(scopes.length) return scopes;
    }

    function checkWhite(n,values){
        var target = values[n];
        var scopes = [];
        var x = n;
        if(target === "p"){
            x += 8;
            if("otmvlw".indexOf(values[x-1]) >= 0 && x%8 != 0){
                scopes.push(x-1);
            }
            if("otmvlw".indexOf(values[x+1]) >= 0 && x%8 != 7){
                scopes.push(x+1);
            }
            if(x < 64 && values[x] === 0){
                scopes.push(x);
                if(x <= 23){
                    if(x+8 >= 0 && values[x+8] === 0){
                        scopes.push(x+8);
                    }
                }
            }
        }
        
        else if(target === "r"){
            x = n;
            x -= 8;
            while(x >= 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x -= 8;
            }
            x = n;
            x += 8;
            while(x < 64){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x += 8;
            }
            x = n;
            x++;
            while(x%8 != 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x++;
            }
            x = n;
            x--;
            while(x%8 != 7){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x--;
            }
        }
        
        else if(target === "n"){
            x = n;
            if(x%8 > 1 && x%8 < 6){
                x -= 17;
                if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x -= 15;
                if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }

                x = n;
                x -= 10;
                if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x -= 6;
                if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x += 6;
                if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x += 10;
                if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x += 15;
                if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x += 17;
                if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
            }
            else {
                x = n;
                if(x%8 <= 1){
                    x = n;
                    x -= 15;
                    if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x -= 6;
                    if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x += 10;
                    if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x += 17;
                    if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                }
                x = n;
                if(x%8 === 1){
                    x -= 17;
                    if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x += 15;
                    if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                }
                if(x%8 >= 6){
                    x = n;
                    x -= 17;
                    if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x -= 10;
                    if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x += 6;
                    if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x += 15;
                    if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                }
                x = n;
                if(x%8 === 6){
                    x = n;
                    x -= 15;
                    if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                    x = n;
                    x += 17;
                    if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                        scopes.push(x);
                    }
                }
            }
        }
     
        else if(target === "b"){
            x = n;
            x -= 9;
            while(x >= 0 && x%8 !== 7){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x -= 9;
            }
            x = n;
            x += 7;
            while(x < 64 && x%8 !== 7){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x += 7;
            }
            x = n;
            x += 9;
            while(x%8 != 0 && x%8 !== 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x += 9;
            }
            x = n;
            x -= 7;
            while(x%8 != 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x -= 7;
            }
        }
        
        else if(target === "q"){
            x = n;
            x -= 8;
            while(x >= 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x -= 8;
            }
            x = n;
            x += 8;
            while(x < 64){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x += 8;
            }
            x = n;
            x++;
            while(x%8 != 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x++;
            }
            x = n;
            x--;
            while(x%8 != 7){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x--;
            }
            x = n;
            x -= 9;
            while(x >= 0 && x%8 !== 7){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x -= 9;
            }
            x = n;
            x += 7;
            while(x < 64 && x%8 !== 7){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x += 7;
            }
            x = n;
            x += 9;
            while(x%8 != 0 && x%8 !== 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x += 9;
            }
            x = n;
            x -= 7;
            while(x%8 != 0){
                if(values[x] === 0){
                    scopes.push(x);
                }
                else if("otmvlw".indexOf(values[x]) >= 0){
                    scopes.push(x);
                    break;
                }
                else {
                    break;
                }
                x -= 7;
            }
        }
        
        else if(target === "k"){
            x = n;
            x += 8;
            if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                scopes.push(x);
            }
            x = n;
            x -= 8;
            if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                scopes.push(x);
            }
            x = n;
            if(x%8 > 0){
                x = n;
                x -= 1;
                if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x -= 9;
                if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }

                x = n;
                x += 7;
                if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
            }
            x = n;
            if(x%8 < 7){
                x = n;
                x += 1;
                if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x += 9;
                if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
                x = n;
                x -= 7;
                if(("otmvlw".indexOf(values[x]) >= 0 || values[x] === 0) && x < 64 && x >= 0){
                    scopes.push(x);
                }
            }
        }
        if(scopes.length) return scopes;
    }

    var myTurn = true;

    function check(){
        if(myTurn){
            var n = Number(this.classList[1].slice(1));
            var target = values[n];

            var scopes = checkBlack(n,values) || [];

            var x = n;

            if(!moveable){
                if(scopes.length > 0){
                    moveable = true;
                    moveTarget = n;
                    moveScopes = scopes.join(",").split(",");
                }
                else {

                }
            }
            else {
                if(moveScopes.indexOf(String(n)) >= 0){
                    var checkArr = [];
                    var saveKing = false;
                    for(var z = 0; z < 64; z++){
                        checkArr[z] = values[z];
                    }
                    
                    checkArr[n] = checkArr[moveTarget];
                    checkArr[moveTarget] = 0;
                    
                    for(var y = 0; y < 64; y++){
                        if("prnbkq".indexOf(checkArr[y]) >= 0){
                            var checkScp = checkWhite(y,checkArr) || [];
                            for(var z = 0; z < checkScp.length; z++){
                                if(checkArr[checkScp[z]] === 'l'){
                                    if(!saveKing){
                                        alert('Save Your King');
                                        saveKing = true;
                                    }
                                }
                            }
                        }
                    }
                    
                    if(!saveKing){
                        values[n] = values[moveTarget];
                        values[moveTarget] = 0;
                        if(cl){
                            if(n === 62 && moveTarget === 60){
                                values[63] = 0;
                                values[61] = "t";
                            }
                            else if(n === 58 && moveTarget === 60){
                                values[59] = "t";
                                values[56] = 0;
                            }
                        }
                        if(moveTarget === 60){
                            ck = true;
                        }
                        else if(moveTarget === 63){
                            cr2 = true;
                        }
                        else if(moveTarget === 56){
                            cr1 = true;
                        }
                        if(values[n] === "o" && n < 8){
                            values[n] = "w";
                        }
                        moveable = false;
                        scopes = [];
                        myTurn = false;
                        setTimeout(chooseTurn,1000);
                    }
                }
                else {
                    moveScopes = [];
                    moveable = false;
                }
            }

            updateSquarecolor();
            
            for(var x = 0; x < 64; x++){
                sqs[x].innerHTML = fonts[values[x]];
                if(values[x] === 0){
                    sqs[x].innerHTML = "";
                }
            }

            for(var x = 0; x < scopes.length; x++){
                sqs[scopes[x]].style.background = "#f45";//.classList.add("scope");
            //    alert(scopes)
            }
        }
    }


    var arr = [];

    function chooseTurn(){
        var approved = [];
        var actions = [];
        var effects = [];


        for(var n = 0; n < 64; n++){
            if("prnbqk".indexOf(values[n]) >= 0){
                var scopes = checkWhite(n,values) || [];
                for(var x = 0; x < scopes.length; x++){
                    var tmp = []//values.join(',').split(',');
                    for(var xx = 0; xx < 64; xx++){
                        tmp[xx] = values[xx]
                    }
                    var effect = 0;
                    var action = Math.random()*3;
                    //Action value
                    var actionValue = tmp[scopes[x]];
                    if(actionValue === "l"){
                        action = 100 + Math.random()*3;
                    }
                    else if(actionValue === "w"){
                        action = 50 + Math.random()*3;
                    }
                    else if(actionValue === "v"){
                        action = 30 + Math.random()*3;
                    }
                    else if(actionValue === "m"){
                        action = 30 + Math.random()*3;
                    }
                    else if(actionValue === "t"){
                        action = 30 + Math.random()*3;
                    }
                    else if(actionValue === "o"){
                        action = 15 + Math.random()*3;
                    }
                    //Effect value
                    tmp[scopes[x]] = tmp[n];
                    tmp[n] = 0;
                    for(var y = 0; y < 64; y++){
                        if("otmvlw".indexOf(values[y]) >= 0){
                            var tmpScp = checkBlack(y,tmp) || [];
                            for(var z = 0; z < tmpScp.length; z++){
                                var effectValue = tmp[tmpScp[z]];
                                if(effectValue == "k"){
                                    if(effect < 100){
                                        effect = 100;
                                    }
                                }
                                else if(effectValue == "q"){
                                    if(effect < 50){
                                        effect = 50;
                                    }
                                }
                                else if(effectValue == "b"){
                                    if(effect < 30){
                                        effect = 30;
                                    }
                                }
                                else if(effectValue == "n"){
                                    if(effect < 30){
                                        effect = 30;
                                    }
                                }
                                else if(effectValue == "r"){
                                    if(effect < 30){
                                        effect = 30;
                                    }
                                }
                                else if(effectValue == "p"){
                                    if(effect < 15){
                                        effect = 15;
                                    }
                                }
                            }
                        }
                    }




                    actions.push(action);
                    effects.push(effect);
                    approved.push(n+"-"+scopes[x]);
                }
            }
        }

        //alert(actions);

        var bestEffect = Math.min.apply(null,effects);
        //alert(bestEffect);
        if(bestEffect >= 100){
            alert("You Win");
            setTimeout(function(){
                values = ['r','n','b','q','k','b','n','r','p','p','p','p','p','p','p','p',0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,'o','o','o','o','o','o','o','o','t','m','v','w','l','v','m','t'];
        },100);
        }

        var tmpA = [];
        var tmpB = [];
        var tmpC = [];
        var bestMove = "";

        for(var n = 0; n < effects.length; n++){
            if(effects[n] === bestEffect){
                tmpA.push(actions[n]);
                tmpB.push(approved[n]);
                tmpC.push(effects[n]);
            }
        }
        bestMove = tmpB[tmpA.indexOf(Math.max.apply(null,tmpA))];
    //    alert(effects)
        //alert(bestMove);


        if(bestMove){
            values[Number(bestMove.split("-")[1])] = values[Number(bestMove.split("-")[0])];
            values[Number(bestMove.split("-")[0])] = 0;
            if(values[Number(bestMove.split("-")[1])] === "p" && Number(bestMove.split("-")[1]) >= 56){
                values[Number(bestMove.split("-")[1])] = "q";
            }

            sqs[bestMove.split("-")[1]].style.background = '#aaf';
            sqs[bestMove.split("-")[0]].style.background = '#aaf';

            for(var x = 0; x < 64; x++){
                //sqs[x].style.background = "#afa"//classList.add("scope");
                sqs[x].innerHTML = fonts[values[x]];
                if(values[x] === 0){
                    sqs[x].innerHTML = "";
                }
            }
            myTurn = true;
        }
        else {
            //alert('You Win');
        }
    }
}
//chooseTurn();
 </script>
     </body>
</html>

Untuk fungsi dari masing-masing kode diatas tidak dijelaskan disini ya, soalnya kalau dijelaskan bakal panjang banget. File diatas juga bisa kamu pecah menjadi tiga bagian dengan ekstentsi html, css dan javascript.

Rekomendasi lain : Aplikasi rental mobil.

Cara menjalankannya tinggal drag file html tadi ke browser kamu dan tampilannya akan seperti gambar di bawah ini.

script kode game catur

Nah, itu adalah kode script game catur yang dibuat dengan html, css, dan javascript. Semoga bermanfaat dan terimakasih sudah berkunjung.

Contoh Kode Game Kucing Lompat Dengan Html, Css dan Javascript

Hai, cari referensi kode buat praktek atau tugas? Ini ada kode buat kamu pelajari nih. Kode script game kucing lompat ini dibuat dari html, css dan javascript. Bisa kamu kembangkan da pelajari lagi.

Langkah pertama yang perlu kamu persiapkan adalah teks editor dan browser saja.

Kemudian buat folder baru dengan nama terserah kamu. Lalu buka folder tersebut dan buat file html dengan nama index.html. Isikan kode html berikut ini.

<html><head></head><body>'


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cat Runner | Game</title>
    <link rel="stylesheet" type="text/css" href="index.css">


    <div id="prompt">
        <div id="toolbar">
            <h1 style="color:red" id="gameover"></h1><br>
            <input type="button" id="startBtn" value="๐Ÿˆ PLAY">
        </div>
    </div>
    <canvas id="cvs"></canvas>

    <script type="text/javascript" src="index.js"></script>

</body></html>

Lalu save.

Setelah itu buat lagi file baru dengan nama index.css dan masukkan kode di bawah ini.

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

#toolbar {
    position:absolute;
    width:100%;
    height:10%;
    background: none;
    display: flex;
    justify-content: center;
    top:25%;
}

#toolbar > input {
    align-self: center;
    display:block;
    margin:10px;
    padding:15px;
    color:lightgray;
    background-color: teal;
    border:2px solid lightgray;
    outline:none;
    border-radius:15px;
    font-family: monospace;
}


canvas {
    overflow:hidden;
}

Lalu save.

kemudian buat lagi file baru dengan nama index.js dan masukkan kode javascript berikut ini.

class Abstract {
    constructor(ctx, src, x, y, areaWidth, areaHeight, row,
    column, startDimension){
        this.ctx = ctx;
        this.x = x;
        this.y = y;
        this.areaWidth = areaWidth;
        this.areaHeight = areaHeight;
        this.row = row;
        this.column = column;
        this.img = new Image();
        this.img.onload = () => {};
        this.img.src = src;
        this.pixelWidth = this.areaWidth / this.column;
        this.pixelHeight = this.areaHeight / this.row;
        this.startDimension = startDimension;
    }
}


class Obstacle extends Abstract {
    constructor(ctx, src, x, y, areaWidth, areaHeight, row,
     column, startDimension){
        super(ctx, src, x, y, areaWidth, areaHeight, row,
             column, startDimension);
        this.width = 30;
        this.height = 30;
    }

    draw(){
        this.ctx.drawImage(this.img, this.startDimension, 0, this.pixelWidth, 
        this.pixelHeight, this.x, this.y, this.width, this.height);
    }

    update(time){
        this.x -= (time < 100)?5:(time > 100 && time < 300)?12:(
        time > 300 < 550)?20:(time > 550 && time < 800)?33:35;
        this.draw();
    }
}


class Player extends Abstract {
    constructor(ctx, src, x, y, areaWidth, areaHeight, row, 
    column, startDimension, maxHeight, mainPos){
        super(ctx, src, x, y, areaWidth, areaHeight, row,
             column, startDimension);
        this.width = 60;
        this.height = 60;
        this.mainPosX = mainPos[0];
        this.mainPosY = mainPos[1];
        this.vY = 0;
        this.speed = -5;
        this.gravity = .3;
        this.isJumped = true;
        this.maxHeight = maxHeight;
        this.score = 0;
    }

    draw(){
        if(this.isJumped){
            this.ctx.drawImage(this.img, 0, 0, this.pixelWidth, this.pixelHeight,
            this.x, this.y, this.width, this.height);
        }else{
            this.ctx.drawImage(this.img, this.startDimension, this.pixelHeight*2, 
            this.pixelWidth, this.pixelHeight, this.x, this.y, this.width, this.height);
        }
    }

    jump(){
        if(this.y <= this.maxHeight){
            this.vY = Math.abs(this.speed)*2;
        }
        this.y += this.vY;
        if(this.vY === Math.abs(this.speed)*2 && !this.isJumped)
            this.vY = 0;
    }

    update(){
        if(this.mainPosY > this.y)this.isJumped = true;
        else if(this.mainPosY <= this.y)this.isJumped = false;
        this.draw();
    }
}


class Floor {
    constructor(ctx, x, y, width, height, color){
        this.ctx = ctx;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.color  = color;
        this.speed = 10;
    }

    draw(){
        this.ctx.beginPath();
        this.ctx.fillStyle = this.color;
        this.ctx.fillRect(this.x, this.y, 
            this.width, this.height);
        this.ctx.closePath();
    }

    update(time){
        this.x -= (time < 100)?10:(time > 100 && time < 300)?18:(
        time > 300 < 550)?25:(time > 550 && time < 800)?33:40;
        this.draw();
    }

}


const init = () => {
    // game area setup
    const cvs = document.querySelector("#cvs");
    const cw = cvs.width = innerWidth;
    const ch = cvs.height = innerHeight;
    cvs.style.backgroundColor = "white";

    let ctx = cvs.getContext("2d");

    let prompt = document.querySelector("#prompt");
    let startBtn  = document.querySelector("#startBtn");

    let isPlaying = false, mainAnimeId;

    // function to get random values between ```min``` and ```max```
    const MAX_MIN = (min, max) => Math.floor(Math.random()*
        (max - min + 1) + min);

    // Radial Gradient for sun
    let sunGradient = ctx.createRadialGradient(cw-100,
         ch/4, 20, cw-100, ch/4, 50);
    sunGradient.addColorStop(0, "yellow");
    sunGradient.addColorStop(.5, "#FFD42A");
    sunGradient.addColorStop(1, "#FFFFFF");

    // time counter 
    let time = 0;
    const updateTime = () => time++;
    setInterval(updateTime, 200);

    // create the main floor
    let floor = new Floor(ctx, 0, ch-40, cw, ch+40, "#803300");

    // create the moving floor particles
    let floorParticles = [];
    const pushFloorParticles = () => {
        let amount = MAX_MIN(2, 5);
        for(let _=0; _<amount; _++){
            let x = MAX_MIN(cw + 10, cw + 30);
            let y = MAX_MIN(floor.y, ch);
            let [width, height] = [MAX_MIN(30, 55), 5];
            floorParticles.push(new Floor(ctx, x, y, width,
                 height, "#552200"));
        }
    }
    setInterval(pushFloorParticles, 300);

    //Create obstacles
    let obsData ={
        src:"https://i.ibb.co/1X08n1Z/Chromium-T-Rex-obstacle-large-sprite.png",
        areaW: 300,
        areaH: 100,
        column: 6,
        row: 1
    };
    let obstacles = [];
    let obstacleStartDimension = [0, 50, 100, 150, 200, 250];
    const pushObstacles = () => {
        //let amount = Math.ceil(Math.random()*2);
        for(let i=0; i < 1; i++){
            let x = MAX_MIN(cw + 5, cw + 10);
            let y = floor.y - 30;
            sourceX = obstacleStartDimension[Math.floor(Math.random()
                *obstacleStartDimension.length)];
            obstacles.push(new Obstacle(ctx, obsData.src, x, y, obsData.areaW, 
                obsData.areaH, obsData.row, obsData.column, 0));
        }
    }
    setInterval(pushObstacles, 4000);

    // create the cat object
    let catData = {
        src:"https://i.ibb.co/180tsjk/black-cat-running-sprite-vector-5177265.jpg",
        areaW:1000,
        areaH:780,
        column:4,
        row:4,
        x:10,
        y:floor.y - 50,
        maxY:(floor.y - 200),
        width:this.areaW / this.column
    }

    let playerStartDimension = 0;
    const updateplayerStartDimension = () => {
        playerStartDimension += (1000/4);
        if(playerStartDimension >= catData.areaW)
            playerStartDimension = 0;
    }
    setInterval(updateplayerStartDimension, 70);

    let player = new Player(ctx, catData.src, catData.x, catData.maxY, 
        catData.areaW, catData.areaH, catData.row, catData.column,
        playerStartDimension, catData.maxY, [catData.x, catData.y]);

    
    
    const main = () => {
        // score and time
        ctx.fillStyle = "black";
        ctx.font = "bold 20px Arial";
        ctx.fillText(`Time:. ${time}`, 10, 20);
        ctx.fillText(`Score:. ${player.score}`, cw-100, 20);

        // draw the sun
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = sunGradient;
        ctx.arc(cw - 100, ch/4, 50, 0, 2*Math.PI, false);
        ctx.fill();
        ctx.closePath();
        ctx.restore();

        // animate obstacles 
        for(let i=0; i<obstacles.length; i++){
            obstacles[i].update(time);
            if(obstacles[i].x + 20 < player.x + player.width && 
                player.x + player.width > obstacles[i].x + 20 &&
                obstacles[i].y < player.y + (player.height - 14) &&
                player.y + (player.height - 14) > obstacles[i].y){
                isPlaying = false;
                document.getElementById("gameover").innerHTML = "Game Over";
                prompt.style.display = "block";
                cancelAnimationFrame(mainAnimeId);
            }
            else if(obstacles[i].x < -obstacles[i].width){
                obstacles.splice(i, 1);
                player.score += 1;
            }
        }

        ctx.save();
        ctx.globalCompositeOperation = "destination-over";
        player.startDimension = playerStartDimension;
        player.update();
        player.jump();
        ctx.restore();

        floor.draw();
        for(let _=0; _<floorParticles.length; _++){
            floorParticles[_].update(time);
            if(floorParticles[_].x < -floorParticles[_].width)
                floorParticles.splice(_, 1);
        }
       
    }

    // main animation function
    const animate = () => {
        if(isPlaying){
            prompt.style.display = "none";
            ctx.clearRect(0, 0, cw, ch);
            mainAnimeId = requestAnimationFrame(animate);
            main();
        }
        else{
            prompt.style.display = "block";
            main();
        }
    }
    animate();

    // function to start/reset game
    const startGame = () => {
        isPlaying = true;
        time = 0;
        floorParticles = [];
        obstacles = [];
        player.y = catData.maxY;
        playerStartDimension = 0;
        player.score = 0;
        player.vY = player.speed;
        animate();
    }
    startBtn.addEventListener("click", startGame, false);

    const jump = (e) => {
        if(!player.isJumped)player.vY = player.speed;
    }
    window.addEventListener("keydown", jump, false);
    cvs.addEventListener("touchstart", jump, false);

}

window.addEventListener("load", init, false);

Lalu save.

Untuk penjelasan dari masing-masing kode diatas saya anggap kalian sudah mengerti ya. Bagi yang belum mengerti bisa tanya ke mbah google atau tinggalkan komen di bawah.

Sekarang saatnya tes kode diatas dengan membuka file index.html di browser. Jika berhasi akan tampil seperti gambar di bawah ini:

Contoh Kode Game Kucing Lompat Dengan Html, Css dan Javascript

Rekomendasi lain untuk kamu : Aplikasi rental mobil.

Kode Script game kucing lompat dengan html, css dan javascript ini bisa kamu kembangkan kalau lagi gabut pengen ngoding. Terimakasih sudah berkunjung.

Loading Animasi Dengan Html dan Css

Hallo tukang koding!! Lagi cari referensi buat animasi loading yang keren? Saya punya nih. Yuk cek bersama dibawah ini. Script loading ini dibuat dari html dan css saja. Kamu bisa kreasikan sendiri sesuai keinginan kamu.

Alat tempur yang dibutuhkan cuma notepad atau teks editor dan browser saja.

Pertama-tama kamu buat dulu folder baru dengan nama terserah kamu. Buka folder tersebut dan buat file baru dengan nama index.html, kemudian masukkan kode dibawah ini.

<html><head>
        <title>3d Loader</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <div class="container">
            
                <span>L</span>
                <span>O</span>
                <span>A</span>
                <span>D</span>
                <span>I</span>
                <span>N</span>
                <span>G</span>
            
        </div>
    
</body></html>

Lalu save.

Rekomendasi untuk anda : Aplikasi rental mobil.

Kemudian buat lagi file baru dengan nama index.css dan masukkan kode css berikut ini :

body {
    margin:0;
    padding:0;
    background:#fff;
}
.container{
    position:absolute ;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    height:80px;
    width:310px;
    background:#fff;
    display:flex;
    justify-content:center ;
    
}

span{
    position:relative ;
    font-size:60px;
    font-weight:1000;
    line-height:80px;
    color:#fff;
    background:#fff;
    margin:3px;
    text-shadow:1px 1px 1px #777,
                1px 2px 1px #777,
                1px 3px 1px #777,
                1px 4px 1px #777,
                1px 5px 1px #777,
                1px 6px 1px #777,
                1px 7px 1px #777,
                1px 8px 1px #777,
                1px 9px 1px #777,
                1px 10px 1px #777,
                0px 22px 10px #aaa,
                0px 25px 14px #bbb;
    animation:load 3s infinite;
    
}
@keyframes load{
    0%,100%{}
    50%{text-shadow:0px 0px 0px ;}
}
span:nth-child(1){
    animation-delay:0s;
}

span:nth-child(2){
    animation-delay:0.285s;
}

span:nth-child(3){
    animation-delay:0.57s;
}

span:nth-child(4){
    animation-delay:0.855s;
}

span:nth-child(5){
    animation-delay:1.14s;
}

span:nth-child(6){
    animation-delay:1.425s;
}

span:nth-child(7){
    animation-delay:1.71s;
}

Kemudian save.

Jalankan file tersebut dengan mendrag file index.html ke browser kesayangan kamu atau klik kanan open in browser. Hasilnya akan tampil seperti di bawah ini.

Loading Animasi Dengan Html dan Css

Warna, ukuran dan jenis font bisa kamu modifikasi sesuai keinginan kamu dengan mengedit file index.css nya.

Disini tidak dijelaskan tentang fungsi dari masing-masing kode diatas karena saya anggap kalian sudah mengerti dengan html dan css ya. Terima kasih sudah berkunjung di artikel ini yang berjudul Loading Animasi Dengan Html dan Css.

Script Kode Jam Dinding dari Html, Css, & JavaScript

Hallo teman-teman tukang koding atau baru belajar koding. Sedang mencari referensi kode untuk dijadikan bahan ngulik kamu? Berikut kode html jam dinding yang bisa kamu jadikan referensi untuk bahan belajar kamu.

Script kode jam dinding ini dibuat dari html, css dan javascript. Aplikasi pendukung yang kamu butuhkan antara lain:

  • Teks editor apa saja
  • Browser apa saja

Nah, pertama tama kamu buat folder dengan nama terserah kamu. Lalu buka folder tersebut dan buat file baru dengan nama index.html dan isikan dengan kode html berikut ini.

<html><head>
        <title>Page Title</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h1 id="go"></h1>
    <script type="text/javascript" src="index.js"></script>
</body></html>

Lalu save.

Kemudian buat file baru dengan nama index.css dan masukkan kode css berikut ini

body {
    background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQeyxIYiYoq8byY_GyK45kfjlsaAIQ3v7PPCXIRqR87EzE51ju3&usqp=CAU");
    margin:0;
    height:100vh;
    width:100vw;
    display:flex;
    align-items:center;
    justify-content:center;
}
h1{
    width:200px;
    padding:80px;
    background:#221211;
    text-align:center;
    color:white;
    text-shadow:0 0 4px deeppink,
                0 0 4px deeppink,
                0 0 8px deeppink,
                0 0 8px deeppink,
                0 0 40px deeppink,
                0 0 40px deeppink,
                0 0 40px deeppink,
                0 0 80px deeppink,
                0 0 80px deeppink,
                0 0 80px deeppink;
    font-family:cursive;
    font-size:50px;
    border-radius:10%;
    box-shadow:0 0 30px 0 white;
}

Kemudian save lagi

Yang terakhir buat file baru dengan nama index.js dan masukkan kode di bawah ini

window.onload= function setDeg(){
var time= new Date
    document.getElementById('go').innerHTML=zero(time.getHours())+":"+zero(time.getMinutes())+":"+zero(time.getSeconds())
    setInterval(setDeg,1000)
}
function zero(x){
    if (x<10){
        x="0"+x
    }
    return x
}

Lalu save.

Sekarang tinggal dites di browser saja, caranya drag file index.html tadi ke browser kesayangan kamu atau bisa klik kanan pada file index.html tadi dan buka di browser.

Nah. Tampilannya akan seperti ini.

Script Kode Jam Dinding

Untuk bagian-bagian kodenya tidak dijelaskan disini ya. Kamu bisa mencari sendiri di internet dari fungsi masing-masing kode diatas.

Semoga informasi tentang script kode jam dinding diatas dapat bermanfaat untuk kamu semua. Terimakasih sudah berkunjung.

Script Kode Tahun Baru dari Html & JavaScript

Hai teman-temaan! Kalian sedang mencari kode ucapan tahun baru yang bisa dipasang di website kalian. Berikut ini script kode berjalan untuk ucapan tahun baru dari html dan javascript.

Pertama-tama buat dulu folder baru dengan nama terserah kalian dan buat file htmlnya dengan nama index.html dan masukkan kode dibawah ini:

<html><head></head> 
 <body>
 
 <script type="text/javascript" src="index.js"></script>
</body></html>

Kemudian simpan.

Setelah itu buat file javascriptnya dengan nama index.js dan buka dengan teks editor kesayangan kalian. Kemudian masukkan kode dibawah ini.

let chars, particles, canvas, ctx, w, h, current;
let duration = 5000;
let str = ['Happy', 'New', 'Year' , '2021'];

init();
resize();
requestAnimationFrame(render);
addEventListener('resize', resize);
function makeChar(c){
    let tmp = document.createElement('canvas');
    let size = tmp.width = tmp.height = w<400?200:300;
    let tmpCtx = tmp.getContext('2d');
    tmpCtx.font = 'bold '+size+'px Arial';
    tmpCtx.fillStyle = 'white';
    tmpCtx.textBaseline = "middle";
    tmpCtx.textAlign = "center";
    tmpCtx.fillText(c, size/2, size/2);
    let char2 = tmpCtx.getImageData(0,0,size,size);
    let char2particles = [];
    for(var i=0; char2particles.length< particles; i++){
        let x = size*Math.random();
        let y = size*Math.random();
        let offset = parseInt(y)*size*4 + parseInt(x)*4;
        if(char2.data[offset])
            char2particles.push([x-size/2,y-size/2])
    }
    return char2particles;
}
function init() {
    canvas = document.createElement('canvas');
    document.body.append(canvas);
    document.body.style.margin = 0;
    document.body.style.overflow = 'hidden'
    document.body.style.background = 'black'
    ctx = canvas.getContext('2d');
}

function resize() {
    w = canvas.width = innerWidth;
    h = canvas.height = innerHeight;
    particles = innerWidth<400? 55 : 99;
}
function makeChars(t) {
    let actual = parseInt(t / duration) % str.length;
    if (current === actual)
        return
    current = actual;
    chars = [...str[actual]].map(makeChar);
}

function render(t) {
    makeChars(t);
    requestAnimationFrame(render);
    ctx.fillStyle = '#00000010'
    ctx.fillRect(0, 0, w, h);
    chars.forEach((pts,i) => firework(t, i, pts));
}
function firework(t, i, pts) {
    t -= i*200;
    let id = i + chars.length*parseInt(t - t%duration);
    t = t % duration / duration;
    let dx = (i+1)*w/(1+chars.length);
    dx += Math.min(0.33, t)*100*Math.sin(id);
    let dy = h*0.5;
    dy += Math.sin(id*4547.411)*h*0.1;
    if (t < 0.33) {
      rocket(dx, dy, id, t*3);
    } else {
      ledakan(pts, dx, dy, id, Math.min(1, Math.max(0, t-0.33)*2));
    }
}

function rocket(x, y, id, t) {
  ctx.fillStyle = 'white';
  let r = 2-2*t + Math.pow(t, 15*t)*16;
  y = h - y*t;
  circle(x, y, r)
}

  function ledakan(pts, x, y, id, t) {
  let dy = (t*t*t)*20;
  let r = Math.sin(id)*1 + 3  
  r = t<0.5 ? (t+0.5)*t*r:r-t*r
  ctx.fillStyle = `hsl(${id*55}, 55%, 55%)`;
  pts.forEach((xy,i) => {
      if (i%20 === 0)
        ctx.fillStyle = `hsl(${id*55}, 55%, ${55+t*Math.sin(t*55+i)*45}%)`;
      circle(t*xy[0] + x, h - y + t*xy[1] + dy, r)
  });
}
  
  
function circle(x,y,r) {
  ctx.beginPath();
  ctx.ellipse(x, y, r, r, 0, 0, 6.283);
  ctx.fill();
}

alert ("Selamat Tahun Baru 2021 dari Condro22");

Setelah itu simpan.

Coba jalankan dengan men-drag file index.html tadi ke browser kesayangan kalian dan lihat hasilnya seperti dibawah ini :

Script kode tahun baru untuk Web

Kamu bisa merubah tulisan yang ada didalamnya dengan merubah kode yang berwarna merah pada file javascriptnya.

Kamu bisa mengupload file tersebut ke website kamu dengan subdomain baru kamu via ftp. Dan mengirimnya ketemen-temen kamu.

Semoga tutorialnya bermanfaat, selamat mencoba.

Script Game Ular 3D Dari Html, Css & JavaScript

Hallo teman-teman, bagi kalian yang sedang mencari referensi kode atau script game ular yang dibuat dari html, css dan javascript. Berikut ini saya akan bagikan kepada kalian sebuah script game ular tiga dimensi yang bisa kamu gunakan sebagai bahan pembelajaran.

Pertama-tama buat folder baru dengan nama terserah kalian

Berikutnya buat file baru dengan nama index.html dan masukkan kode dibawah ini dengan teks editor kesayangan kalian:

<html><head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>3D snake game</title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.js"></script>
    <script src="https://dl.dropbox.com/s/nn9wz6aimz6vzoi/OBJLoader.js"></script>
    <script src="https://dl.dropbox.com/s/2821pj5wkc2b8pe/MTLLoader.js"></script>
    <script src="https://dl.dropbox.com/s/qxgrvxduynnst3u/OrbitControls.js"></script>
    <link rel="stylesheet" href="index.css">
    </head><body style="margin: 0px;"><audio id="niceSong" src="https://dl.dropbox.com/s/47yhesl39v8w3at/niceSong.mp3"></audio>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">




    
    <div id="arrowCont">
        <img class="arrows" id="left" src="https://saantonandre.github.io/leftArrow.png" alt="arrow" draggable="false" oncontextmenu="return false;">
        <img class="arrows" id="right" src="https://saantonandre.github.io/rightArrow.png" alt="arrow" draggable="false" oncontextmenu="return false;">
    </div>

    <div id="scoreId">Score: 0</div>
<script src="index.js"></script>

</body></html>

Kemudian buat file baru dengan nama index.css dan masukkan kode css dibawah ini:

body{
	height:100%;
	width:100%;
	position:fixed;
}


#arrowCont {
	
position: absolute;
	
width: 100%;
	
height: 12vh;
	
bottom: 10vh;
}



.arrows {
	
height: 80%;
}




#right {
	
float: right;

transform:scale(1.5,1.5);
	
opacity: 0.9;
	
margin-right: 10%;
	
background-color: 
transparent;
	
border-radius: 50%;
	
-webkit-user-select: none;
	
-webkit-touch-callout: none;
}



#left {
	
float: left;

transform:scale(1.5,1.5);
	
opacity: 0.9;
	
margin-left: 10%;
	
background-color: transparent;
	
border-radius: 50%;
	
-webkit-user-select: none;
	
-webkit-touch-callout: none;
}


#scoreId {
	
   position: fixed;
   left: 50%;
   transform: translate(-50%, 0);
	
color: white;
width:40%;
text-align:center;

	
bottom: 13.5vh;
	
margin-top: -25px; 
	
font-size: 22px;
	
font-weight:bold;
	
text-shadow:1px 1px 0px black;
}


Selanjutnya buat file baru lagi dengan nama index.js dan masukkan kode javascript dibawah ini :

window.addEventListener('load', function(){

/* Made by Joakim Nyland

I put a lot effort into this so I hope you like it!๐Ÿ˜„

During this project I learnt a lot about array manipulation. Useful functions I used:
- Push
- Slice

I also learnt a lot about timing events, which were very useful when making this.

I hope you can give me a thumbs up if you liked it!

Thank you all for 2000 followers! 
Thanks to Saantoandre for arrow sprites.

Please give me feedback if you find bugs or have suggestions!:-)

Joakim

More about controls:
- Pan/zoom while playing using your fingers/mouse

- Enable POV using the GUI.

- You lose by crashing into your tail or going out of the map.

- You should not have battery-saver activated while playing. The game has a lot of code so it should be run with as much capacity as possible.

- When snake becomes long the game
might become laggy on phones.

Future plans for the game:
- Make code more readable with comments
- Add more sound effects?
- Maybe add more stages with obstacles and stuff

*/

console.log=function(){};
const SCALE = 27;
const PI = Math.PI;
var leftArrow = document.getElementById("left");
var rightArrow = document.getElementById("right");
var foodWidth=0.5;
var objectWidth=1;
var eatVar=0;
var distance=0;
var bodyArray = [];
var q = 0;
var qVar = 0;
var fixedLength=0;
var myTimer = [];
var collArray = [];
var spawned = 0;
var scoreId = document.getElementById( 'scoreId');
var toungeWidth = 1;
var newPositionx=0;
var newPositiony=0;
var rotationSpeed=0.05;
var posNeg = 0;
var negPos = 0;
var q1 = 0;
var q2 = 0;
var colorVarNegPos = 1;
var zArray = [];
var zTimer=[];
var zVar = 0;
var pauseVar = 0;
var pauseMessageVar = 0;
var mapVar=0;
var tailCollisionVar=0;
var arrowVar=0;
var myCollisionVar=0;
var difficultVar = 10;
var ballTimerVar = 320;

var niceSong = new Audio("https://dl.dropbox.com/s/47yhesl39v8w3at/niceSong.mp3");

//Camera values
const FOV = 45;
const ASPECT = window.innerWidth/window.innerHeight;
const NEAR = 0.1;
const FAR = 2000;
var alpha=0;
var updatedHead=0;

// ********** Initialize GUI (Graphical user interface) **********
var gui = new dat.GUI();
var guiParams = { //Sets the variable names and default values of the GUI
	cameraPosition : false
};
gui.add(guiParams, 'cameraPosition').name('POV'); //Button that sets camera position equal to car position
//gui.closed = true;

// ********** Creating the scene: **********
var renderer = new THREE.WebGLRenderer({ antialias: true }); //Creates a WebGL renderer using threejs library
renderer.setPixelRatio( window.devicePixelRatio ); //Prevents blurry output
renderer.setSize( window.innerWidth,window.innerHeight ); //Sets renderer size to the size of the window
renderer.setClearColor(0xA9F5F2, 1); //Makes the background color of the scene blue
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
document.body.appendChild( renderer.domElement ); //Attaches renderer to DOM (initializes renderer)

var scene = new THREE.Scene(); //Creates an empty scene where we are going to add our objects

var camera = new THREE.PerspectiveCamera( FOV,ASPECT,NEAR,FAR ); //Creates a camera
camera.up.set( 0,0,1 ); //Sets the camera the correct direction
camera.rotation.x=-PI/2;
scene.add( camera ); //Adds the camera to the scene

var controls = new THREE.OrbitControls( camera, renderer.domElement ); //OrbitControls allows camera to be controlled and orbit around a target
controls.minDistance = 1000/SCALE; //Sets the minimum distance one can pan into the scene
//controls.maxDistance = 1000/SCALE;  //Sets the maximum distance one can pan away from scene

var ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight); //Adding ambient light
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set(0, 0, 2);
light.castShadow = true;

var d = 35;
light.shadowCameraLeft = d;
light.shadowCameraRight = -d;
light.shadowCameraTop = d;
light.shadowCameraBottom = -d;

scene.add(light);

var helper = new THREE.CameraHelper( light.shadow.camera );
//scene.add( helper );

// Controls

// ************** Right and Left arrows****************
 	leftArrow.addEventListener("touchstart", leftStart);
 	function leftStart() {
 	if (arrowVar==0){
			leftKey = true;
			leftArrow.style.opacity = "1";
			leftArrow.style.backgroundColor = "orange";
}
if (pauseVar==1){
	resetGame();
	}
		}
	rightArrow.addEventListener("touchstart", rightStart);
	function rightStart() {
	 if (arrowVar==0){
			rightKey = true;
			rightArrow.style.opacity = "1";
			rightArrow.style.backgroundColor = "orange";
	}
	if (pauseVar==1){
	resetGame();
	}
	niceSong.play();
		}
 	leftArrow.addEventListener("touchend", leftEnd);
 	function leftEnd(){
 	 if (arrowVar==0){
			leftKey = false;
			leftArrow.style.transform = "";
			leftArrow.style.opacity = "0.9";
			leftArrow.style.backgroundColor = "transparent";
			}
		}
	rightArrow.addEventListener("touchend", rightEnd);
	function rightEnd(){
	if (arrowVar==0){
			rightKey = false;
			rightArrow.style.transform = "";
			rightArrow.style.opacity = "0.9";
			rightArrow.style.backgroundColor = "transparent";
			}
		}

	//PC controls
	leftArrow.addEventListener("mousedown", function () {
	if (arrowVar==0){
			leftKey = true;
			leftArrow.style.opacity = "1";
			leftArrow.style.backgroundColor = "orange";
	}
	if (pauseVar==1){
	resetGame();
	}
		});
		rightArrow.addEventListener("mousedown", function () {
if (arrowVar==0){
			rightKey = true;
			rightArrow.style.opacity = "1";
			rightArrow.style.backgroundColor = "orange";
	}
	if (pauseVar==1){
	resetGame();
	}
		});

	document.addEventListener("mouseup", function () {
if (arrowVar==0){
			leftKey = false;
			leftArrow.style.transform = "";
			leftArrow.style.opacity = "0.9";
			leftArrow.style.backgroundColor = "transparent";
			rightKey = false;
			rightArrow.style.transform = "";
			rightArrow.style.opacity = "0.9";
			rightArrow.style.backgroundColor = "transparent";
							  }
		});
		
		leftStart();
		rightStart();
		leftEnd();
		rightEnd();
		
var width  = 43; //width of ground
var length = 43; //length of ground

var geometry = new THREE.PlaneGeometry( width, length); //ThreeJS function to create plane geometry
var texture;
texture = new THREE.TextureLoader().load( "https://dl.dropbox.com/s/f8exr3zow9nqsol/grass.jpg?dl=0" );
var groundmat = new THREE.MeshLambertMaterial({ //Sets color and material attributes for plane
	color: 0x088A08,
	map:texture,
	opacity: 1,
	side: THREE.DoubleSide //Ground visible from both sides
});
var ground = new THREE.Mesh( geometry, groundmat ); //Creates a mesh containing the geometry and groundmaterial just defined
ground.receiveShadow = true;
scene.add( ground ); //Adds ground to scene
 
var geometry = new THREE.SphereGeometry( objectWidth,32,32 );
var material = new THREE.MeshLambertMaterial({
		color:0x00ff00,
		side: THREE.DoubleSide,
		transparent:true,
		opacity:1
});			

function spawnCircle(){
	window.myObject = new THREE.Mesh( geometry, material );
	myObject.receiveShadow=true;
	myObject.castShadow=true;
	scene.add( myObject );
	}
spawnCircle();
myObject.position.z=1.1;

function spawnFace(eyeSize,xPosition,yPosition,colorVar){
	var geometryFace = new THREE.SphereGeometry( eyeSize,32,32 );
	
var materialFace = new THREE.MeshLambertMaterial({
		color:colorVar,
		side: THREE.DoubleSide,
		transparent:true,
		opacity:1
});			

window.myFace = new THREE.Mesh( geometryFace, materialFace);

myObject.add( myFace );

myFace.position.z=0.3;
myFace.position.y=-objectWidth+yPosition;
myFace.position.x=xPosition;

}
//Size, x, y, color
spawnFace(0.2,0.4,0.2,0xffffff);
spawnFace(0.2,-0.4,0.2,0xffffff);
spawnFace(0.1,0.4,0,0x000000);
spawnFace(0.1,-0.4,0,0x000000);


function spawnTounge(toungeWidth){
	var toungeGeometry = new THREE.BoxGeometry( 0.1,toungeWidth,0.1);
	var toungeMaterial = new THREE.MeshLambertMaterial( {color: 0xff0000} );
	window.myTounge = new THREE.Mesh( toungeGeometry, toungeMaterial );
myObject.add(myTounge);
myTounge.position.z = -0.4;
myTounge.position.y = (-objectWidth)-0.2;
}
spawnTounge(toungeWidth);

function splitTounge(rotationVar,positionVar){
	var toungeGeometry2 = new THREE.BoxGeometry( 0.1,0.5,0.1);
	var toungeMaterial2 = new THREE.MeshLambertMaterial( {color: 0xff0000} );
	window.myTounge2 = new THREE.Mesh( toungeGeometry2, toungeMaterial2 );
myTounge.add(myTounge2);
myTounge2.position.y = -toungeWidth/2-0.1;
myTounge2.rotation.z = rotationVar;
myTounge2.position.x = positionVar;
}
// Rotation, x
splitTounge(PI/3,0.2);
splitTounge(-PI/3,-0.2);

function moveTounge(){
myTounge.rotation.z = (Math.sin(myObject.position.x))/5;
myTounge.rotation.x = (Math.sin(myObject.position.y))/6;
}

var bodyGeometry = new THREE.SphereGeometry( objectWidth,32,32 );

function spawnBody(colorVar2){
	var bodyMaterial = new THREE.MeshLambertMaterial({
		color:colorVar2,
		side: THREE.DoubleSide,
		transparent:true,
		opacity:1
	});		
	var bug;
	window.newBody = new THREE.Mesh( bodyGeometry, bodyMaterial );
	newBody.receiveShadow=true;
	newBody.castShadow=true;
	scene.add( newBody );
	newBody.position.y=bug;
	newBody.position.z=1.1;
	return(newBody);
}

myArray=[];
myArray.push(spawnBody(0x33cc33));
myArray.push(spawnBody(0x00ff00));

function spawnApple(){
	var appleGeometry = new THREE.SphereGeometry( 0.5,32,32 );
	var appleMaterial = new THREE.MeshLambertMaterial({
		color:0xff0000,
		side: THREE.DoubleSide,
		transparent:true,
		opacity:1
});			

	window.myFood = new THREE.Mesh( appleGeometry, appleMaterial );
	myFood.receiveShadow=true;
	myFood.castShadow=true;
	
	generateNumber();
	
	scene.add(myFood);
	myFood.position.z=4;
	myFood.position.x=newPositionx;
	myFood.position.y=newPositiony;
}
spawnApple();

function spawnAppleStilk(){

	var stilkGeometry = new THREE.BoxGeometry( 0.04,0.04,1);
	var stilkMaterial = new THREE.MeshBasicMaterial( {color: 0x000000} );
	window.myStilk = new THREE.Mesh( stilkGeometry, stilkMaterial );
	myFood.add(myStilk);
	myStilk.position.z=0.17;
}
spawnAppleStilk();

function foodDescend(){
	if (myFood.position.z>=(foodWidth/2)+0.2)
	{
		myFood.position.z-=0.2;
	}	
}

function generateNumber(){
	posNeg = Math.random();
			if (posNeg>0.5)
			{
				q1 = -1;
			}
			else
			{
				q1=1;
			}
	negPos = Math.random();
	if (negPos>0.5)
			{
				q2 = -1;
			}
			else
			{
				q2=1;
			}


	newPositionx=q1*Math.random()*20;
	newPositiony=q2*Math.random()*20;

	return(newPositionx,newPositiony);
}

function placeObj(moveObj){
if (tailCollisionVar==0){
		alpha=moveObj.rotation.z;
		moveObj.position.y-=Math.cos(alpha)/difficultVar;
		moveObj.position.x+=Math.sin(alpha)/difficultVar;
	
		if(rightKey==true)
		{
			moveObj.rotation.z-=rotationSpeed;
	
		}
		else if(leftKey==true)
		{
			moveObj.rotation.z+=rotationSpeed;
		}
	}
}

function yum(){
	scene.remove(myFood);
	spawnApple();
	spawnAppleStilk();
	eatVar+=1;
	myCollisionVar=eatVar;
	colorVarNegPos = colorVarNegPos*-1;

	collArray=[];
	collArray = bodyArray.slice(q,bodyArray.length);

	scoreId.innerHTML = "Score: " + eatVar;

	for (qTimer=0;qTimer<myTimer.length;qTimer++){
	clearTimeout(myTimer[qTimer]);
	}
	
	fixedLength = myArray.length;
	myTimer=[];
	bodyArray = [];
	q=0;
	qVar=0;
	spawned = 1;

	if(colorVarNegPos<0)
	{
		myArray.push(spawnBody(0x33cc33));
	}
	else if(colorVarNegPos>0)
	{
		myArray.push(spawnBody(0x00ff00));
	}
}

function bugArray(){
	if (spawned == 1){
		 for (i=0;i<=(fixedLength-1);i++)
			{
			myArray[i].position.x=collArray[qVar];
			myArray[i].position.y=collArray[qVar+1];
				
			 qVar = qVar+2;
			}
		if (qVar >= collArray.length)
		{
			spawned = 0;
		}		
	}
}

function ateFood(){
	
if( ( myObject.position.x<=(myFood.position.x+(objectWidth+foodWidth/2) ))  && (myObject.position.x>=(myFood.position.x-(objectWidth+foodWidth/2)) ))
	{
		if( myObject.position.y<=(myFood.position.y+(objectWidth+foodWidth/2))  && myObject.position.y>=(myFood.position.y-(objectWidth+foodWidth/2)) )
		{
			yum();
		}
	}
}

camera.position.set( myObject.position.x-40, myObject.position.y-40, 20 ); 
function enablePOV(){
	if (guiParams.cameraPosition==true)
	{
		camera.position.set(myObject.position.x,myObject.position.y,myObject.position.z+1.04 );
		camera.lookAt(2000*(Math.sin(alpha)/10),-2000*(Math.cos(alpha)/10),myObject.position.z-0.1);

if (updatedHead==0){
myObject.material.needsUpdate=true;
		myObject.receiveShadow=false;

updatedHead=1;
}
	}
	else
	{
		controls.update();
		
		if (updatedHead==1){
myObject.material.needsUpdate=true;
		myObject.receiveShadow=true;

updatedHead=0;
}
	}
};

function collectPosition(){

	bodyArray.push(myObject.position.x);
	bodyArray.push(myObject.position.y);

		for (i=0;i<=(myArray.length-2);i++)
		{
			bodyArray.push(myArray[i].position.x);
			bodyArray.push(myArray[i].position.y);
		}

myTimer.push(setTimeout(setPosition,ballTimerVar));
	function setPosition()
	{
		for (i=0;i<=(myArray.length-1);i++)
			{
				myArray[i].position.x=bodyArray[q];
				myArray[i].position.y=bodyArray[q+1];
				
			   q = q+2;
				
			}		
	}
}

function endOfMap(){

	if( myObject.position.x>width/2 )
	{
		mapVar=1;
		zFunction();
	}
	else if(myObject.position.x<-width/2) 
	{
		mapVar=1;
		zFunction();
	}
	else if(myObject.position.y>length/2)
	{
		mapVar=1;
		zFunction();
	}
	else if(myObject.position.y<-length/2)
	{
		mapVar=1;
		zFunction();
	}
}

function zFunction(){
	zArray.push(myObject.position.z);

		for (i=0;i<=(myArray.length-2);i++)
		{
			zArray.push(myArray[i].position.z);
		}

zTimer.push(setTimeout(zPosition,ballTimerVar-20));
	function zPosition()
	{
		for (i=0;i<=(myArray.length-1);i++)
			{
				myArray[i].position.z=zArray[zVar];
			   zVar = zVar + 1;
			}		
	}
		myObject.position.z-=0.2;
		pause();
}

function tailCollision(){
	if(myCollisionVar>=3)
	{
		for (i=3;i<=(myArray.length-1);i++)
		{
			if( (myObject.position.x>=myArray[i].position.x-objectWidth) && (myObject.position.x<=myArray[i].position.x+objectWidth) )
			{
				if( (myObject.position.y>=myArray[i].position.y-objectWidth) && (myObject.position.y<=myArray[i].position.y+objectWidth) )
				{
					pause();
					myCollisionVar=0;
				}
			}
		}
	}
}

function pause(){

	arrowVar=1;
	rightKey = false;
	leftKey=false;
	leftArrow.style.opacity = "0";
	rightArrow.style.opacity="0";
	if (pauseMessageVar == 0 && mapVar==1)
	{
		setTimeout(pauseMessage,(myArray.length+1)*ballTimerVar);
	function pauseMessage(){
swal( "โŒGame OverโŒ","You fell to your death!\nYour score: " + eatVar + "\n\n๐Ÿ˜„ Thanks for playing! ๐Ÿ˜„");
scoreId.innerHTML = "โ—€๏ธ Press to restart โ–ถ๏ธ";

	leftArrow.style.opacity = "1";
	
	rightArrow.style.opacity = "1";
pauseVar=1;
arrowVar=0;

for(qTimer=0;qTimer<zTimer.length;qTimer++){
	clearTimeout(zTimer[qTimer]);
	}
	}
	pauseMessageVar = 1;
	mapVar=0;
	}//ifend
	
	else if (pauseMessageVar==0 && mapVar==0)
	{
	tailCollisionVar=1;
	setTimeout(pauseMessage2,(myArray.length+1)*ballTimerVar);
	function pauseMessage2(){
	swal( "โŒGame OverโŒ","You crashed into your tail!\nYour score: " + eatVar + "\n\n๐Ÿ˜„ Thanks for playing! ๐Ÿ˜„");

	leftArrow.style.opacity = "1";
	rightArrow.style.opacity = "1";
	pauseVar=1;
	arrowVar=0;

	scoreId.innerHTML = "โ—€๏ธ Press to restart โ–ถ๏ธ";
		}
	   	pauseMessageVar = 1;
	}
}

function resetGame(){

	  for (i=2;i<=(myArray.length-1);i++)
		{
		scene.remove(myArray[i]);
		}
	
	myArray=[myArray[0],myArray[1]];
	myArray[0].position.x=0;
	myArray[1].position.x=0;
	myArray[0].position.y=0;
	myArray[1].position.y=0;
	myArray[0].position.z=1.1;
	myArray[1].position.z=1.1;
	myObject.position.x=0;
	myObject.position.y=0;
	myObject.position.z=1.1;
	eatVar=0;
	scoreId.innerHTML = "Score: " + eatVar;
	myTimer=[];
	bodyArray = [];
	zArray=[];

	colorVarNegPos = 1;
	q=0;
	qVar=0;
	zVar=0;
	mapVar=0;
	spawned = 0;
	tailCollisionVar=0;
	pauseMessageVar=0;
	pauseVar=0;
}

function increaseDifficulty(){
if (eatVar < 5){
difficultVar = 10;
ballTimerVar = (320/10)*10;
}
else if(eatVar<10){
difficultVar = 9;
ballTimerVar = (320/10)*9;
}
else if(eatVar<20){
difficultVar = 8;
ballTimerVar = (320/10)*8;
}
else if(eatVar<40){
difficultVar = 7;
ballTimerVar = (320/10)*7;
}
else if(eatVar<70){
difficultVar = 6;
ballTimerVar = (320/10)*6;
}
}

swal("๐Ÿ 3D Snake ๐Ÿ", "Instructions:\n๐ŸŽControl the snake and eat as many apples as you can!๐ŸŽ" );
pauseVar=1;
scoreId.innerHTML = "โ—€๏ธ\nPress to start\nโ–ถ๏ธ";

	//********** Render function **********
var render = function () 
	{
		requestAnimationFrame(render); //render function is called every frame!

		bugArray();
				  
		increaseDifficulty();

		if (pauseVar == 0)
		{
			placeObj(myObject);
			collectPosition();
			endOfMap();
		}

		ateFood();
		
		enablePOV();

		moveTounge();

		foodDescend();

		tailCollision();
		
		renderer.render(scene, camera); //We need this in the loop to perform the rendering
	};
render();
});

//Made by Joakim Nyland

Pastikan file-file tersebut diatas dalam satu folder ya!

Kemudian jalankan game tersebut dengan men drag file index.html ke browser kesayangan kalian.

Kalian bisa memodifikasi file-file tersebut dengan mengubah tampilan dari css maupun dari javascriptnya.

Semoga referensi dari script atau kode game ular ini bisa menambah wawasan dan ilmu kalian. Terimakasih sudah berkunjung.

Cara Mengatasi Youtube Tidak Bisa Diputar di Browser

Hallo,kawan-kawan. Pernah gak kalian mengalami error saat akan memutar video di Youtube. Jadi video yang ingin kamu tonton hanya loading saja terus dan tidak keluar videonya. Padahal koneksi internet yang kamu pakai baik-baik saja. Berikut ini sedikit tips cara mengatasi video youtube tidak bisa diputar di browser baik itu chrome, firefox, safari, ataupun internet explorer.

Hanya sedikit berbagi pengalaman, saya pernah ingin memutar video youtube di laptop yang jarang saya pakai. Tetapi saat saya ingin memutar video tersebut, video hanya muter-muter saja alias loading terus. Lihat Gambar di bawah.

mengatasi eror video youtube di browser pc

Sempat curiga pada koneksi internetnya dan saya coba buka youtube di HP dengan koneksi yang sama tetapi koneksinya lancar jaya saat youtuban di HP.

Terus saya coba membuka youtube pakai browser lain seperti firefox dan internet explorer, tapi hasilnya tetap sama matih muter-muter juga alias eror loading melulu.

Coba tanya mbah google yang maha tahu dengan keyword bahasa inggris, dan simbah menjawab.

  • Yang pertama cek koneksi internet ( koneksi saya normal alias kenceng banget jadi lewati saja )
  • Cek versi browser apakah kadaluarsa atau tidak Jika iya, update browser tersebut. Nah ini saya coba lakukan untuk update browser yang biasa saya pakai yaitu chrome. Kalau kamu belum tahu cara update browser chrome berikut caranya :
    • Klik titik 3 pada pojok kanan atas deket tombol close alias x
    • Klik setting atau bahasa Indonesianya setelan
    • Setelah terbuka tab baru, lihat bagian kiri bawah dan klik tentang chrome
    • Dan lihat versi chrome kamu, jika disuruh untuk update klik update saja
  • Tapi sayangnya setelah saya update browser saya tetap saja si youtube masih eror dan loading terus. Saya coba matikan komputer dan menghidupkannya kembali, tapi tetap saja masih eror.
  • Selanjutnya saya coba install adobe flashplayer versi terbaru kamu bisa download disini, setelah lama menginstal dan saya coba restart browser dan hasilnya pun tetap sama, masih eror. Saya coba restart komputer dan berharap bisa, eh hasilnya tetap sama, masih eror.

Sempat frustasi, tapi itu tak membuat saya patah semangat untuk mencari cara agar youtube bisa jalan di Laptop saya.

Berikutnya saya coba untuk membuka youtube dan melihat eror yang terjadi dengan inpect element ( tools bawaan chrome ). Yang belum tahu cara memunculkan inspect element caranya adalah dengan pencet tombol Shift+Ctrl+i secara bersamaan.

Setelah muncul tab inspect Element, saya coba lihat eror log nya. Caranya adalah :

  • Klik menu Network
  • Klik tombol XHR
  • Lihat eror atau kode yang tidak bisa dieksekusi oleh browser bisanya ditandai dengan warna merah. Lebih jeasnya lihat gambar di bawah..
Youtube loading terus dan video tidak bisa terbuka

Coba untuk klik eror yang berwarna merah tersebut dan akan nampak eror log nya. Jika disorot dengan mouse isinya adalah videoplayback.mp4?expire..bla..bla dan isinya panjang banget.

Saya coba reload browsernya dan eror yang muncul makin banyak. Dan setelah bertanya di forum luar negeri ( saya lupa nama forumnya ) ada yang menjawab untuk cek data waktu yang dihasilkan browser.

Wah baru ngeh, tanggal di laptop saya menunjukkan bukan waktu saat ini. Saya coba rubah tanggal dan jam menjadi waktu yang sebenarnya. Dan hasilnya langsung bisa… Hore.. Ini gara-gara laptop jarang dipakai jadi tanggal eror. Jika kamu belum tahu cara rubah tanggal di laptop, klik saja tanggal di bagian bawah kanan laptop kamu dan rubah deh sesuai yang kamu inginkan.

Rekomendasi artikel lain : Jasa sewa mobil terbaik di Indonesia.

Kesimpulan jika youtube kamu error dan tidak bisa di putar di semua browser laptop kamu

  • Cek dulu tanggal laptop kamu dan ubah sesuai tanggal yang valid. ( Jangan kaya saya wkwk )
  • Cek versi browser kamu, dan pastikan up to date
  • Install adobe flashpalyer versi terbaru
  • Berdoa pada Tuhan

Nah, itu sedikit sharing jika kamu mengalami error saat memutar video youtube alias loading terus. Semoga bisa bermanfaat dan terimakasih sudah berkunjung.

Deny Siregar
Aty Maulani