Tic tac toe - Code

<!DOCTYPE html><html lang="en" ><head>  <meta charset="UTF-8">  <title>Tic Tac Toe</title>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"><style>@import url("https://fonts.googleapis.com/css?family=Permanent+Marker"); * {   box-sizing: border-box; }  #app {   display: flex;   overflow: hidden;   position: relative;   width: 100vw;   height: 100vh;   background-image: linear-gradient(red, orange); }  .butter-cheese-eggs {   position: absolute;   left: 50%;   top: 50%;   transform: translate(-50%, -50%);   display: flex;   flex-wrap: wrap;   width: 300px;   height: 300px; } .butter-cheese-eggs > div {   flex: 0 0 auto;   width: 100px;   height: 100px; } .butter-cheese-eggs > div .block {   cursor: pointer;   display: table-cell;   width: 100px;   height: 100px;   font: bold 50px/0 "Comic Sans MS", sans-serif;   vertical-align: middle;   text-align: center; } .butter-cheese-eggs > div:nth-child(1), .butter-cheese-eggs > div:nth-child(2), .butter-cheese-eggs > div:nth-child(3), .butter-cheese-eggs > div:nth-child(4), .butter-cheese-eggs > div:nth-child(5), .butter-cheese-eggs > div:nth-child(6) {   border-bottom: 3px solid #fff; } .butter-cheese-eggs > div:nth-child(2), .butter-cheese-eggs > div:nth-child(5), .butter-cheese-eggs > div:nth-child(8) {   border-left: 3px solid #fff;   border-right: 3px solid #fff; } .butter-cheese-eggs span {   display: block; }  .win {   position: absolute;   left: 50%;   top: 50%;   transform: translate(-50%, -50%) rotate(-10deg);   transform-origin: 50% 50%;   transform-origin: center;   width: 300px;   height: 300px;   margin-top: -60px;   margin-left: -20px;   padding-top: 140px;   font-family: "Permanent Marker", cursive;   text-align: center; } .win h2 {   display: block;   margin: 0 0 10px;   font-size: 100px;   text-shadow: 0px 0px 50px white;   text-align: center; } .win button {   cursor: pointer;   transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);   outline: none;   display: inline-block;   padding: 15px;   background-color: darkred;   border: none;   border-radius: 10px;   font-family: "Permanent Marker", cursive;   font-size: 20px;   color: white; } .win button:hover {   transform: scale(1.1); } </style></head><body><div id="app">  <transition v-on:enter="enter" v-bind:css="false" appear>    <div class="butter-cheese-eggs" v-show="true">      <div v-for="(block, index) in grid" @click="select(index)">        <block :figure.sync="block.figure" />      </div>    </div>  </transition>     <transition v-on:enter="enterWin" v-bind:css="false">    <win v-show="winner" :click-handler="restart"></win>  </transition></div> <template id="block">  <div class="block">    <transition v-on:enter="enter" v-bind:css="false">      <span v-show="figure > -1">{{ fig }}</span>    </transition>  </div></template> <template id="win">  <div class="win">    <h2>Win</h2>      </div></template>  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script><script  >let state = {   grid: _.map(_.range(0, 9), index => {     return { index, figure: -1 };   }),   myTurn: false };   const appState = _.cloneDeep(state);  const block = Vue.component('block', {   name: 'block',    template: '#block',    props: {     figure: {       type: Number,       default: -1 } },      computed: {     fig() {       return this.figure === 0 ? 'O' : 'X';     } },     data() {     return {       selected: false };    },    methods: {     enter(el, done) {       TweenMax.from(el, 1, {         autoAlpha: 0,         scale: 0,         ease: Elastic.easeOut.config(1.25, 0.5),         onComplete: done });      } } });    const win = Vue.component('win', {   name: 'win',   template: '#win',   props: {     clickHandler: {       type: Function,       default: null } } });     const app = new Vue({   name: 'app',    el: '#app',    data() {     return state;   },    components: {     block },     computed: {     winner() {       const wins = ['012', '036', '345', '147', '258', '678', '048', '246'];       const grid = this.grid;       const player = this.myTurn ? 0 : 1;       const moves = _.reduce(this.grid, (result, value, index) => {         if (value.figure === player) {           result.push(index);         }          return result;       }, []);        return !!_.find(wins, win => {         const combination = _.map(win.split(''), n => parseInt(n));         console.log('combination', combination, moves);          return _.difference(combination, moves).length === 0;       });     } },     methods: {     select(index) {       const { figure } = this.grid[index];        if (figure > -1) {         return;       }        this.grid[index].figure = this.myTurn ? 1 : 0;       this.myTurn = !this.myTurn;     },      restart() {       this.grid = appState.grid;       this.myTurn = appState.myTurn;     },      enter(el, done) {       TweenMax.from(el, 1, {         autoAlpha: 0,         scale: 0,         ease: Elastic.easeOut.config(1.25, 0.5) });      },      enterWin(el) {       TweenMax.from(el, 1, {         autoAlpha: 0,         scale: 0,         ease: Elastic.easeOut.config(1.25, 0.5) });      } } }); </script> </body></html>

Coba Sekarang

Dragons vs Unicorns - Code

<!DOCTYPE html><html lang="en" ><head>  <meta charset="UTF-8">  <title>Tic Tac Toe: Dragons vs Unicorns</title>  <style>/* --- Universal Box Sizing with Inheritance --- */ @import url("https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap"); html {   box-sizing: border-box; }  *, *:before, *:after {   box-sizing: inherit; }  :root {   --cell-size: 90px;   --grid-gap: 12px;   --h1-font-size: 32px;   --h1-span-font-size: 24px;   --current-status-font-size: 24px;   --current-beast-img-height: 32px;   --winning-beast-img-width: 100px;   --winning-msg-font-size: 48px;   --reset-btn-font-size: 30px; }  @media (min-width: 600px) {   :root {     --cell-size: 155px;     --grid-gap: 15px;     --h1-font-size: 56px;     --h1-span-font-size: 40px;     --current-status-font-size: 36px;     --current-beast-img-height: 45px;   } } @media (min-width: 1024px) {   :root {     --h1-font-size: 64px;     --h1-span-font-size: 48px;     --winning-msg-font-size: 72px;     --reset-btn-font-size: 48px;     --winning-beast-img-width: 150px;   } } /* --- Styles --- */ body {   margin: 0;   padding: 0;   background-image: url("https://assets.codepen.io/2558758/fantasy-bg.jpg");   background-size: cover;   min-height: 100vh;   display: flex;   justify-content: center;   align-items: center;   text-align: center;   font-family: "Bungee Inline", cursive;   color: #f5f5f5; }  h1 {   position: relative;   max-width: 100%;   margin: 15px auto 5%;   text-align: center;   font-size: var(--h1-font-size);   text-shadow: 3px 3px #55acee; } h1::before, h1::after {   content: "";   display: block;   position: absolute;   background-repeat: no-repeat;   background-size: 100%;   top: 50%;   transform: translateY(-50%); } h1::before {   background-image: url("https://assets.codepen.io/2558758/fire.png");   left: 0;   width: calc( 93px / 2.1 );   height: calc( 96px / 2.1 ); } @media (min-width: 1024px) {   h1::before {     left: -64px;   } } h1::after {   background-image: url("https://assets.codepen.io/2558758/stars.png");   right: 0;   width: calc( 91px / 2 );   height: calc( 88px / 2 ); } @media (min-width: 1024px) {   h1::after {     right: -64px;   } } h1 span {   display: block;   font-size: var(--h1-span-font-size); } @media (min-width: 1024px) {   h1 span {     display: inline;   } }  h1, p {   letter-spacing: 1px; }  .current-status {   display: flex;   justify-content: center;   align-items: center;   margin-bottom: 25px; } @media (min-width: 1024px) {   .current-status {     margin-bottom: 35px;   } } .current-status p {   margin: 0 5px 0 0;   font-size: var(--current-status-font-size); } .current-status img {   width: auto;   height: var(--current-beast-img-height); }  .board {   display: grid;   grid-template-columns: repeat(3, minmax(90px, 1fr));   grid-template-rows: repeat(3, minmax(90px, 1fr));   grid-gap: var(--grid-gap);   width: 100%;   height: 100%;   max-width: 495px;   margin: 0 auto 15px; } .board.unicorn .cell:not(.dragon):not(.unicorn):hover::before, .board.dragon .cell:not(.dragon):not(.unicorn):hover::before {   content: "";   width: 70%;   height: 70%;   display: block;   position: absolute;   background-repeat: no-repeat;   top: 50%;   left: 50%;   transform: translate3d(-50%, -50%, 0);   background-size: contain;   opacity: 50%; } .board.unicorn .cell:not(.dragon):hover::before {   background-image: url("https://assets.codepen.io/2558758/unicorn.png"); } .board.dragon .cell:not(.unicorn):hover::before {   background-image: url("https://assets.codepen.io/2558758/dragon.png"); }  .cell {   cursor: pointer;   position: relative;   background-color: #f5f5f5;   width: var(--cell-size);   height: var(--cell-size);   opacity: 0.5;   transition: opacity 0.2s ease-in-out; } .cell:hover {   opacity: 1; } .cell.dragon, .cell.unicorn {   opacity: 1;   position: relative;   cursor: not-allowed; } .cell.dragon::before, .cell.unicorn::before {   content: "";   width: 70%;   height: 70%;   display: block;   position: absolute;   background-repeat: no-repeat;   top: 50%;   left: 50%;   transform: translate3d(-50%, -50%, 0);   background-size: contain; } .cell.dragon::before {   background-image: url("https://assets.codepen.io/2558758/dragon.png"); } .cell.unicorn::before {   background-image: url("https://assets.codepen.io/2558758/unicorn.png"); }  .game-end-overlay {   display: none;   position: fixed;   top: 0;   left: 0;   right: 0;   bottom: 0;   background-color: #0d1021; } .game-end-overlay.show {   display: flex;   flex-direction: column;   justify-content: center;   align-items: center; }  .winning-message {   margin: -50px 0 20px; } .winning-message img {   width: var(--winning-beast-img-width); } .winning-message p {   font-size: var(--winning-msg-font-size);   margin: 0; }  .btn-container {   position: relative; }  .reset-button {   color: #f5f5f5;   font-family: "Bungee Inline", cursive;   font-size: var(--reset-btn-font-size);   white-space: nowrap;   border: none;   padding: 10px 20px;   background-color: #a186be;   box-shadow: 5px 5px 0 #55acee;   cursor: pointer;   transition: transform 0.1s ease-in-out;   position: relative; } .reset-button:hover {   transform: scale(1.2); } .reset-button:active {   top: 6px;   left: 6px;   box-shadow: none;   background-color: #9475b5; } </style> </head><body><div class="wrapper">    <h1>dragons <span>vs</span> unicorns</h1>    <div class="current-status" id="currentStatus">      <img src="https://assets.codepen.io/2558758/unicorn.png" alt="" id="currentBeastImg">      <p>'s turn</p>    </div>    <div class="board" id="board">      <div class="cell" data-cell></div>      <div class="cell" data-cell></div>      <div class="cell" data-cell></div>      <div class="cell" data-cell></div>      <div class="cell" data-cell></div>      <div class="cell" data-cell></div>      <div class="cell" data-cell></div>      <div class="cell" data-cell></div>      <div class="cell" data-cell></div>    </div>    <div class="game-end-overlay" id="gameEndOverlay">      <div class="winning-message" data-winning-message>        <p></p>      </div>      <div class="btn-container">        <button class="reset-button" id="resetButton">play again</button>      </div>    </div>  </div>  <script>  // Twitter @anniebombanie_  // -- HTML elements -- const board = document.getElementById( 'board' ); const cells = document.querySelectorAll( '[data-cell]' ); const currentStatus = document.getElementById( 'currentStatus' ); const resetButton = document.getElementById( 'resetButton' ); const gameEndOverlay = document.getElementById( 'gameEndOverlay' ); const currentBeastStatusImg = document.getElementById( 'currentBeastImg' ); const winningMessage = document.querySelector( '[data-winning-message]' ); const winningMessageText = document.querySelector( '[data-winning-message] p' ); const winningMessageImg = document.createElement( 'img' );  // -- Game Variables -- let gameIsLive = true; let unicornTurn = true; let winner = null; const winningCombinations = [   [0, 1, 2],   [3, 4, 5],   [6, 7, 8],   [0, 3, 6],   [1, 4, 7],   [2, 5, 8],   [0, 4, 8],   [2, 4, 6] ];  // -- Functions -- const setBoardHoverClass = () => {   board.classList.remove( 'unicorn' );   board.classList.remove( 'dragon' );    if ( unicornTurn ) {     board.classList.add( 'unicorn' );   } else {     board.classList.add( 'dragon' );   } }  const placeBeastImg = ( cell, currentBeast ) => {   cell.classList.add( currentBeast ); }  const swapTurns = () => {   unicornTurn = !unicornTurn; }  const updateCurrentStatus = () => {   if ( unicornTurn ) {     currentBeastStatusImg.src = 'https://assets.codepen.io/2558758/unicorn.png';     currentBeastStatusImg.alt = 'unicorn';   } else {     currentBeastStatusImg.src = 'https://assets.codepen.io/2558758/dragon.png';     currentBeastStatusImg.alt = 'dragon';   } }  const checkWin = ( currentBeast ) => {   return winningCombinations.some( combination => {     return combination.every( i => {       return cells[i].classList.contains( currentBeast );     })   }); }  const isDraw = () => {   return [...cells].every( cell => {     return cell.classList.contains( 'unicorn' ) || cell.classList.contains( 'dragon' );   }) }  const startGame = () => {   cells.forEach( cell => {     winningMessageImg.remove();     cell.classList.remove( 'unicorn' );     cell.classList.remove( 'dragon' );     cell.removeEventListener( 'click', handleCellClick );     cell.addEventListener( 'click', handleCellClick, { once: true });   });    setBoardHoverClass();   gameEndOverlay.classList.remove( 'show' ); }  const endGame = ( draw ) => {   if ( draw ) {     winningMessageText.innerText = `draw!`;   } else {     winningMessageImg.src = unicornTurn ? 'https://assets.codepen.io/2558758/unicorn.png' : 'https://assets.codepen.io/2558758/dragon.png';     winningMessageImg.alt = unicornTurn ? 'unicorn' : 'dragon';     winningMessage.insertBefore( winningMessageImg, winningMessageText );     winningMessageText.innerText = `wins!!!`   }    gameEndOverlay.classList.add( 'show' ); }  // -- Event Handler -- const handleCellClick = ( e ) => {   const cell = e.target;   const currentBeast = unicornTurn ? 'unicorn' : 'dragon';    placeBeastImg( cell, currentBeast );   if ( checkWin( currentBeast )) {     endGame( false );   } else if ( isDraw()) {     endGame( true );   } else {     swapTurns();     updateCurrentStatus();     setBoardHoverClass();   } }  // -- Event Listener -- resetButton.addEventListener( 'click', startGame );  // -- Start Game -- startGame();   </script> </body></html>

Coba Sekarang

Snake CSS3 3D - Code

<!DOCTYPE html><html lang="en" ><head>  <meta charset="UTF-8">  <title>Snake CSS3 3D ( div game/ css )</title>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"><style>body {   perspective: 1200px;   transform-style: preserve-3d;   background-image: radial-gradient(circle at center, rgba(200, 200, 200, 0.4) 0%, #000 100%);   overflow: hidden;   font-family: Helvetica, "microsoft yahei"; }  span {   display: block;   cursor: pointer; }  span:hover {   background: #bbb !important;   color: #000 !important;   box-shadow: 0 0 5px #000 !important; }  #scoreTxt {   position: fixed;   width: 250px;   height: 50px;   left: 20px;   top: 10px;   color: #fff;   font-size: 50px;   z-index: 5;   opacity: 0.8;   z-index: 100; }  #upgradeTip {   position: fixed;   display: none;   width: 250px;   height: 50px;   left: 20px;   top: 10px;   color: #fff;   font-size: 50px;   z-index: 5;   opacity: 0.8;   z-index: 100; }  #modelBtn {   position: fixed;   left: 20px;   top: 110px;   padding: 15px;   background: #666;   filter: alpha(opacity=70);   opacity: 0.9;   border-radius: 8px;   text-align: center;   line-height: 50px;   font-size: 40px;   color: #ddd;   z-index: 10000; }  #pauseBtn {   display: none;   position: fixed;   right: 50px;   top: 10px;   padding: 15px;   background: #666;   filter: alpha(opacity=70);   opacity: 0.7;   border-radius: 8px;   text-align: center;   line-height: 50px;   font-size: 40px;   color: #ddd;   z-index: 10000; }  #gameBox {   position: relative;   margin: 0 auto;   margin-top: 50px;   background: rgba(31, 103, 180, 0.3);   transform-style: preserve-3d;   transition: transform linear 0.3s; }  #startBtn {   position: fixed;   left: 50%;   margin-left: -50px;   margin-top: 150px;   width: 100px;   height: 100px;   background: #333;   filter: alpha(opacity=70);   opacity: 0.9;   border-radius: 8px;   text-align: center;   line-height: 100px;   font-size: 40px;   color: #ddd;   z-index: 100000000;   transform: translateZ(50px); }  #gameoverTxt {   position: fixed;   left: 50%;   margin-left: -100px;   margin-top: 50px;   display: none;   width: 200px;   height: 100px;   filter: alpha(opacity=70);   opacity: 0.7;   border-radius: 8px;   text-align: center;   line-height: 100px;   font-size: 40px;   color: #ddd;   z-index: 100000000;   transform: translateZ(50px); }  .grid {   position: absolute;   background: none;   z-index: 999;   outline: 2px solid #abcedf; }  .block.food1 > span {   background: #E76B59; }  .block.food2 > span {   background: #abcdef; }  .block.food3 > span {   background: #652231; }  .block.food4 > span {   background: #189974; }  .block.food5 > span {   background: #118721; }  .block {   position: absolute;   background: none;   z-index: 1000;   transform: translateZ(14px);   transform-style: preserve-3d; }  .block > span {   display: block;   position: absolute;   top: 0;   left: 0;   width: 90%;   height: 90%;   margin: 5%;   box-shadow: inset 0 0 10px #000;   background: rgba(250, 250, 250, 0.5); }  .block span:nth-child(1) {   transform: rotateX(0deg) translateZ(14px); }  .block span:nth-child(2) {   transform: rotateX(90deg) translateZ(14px); }  .block span:nth-child(3) {   transform: rotateX(180deg) translateZ(14px); }  .block span:nth-child(4) {   transform: rotateX(270deg) translateZ(14px); }  .block span:nth-child(5) {   transform: rotateY(90deg) translateZ(14px); }  .block span:nth-child(6) {   transform: rotateY(-90deg) translateZ(14px); }  .snakeHead > span {   -webkit-animation: glow 2s linear infinite;   background: #409eff; }  .snakeHead.boom > span, .boom > .grid {   -webkit-animation: boom 2s linear infinite;   animation: boom 2s linear infinite;   background: #f00; }  .snakeHead.boom > span {   background: red;   transition: all 2s; }  .boom#gameBox {   transition: all 2s; }  .food > span {   -webkit-animation: glow 2s linear infinite;   animation: glow 2s linear infinite;   background: #409eff; }  @-webkit-keyframes glow {   0% {     box-shadow: inset 0 0 10px #000;   }   25% {     box-shadow: inset 0 0 20px #000;   }   50% {     box-shadow: inset 0 0 40px #000;   }   75% {     box-shadow: inset 0 0 20px #000;   }   100% {     box-shadow: inset 0 0 10px #000;   } } @-webkit-keyframes boom {   /* 0% {box-shadow:0 0 10px #c00;}   25% {box-shadow:0 0 10px #c00;}   50% {box-shadow:0 0 60px #c00;}   75% {box-shadow:0 0 10px #c00;}   100% {box-shadow:0 0 10px #c00;} */ } @-webkit-keyframes swing {   0% {     margin-top: 0px;   }   50% {     margin-top: 30px;   }   100% {     margin-top: 0px;   } } @keyframes glow {   0% {     box-shadow: inset 0 0 10px #000;   }   25% {     box-shadow: inset 0 0 20px #000;   }   50% {     box-shadow: inset 0 0 40px #000;   }   75% {     box-shadow: inset 0 0 20px #000;   }   100% {     box-shadow: inset 0 0 10px #000;   } } @keyframes boom {   /* 0% {box-shadow:0 0 10px #c00;}   25% {box-shadow:0 0 10px #c00;}   50% {box-shadow:0 0 60px #c00;}   75% {box-shadow:0 0 10px #c00;}   100% {box-shadow:0 0 10px #c00;} */ } @keyframes swing {   0% {     margin-top: 0px;   }   50% {     margin-top: 30px;   }   100% {     margin-top: 0px;   } } </style> </head><body><div id="scoreTxt"></div>	<span id="startBtn">Start</span>	<span id="pauseBtn">Pause</span>	<span id="gameoverTxt">gameover</span>	<span id="levelTxt"></span>	<span id="upgradeTip"></span>	<span id="modelBtn"></span>	<div id="gameBox"></div>  <script>  var body = document.body; 	scoreTxt = document.getElementById("scoreTxt"), 	startBtn = document.getElementById("startBtn"), 	pauseBtn = document.getElementById("pauseBtn"), 	upgradeTip = document.getElementById("upgradeTip"), 	levelTxt = document.getElementById("levelTxt"), 	modelBtn = document.getElementById("modelBtn"), 	gameBox = document.getElementById("gameBox"), 	model = "3d";   var perspective = (function() { 	var perspective = {}, 		rotateData = {x: 0, y: 0, z: 0}, 		translateData = {x: 0, y: 0, z: 0};  	function setTransform() { 		if (model == "2d") return; 		gameBox.style.transform = gameBox.style.transform.replace(/rotateZ$(-?[\d\.]+)deg$/, "rotateZ(" + rotateData.z + "deg)"); 		gameBox.style.transform = gameBox.style.transform.replace(/translateX$(-?[\d\.]+)px$/, "translateX(" + translateData.x + "px)"); 		gameBox.style.transform = gameBox.style.transform.replace(/translateY$(-?[\d\.]+)px$/, "translateY(" + translateData.y + "px)"); 	}  	perspective.turnLeft = function(xOffset, yOffset) { 		rotateData.z -= 90; 		perspective.pull(xOffset, yOffset); 	}  	perspective.turnRight = function(xOffset, yOffset) { 		rotateData.z +=  90; 		perspective.pull(xOffset, yOffset); 	}  	perspective.pull = function(xOffset, yOffset) { 		/*var transDis = distance * tranZStep; 		switch ((rotateData.z % 360 + 360) % 360) { 			case 0 :  				translateData.x = 0; 				translateData.y = transDis; 				break; 		switch (rotateData.z % 360) { 			case 90 :  				translateData.x = transDis; 				translateData.y = 0; 				break; 		switch (rotateData.z % 360) { 			case 180 :  				translateData.x = 0; 				translateData.y = -transDis; 				break; 		switch (rotateData.z % 360) { 			case 270 :   				break; 		}*/ 		translateData.x = xOffset; 		translateData.y = yOffset; 		setTransform(); 	}  	perspective.changeModel = function(){ 		if (model == "2d") { 			gameBox.style.transform = ""; 			body.style.perspective = ""; 		} else { 			body.style.perspective = "500px"; 			gameBox.style.transform = "rotateX(70deg) rotateZ(0deg) translateX(0px) translateY(0px)"; 		} 		setTransform(); 	} 	 	perspective.init = function() { 		rotateData.x = 70; 		rotateData.z = 0; 		translateData.z = 0; 		gameBox.style.transform = "rotateX(70deg) rotateZ(0deg) translateX(0px) translateY(0px)"; 		perspective.changeModel(); 	}  	perspective.clear = function() { 		rotateData.x = 0; 		rotateData.z = 0; 		translateData.z = 0;	 		setTransform();	 	} 	perspective.init(); 	return perspective; })();   var gamer = (function() { 	var gamer = {}, 		dirNow = 0,// 0 up 1 right 2 down 3 left 		dirPre = 0, 		gridNo = {col:19,row:19}, 		center = {x:9, y:9}, 		bodyArr = new Array(), 		gridSize = {w:0,h:0}, 		food = {t:0,l:0,k:1,ele:null},//size of food and food elem 		foodScoreOfKind = [1,2,4,8,10];  	gamer.init = function() { 		dirNow = 0; 		dirPre = 0; 		gameBox.className = "xx"; 		gameBox.style.width = (document.documentElement.clientHeight||document.body.clientHeight) && 560 + "px"; 		gameBox.style.height = gameBox.style.width; 		gridSize.w = parseFloat(gameBox.clientWidth/gridNo.row); 		gridSize.h = parseFloat(gameBox.clientHeight/gridNo.col);  		gameBox.innerHTML = ""; 		for (var i = gridNo.row - 1; i >= 0; i--) { 			for (var j = gridNo.col - 1; j >= 0; j--) { 				var grid = createBlock(i, j); 				grid.innerHTML = ""; 				grid.className = "grid"; 				gameBox.appendChild(grid);  			}; 		};  		bodyArr.length = 0; 		for(var i = 0; i < 5; i++){				 			createSnakeBody(Math.floor(gridNo.col/2), Math.floor(gridNo.row/2 + 4 - i)); 		} 		food.ele = createBlock(0, 0); 		createFood(); 	}  	function createSnakeBody (x, y) { 		var newBody = {};  		newBody.l = x;//左边格子 		newBody.t = y;//上边格子数 		newBody.ele = createBlock(x, y); 		newBody.ele.className = "snakeHead block";  		bodyArr.length > 0 ? bodyArr[0].ele.className = "snakeBody block" : ""; 		for(var i = bodyArr.length; i > 0; i--){ 			bodyArr[i] = bodyArr[i - 1]; 			bodyArr[i].ele.setAttribute("alt", i); 		} 		bodyArr[0] = newBody; 	}  	function createFood() { 		food.l = parseInt(Math.random() * gridNo.row); 		food.t = parseInt(Math.random() * gridNo.col); 		while (checkNewSizeType(food.l, food.t) != 3) { 			createFood(); 			return; 		} 		food.k = parseInt(Math.random() * 5 + 1); 		food.ele.className = "food food" + food.k + " block"; 		food.ele.style.width = gridSize.w + "px"; 		food.ele.style.height = gridSize.h + "px"; 		food.ele.style.left = food.l * gridSize.w + "px"; 		food.ele.style.top = food.t * gridSize.h + "px";	 	}  	function createBlock(x, y) { 		var elem = document.createElement("div");  		elem.style.width = gridSize.w+"px"; 		elem.style.height = gridSize.h+"px"; 		elem.style.left = x*gridSize.w+"px"; 		elem.style.top = y*gridSize.h+"px"; 		elem.innerHTML = "<span></span><span></span><span></span><span></span><span></span><span></span>"; 		elem.className = "block"; 		gameBox.appendChild(elem); 		return elem; 	}  	function removeBody(){ 		gameBox.removeChild(bodyArr[bodyArr.length - 1].ele); 		bodyArr[bodyArr.length - 1] = null; 		bodyArr.length -= 1; 	}  	function getFood() { 		handler.addScore(foodScoreOfKind[food.k - 1]); 		createFood(); 	}  	function checkNewSizeType(leftGrid, topGrid) { 		var sizeType = 0; //正常		 		for (var i = bodyArr.length - 1; i >= 0; i--) { 			if (leftGrid == bodyArr[i].l && topGrid == bodyArr[i].t) { 				sizeType = 1; //在蛇身体 				return sizeType; 			} 		}; 		if (leftGrid < 0 || topGrid < 0 || leftGrid > gridNo.row - 1 || topGrid > gridNo.col - 1) { 			sizeType = 2 //出墙 			return sizeType; 		} 		if (leftGrid == food.l && topGrid == food.t) { 			//alert("left"+ left +" food.l     "+food.l+ "  top "+ top +" food.t     "+food.t) 			sizeType = 3 //食物 			return sizeType; 		} 		return sizeType; 	}  	gamer.move = function() { 		var newSize = {}  		if (dirNow == (dirPre - 2) || dirNow == (dirPre + 2)) { 			dirPre = dirNow; 			return; 		} 		switch (dirNow) { 			case 0: 				newSize.l = bodyArr[0].l; 				newSize.t = bodyArr[0].t - 1; 				break; 			case 1: 				newSize.l = bodyArr[0].l + 1; 				newSize.t = bodyArr[0].t; 				break; 			case 2: 				newSize.l = bodyArr[0].l; 				newSize.t = bodyArr[0].t + 1; 				break; 			case 3: 				newSize.l = bodyArr[0].l - 1; 				newSize.t = bodyArr[0].t; 				//alert(bodyArr[0].l-gridSize.w); 		} 		 		var isDie = false; 		switch (checkNewSizeType(newSize.l, newSize.t)) { 			case 0: 				isDie = false; 				removeBody(); 				break; 			case 1: 				isDie = true; 				break; 			case 2: 				isDie = true; 				break; 			case 3: //alert(3333) 				isDie = false; 				getFood(); 				break; 		}  		if (!isDie) { 			createSnakeBody(newSize.l, newSize.t); 			if (dirNow - dirPre == 1 || dirNow - dirPre == -3) { 				perspective.turnLeft((center.x - newSize.l) * gridSize.w, (center.y - newSize.t) * gridSize.h); 			} else if (dirNow - dirPre == -1 || dirNow - dirPre == 3) { 				perspective.turnRight((center.x - newSize.l) * gridSize.w, (center.y - newSize.t) * gridSize.h); 			} else { 				perspective.pull((center.x - newSize.l) * gridSize.w, (center.y - newSize.t) * gridSize.h); 			} 		} else { 			bodyArr[0].ele.className += " boom"; 			gameBox.className += " boom"; 			handler.gameover(); 		} 				 		dirPre = dirNow; 	}  	gamer.changeDir = function(dir3d) {//3d model -1 left 1 right 		dirNow = dirPre + dir3d; 		dirNow = (dirNow + 4) % 4; 	}  	gamer.setDir = function(dir2d) {//2d model 0 up 1 right 2 down 3 left 		dirNow = dir2d 	}  	gamer.upgrade = function(level) {  	}  	return gamer; })();   var handler =  (function() { 	var handler = {}, 		gameT, 		timeGap = 300, 		score = 0, 		level = 1, 		running = false, 		pauseStatus = false;  	handler.init = function() { 		gamer.init(); 		bindEvent(); 		handler.addScore(0); 		modelBtn.innerHTML = "2D"; 		perspective.init(); 	}  	function restart() { 		running = true; 		gamer.init(); 		score = 0; 		startBtn.innerHTML = "Start"; 		perspective.init(); 		handler.addScore(0); 		level = 0; 		upgrade(); 		clearInterval(gameT); 		go(); 	}  	function bindEvent() { 		startBtn.onclick = function() { 			if (running) { 				go(); 			} else { 				restart(); 			} 		}  		pauseBtn.onclick = function() { 			pause(); 		}  		modelBtn.onclick = function() { 			model = (model == "3d" ? "2d" : "3d"); 			changeModel(); 		}  		document.onkeydown = function (event){ 			var keycode = event.which||event.keyCode; 		    switch(keycode){    		        case 1:    		        case 38:    		        case 269: //up  		            model == "2d" ? gamer.setDir(0) : ""; 		            break; 		        case 40:    		        case 2:    		        case 270: //down    		             model == "2d" ? gamer.setDir(2) : ""; 		            break; 		        case 37:    		        case 3:    		        case 271: //left     		            model == "2d" ? gamer.setDir(3) : gamer.changeDir(-1); 		            return 0; 		            break; 		        case 39: 		        case 4: 		        case 272: //right 		            model == "2d" ? gamer.setDir(1) : gamer.changeDir(1); 		            return 0; 		            break; 		        case 13: //enter 		        	go(); 		            return 0; 		            break; 		        case 339: //exit  		            pause(); 		            break;   		        case 340: //back 		            return 0; 		            break; 		    }    		}   	}  	function changeModel() { 		if (model == "2d") { 			modelBtn.innerHTML = "3D"; 		} else { 			modelBtn.innerHTML = "2D"; 		} 		perspective.changeModel(); 		if (running) { 			setTimeout(function() { 				if (!pauseStatus) { 					clearInterval(gameT); 					go();					 				} 			}, 2000);			 		}  	}  	function pause() { 		if (!running) return; 		pauseStatus = true; 		pauseBtn.style.display = "none"; 		startBtn.style.display = "block"; 		clearInterval(gameT); 	}  	function go() { 		pauseStatus = false; 		pauseBtn.style.display = "block"; 		startBtn.style.display = "none"; 		gameoverTxt.style.display = "none"; 		clearInterval(gameT); 		gameT = setInterval(function() { 			gamer.move(); 		}, timeGap); 	}  	function upgrade(level) { 		upgradeTip.innerHTML = "level: " + level; 		levelTxt.innerHTML = "level: " + level; 		setTimeout(function() {upgradeTip.style.display = "none";}, 1000); 		gamer.upgrade(level); 	}  	handler.gameover = function() { 		startBtn.innerHTML = "Retry"; 		startBtn.style.display = "block"; 		pauseBtn.style.display = "none"; 		gameoverTxt.style.display = "block"; 		running = false; 		clearInterval(gameT); 	}  	handler.addScore = function(scoreadd) { 		score += scoreadd; 		scoreTxt.innerHTML = "score: " + score; 	}  	return handler; })();  handler.init(gamer);   </script> </body></html>

Coba Sekarang

Flappy Bird - Code

<!DOCTYPE html><html lang="en" ><head>  <meta charset="UTF-8">  <title>Flappy Bird</title>  <style>@font-face {                 font-family: 'Flappy Bird';                 src: url('http://www.appcycle.me/flappy/fonts/FB.eot');                 src: url('http://www.appcycle.me/flappy/fonts/FB.eot?#iefix') format('embedded-opentype'),                      url('http://www.appcycle.me/flappy/fonts/FB.woff') format('woff'),                      url('http://www.appcycle.me/flappy/fonts/FB.ttf') format('truetype'),                      url('fonts/FB.svg#04b_19regular') format('svg');                 font-weight: normal;                 font-style: normal;             }             body, html {                 margin: 0px;                 padding: 0px;                 text-align: center;                 height: 100%;             }             canvas {                 margin-bottom: -4px;                 max-height: 100%;                 max-width: 100%;             }             iframe {                 position: fixed;                 top: 0px;                 left: 50%;                 margin-left: -76px;             }             </style></head><body><head>        <meta charset="utf-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">        <title>Flappy Bird</title>                <meta name="description" content="Flappy Bird in HTML5">        <meta name="viewport" content="width=device-width, initial-scale=1">        <script src="https://www.createjs.com/Demos/EaselJS/assets/preloadjs-NEXT.min.js"></script>        <script src="https://code.createjs.com/createjs-2013.09.25.min.js"></script>        <script src="http://www.appcycle.me/flappy/ndgmr.Collision.js"></script>            </head>    <body onload="init();">           <canvas id="testCanvas" width="768" height="1024"></canvas>    </body></html>  <script>  // https://createjs.com/#!/TweenJS/demos/sparkTable             // https://createjs.com/Docs/TweenJS/modules/TweenJS.html             // view-source:https://createjs.com/Demos/EaselJS/Game.html COPY THIS             var stage, w, h, loader, pipe1height, pipe2height, pipe3height, startX, startY, wiggleDelta;             var background, bird, ground, pipe, bottomPipe, pipes, rotationDelta, counter, counterOutline;             var started = false;              var startJump = false; // Has the jump started?              var jumpAmount = 120; // How high is the jump?             var jumpTime = 266;              var dead = false; // is the bird dead?             var KEYCODE_SPACE = 32;     //usefull keycode             var gap = 250;             var masterPipeDelay = 78; // delay between pipes             var pipeDelay = masterPipeDelay; //counter used to monitor delay              var counterShow = false;              document.onkeydown = handleKeyDown;              function init() {                 if (window.top != window) {                     //document.getElementById("header").style.display = "none";                 }                   // createjs.MotionGuidePlugin.install();                  stage = new createjs.Stage("testCanvas");                  createjs.Touch.enable(stage);                 // stage.canvas.width = document.body.clientWidth; //document.width is obsolete                 // stage.canvas.height = document.body.clientHeight; //document.height is obsolete                                  // grab canvas width and height for later calculations:                 w = stage.canvas.width;                 h = stage.canvas.height;                  manifest = [                     {src:"http://www.appcycle.me/flappy/img/bird.png", id:"bird"},                     {src:"http://www.appcycle.me/flappy/img/background.png", id:"background"},                     {src:"http://www.appcycle.me/flappy/img/ground.png", id:"ground"},                     {src:"http://www.appcycle.me/flappy/img/pipe.png", id:"pipe"},                     {src:"http://www.appcycle.me/flappy/img/restart.png", id:"start"},                     {src:"http://www.appcycle.me/flappy/img/share.png", id:"share"},                     {src:"http://www.appcycle.me/flappy/fonts/FB.eot"},                     {src:"http://www.appcycle.me/flappy/fonts/FB.svg"},                     {src:"http://www.appcycle.me/flappy/fonts/FB.ttf"},                     {src:"http://www.appcycle.me/flappy/fonts/FB.woff"}                 ];                  loader = new createjs.LoadQueue(false);                 loader.addEventListener("complete", handleComplete);                 loader.loadManifest(manifest);             }              function handleComplete() {                                  background = new createjs.Shape();                 background.graphics.beginBitmapFill(loader.getResult("background")).drawRect(0,0,w,h);                                  var groundImg = loader.getResult("ground");                 ground = new createjs.Shape();                 ground.graphics.beginBitmapFill(groundImg).drawRect(0, 0, w+groundImg.width, groundImg.height);                 ground.tileW = groundImg.width;                 ground.y = h-groundImg.height;                                               var data = new createjs.SpriteSheet({                     "images": [loader.getResult("bird")],                     //set center and size of frames, center is important for later bird roation                     "frames": {"width": 92, "height": 64, "regX": 46, "regY": 32, "count": 3},                      // define two animations, run (loops, 0.21x speed) and dive (returns to dive and holds frame one static):                     "animations": {"fly": [0, 2, "fly", 0.21], "dive": [1, 1, "dive", 1]}                 });                 bird = new createjs.Sprite(data, "fly");                  startX = (w/2) - (92/2)                 startY = 512                 wiggleDelta = 18                  // Set initial position and scale 1 to 1                 bird.setTransform(startX, startY, 1, 1);                 // Set framerate                 bird.framerate = 30;                  //338, 512                 // Use a tween to wiggle the bird up and down using a sineInOut Ease                 createjs.Tween.get(bird, {loop:true}).to({y:startY + wiggleDelta}, 380, createjs.Ease.sineInOut).to({y:startY}, 380, createjs.Ease.sineInOut);                  stage.addChild(background);                  pipes = new createjs.Container();                  stage.addChild(pipes)                  stage.addChild(bird, ground);                 stage.addEventListener("stagemousedown", handleJumpStart);                                  counter = new createjs.Text(0, "86px 'Flappy Bird'", "#ffffff");                 counterOutline = new createjs.Text(0, "86px 'Flappy Bird'", "#000000");                 counterOutline.outline = 5                 counterOutline.textAlign = 'center'                 counter.textAlign = 'center'                 counterOutline.x = w/2                 counterOutline.y = 150                 counter.x = w/2                 counter.y = 150                 counter.alpha = 1                 counterOutline.alpha = 1                 stage.addChild(counter, counterOutline)                  createjs.Ticker.timingMode = createjs.Ticker.RAF;                 createjs.Ticker.addEventListener("tick", tick);               }              function handleKeyDown(e) {                 //cross browser issues exist                 if(!e){ var e = window.event; }                 switch(e.keyCode) {                     case KEYCODE_SPACE: handleJumpStart();                 }             }              function handleJumpStart() {                 if (!dead) {                     createjs.Tween.removeTweens ( bird )                     bird.gotoAndPlay("jump");                     startJump = true                     if (!started) {                         started = true                         counterShow = true                                             }                 }             }              function diveBird() {                 bird.gotoAndPlay("dive");             }              function restart() {                 //hide anything on stage and show the score                 pipes.removeAllChildren();                 createjs.Tween.get(start).to({y:start.y + 10}, 50).call(removeStart)                 counter.text = 0                 counterOutline.text = 0                 counterOutline.alpha = 0                 counter.alpha = 0                 counterShow = false                 pipeDelay = masterPipeDelay                 dead = false                 started = false                 startJump = false                 createjs.Tween.removeTweens ( bird )                 bird.x = startX                 bird.y = startY                 bird.rotation = 0                 createjs.Tween.get(bird, {loop:true}).to({y:startY + wiggleDelta}, 380, createjs.Ease.sineInOut).to({y:startY}, 380, createjs.Ease.sineInOut);             }              function die() {                 dead = true                 bird.gotoAndPlay("dive");                 createjs.Tween.removeTweens ( bird )                 createjs.Tween.get(bird).wait(0).to({y:bird.y + 200, rotation: 90}, (380)/1.5, createjs.Ease.linear) //rotate back                         .call(diveBird) // change bird to diving position                         .to({y:ground.y - 30}, (h - (bird.y+200))/1.5, createjs.Ease.linear); //drop to the bedrock                 createjs.Tween.get(stage).to({alpha:0}, 100).to({alpha:1}, 100)                 start = new createjs.Bitmap(loader.getResult("start"));                 start.alpha = 0                 start.x = w/2 - start.image.width/2                 start.y = h/2 - start.image.height/2 - 150                 share = new createjs.Bitmap(loader.getResult("share"));                 share.alpha = 0                 share.x = w/2 - share.image.width/2                 share.y = h/2 - share.image.height/2 - 50                  stage.addChild(start)                 stage.addChild(share)                 createjs.Tween.get(start).to({alpha:1, y: start.y + 50}, 400, createjs.Ease.sineIn).call(addClickToStart)                 createjs.Tween.get(share).to({alpha:1, y: share.y + 50}, 400, createjs.Ease.sineIn).call(addClickToStart)                              }             function removeStart() {                 stage.removeChild(start)                 stage.removeChild(share)             }             function addClickToStart() {                 start.addEventListener("click", restart);                 share.addEventListener("click", goShare);             }              function goShare() {                 var countText                 if (counter.text == 1) {                     countText = "1 point"                 } else {                     countText = counter.text + " points"                 }                 window.open("https://twitter.com/share?url=http%3A%2F%2Fappcycle.me/flappy&text=I scored " + countText +  " on HTML5 Flappy Bird.");             }              function tick(event) {                 var deltaS = event.delta/1000;                  var l = pipes.getNumChildren();                  if (bird.y > (ground.y - 40)) {                     if (!dead) {                         die()                     }                     if (bird.y > (ground.y - 30)) {                         createjs.Tween.removeTweens ( bird )                     }                 }                                  if (!dead) {                     ground.x = (ground.x-deltaS*300) % ground.tileW;                 }                               if (started && !dead) {                     if (pipeDelay == 0) {                          pipe = new createjs.Bitmap(loader.getResult("pipe"));                         pipe.x = w+600                         pipe.y = (ground.y - gap*2) * Math.random() + gap*1.5                         pipes.addChild(pipe);                         // createjs.Tween.get(pipe).to({x:0 - pipe.image.width}, 5100)                          pipe2 = new createjs.Bitmap(loader.getResult("pipe"));                         pipe2.scaleX = -1                         pipe2.rotation = 180                         pipe2.x = pipe.x //+ pipe.image.width                         pipe2.y = pipe.y - gap                         // createjs.Tween.get(pipe2).to({x:0 - pipe.image.width}, 5100)                          pipes.addChild(pipe2);                          pipeDelay = masterPipeDelay                      } else {                         pipeDelay = pipeDelay - 1                     }                     for(var i = 0; i < l; i++) {                         pipe = pipes.getChildAt(i);                         if (pipe) {                             if (true) { // tried replacing true with this, but it's off: pipe.x < bird.x + 92 && pipe.x > bird.x                                  var collision = ndgmr.checkRectCollision(pipe,bird,1,true)                                 if (collision) {                                     if (collision.width > 8 && collision.height > 8) {                                         die()                                     }                                 }                             }                             pipe.x = (pipe.x - deltaS*300);                             if (pipe.x <= 338 && pipe.rotation == 0 && pipe.name != "counted") {                                 pipe.name = "counted" //using the pipe name to count pipes                                 counter.text = counter.text + 1                                 counterOutline.text = counterOutline.text + 1                             }                             if (pipe.x + pipe.image.width <= -pipe.w) {                                  pipes.removeChild(pipe)                             }                         }                     }                     if (counterShow) {                         counter.alpha = 1                         counterOutline.alpha = 1                         counterShow = false                     }                  }                    if (startJump == true) {                     startJump = false                     bird.framerate = 60;                     bird.gotoAndPlay("fly");                     if (bird.roation < 0) {                         rotationDelta = (-bird.rotation - 20)/5                     } else {                         rotationDelta = (bird.rotation + 20)/5                     }                     if (bird.y < -200) {                         bird.y = -200                     }                     createjs                         .Tween                         .get(bird)                         .to({y:bird.y - rotationDelta, rotation: -20}, rotationDelta, createjs.Ease.linear) //rotate to jump position and jump bird                         .to({y:bird.y - jumpAmount, rotation: -20}, jumpTime - rotationDelta, createjs.Ease.quadOut) //rotate to jump position and jump bird                         .to({y:bird.y}, jumpTime, createjs.Ease.quadIn) //reverse jump for smooth arch                         .to({y:bird.y + 200, rotation: 90}, (380)/1.5, createjs.Ease.linear) //rotate back                         .call(diveBird) // change bird to diving position                         .to({y:ground.y - 30}, (h - (bird.y+200))/1.5, createjs.Ease.linear); //drop to the bedrock                 }                                   stage.update(event);             }   </script> </body></html>

Coba Sekarang

Zombie Shooter - Code

<!DOCTYPE html><html lang="en" ><head>  <meta charset="UTF-8">  <title>Zombie Shooter Game</title>  <style>  @import url("https://fonts.googleapis.com/css?family=Creepster"); @import url("https://fonts.googleapis.com/css?family=Roboto+Mono"); html, body {   margin: 0;   overflow: hidden; } canvas {   background: radial-gradient(rgb(150, 200, 150), rgb(50, 100, 50)); } </style></head><body><canvas>Your browser does not support HTML5 Canvas :(</canvas>  <script > (function setup(window) {   var document = window.document;   Object.prototype.on = function(a, b) {     this.addEventListener(a, b);     return this;   };   Object.prototype.off = function(a, b) {     this.removeEventListener(a, b);     return this;   };   Array.prototype.remove = function(x) {     let a = [];     for (let i in this)       if (i != x)         a.push(this[i]);     return a;   };   window.can = document.querySelector("canvas");   window.ctx = window.can.getContext("2d");   window.can.width = window.innerWidth;   window.can.height = window.innerHeight;   window.randInt = function(a, b) {     if (a === void 0) return Math.round(Math.random());     else if (b === void 0) return Math.floor(Math.random() * a);     else return Math.floor(Math.random() * (b - a + 1) + a);   };   window.randFloat = function(a, b) {     if (a === void 0) return Math.random();     else if (b === void 0) return Math.random() * a;     else return Math.random() * (b - a) + a;   };   window.rand = function(a, b) {     return Array.isArray(a) ? a[Math.floor(Math.random() * a.length)] : window.randInt(a, b);   }; }(window));  (function play(gameover) {   can.style.cursor = "none";   var mouse = {     x: can.width / 2,     y: -can.height   };   var player = {     x: can.width / 2,     y: can.height / 2,     s: 20,     mx: 0,     my: 0,     a: 0,     d: 1,     speed: 3,     speak: false,     say: function(s) {       this.message = s;       if (!this.speak)         this.speak = true;     },     softcore: [       "Revolver",       "Shotgun",       "Machine Gun",       "Sniper Rifle"     ],     hardcore: [       "Minigun",       "Mega Shotgun",       "Laser Gun",       "Ring of Fire"     ],     weapon: "Revolver",     applyWeaponProperties: function() {       switch(this.weapon) {         case "Revolver":           this.magSize = 6;           this.barrelSize = 1.5;           this.bulletSize = 1;           this.girth = 1;           this.hits = 2;           this.spray = 1;           this.reloadTime = 1000;           this.velocity = 1;           this.shade = 200;           this.laser = false;           this.fire = false;           break;         case "Shotgun":           this.magSize = 9;           this.barrelSize = 2;           this.bulletSize = 0.75;           this.girth = 1.2;           this.spray = 3;           this.hits = 1;           this.reloadTime = 1000;           this.velocity = 1;           this.shade = 100;           this.laser = false;           this.fire = false;           break;         case "Machine Gun":           this.magSize = 30;           this.barrelSize = 2;           this.bulletSize = 1;           this.girth = 1.2;           this.hits = 1;           this.spray = 1;           this.reloadTime = 2000;           this.velocity = 0.75;           this.shade = 100;           this.fireRate = 10;           this.laser = false;           break;         case "Sniper Rifle":           this.magSize = 5;           this.barrelSize = 2.5;           this.bulletSize = 1.5;           this.girth = 1;           this.spray = 1;           this.hits = Infinity;           this.reloadTime = 1000;           this.velocity = 2;           this.shade = 50;           this.laser = false;           this.fire = false;           break;         case "Mega Shotgun":           this.magSize = 50;           this.spray = 5;           this.barrelSize = 2;           this.bulletSize = 1;           this.girth = 1.5;           this.hits = 1;           this.reloadTime = 500;           this.velocity = 1.5;           this.shade = 100;           this.laser = false;           this.fire = false;           break;         case "Minigun":           this.magSize = 500;           this.barrelSize = 2.5;           this.bulletSize = 2;           this.girth = 2;           this.hits = 3;           this.spray = 1;           this.fireRate = 5;           this.reloadTime = 2000;           this.velocity = 3;           this.shade = 0;           this.laser = false;           break;         case "Laser Gun":           this.magSize = Infinity;           this.barrelSize = 2;           this.bulletSize = 2;           this.girth = 1.5;           this.spray = 1;           this.fireRate = 20;           this.hits = Infinity;           this.velocity = 3;           this.shade = 0;           this.laser = true;           break;         case "Ring of Fire":           this.magSize = 74;           this.spray = 37;           this.barrelSize = 0;           this.bulletSize = 2;           this.reloadTime = 2000;           this.hits = 2;           this.shade = 0;           this.girth = 0;           this.fireRate = 5;           this.velocity = 2;           this.laser = true;           this.fire = false;       }     },     out: false,     fire: false,     showGun: true,     showMode: true,     hardcoreMode: 30,     lives: 3,     zombiesKilled: 0,     bullets: [],     fireRound: function(n) {       if (n === void 0) n = 0;       let a = Math.atan2(mouse.y - this.y, mouse.x - this.x);       if (!this.out)         this.bullets.push({           x: this.weapon == "Ring of Fire" ? this.x : this.x + Math.cos(a) * 2 * this.s,           y: this.weapon == "Ring of Fire" ? this.y : this.y + Math.sin(a) * 2 * this.s,           hit: false,           hits: 0,           px: Math.cos(a + n),           py: Math.sin(a + n)         });       if (this.showGun && this.bullets.length % this.magSize === 0) {         this.out = true;         this.say("Reload!");       } else this.speak = false;     }   };   player.applyWeaponProperties();   var zombies = [];   var Zombie = function() {     let s = rand(20, 30);     let a = rand(zombies.length < player.hardcoreMode ? 25 : 50) === 0;     let sp = rand(zombies.length + 10) === 0;     let speed = (sp ? 2 : 1) * randFloat(0.5, 1);     speed += zombies.length / 20;     let x = a ? rand(-s * rand(2, 10), can.width + s * rand(2, 10)) : rand([-s * rand(2, 10), can.width + s * rand(2, 10)]);     let y = a ? rand([-s * rand(2, 10), can.height + s * rand(2, 10)]) : rand(-s * rand(2, 10), can.height + s * rand(2, 10));     return {       x: x,       y: y,       wx: x,       wy: y,       s: s,       a: 0,       d: 1,       special: sp,       color: [rand(50, 100), rand(100, 150), rand(50)],       eyeColor: sp ? [255, 255, 255] : rand([         [rand(200, 255), rand(20), rand(20)],         [rand(20), rand(200, 255), rand(200, 255)],         [rand(rand(200, 255)), rand(200, 255), rand(20)]       ]),       speed: speed < 2 * player.speed ? speed : player.speed * 1.5     };   };   for (let i = 0; i < 10; i++)     zombies.push(new Zombie());   var shadow = {     apply: function() {       ctx.shadowBlur = 30;       ctx.shadowOffsetX = -10;       ctx.shadowOffsetY = 10;     },     reset: function() {       ctx.shadowBlur = 0;       ctx.shadowOffsetX = 0;       ctx.shadowOffsetY = 0;     }   };   var Grass = function() {     return {       x: rand(can.width),       y: rand(can.height),       tx: rand(-3, 3),       ty: rand(-5, -10),       c: [0, rand(50, 100), 0]     };   };   var grass = [];   for (let i = 0; i < 100; i++)     grass.push(new Grass());   var frames = 0;   (function update() {     ctx.beginPath();     ctx.clearRect(0, 0, can.width, can.height);     ctx.shadowColor = "black";     shadow.reset();     for (let i in grass) {       let p = grass[i];       ctx.beginPath();       ctx.lineWidth = 2;       ctx.strokeStyle = "rgb(" + p.c + ")";       ctx.moveTo(p.x, p.y);       ctx.lineTo(p.x + p.tx, p.y - p.ty);       ctx.stroke();     }     ctx.strokeStyle = "black";     if (!gameover) {     for (let i in player.bullets) {       p = player.bullets[i];       if (!p.laser) shadow.apply();       if (!p.hit) {         ctx.beginPath();         if (player.laser) {           ctx.lineWidth = player.s / 10 * player.bulletSize;           ctx.strokeStyle = "red";           ctx.moveTo(p.x - p.px * player.s, p.y - p.py * player.s / 2);           ctx.lineTo(p.x, p.y);           ctx.stroke();         } else {           ctx.fillStyle = "black";           ctx.arc(p.x, p.y, player.s / 10 * player.bulletSize, 0, 2 * Math.PI);           ctx.fill();         }         p.x += p.px * 10 * player.velocity;         p.y += p.py * 10 * player.velocity;       }       shadow.apply();       for (let x in zombies) {         let z = zombies[x];         if (p.x > z.x - z.s &&            p.x < z.x + z.s &&            p.y > z.y - z.s &&            p.y < z.y + z.s &&            !(z.x + z.s < 0 ||            z.x - z.s > can.width ||            z.y + z.s < 0 ||            z.y - z.s > can.height) &&            !p.hit) {           p.hits++;           if (p.hits == player.hits)             p.hit = true;           player.zombiesKilled++;           if (zombies.length == player.hardcoreMode && player.showMode) {             player.say("Hardcore Mode Entered!");             player.mark = frames;             player.showMode = false;           }           zombies[x] = new Zombie();           if (player.zombiesKilled % 10 === 0) {             zombies.push(new Zombie());             if (zombies.length == player.hardcoreMode) {               player.weapon = rand(player.hardcore);               player.applyWeaponProperties();             }           }           if (z.special) {             player.weapon = function() {               let a = [];               let w = zombies.length < player.hardcoreMode ? player.softcore : player.hardcore;               for (let n = 0; n < w.length; n++)                 if (player.weapon != w[n])                   a.push(w[n]);               return rand(a);             }();             player.applyWeaponProperties();             player.lives++;             player.mark = frames;             setTimeout(function() {               player.out = false;               player.bullets = [];             });             player.say("You found a " + player.weapon.toLowerCase() + "!");           }         }       }     }     if (frames == player.mark + 500)       player.speak = false;     p = player;     let a = Math.atan2(mouse.y - p.y, mouse.x - p.x);     for (let x = -1; x <= 1; x += 2) {       ctx.beginPath();       ctx.lineWidth = p.s / 10;       ctx.strokeStyle = p.weapon == "Ring of Fire" && !p.out ? "red" : "black";       ctx.fillStyle = "rgb(150, 100, 50)";       ctx.arc(p.x + p.s * Math.cos(a + x * 30 * Math.PI / 180) + x * p.a * Math.cos(a), p.y + p.s * Math.sin(a + x * 30 * Math.PI / 180) + x * p.a * Math.sin(a), p.s / 3, 0, 2 * Math.PI);       ctx.fill();       ctx.stroke();     }     if (p.showGun) {       ctx.beginPath();       ctx.lineWidth = p.s / 2 * p.girth;       ctx.strokeStyle = "rgb(" + [p.shade, p.shade, p.shade] + ")";       ctx.moveTo(p.x, p.y);       ctx.lineTo(p.x + Math.cos(a) * p.barrelSize * p.s, p.y + Math.sin(a) * p.barrelSize * p.s);       ctx.stroke();     }     ctx.beginPath();     ctx.lineWidth = p.s / 10;     ctx.strokeStyle = p.weapon == "Ring of Fire" && !p.out ? "red" : "black";     ctx.fillStyle = "rgb(150, 100, 50)";     ctx.arc(p.x, p.y, p.s, 0, 2 * Math.PI);     ctx.fill();     ctx.stroke();     shadow.reset();     for (let x = -1; x <= 1; x += 2) {       ctx.beginPath();       ctx.fillStyle = "white";       ctx.strokeStyle = "black";       ctx.arc(p.x + Math.cos(a + x * 35 * Math.PI / 180) * p.s / 2, p.y + Math.sin(a + x * 35 * Math.PI / 180) * p.s / 2, p.s / 4, 0, 2 * Math.PI);       ctx.fill();       ctx.stroke();       ctx.beginPath();       ctx.fillStyle = "black";       ctx.arc(p.x + Math.cos(a + x * 35 * Math.PI / 180) * p.s / 2 + Math.cos(a) * p.s / 8, p.y + Math.sin(a + x * 35 * Math.PI / 180) * p.s / 2 + Math.sin(a) * p.s / 8, p.s / 8, 0, 2 * Math.PI);       ctx.fill();     }     if (p.speak) {       ctx.beginPath();       ctx.textAlign = "center";       ctx.textBaseline = "middle";       ctx.font = p.s + "px creepster";       ctx.fillText(p.message, p.x, p.y - p.s * 2);     }     if (p.fire && frames % p.fireRate === 0)       switch(p.weapon) {         case "Laser Gun":           for (let i = -45; i <= 45; i += 45)             p.fireRound(i / 10);           break;         default:           p.fireRound();       }       p.x += p.mx * p.speed;       p.y += p.my * p.speed;       p.a += (p.mx === 0 && p.my === 0 ? 0 : 1) * p.speed / 2 * p.d;       if (p.a < -5) p.d = 1;       else if (p.a > 5) p.d = -1;     }     for (let i in zombies) {       p = zombies[i];       if (gameover) {         a = rand() === 0;         a = Math.atan2(p.wy - p.y, p.wx - p.x);       } else a = Math.atan2(player.y - p.y, player.x - p.x);       ctx.beginPath();       shadow.apply();       ctx.lineWidth = p.s / 10;       ctx.fillStyle = "rgb(" + p.color + ")";       for (let x = -1; x <= 1; x += 2) {         ctx.beginPath();         ctx.arc(p.x + Math.cos(a + x * 30 * Math.PI / 180) * p.s + x * p.a * Math.cos(a), p.y + Math.sin(a + x * 30 * Math.PI / 180) * p.s + x * p.a * Math.sin(a), p.s / 3, 0, 2 * Math.PI);         ctx.fill();         ctx.stroke();       }       ctx.beginPath();       ctx.arc(p.x, p.y, p.s, 0, 2 * Math.PI);       ctx.fill();       ctx.stroke();       ctx.beginPath();       shadow.reset();       for (let x = -1; x <= 1; x += 2) {         ctx.beginPath();         ctx.fillStyle = "rgb(" + p.eyeColor + ")";         ctx.arc(p.x + Math.cos(a + x * 35 * Math.PI / 180) * p.s / 2, p.y + Math.sin(a + x * 35 * Math.PI / 180) * p.s / 2, p.s / 4, 0, 2 * Math.PI);         ctx.fill();         ctx.stroke();       }       p.x += Math.cos(a) * p.speed;       p.y += Math.sin(a) * p.speed;       p.a += p.speed / 2 * p.d;       if (p.a < -5) p.d = 1;       else if (p.a > 5) p.d = -1;       if (player.x + player.s > p.x - p.s &&          player.x - player.s < p.x + p.s &&          player.y + player.s > p.y - p.s &&          player.y - player.s < p.y + p.s) {         player.lives--;         if (player.lives < 0) {           if (!gameover) {             let zom = new Zombie();             zom.x = player.x;             zom.y = player.y;             zom.s = player.s;             zom.speed = player.speed;             zom.eyeColor = [255, 255, 255];             zombies.push(zom);           }           gameover = true;         } else zombies[i] = new Zombie();       }     }     if (gameover) {       can.style.cursor = "default";       ctx.beginPath();       ctx.fillStyle = "rgba(0, 0, 0, 0.5)";       ctx.fillRect(0, 0, can.width, can.height);       ctx.beginPath();       ctx.fillStyle = "black";       ctx.font = "100px creepster";       ctx.textAlign = "center";       ctx.textBaseline = "middle";       ctx.fillText("YOU DIED! " + (player.zombiesKilled < 1 ? "No" : player.zombiesKilled.toLocaleString()) + " Zombie" + (player.zombiesKilled == 1 ? "" : "s") + " Killed", can.width / 2, can.height / 2);       ctx.font = "50px creepster";       ctx.fillText("PRESS ENTER TO RESTART", can.width / 2, 0.75 * can.height);     } else {       for (let i = 0; i < player.lives; i++) {         ctx.beginPath();         ctx.lineWidth = 2;         ctx.fillStyle = "red";         ctx.arc(i * 20 + 10, 10, 10, 0, 2 * Math.PI);         ctx.fill();         ctx.stroke();       }       ctx.beginPath();       ctx.fillStyle = "black";       ctx.textAlign = "left";       ctx.textBaseline = "top";       ctx.font = "20px roboto mono";       ctx.fillText("Weapon: " + player.weapon, 0, 20);       ctx.fillText((player.magSize - player.bullets.length) / player.spray + "/" + player.magSize / player.spray, 0, 40);       ctx.beginPath();       ctx.lineWidth = 2;       ctx.fillStyle = "red";       ctx.arc(mouse.x, mouse.y, 5, 0, 2 * Math.PI);       ctx.fill();       ctx.stroke();     }     frames++;     requestAnimationFrame(update);   }());   can.on("mousedown", function() {     switch(player.weapon) {       case "Machine Gun":       case "Minigun":       case "Laser Gun":       player.fire = true;        }   }).on("mouseup", function() {     switch(player.weapon) {       case "Revolver":       case "Sniper Rifle":       case "Laser Gun":         player.fireRound();         break;       case "Shotgun":         for (let i = -1; i <= 1; i++)           player.fireRound(i / 10);       break;       case "Mega Shotgun":         for (let i = -2; i <= 2; i++)           player.fireRound(i / 10);         break;       case "Ring of Fire":         for (let i = -90; i <= 90; i += 5)           player.fireRound(i);       }     player.fire = false;   }).on("mousemove", function(e) {     mouse.x = e.offsetX;     mouse.y = e.offsetY;   });   var move = function(e) {     if (gameover)       switch(e.which || e.keyCode) {         case 32:         case 13:           play(false);           this.off("keydown", move);       }     else switch(e.which || e.keyCode) {         case 37:         case 65:           player.mx = -1;           break;         case 39:         case 68:           player.mx = 1;           break;         case 38:         case 87:           player.my = -1;           break;         case 40:         case 83:           player.my = 1;       }   };   window.on("resize", function() {     can.width = this.innerWidth;     can.height = this.innerHeight;     for (let i in grass)       grass[i] = new Grass();   }).on("keydown", move)     .on("keyup", function(e) {     switch(e.which || e.keyCode) {       case 37:       case 65:       case 39:       case 68:         player.mx = 0;         break;       case 38:       case 87:       case 40:       case 83:         player.my = 0;         break;       case 82:         if (player.bullets.length > 0) {             player.showGun = false;           if (player.speak)             player.speak = false;           setTimeout(function() {             player.out = false;               player.bullets = [];             player.showGun = true;           }, player.reloadTime);         }         break;     }   }); }(false));   </script> </body></html>

Coba Sekarang

Coronavirus Shooting - Code

<!DOCTYPE html><html lang="en" ><head>  <meta charset="UTF-8">  <title>Coronavirus Shooting Game</title>  <style>body {background:#111;margin:0;padding:0} 		canvas {background:#000;display:block;cursor: none} 		</style></head><body><html><head>	<meta charset="utf-8">	<meta http-equiv="X-UA-Compatible" content="IE=edge">	<meta name="viewport" content="width=device-width, initial-scale=1">	<meta name="description" content="Pex.Js Engine by Ahmad Faisal Jawed">	<meta name="author" content="Ahmad Faisal Jawed">	<title>Coronavirus Shooting Game by Faisal Jawed</title></head><body onresize='_pexresize()'>	<canvas id='canvas' width='1280' height='720'></canvas>  <script>  "use strict" 		var stage = { 			w:1280, 			h:720 		}  		var _pexcanvas = document.getElementById("canvas"); 		_pexcanvas.width = stage.w; 		_pexcanvas.height = stage.h; 		var ctx = _pexcanvas.getContext("2d");     		var pointer = { 			x:stage.w/2, 			y:stage.h/4 		}  		var scale = 1; 		var portrait = true; 		var loffset = 0; 		var toffset = 0; 		var mxpos = 0; 		var mypos = 0;   // ------------------------------------------------------------------------------- Gamy  var againprog = 0;  var healthprog = 0;   function newGame() { 	score = 0; 	health = 100; 	enemies=[]; 	enemies.push(new Enemy()); 	enemies.push(new Enemy()); 	enemies.push(new Enemy()); 	againprog = 0; }    function drawHeart(x,y,w) { 	ctx.beginPath(); 	ctx.arc(x-w/4, y, w/4, 0.75*Math.PI,0); 	ctx.arc(x+w/4, y, w/4, 1*Math.PI, 2.25*Math.PI); 	ctx.lineTo(x,y+w/1.5); 	ctx.closePath(); 	ctx.fill(); }   var Cannon = function(x,y,tx,ty) { 	this.x = x; 	this.y = y; 	this.tx = tx; 	this.ty = ty; 	this.r = 10; }  var cannons = [];  var gameover = false;  cannons.push(new Cannon(stage.w,stage.h,stage.w/2,stage.h/2));  var firetm = 0; var fireact = true;  var health = 100; var score = 0;   var arm = {x:stage.w,y:stage.h}; var arm2 = {x:0,y:stage.h}; var danger = false; var dangera = 0;    var Enemy = function() { 	this.x = stage.w/2; 	this.y = stage.h/2; 	this.r = 10; 	this.tx = Math.floor(Math.random()*stage.w); 	this.ty = Math.floor(Math.random()*stage.h); 	this.des = false; 	this.eyeX = 0.4; 	this.eyeY = 0.25; 	this.eyeR = 0.25; 	this.sp = 50; 	this.spl = 1.4; 	this.op=1; 	this.danger = false; 	this.nuked = false; }  var enemies = []; // for (var i = 0; i < 10; i++) { // 	enemies[i] = new Enemy(); // } 		enemies.push(new Enemy()); 		enemies.push(new Enemy()); 		enemies.push(new Enemy());  var entm = 0; var ga =0;  var steptime = 0;   var Star = function() { 	this.a = Math.random()*Math.PI*2; 	this.v = 3+Math.random()*5; 	this.x = stage.w/2; 	this.y = stage.h/2; 	this.r = 0.2; }  var Power = function() { 	this.type = Math.floor(Math.random()*2)+1; 	this.a = Math.random()*Math.PI*2; 	this.v = 3+Math.random()*5; 	this.x = stage.w/2; 	this.y = stage.h/2; 	this.r = 0.2; 	this.dis = false; 	this.op = 1; }   var powers = []; var powertm = 0; var powermax = Math.random()*800+300; // powermax = 10;  var stars = [];  for (var i =0;i<200;i++) { 	stars[i] = new Star(); 	var st = stars[i]; 	var move = Math.random()*400;  	st.x += Math.sin(st.a)*move; 	st.y += Math.cos(st.a)*move;   }  // powers.push(new Power());    function enginestep() { 	steptime = Date.now(); 	ctx.clearRect(0,0,stage.w,stage.h); 	 	ctx.fillStyle = "#ffffff";  	 	for (var i = 0; i < stars.length; i++) { 		var st = stars[i];  		st.x += Math.sin(st.a)*st.v; 		st.y += Math.cos(st.a)*st.v; 		st.r += st.v/200;  		ctx.beginPath(); 		ctx.arc(st.x,st.y, st.r, 2*Math.PI, 0); 		ctx.fill();  		if (st.x>stage.w||st.x<0||st.y<0||st.y>stage.h) { 			stars[i] = new Star(); 		} 	} 	if (!gameover) { 		danger = false;   		powertm++; 		if (powertm>powermax) { 			powers.push(new Power()); 			powertm = 0; 			powermax = Math.random()*1200+600; 			// powermax = 10; 		}     		for (var i = 0; i < powers.length; i++) { 			var st = powers[i];  			if (!st.des) { 				st.x += Math.sin(st.a)*st.v/1.5; 				st.y += Math.cos(st.a)*st.v/1.5; 				st.r += st.v/15; 			} else { 				st.r *=1.1; 				if (st.type==1) { 				st.op += (0-st.op)/10; 			} else { 				st.op += (0-st.op)/20;  			} 				st.x += (stage.w/2-st.x)/10; 				st.y += (stage.h/2-st.y)/10;  			}  			 			if (st.type ==1) { 				ctx.fillStyle = "rgba(255,0,0,"+st.op+")";  				drawHeart(st.x,st.y-st.r/4, st.r*2);  			} else { 				ctx.fillStyle = "rgba(255,255,0,"+st.op+")"; 				ctx.strokeStyle = "rgba(255,255,0,"+st.op+")"; 				ctx.lineWidth = st.r/10; 				ctx.beginPath(); 				ctx.arc(st.x,st.y, st.r, 2*Math.PI, 0); 				ctx.stroke();  				ctx.beginPath(); 				ctx.arc(st.x,st.y, st.r*0.15, 2*Math.PI, 0); 				ctx.fill();   				ctx.beginPath(); 				ctx.arc(st.x,st.y, st.r*0.85, 1.67*Math.PI, 2*Math.PI); 				ctx.arc(st.x,st.y, st.r*0.25, 2*Math.PI, 1.67*Math.PI,true);  				ctx.closePath(); 				ctx.fill();    				ctx.beginPath(); 				ctx.arc(st.x,st.y, st.r*0.85, 3*Math.PI, 3.33*Math.PI); 				ctx.arc(st.x,st.y, st.r*0.25, 3.33*Math.PI,3*Math.PI, true); 				ctx.closePath(); 				ctx.fill();  				ctx.beginPath(); 				ctx.arc(st.x,st.y, st.r*0.85, 2.33*Math.PI, 2.67*Math.PI); 				ctx.arc(st.x,st.y, st.r*0.25, 2.67*Math.PI,2.33*Math.PI, true); 				ctx.lineTo(st.x,st.y); 				ctx.closePath(); 				ctx.fill();  			} 			if (st.x>stage.w||st.x<0||st.y<0||st.y>stage.h||st.r>stage.w/2) { 				powers.splice(i,1); 				if (st.type == 2&&st.r>stage.w/2) { 					for (var e = 0; e < enemies.length; e++) { 						enemies[e].des = true; 						enemies[e].nuked = true;  					} 				} 				i--; 			}   		}  		entm++; 		if (enemies.length<10&&entm>300) { 			entm=0; 			enemies.push(new Enemy());  		}  			ctx.lineWidth = 2; 		for (var i = 0; i < enemies.length; i++) { 			var en = enemies[i]; 			if (!en.danger) { 				ctx.strokeStyle = "rgba(0,255,255,"+en.op*2+")"; 			} else { 				health -= 0.01; 				ctx.strokeStyle = "rgba(255,0,0,"+en.op*2+")"; 				danger = true; 			}     			if (!en.des) {  				if (en.danger) { 					var randx = Math.floor(Math.random()*4)-2; 					var randy = Math.floor(Math.random()*4)-2;  					en.x = en.tx+randx; 					en.y = en.ty+randy; 				} else { 					en.x += (en.tx-en.x)/100; 					en.y += (en.ty-en.y)/100; 					var randx = 0; 					var randy = 0; 				}  				en.r += (50-en.r)/100; 				if (Math.abs(50-en.r)<2&&!en.danger) { 					en.tx=en.x; 					en.ty=en.y; 					en.danger=true; 				} 				ctx.beginPath(); 				ctx.arc(en.x-en.r*en.eyeX,en.y-en.r*en.eyeY, en.r*en.eyeR, 0, 2*Math.PI); 				ctx.stroke(); 				ctx.beginPath(); 				ctx.arc(en.x+en.r*en.eyeX,en.y-en.r*en.eyeY, en.r*en.eyeR, 0, 2*Math.PI); 				ctx.stroke();  				ctx.beginPath(); 				ctx.arc(en.x,en.y+en.r/4, en.r/3, 2*Math.PI, Math.PI); 				ctx.stroke();  				ctx.beginPath(); 				ctx.arc(en.x,en.y, en.r, 0, 2*Math.PI); 				ctx.stroke(); 			} else {  				en.eyeR += (0.5-en.eyeR)/5; 				en.op += (0-en.op)/5; 				// en.sp += (5-en.sp)/20; 				en.r += (100-en.r)/20; 				en.spl += (2.5-en.spl)/5; 				ctx.beginPath(); 				ctx.arc(en.x-en.r*en.eyeX,en.y-en.r*en.eyeY, en.r*en.eyeR, 0, 2*Math.PI); 				ctx.stroke(); 				ctx.beginPath(); 				ctx.arc(en.x+en.r*en.eyeX,en.y-en.r*en.eyeY, en.r*en.eyeR, 0, 2*Math.PI); 				ctx.stroke(); 				ctx.beginPath(); 				ctx.arc(en.x,en.y+en.r/2, en.r*en.eyeR, Math.PI,2*Math.PI); 				ctx.stroke();  			ctx.beginPath(); 			ctx.arc(en.x,en.y, en.r, 0, 2*Math.PI); 			ctx.stroke(); 			}  			//spikes 			for (var s = 0; s < 12; s++) { 				var a = (Math.PI*2/12)*s+ga; 				ctx.beginPath(); 				ctx.moveTo(en.x+Math.sin(a)*en.r,en.y+Math.cos(a)*en.r); 				ctx.lineTo(en.x+Math.sin(a)*en.r*1.2,en.y+Math.cos(a)*en.r*1.2); 				ctx.lineTo(en.x+Math.sin(a+Math.PI/en.sp)*en.r*en.spl,en.y+Math.cos(a+Math.PI/en.sp)*en.r*en.spl); 				ctx.lineTo(en.x+Math.sin(a-Math.PI/en.sp)*en.r*en.spl,en.y+Math.cos(a-Math.PI/en.sp)*en.r*en.spl); 				ctx.lineTo(en.x+Math.sin(a)*en.r*1.2,en.y+Math.cos(a)*en.r*1.2); 				ctx.stroke(); 				// ctx.fill(); 			}  			if (Math.abs(0.5-en.eyeR)<0.01) { 				var rand = Math.floor(Math.random()*2); 				if (enemies[i].nuked&&rand==1) { 				enemies.splice(i,1);  				} else { 				enemies[i] = new Enemy();  				} 			} 		}        	    if (danger) { 	    	dangera += 0.05+(100-health)/1000; 	    	if (dangera>=Math.PI) { 	    		dangera=0; 	    	} 	    	ctx.fillStyle='rgba(255,0,0,'+(1-Math.sin(dangera))/4+')'; 			ctx.fillRect(0,0,stage.w,stage.h); 			if (health<10) { 		    	ctx.fillStyle='rgba(255,255,0,'+(Math.sin(dangera))+')'; 		    	ctx.strokeStyle='rgba(255,255,0,'+(Math.sin(dangera))+')';  			    ctx.lineWidth = 10; 			    ctx.beginPath(); 			    ctx.lineJoin = 'round'; 			    ctx.moveTo(stage.w/2,stage.h/4); 			    ctx.lineTo(stage.w/2+stage.h/7,stage.h/2); 			    ctx.lineTo(stage.w/2-stage.h/7,stage.h/2); 			    ctx.closePath(); 			    ctx.stroke();  			    ctx.font = "bold 130px arial"; 			    ctx.textAlign = "center";  			    ctx.textBaseline = "middle";  			    ctx.fillText("!",stage.w/2,stage.h/2.5);  			    ctx.font = "bold 50px arial"; 			    ctx.fillText("LOW HEALTH",stage.w/2,stage.h*0.6); 			} 	    } else { 	    	dangera = 0; 	    }  	    healthprog += (health-healthprog)/5; 	    ctx.fillStyle='#00ffff'; 	    ctx.font = "30px arial"; 	    ctx.textAlign = "left";  	    ctx.textBaseline = "middle";  	    ctx.fillText("Health: ",20,40);  	    ctx.fillText("Score: "+score,stage.w-200,40); 	    // ctx.fillText("Step:   "+(Date.now()-steptime),20,120); 	    if (health>30) { 	    	ctx.fillStyle='rgba(0,255,255,0.8)'; 		} else { 	    	ctx.fillStyle='rgba(255,0,0,0.8)'; 		} 		ctx.lineWidth = 2; 	    ctx.fillRect(130,25,healthprog*3,30); 	    ctx.strokeStyle = "#00ffff"; 	    ctx.strokeRect(130,25,300,30); 	     	    if (health<0) { 	    	gameover = true; 	    }  	} else {	   	    ctx.fillStyle='rgba(0,255,255,0.3)'; 	    ctx.fillRect((stage.w-220)/2,stage.h*0.65-25,againprog,50);      	ctx.fillStyle='#00ffff'; 	    ctx.font = "bold 130px arial"; 	    ctx.textAlign = "center";  	    ctx.textBaseline = "middle";  	    ctx.fillText("GAME OVER",stage.w/2,stage.h/3); 	    ctx.font = "bold 50px arial"; 	    ctx.fillText("SCORE: "+score,stage.w/2,stage.h/2);  	    ctx.font = "bold 30px arial";  	    ctx.fillText("PLAY AGAIN",stage.w/2,stage.h*0.65); 	    ctx.strokeRect((stage.w-220)/2,stage.h*0.65-25,220,50);  	    againprog += (0-againprog)/50;  	}  		ctx.strokeStyle = "#00ffff"; 		ctx.fillStyle = "#00ffff"; 			ctx.lineWidth = 2; 		if (fireact) { 			firetm++; 			if(firetm>5) {  				cannons.push(new Cannon(pointer.x+(stage.w-pointer.x)/2.5,pointer.y+(stage.h-pointer.y)/2.5,pointer.x,pointer.y)); 				cannons.push(new Cannon(pointer.x-(pointer.x)/2.5,pointer.y+(stage.h-pointer.y)/2.5,pointer.x,pointer.y));   				firetm=0; 			}  			arm.x=Math.floor(Math.random()*50)-25+stage.w; 			arm.y=Math.floor(Math.random()*50)-25+stage.h; 			arm2.x=Math.floor(Math.random()*30)-15; 			arm2.y=Math.floor(Math.random()*30)-15+stage.h; 		} else { 			arm.x=stage.w; 			arm.y=stage.h; 			arm2.x=0; 			arm2.y=stage.h; 		}       		for (var i = 0; i < cannons.length; i++) { 			 			var can = cannons[i];  			can.x += (can.tx-can.x)/5; 			can.y += (can.ty-can.y)/5; 			can.r += (0-can.r)/5;  			ctx.beginPath(); 			ctx.arc(can.x,can.y, can.r, 0, 2*Math.PI); 			ctx.fill();   			if (can.r<2&&!gameover) { 				for (var a = 0; a < enemies.length; a++) { 					var en = enemies[a]; 					var dx = can.x-en.x; 					var dy = can.y-en.y; 					var dis = dx*dx+dy*dy; 					if (dis<en.r*en.r) {  						// enemies.splice(a,1); 						if (!enemies[a].des) { 						enemies[a].des = true;  						score+=10;  						} 					}  				} 				 			}  			if (can.r<1&&!gameover) { 				for (var a = 0; a < powers.length; a++) { 					var en = powers[a]; 					var dx = can.x-en.x; 					var dy = can.y-en.y; 					var dis = dx*dx+dy*dy; 					if (dis<en.r*en.r) {  						if (!en.des) { 							powers[a].des = true; 							if (en.type==1) { 							health = 100; 							}  						} 					}  				}  			}  			if (can.r<1&&gameover) {  				if (can.x>(stage.w-220)/2&&can.y>stage.h*0.65-25&&can.x<(stage.w-220)/2+220&&can.y<stage.h*0.65-25+50) {  					againprog +=1; 					if (againprog>220) { 						newGame(); 						gameover = false; 					} 				} 			} 			if (Math.abs(can.tx-can.x)<1) {     				cannons.splice(i,1); 			}   		 		} 		ctx.beginPath(); 		ctx.moveTo(pointer.x-20,pointer.y); 		ctx.lineTo(pointer.x+20,pointer.y); 		ctx.stroke();  		ctx.beginPath(); 		ctx.moveTo(pointer.x,pointer.y-20); 		ctx.lineTo(pointer.x,pointer.y+20); 		ctx.stroke();  			ctx.beginPath(); 			ctx.arc(pointer.x,pointer.y, 8, 0, 2*Math.PI); 			ctx.stroke();  		ctx.beginPath(); 		ctx.moveTo(pointer.x+(arm.x-pointer.x)/3,pointer.y+(arm.y-pointer.y)/3+10); 		ctx.lineTo(pointer.x+(arm.x-pointer.x)/2.5,pointer.y+(arm.y-pointer.y)/2.5+10); 		ctx.lineTo(pointer.x+(arm.x-pointer.x)/2,pointer.y+(arm.y-pointer.y)/2+10); 		ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.5,pointer.y+(arm.y-pointer.y)/1.5+50); 		ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.2,pointer.y+(arm.y-pointer.y)/1.2+80); 		ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.1,pointer.y+(arm.y-pointer.y)/1.1+100); 		ctx.stroke(); 		ctx.beginPath(); 		ctx.moveTo(pointer.x+(arm.x-pointer.x)/3-10,pointer.y+(arm.y-pointer.y)/3); 		ctx.lineTo(pointer.x+(arm.x-pointer.x)/2.5-10,pointer.y+(arm.y-pointer.y)/2.5); 		ctx.lineTo(pointer.x+(arm.x-pointer.x)/2-10,pointer.y+(arm.y-pointer.y)/2); 		ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.5-50,pointer.y+(arm.y-pointer.y)/1.5); 		ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.2-80,pointer.y+(arm.y-pointer.y)/1.2); 		ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.1-100,pointer.y+(arm.y-pointer.y)/1.1); 		ctx.stroke();  		ctx.beginPath(); 		ctx.moveTo(pointer.x+(arm.x-pointer.x)/3,pointer.y+(arm.y-pointer.y)/3-10); 		ctx.lineTo(pointer.x+(arm.x-pointer.x)/2.5,pointer.y+(arm.y-pointer.y)/2.5-10); 		ctx.lineTo(pointer.x+(arm.x-pointer.x)/2,pointer.y+(arm.y-pointer.y)/2-10); 		ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.5,pointer.y+(arm.y-pointer.y)/1.5-50); 		ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.2,pointer.y+(arm.y-pointer.y)/1.2-80); 		ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.1,pointer.y+(arm.y-pointer.y)/1.1-100); 		ctx.stroke();    		ctx.beginPath(); 		ctx.moveTo(arm2.x+pointer.x-(pointer.x)/3,pointer.y+(arm2.y-pointer.y)/3+10); 		ctx.lineTo(arm2.x+pointer.x-(pointer.x)/2.5,pointer.y+(arm2.y-pointer.y)/2.5+10); 		ctx.lineTo(arm2.x+pointer.x-(pointer.x)/2,pointer.y+(arm2.y-pointer.y)/2+10); 		ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.5,pointer.y+(arm2.y-pointer.y)/1.5+50); 		ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.2,pointer.y+(arm2.y-pointer.y)/1.2+80); 		ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.1,pointer.y+(arm2.y-pointer.y)/1.1+100); 		ctx.stroke();  		ctx.beginPath(); 		ctx.moveTo(arm2.x+pointer.x-(pointer.x)/3-10,pointer.y+(arm2.y-pointer.y)/3); 		ctx.lineTo(arm2.x+pointer.x-(pointer.x)/2.5-10,pointer.y+(arm2.y-pointer.y)/2.5); 		ctx.lineTo(arm2.x+pointer.x-(pointer.x)/2-10,pointer.y+(arm2.y-pointer.y)/2); 		ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.5-50,pointer.y+(arm2.y-pointer.y)/1.5); 		ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.2-80,pointer.y+(arm2.y-pointer.y)/1.2); 		ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.1-100,pointer.y+(arm2.y-pointer.y)/1.1); 		ctx.stroke();  		ctx.beginPath(); 		ctx.moveTo(arm2.x+pointer.x-(pointer.x)/3,pointer.y+(arm2.y-pointer.y)/3-10); 		ctx.lineTo(arm2.x+pointer.x-(pointer.x)/2.5,pointer.y+(arm2.y-pointer.y)/2.5-10); 		ctx.lineTo(arm2.x+pointer.x-(pointer.x)/2,pointer.y+(arm2.y-pointer.y)/2-10); 		ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.5,pointer.y+(arm2.y-pointer.y)/1.5-50); 		ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.2,pointer.y+(arm2.y-pointer.y)/1.2-80); 		ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.1,pointer.y+(arm2.y-pointer.y)/1.1-100); 		ctx.stroke();     		ctx.beginPath(); 		ctx.arc(pointer.x+(arm.x-pointer.x)/3,pointer.y+(arm.y-pointer.y)/3, 10, 0, 2*Math.PI); 		ctx.arc(pointer.x+(arm.x-pointer.x)/2.5,pointer.y+(arm.y-pointer.y)/2.5, 10, 0, 2*Math.PI); 		ctx.arc(pointer.x+(arm.x-pointer.x)/2,pointer.y+(arm.y-pointer.y)/2, 10, 0, 2*Math.PI); 		ctx.arc(pointer.x+(arm.x-pointer.x)/1.5,pointer.y+(arm.y-pointer.y)/1.5, 50, 0, 2*Math.PI); 		ctx.arc(pointer.x+(arm.x-pointer.x)/1.2,pointer.y+(arm.y-pointer.y)/1.2, 80, 0, 2*Math.PI); 		ctx.arc(pointer.x+(arm.x-pointer.x)/1.1,pointer.y+(arm.y-pointer.y)/1.1, 100, 0, 2*Math.PI); 		ctx.stroke();  		 		ctx.beginPath(); 		ctx.arc(arm2.x+pointer.x-(pointer.x/3),pointer.y+(arm2.y-pointer.y)/3, 10, 0, 2*Math.PI); 		ctx.arc(arm2.x+pointer.x-(pointer.x/2.5),pointer.y+(arm2.y-pointer.y)/2.5, 10, 0, 2*Math.PI); 		ctx.arc(arm2.x+pointer.x-(pointer.x)/2,pointer.y+(arm2.y-pointer.y)/2, 10, 0, 2*Math.PI); 		ctx.arc(arm2.x+pointer.x-(pointer.x)/1.5,pointer.y+(arm2.y-pointer.y)/1.5, 50, 0, 2*Math.PI); 		ctx.arc(arm2.x+pointer.x-(pointer.x)/1.2,pointer.y+(arm2.y-pointer.y)/1.2, 80, 0, 2*Math.PI); 		ctx.arc(arm2.x+pointer.x-(pointer.x)/1.1,pointer.y+(arm2.y-pointer.y)/1.1, 100, 0, 2*Math.PI); 		ctx.stroke();       	ctx.fillStyle='#004444'; 	    ctx.font = "14px arial"; 	    ctx.textAlign = "center";  	    ctx.textBaseline = "middle";  	    ctx.fillText("Coronavirus Shooting Game, Designed & Developed by Faisal Jawed",stage.w/2,stage.h-20); }    // ------------------------------------------------------------------------------- events // ------------------------------------------------------------------------------- events // ------------------------------------------------------------------------------- events // ------------------------------------------------------------------------------- events  function toggleFullScreen() { 	var doc = window.document; 	var docEl = doc.documentElement;  	var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen; 	var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;  	if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) { 		requestFullScreen.call(docEl);  	} 	else { 		cancelFullScreen.call(doc);  	} }   var ox = 0; var oy = 0; function mousestart(e) { 	mxpos = (e.pageX-loffset)*scale; 	mypos = (e.pageY-toffset)*scale; 	pointer.x = mxpos; 	pointer.y = mypos;  // fireact = true;    } function mousemove(e) { 	mxpos = (e.pageX-loffset)*scale; 	mypos = (e.pageY-toffset)*scale; 	pointer.x = mxpos; 	pointer.y = mypos;  	// ball.vY += (mxpos-ox)/15*line.d;  	ox = mxpos; }  function mouseend(e) { // fireact = false;  }  var moveX = 0; var moveY = 0; var moveZ = 0;   function keydowned(e) { 	// if (e.keyCode==65) { 	// 	moveX = 10; 	// } else if (e.keyCode==68) { 	// 	moveX = -10; 	// } 	// if (e.keyCode==83) { 	// 	moveY = -10; 	// } else if (e.keyCode==87) { 	// 	moveY = 10; 	// }  	// if (e.keyCode==69) { 	// 	moveZ = 10; 	// } else if (e.keyCode==81) { 	// 	moveZ = -10; 	// } 	// console.log(e.keyCode); }    function keyuped(e) { 	// if (e.keyCode==65) { 	// 	moveX = 0; 	// } else if (e.keyCode==68) { 	// 	moveX = 0; 	// } 	// if (e.keyCode==87) { 	// 	moveY = 0; 	// } else if (e.keyCode==83) { 	// 	moveY = 0; 	// } 	// if (e.keyCode==81) { 	// 	moveZ = 0; 	// } else if (e.keyCode==69) { 	// 	moveZ = 0; 	// } 	// console.log("u"+e.keyCode); }    window.addEventListener('mousedown', function(e) { 	mousestart(e); }, false); window.addEventListener('mousemove', function(e) { 	mousemove(e); }, false); window.addEventListener('mouseup', function(e) { 	mouseend(e); }, false); window.addEventListener('touchstart', function(e) { 	e.preventDefault(); 	mousestart(e.touches[0]); }, false); window.addEventListener('touchmove', function(e) { 	e.preventDefault(); 	mousemove(e.touches[0]); }, false); window.addEventListener('touchend', function(e) { 	e.preventDefault(); 	mouseend(e.touches[0]); }, false);   window.addEventListener('keydown', function(e) { 	keydowned(e); }, false); window.addEventListener('keyup', function(e) { 	keyuped(e); }, false);  // ------------------------------------------------------------------------ stager // ------------------------------------------------------------------------ stager // ------------------------------------------------------------------------ stager // ------------------------------------------------------------------------ stager function _pexresize() { 	var cw = window.innerWidth; 	var ch = window.innerHeight; 	if (cw<=ch*stage.w/stage.h) { 		portrait = true; 		scale = stage.w/cw; 		loffset = 0; 		toffset = Math.floor(ch-(cw*stage.h/stage.w))/2; 		_pexcanvas.style.width = cw + "px"; 		_pexcanvas.style.height = Math.floor(cw*stage.h/stage.w) + "px"; 	} else { 		scale = stage.h/ch; 		portrait = false; 		loffset = Math.floor(cw-(ch*stage.w/stage.h))/2; 		toffset = 0; 		_pexcanvas.style.height = ch + "px"; 		_pexcanvas.style.width = Math.floor(ch*stage.w/stage.h) + "px"; 	} 	_pexcanvas.style.marginLeft = loffset +"px"; 	_pexcanvas.style.marginTop = toffset +"px"; }   window.requestAnimFrame = (function(){ 	return  window.requestAnimationFrame       || 	window.webkitRequestAnimationFrame || 	window.mozRequestAnimationFrame    || 	window.oRequestAnimationFrame      || 	window.msRequestAnimationFrame     || 	function( callback ){ 		window.setTimeout(callback, 1000 / 60); 	};})();    	var fps = 60;   	var nfcount = 0;  function animated() { 	requestAnimFrame(animated); 	enginestep();     	nfcount++;     ctx.fillStyle='#00ffff';     ctx.font = "12px arial";     ctx.textAlign = "left";      ctx.fillText("FPS: "+Math.floor(fps),10,stage.h-20); }  _pexresize(); animated();   function countfps() { 	fps = nfcount; 	nfcount = 0; } setInterval(countfps,1000);   </script> </body></html>

Coba Sekarang

Exciting HTML - Code

<!DOCTYPE html><html lang="en" ><head>  <meta charset="UTF-8">  <title>An Exciting HTML Game</title>  <link href="https://fonts.googleapis.com/css?family=Trade+Winds|Gloria+Hallelujah|Share+Tech" rel="stylesheet"><style>* {   margin: 0;   padding: 0; }  body {   background-color: #FDE3A7;   -webkit-transition-duration: 0.5s; /* Safari */   transition-duration: 0.5s; }  #container {  }  .game-narrative {   margin: 0 auto; /* Center the item vertically & horizontally */   position: fixed; /* Break it out of the regular flow */   top: 0; left: 0; bottom: 0; right: 0; /* Set the bounds in which to center it, relative to its parent/container */      padding: 20px;   display: flex;   justify-content: center;   align-items: center;   resize: both;   /* overflow: auto; */      max-width: 700px;   flex-direction: column;   text-align: center; }  .game-narrative-text {   font-family: 'Share Tech', sans-serif;   font-size: 2em;   margin: 10px; }  .game-btn {   font-family: 'Share Tech', sans-serif;   font-size: 2em;   margin: 20px;      -webkit-border-radius: 8;   -moz-border-radius: 8;   border-radius: 8px;   color: #ffffff;   font-size: 20px;   background-color: #d35400;   padding: 10px 20px 10px 20px;   border: solid #F89406 2px;   text-decoration: none;    }  .game-btn:hover {   background-color: #e67e22;   text-decoration: none; }  .game-btn:focus {   outline:0; }  #narrative-three-btns {   display: flex;   flex-flow: row; }  .dramatic-text {   font-family: 'Trade Winds', cursive;   font-size: 3em; }  .computer-threat {   font-family: 'Trade Winds', cursive;   font-size: 1.5em;   margin-top: 20px;   color: #c0392b; }  #header {   text-align: center;   margin: 10px;   margin-top: 30px;   color: #c0392b; }  #game-configuration {      margin: 0 auto; /* Center the item vertically & horizontally */     padding: 20px;   display: flex;   flex-direction: column;   justify-content: center;   align-items: center;   resize: both;    }  #identity-selection {   display: flex;   justify-content: center;   flex-direction: row; }  .identity {   margin: 0px 20px; }  #identity-label {   color: #FFF;   font-family: 'Share Tech', sans-serif;   font-size: 2em;   text-align: center;   vertical-align: middle;   margin: 20px; }  #game-grid {   display: flex;   flex-direction: column;   flex-wrap: nowrap;   justify-content: center;   align-items: center; }  .row {   display: flex;   flex-direction: row;   flex-wrap: nowrap; }  .cell {   font-family: 'Gloria Hallelujah', cursive;   color: #FFFFFF;   background-color: #121a21;   text-align: center;   width: 100px;   height: 100px;   font-size: 3em;   margin: 5px;      border-radius: 10px;   /* "pop-out" effect */   box-shadow: 6px 6px 0px 0px #090d10;   -webkit-transition-duration: 0.5s; /* Safari */   transition-duration: 0.5s; }  .cell:hover {   color: #e74c3c;   background-color: #34495e; }  .cell-selected {   color: #c0392b;   transform: translate(3px,3px);   box-shadow: 3px 3px 0px 0px #000000;   background-color: #121a21;    }  .cell-selected:hover {   /* Disabling hover on already selected cells */   color: #c0392b;   background-color: #121a21; }  .cell-win {   color: #e74c3c;   background-color: #34495e;   transition: all 1s ease-in-out;   transform: scale(1.05); }  .cell-win:hover {   /* Disabling hover on win animation cells */   background-color: #34495e; }  #game-over {   color: #FFF;   font-family: 'Share Tech', sans-serif;      margin: 0 auto; /* Center the item vertically & horizontally */   position: fixed; /* Break it out of the regular flow */   top: 0; left: 0; bottom: 0; right: 0; /* Set the bounds in which to center it, relative to its parent/container */      padding: 20px;   display: flex;   justify-content: center;   align-items: center;   resize: both;   /* overflow: auto; */      max-width: 700px;   flex-direction: column;   text-align: center; }  #game-end-heading {   font-size: 2em;   margin: 10px; }  #game-end-subheading {   font-size: 1.5em;   margin: 10px; }  #game-reset-btn {   font-family: 'Share Tech', sans-serif;   font-size: 2em;   margin: 20px;      -webkit-border-radius: 8;   -moz-border-radius: 8;   border-radius: 8px;   color: #ffffff;   font-size: 20px;   background-color: #d35400;   padding: 10px 20px 10px 20px;   border: solid #F89406 2px;   text-decoration: none;    }  #game-reset-btn: hover {   background: #3cb0fd;   text-decoration: none; } </style> </head><body><div id="container">   <div class="game-narrative" id="game-narrative-one">    <p class="game-narrative-text">In a world where two forces battle for domination of a war-torn landscape, only one will draw the line and reign supreme.</p>    <button class="game-btn" id="narrative-one-btn">...</button>  </div>   <div class="game-narrative" id="game-narrative-two">    <p class="game-narrative-text">The year is 2048.</p>    <p class="game-narrative-text">In a post apocalyptic galaxy run by giant corporations, you are a cybernetically enhanced space marine with no memory of their past.</p>    <button class="game-btn" id="narrative-two-btn">...</button>  </div>   <div class="game-narrative" id="game-narrative-three">    <p class="game-narrative-text">Are you the chosen one foretold by prophecy?</p>    <p class="game-narrative-text">Do you have the strength to survive...</p>    <div id="narrative-three-btns">      <button class="game-btn" id="narrative-three-btn">YES</button>      <div></div>      <a class="game-btn" id="puppies-btn" href="https://au.pinterest.com/explore/puppy-pictures/" target="_blank">NO</a>    </div>  </div>   <div id = "header">    <p class="dramatic-text">      <span id = "tic-text">Tic </span>      <span id = "tac-text">Tac </span>      <span id = "doom-text">DOOM</span>    </p>  </div>    <div id="game-configuration">      <h2 id = "identity-label">Choose your mark</h2>    <div id="identity-selection" class="row">      <div class="cell identity-cell" value="X">X</div>      <div class="cell identity-cell" value="O">O</div>    </div>  </div>   <div id="game-grid">    <div class="row">      <div class="cell game-cell" id="c00"></div>      <div class="cell game-cell" id="c01"></div>      <div class="cell game-cell" id="c02"></div>    </div>    <div class="row">      <div class="cell game-cell" id="c10"></div>      <div class="cell game-cell" id="c11"></div>      <div class="cell game-cell" id="c12"></div>    </div>    <div class="row">      <div class="cell game-cell" id="c20"></div>      <div class="cell game-cell" id="c21"></div>      <div class="cell game-cell" id="c22"></div>    </div>    <div class="computer-threat">      <p><span id ="computer-threat-text"></span></p>    </div>  </div>   <div id="game-over">    <h2 id="game-end-heading"></h2>    <h3 id="game-end-subheading"></h2>    <button class="game-btn" id="game-reset-btn">↺ Play again</button>  </div>   </div>  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><script>  // The game object, used to store current state of the game. var game = {   board: [[null, null, null],           [null, null, null],           [null, null, null]], // Rows of the game grid in 2D array form.   playerMark: "", // The mark 'X' or 'O' the player uses to select a cell.   aiMark: "", // The mark the computer uses to select a cell.   turnsPlayed: 0, // If reaches 9 without a win, its a draw.   playerTurn: true, // Flag tracking who's turn it is.   nextMove: [null, null], // Used to store move calculated by minimax.   winner: "", // Stores winning mark.   gameOver: false // Flag indicating whether the game has ended. }  var darkColor = "#2c3e50";  var $narrativeOne = $("#game-narrative-one"); var $narrativeTwo = $("#game-narrative-two"); var $narrativeThree = $("#game-narrative-three"); var $narrativeFour = $("#game-narrative-four");  var computerThreats = ["Prepare to suffer extreme humiliation!",                       "I will destroy you!",                       "I am invincible!",                       "You cannot defeat me!",                       "You will be annihilated!",                       "You will fail!",                       "Fear me!",                       "Vengeance is mine!",                       "I hunger!"]  var $identityBtn = $(".identity-cell"); var $gameBtn = $(".game-cell"); var $gameResetBtn = $("#game-reset-btn");  $(document).ready(function() {   $narrativeOne.hide();   $narrativeTwo.hide();   $narrativeThree.hide();   $narrativeFour.hide();   $("#header").hide();   $("#game-configuration").hide();   $("#game-grid").hide();   $("#game-over").hide();      $narrativeOne.fadeIn(500); });  $("#narrative-one-btn").on('click', function() {   var transitionPeriod = 500;   $narrativeOne.fadeOut(transitionPeriod);   setTimeout(function() {     $narrativeTwo.fadeIn(transitionPeriod);   }, transitionPeriod); });  $("#narrative-two-btn").on('click', function() {   var transitionPeriod = 500;   $narrativeTwo.fadeOut(transitionPeriod);   setTimeout(function() {     $narrativeThree.fadeIn(transitionPeriod);   }, transitionPeriod); });  $("#narrative-three-btn").on('click', function() {   var transitionPeriod = 500;   $narrativeThree.fadeOut(transitionPeriod);   setTimeout(function() {     $("#tic-text").hide();     $("#tac-text").hide();     $("#doom-text").hide();     $("#header").show();          $("#tic-text").show();     setTimeout(function(){       $("#tac-text").show();       setTimeout(function() {         $("body").css("background-color", darkColor);         $("#doom-text").show();                  setTimeout(function(){           $("#game-configuration").fadeIn(transitionPeriod);                    }, transitionPeriod * 2);       }, transitionPeriod * 2);     }, transitionPeriod * 2);   }, transitionPeriod * 2); });    // When a player initially chooses their mark before playing. $identityBtn.on('click', function() {    // Grabbing value from the HTML element   game.playerMark = $(this).attr("value");   if (game.playerMark === "X"){     game.aiMark = "O";   } else {     game.aiMark = "X";   }      startGame(); });  function startGame(){   // Transitioning between config menu to game grid.   $("#game-configuration").hide();   $("#game-grid").fadeIn(500);      if (!game.playerTurn)     aiPlay(); }  $gameBtn.on('click', function() {   if (game.playerTurn) {     // Parsing player's move     var cell = $(this).attr("id");     var row = parseInt(cell[1]);     var col = parseInt(cell[2]);      if (spaceFree(game.board, row, col)) {       makePlay(game.playerMark, row, col); // Commit move to the game board.       checkPlay(game.playerMark); // Check if the move resulted in a win.     } else {       // Do nothing (space already taken)     }   } else {     // Do nothing (not player's turn)   }  });  function aiPlay() {   var aiThinkingDelay = 1000;   setTimeout(function() {          minimax(game, 0); // Use minimax to calculate the next optimal move.     makePlay(game.aiMark, game.nextMove[0], game.nextMove[1]); // Commit move to the game board.     checkPlay(game.aiMark); // Check if the move resulted in a win.               var randThreat = computerThreats[Math.floor(Math.random() * computerThreats.length)];     $("#computer-threat-text").text(randThreat);     $("#computer-threat-text").fadeIn(250);     setTimeout(function() {       $("#computer-threat-text").fadeOut(250);     }, 2000);        }, aiThinkingDelay);       }  function checkPlay(mark) {   const gameOverDelay = 2000;   if (hasWon()) {     const gameOverDelay = 2000; // Wait two second to allow win animation to play out.     // Turn has resulted in a valid win     setTimeout(function() {       gameOver(mark); // After delay, transition to game-over menu.        }, gameOverDelay);        } else if (game.turnsPlayed >= 9) {     // There are no more turns that can be made, it is a draw.     // Draw animation?     setTimeout(function() {       gameOver("draw");     }, gameOverDelay);        } else {     game.playerTurn = !game.playerTurn; // Toggle turn between pc and player.     if (!game.playerTurn) {       aiPlay(); // If it's not the players turn, initiate computer turn.     }   } }  function spaceFree(board, row, col) {   // Checks if a player can mark a selected cell.   return (board[row][col] === null) }  function makePlay(mark, row, col) {   // Saving move to game       game.board[row][col] = mark;   game.turnsPlayed++;      var cellId = "#c" + row + "" + col;   // Stylising game cell to reflect an ai move.   $(cellId).text(mark);   $(cellId).addClass("cell-selected");    }  function minimax(state, depth){   // Inspired by http://neverstopbuilding.com/minimax      // Creating a replicated object of the game state to avoid   // editing the existing game state (it has been passed 'byRef')   // See http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript/5344074#5344074   var gameState = JSON.parse(JSON.stringify(state));      if (gameState.gameOver){     // If game is in an end state (win, lose, draw) return corresponding score (10, -10, 0)     return getScore(gameState, depth);        } else {     depth++; // Iterate depth as algorithm gets recursively deeper. Used to choose moves that prolong defeat, hasten victory.     var moves = []; // Used to store all possible moves in this current game state.     var scores = []; // Used to store the corresponding scores resulting from each of those moves.          moves = generateAllAvailableMoves(gameState); // Generate an array of all available coordinates on the game board.          for (var i = 0; i < moves.length; i++) {       // For each possible move, create a simulation game state where the move has been played.       var possibleGameState = generatePossibleGame(gameState, moves[i]);       // Then store the resultant score, recursively calling the minimax algorithm.       scores.push(minimax(possibleGameState, depth));     }          if (gameState.playerTurn) {       // MAX       var maxScoreIndex = findIndexOfMax(scores); // In the case of it being the protagonist's turn, find the highest equating score.       game.nextMove = moves[maxScoreIndex]; // Store move to be executed.       return scores[maxScoreIndex];      } else {       // MIN       var minScoreIndex = findIndexOfMin(scores); // In the case of it being the opponent's turn, find the lowest equating score.       game.nextMove = moves[minScoreIndex];        return scores[minScoreIndex];     }   } }  // Equates game states to scores // Wins equating to 10, loses equating to -10, draws or continued gameplay equating to 0. function getScore(gameState, depth) {   if (gameState.gameOver && gameState.winner === gameState.playerMark) {     return 10 - depth;   } else if (gameState.gameOver && gameState.winner === gameState.aiMark) {     return depth - 10;   } else {     return 0;   } }  // Returns an array of the coordinates (row, column) of all available cells in a particular game state. function generateAllAvailableMoves(gameState){   const rowLength = 3;   const colLength = 3;   var availableMoves = [];      for (var row = 0; row < rowLength; row++){     for (var col = 0; col < colLength; col++){       if (spaceFree(gameState.board, row, col)){         // Scanning the game board for free spaces         availableMoves.push([row, col]);       }     }   }   return availableMoves; }  // Creates a simulated game state when a specified move is executed. function generatePossibleGame(state, move){   var gameState = JSON.parse(JSON.stringify(state));      // Execute the move   if (gameState.playerTurn){     gameState.board[move[0]][move[1]] = gameState.playerMark;   } else {     gameState.board[move[0]][move[1]] = gameState.aiMark;   }   gameState.turnsPlayed++;      // Check if the move has resulted in an end game state.   if (checkWin(gameState)) {     gameState.gameOver = true;     if (gameState.playerTurn){       gameState.winner = gameState.playerMark;     } else {       gameState.winner = gameState.aiMark;     }   } else if (gameState.turnsPlayed >= 9) {     gameState.gameOver = true;     gameState.winner = "draw";   } else {     gameState.playerTurn = !gameState.playerTurn;   }      return gameState; }  // Finds the index of the highest value in an array. function findIndexOfMax(arr) {   var maxIndex = 0;   if (arr.length > 1) {     for (var i = 1; i < arr.length; i++){       if (arr[i] > arr[maxIndex]){         maxIndex = i;       }     }   }   return maxIndex; }  // Finds the index of the lowest value in an array. function findIndexOfMin(arr) {   var minIndex = 0;   if (arr.length > 1) {     for (var i = 1; i < arr.length; i++){       if (arr[i] < arr[minIndex]){         minIndex = i;       }     }   }   return minIndex; }  // Used to check if the last played move has resulted in a win. function checkWin(gameState) {   const numRows = 3;   const numCols = 3;    // Check for diagonal win right to left   if (gameState.board[0][0] === gameState.board[1][1] &&     gameState.board[1][1] === gameState.board[2][2] &&     gameState.board[0][0] !== null) {     // Right to left, top to bottom diagonal win     return true;   }    // Check for diagonal win left to right   if (gameState.board[0][2] === gameState.board[1][1] &&     gameState.board[1][1] === gameState.board[2][0] &&     gameState.board[0][2] !== null) {     // Left to right, top to bottom diagonal win     return true;   }    // Checking each row for a horizontal win   for (var row = 0; row < numRows; row++) {     if (gameState.board[row][0] === gameState.board[row][1] &&       gameState.board[row][1] === gameState.board[row][2] &&       gameState.board[row][0] !== null) {       // Horizontal win       return true;     }   }    // Checking each column for a vertical win   for (var col = 0; col < numCols; col++) {     if (gameState.board[0][col] === gameState.board[1][col] &&       gameState.board[1][col] === gameState.board[2][col] &&       gameState.board[0][col] !== null) {       // Vertical win       return true;     }   }   return false; }  /**   // Pre-Minimax AI, randomly selecting a space on the board.  function aiGenerateRandomPlay() {   var randRow = Math.floor(Math.random() * 3);   var randCol = Math.floor(Math.random() * 3);   var validMove = spaceFree(randRow, randCol);   while (!validMove) {     randRow = Math.floor(Math.random() * 3);     randCol = Math.floor(Math.random() * 3);     validMove = spaceFree(randRow, randCol);   }   return [randRow, randCol]; }  */   // Checking whether the last move made has triggered a win, and if so triggers a win animation. function hasWon() {   const numRows = 3;   const numCols = 3;    // Check for diagonal win right to left   if (game.board[0][0] === game.board[1][1] &&     game.board[1][1] === game.board[2][2] &&     game.board[0][0] !== null) {     // Right to left, top to bottom diagonal win     console.log("Left to right, top to bottom diagonal win");     // Win animation     $("#c00").addClass("cell-win");     $("#c11").addClass("cell-win");     $("#c22").addClass("cell-win");          return true;   }    // Check for diagonal win left to right   if (game.board[0][2] === game.board[1][1] &&     game.board[1][1] === game.board[2][0] &&     game.board[0][2] !== null) {     // Left to right, top to bottom diagonal win     console.log("Right to left, top to bottom diagonal win");     // Win animation     $("#c02").addClass("cell-win");     $("#c11").addClass("cell-win");     $("#c20").addClass("cell-win");          return true;   }    // Checking each row for a horizontal win   for (var row = 0; row < numRows; row++) {     if (game.board[row][0] === game.board[row][1] &&       game.board[row][1] === game.board[row][2] &&       game.board[row][0] !== null) {       // Horizontal win       console.log("Horizontal win");       // Win animation       $("#c" + row + "0").addClass("cell-win");       $("#c" + row + "1").addClass("cell-win");       $("#c" + row + "2").addClass("cell-win");       return true;     }   }    // Checking each column for a vertical win   for (var col = 0; col < numCols; col++) {     if (game.board[0][col] === game.board[1][col] &&       game.board[1][col] === game.board[2][col] &&       game.board[0][col] !== null) {       // Vertical win       console.log("Vertical win");       // Win animation       $("#c0" + col).addClass("cell-win");       $("#c1" + col).addClass("cell-win");       $("#c2" + col).addClass("cell-win");       return true;     }   }    return false; }  // Transitions the screen from the game grid to a game over menu. function gameOver(winCase) {   $("#game-grid").hide();   $("#game-over").fadeIn(500);    if (winCase === game.playerMark) {     // Player wins     $("#game-end-heading").text("You have claimed victory.");     $("#game-end-subheading").text("May you bathe in tic-tac-toe glory.");        } else if (winCase === game.aiMark) {     // PC wins     $("#game-end-heading").text("Alas, the computer has claimed victory!");     $("#game-end-subheading").text("May they bathe their circuits in tic-tac-toe glory.");   } else {     // Draw     $("#game-end-heading").text("X and O, ancient enemies, have concluded their bout in a draw.");     $("#game-end-subheading").text("Perhaps their feud will be settled in another life, another dimension...");   } }  $gameResetBtn.on('click', resetGame);  function resetGame() {   $("#game-over").hide();   $("#game-grid").hide();   $("#game-configuration").fadeIn(500);    $(".game-cell").empty();   $(".cell").removeClass("cell-selected");   $(".cell").removeClass("cell-win");      game.board = [     [null, null, null],     [null, null, null],     [null, null, null]   ];   game.turnsPlayed = 0;   game.playerTurn = true; }   </script> </body></html>

Coba Sekarang

Minesweeper - Code

<!DOCTYPE html><html lang="en" ><head>  <meta charset="UTF-8">  <title>Minesweeper</title>      <link href="https://fonts.googleapis.com/css?family=Space+Mono:400,700" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"><style>@charset "UTF-8"; *, *:before, *:after {   box-sizing: inherit; }  html {   box-sizing: border-box; }  body {   text-align: center;   color: #333;   padding: 20px 20px 100px;   background-color: #efefef;   font-family: "Space Mono", monospace; }  h1 {   margin: 0 0 32px; }  p {   font-size: 1em;   line-height: 1.25em; }  a {   color: inherit; }  img {   height: auto;   max-width: 100%; }  .wrap {   text-align: center;   position: relative;   display: inline-block; }  .legend {   font-size: 14px;   margin: 0 auto 32px; } .legend h4, .legend p {   margin: 0 0 6px; } .legend code {   background: #e3e3e3; } .legend code .key {   color: #ec433c; } .legend code .click {   color: #2a48ec; }  .top {   border: 6px solid #e3e3e3;   background-color: #e3e3e3; }  #scoreboard {   display: flex;   padding-bottom: 12px;   justify-content: space-between; } #scoreboard .select-wrap {   font-weight: 700;   vertical-align: top;   display: inline-block; } #scoreboard .select-wrap select {   margin: 0;   height: 36px;   border-radius: 0;   border-width: 3px;   border-style: solid;   background-color: #d1d1d1;   border-color: white #9e9e9e #9e9e9e white; } #scoreboard .select-wrap select:hover, #scoreboard .select-wrap select:focus {   backgroudn-color: #ebebeb; } #scoreboard .reset {   padding: 0 4px;   font-size: 24px;   cursor: pointer;   font-weight: 700;   line-height: 30px;   border-width: 3px;   border-style: solid;   background-color: #d1d1d1;   border-color: white #9e9e9e #9e9e9e white; } #scoreboard .reset:hover, #scoreboard .reset:focus {   outline: none;   background-color: #ebebeb; } #scoreboard .counter {   padding: 0 4px;   color: #ec433c;   border: 3px inset;   line-height: 30px;   letter-spacing: 0.08em;   display: inline-block;   background: #333;   text-shadow: 0 0 2px #ec433c; } #scoreboard .counter:first-of-type {   margin-right: 20px; } #scoreboard .counter:last-of-type {   margin-left: 20px; }  #grid {   margin: 0 auto;   position: relative;   display: inline-block; } #grid ::-moz-selection {   background-color: transparent; } #grid ::selection {   background-color: transparent; } #grid.disabled .cell {   pointer-events: none; } #grid.disabled .status-indicator {   top: 50%;   left: 50%;   z-index: 11;   width: 8vw;   height: 8vw;   font-size: 4vw;   cursor: pointer;   line-height: 8vw;   position: absolute;   border-radius: 50%;   pointer-events: auto;   background-color: #d1d1d1;   transform: translate(-50%, -50%);   border: 1px solid rgba(51, 51, 51, 0.25); } #grid.disabled .status-indicator::after {   content: ""; } #grid.disabled.win .status-indicator::after {   content: "😎"; } #grid.disabled.lose .status-indicator::after {   content: "☹️"; } #grid .row {   display: flex; } #grid .cell {   cursor: pointer;   width: 24px;   height: 24px;   position: relative;   background-color: #d1d1d1;   border-width: 3px;   border-style: solid;   border-color: white #9e9e9e #9e9e9e white; } #grid .cell i {   left: 0;   bottom: 0;   margin: 0;   width: 100%;   font-size: 14px;   font-weight: 700;   font-style: normal;   position: absolute;   line-height: 24px; } #grid .cell::before {   top: 0;   left: 0;   right: 0;   bottom: 0;   z-index: 1;   content: "";   position: absolute;   background-color: #d1d1d1; } #grid .cell::after {   top: 50%;   left: 50%;   content: "";   position: absolute;   transform: translate(-50%, -50%); } #grid .cell:hover::before {   background-color: #ebebeb; } #grid .cell.revealed {   border: 1px solid #b8b8b8; } #grid .cell.revealed::before {   display: none; } #grid .cell.revealed .flag {   display: none; } #grid .cell .flag {   top: 50%;   left: 50%;   z-index: 1;   width: 10px;   height: 4px;   position: absolute;   border-style: solid;   border-width: 4px 0 4px 10px;   transform: translate(-50%, -50%);   border-color: transparent transparent transparent #ec433c; } #grid .cell.maybe .flag {   border-color: transparent transparent transparent #d7af42; } #grid .cell.mine {   background-color: #ec433c; } #grid .cell.mine::after {   border-radius: 50%;   width: 12px;   height: 12px;   background-color: #333; } #grid .cell.incorrect .flag::before, #grid .cell.incorrect .flag::after {   top: 50%;   z-index: 1;   left: -13px;   height: 2px;   width: 16px;   content: "";   position: absolute;   background-color: black; } #grid .cell.incorrect .flag::before {   transform: rotate(-45deg); } #grid .cell.incorrect .flag::after {   transform: rotate(45deg); } #grid .cell.mousedown {   border: none; }  #leaderboard {   margin-top: 20px;   text-align: center; } #leaderboard h4 {   margin: 0 0 10px; } #leaderboard ul {   margin: 0;   padding: 10px;   display: inline-block;   background-color: rgba(209, 209, 209, 0.5); } #leaderboard ul li {   padding: 2px;   list-style: none; } #leaderboard ul li span {   font-weight: 900;   text-transform: capitalize; } #leaderboard ul li.highlight {   background-color: #fef178; } #leaderboard button {   border: none;   outline: none;   cursor: pointer;   font-size: 12px;   font-weight: 700;   -webkit-appearance: none;      -moz-appearance: none;           appearance: none;   background: none;   text-decoration: underline; }  .cell.white {   color: #fff; }  .cell.gray-light {   color: #efefef; }  .cell.gray-mid {   color: #e3e3e3; }  .cell.gray {   color: #d1d1d1; }  .cell.gray-dark {   color: #808080; }  .cell.black {   color: #333; }  .cell.red {   color: #ec433c; }  .cell.maroon {   color: #a6070f; }  .cell.purple {   color: #a42887; }  .cell.yellow {   color: #d7af42; }  .cell.yellow-light {   color: #fef178; }  .cell.blue {   color: #2a48ec; }  .cell.blue-dark {   color: #233db7; }  .cell.green {   color: #2bb13d; }  .cell.turquoise {   color: #28907d; }  #devbox {   top: 10px;   right: 10px;   position: fixed;   text-align: left;   max-width: 300px;   color: #fff;   background-color: #333; } #devbox p {   margin: 0;   font-size: 12px;   padding: 10px 20px; } #devbox p + p {   padding-top: 5px; } </style></head><body><header class="site-header" role="banner">  <div class="wrap">    <h1>minesweeper</h1>    <div class="legend">      <p><strong>flag:</strong> <code><span class="key">alt</span>+<span class="click">click</span></code></p>    </div>  </div></header><main class="site-main" role="main">  <div class="wrap">    <div id="board">      <div class="top">        <div id="scoreboard">          <div id="minecounter" class="counter"></div>          <div>            <div class="select-wrap">              <select name="level" id="level">                <option value="beginner">Beginner</option>                <option value="intermediate">Intermediate</option>                <option value="expert" selected>Expert</option>              </select>            </div>            <button class="reset">🙂</button>          </div>          <div id="timer" class="counter"></div>        </div>        <div id="grid"></div>      </div>      <div class="bottom"></div>    </div>  </div></main>  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script>  $(document).ready(function() {  var $body,       $document,       $board,       $grid,       timer,       time,       unstarted;    function _init() {     // Cache some common DOM queries     $document = $(document);     $body = $('body');     $body.addClass('loaded');      // Start Minesweeper     $board = $('#board');     $grid = $('#grid');     var $timer = $('#timer');     var $mineCounter = $('#minecounter');     var $levelSelect = $('#level');     var levels = {       'beginner': '9x9x10',       'intermediate': '16x16x44',       'expert': '16x30x99'     };     var level = $levelSelect.val();     var levelParams,         rows,         $rows,         columns,         cellCount,         mines,         freeCells,         mineTally,         pauseTime,         beginnerHighScore = 999,         intermediateHighScore = 999,         expertHighScore = 999;      var countColors = {0: '', 1: 'blue', 2: 'green', 3: 'red', 4: 'blue-dark', 5: 'maroon', 6: 'turquoise', 7: 'purple', 8: 'gray-dark'};      time = 0;     timer = false;     unstarted = true;     var statusIndicator = '<div class="status-indicator"></div>';      // Check for existing high score     // if (localStorage.getItem('beginner')) {     //   beginnerHighScore = localStorage.getItem('beginner');     //   populateHighScore('beginner', localStorage.getItem('beginner'));     // }     // if (localStorage.getItem('intermediate')) {     //   intermediateHighScore = localStorage.getItem('intermediate');     //   populateHighScore('intermediate', localStorage.getItem('intermediate'));     // }     // if (localStorage.getItem('expert')) {     //   expertHighScore = localStorage.getItem('expert');     //   populateHighScore('expert', localStorage.getItem('expert'));     // }      function setLevel(level) {       levelParams = levels[level];       rows = parseInt(levelParams.split('x')[0]);       columns = parseInt(levelParams.split('x')[1]);       cellCount = rows*columns;       mines = levelParams.split('x')[2];       freeCells = cellCount - mines;     }      function setBoard(level) {       // Clear Grid       $grid.html(statusIndicator).removeClass('disabled lose win').addClass('unstarted');        // Set Up Grid       setLevel(level);        // Set unstarted       unstarted = true;        // Build Rows       for (r=0;r<rows;r++) {         var newCells = '';         // Build Cells         for (c=0;c<columns;c++) {           newCells += '<div class="cell"></div>';         }         $grid.append('<div class="row">'+newCells+'</div>');       }        // Set Minecounter       mineTally = mines;       $mineCounter.html(mineTally);        // Set Timer       resetTimer();     }      // Set initially     setBoard(level);     // Set on reset     $('html').on('mousedown', '.reset', function() {       $(this).text('😮');     }).on('mouseup', '.reset', function() {       $(this).text('🙂');       stopTimer();       level = $levelSelect.val();       setBoard(level);     });     // Set when clicking status indicator     $('html').on('click', '.status-indicator', function() {       level = $levelSelect.val();       setBoard(level);     });     // Set on level change     $levelSelect.on('change', function() {       stopTimer();       resetTimer();       level = $levelSelect.val();       setBoard(level);     });      // Lay Mines     function layMines(level, clickedCellIndex) {       $rows = $('.row');       var freeCells = $('.cell');       var takenCells = [clickedCellIndex];        // Lay Mines       for (m=0;m<mines;m++) {         var mineCell = Math.floor(Math.random() * Math.floor(freeCells.length));         // If it happens to be the clicked cell, skip it         if ($.inArray(mineCell, takenCells) > -1) {           m--;           continue;         }         takenCells.push(mineCell);         $(freeCells[mineCell]).addClass('mine');       }        // Identify Cell Numbers       var $cells = $('.cell');       for (c=0;c<$cells.length;c++) {         var $cell = $($cells[c]);         $cell.attr('data-cell', c);         // Skip if it's a mine         if ($cell.is('.mine')) {           continue;         }          var mineCount = 0;         var rowPos = Math.floor(c/columns);         var $currentRow = $cell.closest('.row');         $currentRow.attr('data-row', rowPos);         var rowCells = $currentRow.find('.cell');         var cellPos = c % columns;          if ($(rowCells[cellPos - 1]).is('.mine')) {           mineCount++;         }         if ($(rowCells[cellPos + 1]).is('.mine')) {           mineCount++;         }          if (rowPos > 0) {           var prevRowCells = $($rows[rowPos - 1]).find('.cell');           if ($(prevRowCells[cellPos - 1]).is('.mine')) {             mineCount++;           }           if ($(prevRowCells[cellPos]).is('.mine')) {             mineCount++;           }           if ($(prevRowCells[cellPos + 1]).is('.mine')) {             mineCount++;           }         }          if (rowPos < rows - 1) {           var nextRowCells = $($rows[rowPos + 1]).find('.cell');           if ($(nextRowCells[cellPos - 1]).is('.mine')) {             mineCount++;           }           if ($(nextRowCells[cellPos]).is('.mine')) {             mineCount++;           }           if ($(nextRowCells[cellPos + 1]).is('.mine')) {             mineCount++;           }         }          if (mineCount > 0) {           $cell.html('<i>'+mineCount+'</i>');           // Styling classes           var colorClass = countColors[mineCount];           $cell.addClass(colorClass);         } else {           $cell.addClass('zero');         }       }     }      // Click cell to start game     $('html').off('click', '#grid.unstarted .cell').on('click', '#grid.unstarted .cell', function(e) {       $grid.removeClass('unstarted');       if (unstarted && !$(e.target).is('.mine')) {         layMines(level, $('.cell').index(this));         timer = window.setInterval(startTimer, 1000);         unstarted = false;       }     });      // Timer Functions     function resetTimer() {       $timer.html('000');       time = 0;     }     function startTimer() {       time++;       if (time < 10) {         $timer.html('00'+time);       } else if (time > 9 && time < 100) {         $timer.html('0'+time);       } else {         $timer.html(time);       }     }      function stopTimer() {       window.clearInterval(timer);     }      function pauseTimer() {       stopTimer();       pauseTime = parseInt($('#timer').html());     }      function unpauseTimer() {       time = pauseTime;       timer = window.setInterval(startTimer, 1000);       pauseTime = false;     }      // Pause when window loses focus     $(window).on('blur', function() {       pauseTimer();     }).on('focus', function() {       if (pauseTime) {         unpauseTimer();       }     });      // Check Cell     function checkCell($cell) {       if (!$cell.is('.mine') && !$cell.is('.revealed')) {         cellClick($cell, 'reveal');          if ($cell.is('.zero')) {           $cell.trigger('click');         }       }     }      // Clicking on a cell     function cellClick($cell, action) {       // If Flagging       if (action === 'flag' && !$cell.is('.revealed')) {         if ($cell.is('.flagged')) {           $cell.removeClass('flagged');           $cell.addClass('maybe');           mineTally++;           updateMinecounter(mineTally);         } else if ($cell.is('.maybe')) {           $cell.removeClass('maybe');           var flag = $cell.find('.flag');           flag.remove();         } else {           $cell.addClass('flagged');           $cell.append('<span class="flag"></span>');           mineTally--;           updateMinecounter(mineTally);         }         // If Revealing       } else if (action === 'reveal') {         $cell.addClass('revealed');          // If it's a mine you lose!         if ($cell.is('.mine')) {           lose();         }          statusCheck();       } else if (action === 'clear') {         if (!$cell.is('.revealed') || $cell.is('.zero')) {           return;         }          clearClick($cell);       }     }      // Update Minecounter     function updateMinecounter(mineTally) {       if (mineTally < 10) {         $mineCounter.html('0'+mineTally);       } else {         $mineCounter.html(mineTally);       }     }      // Clicking on a Zero cell     function zeroClick($cell) {       var cellPos = $cell.prevAll().length;       var $currentRow = $cell.closest('.row');       var rowPos = parseInt($currentRow.attr('data-row'));       var rowCells = $currentRow.find('.cell');        checkCell($(rowCells[cellPos - 1]));       checkCell($(rowCells[cellPos + 1]));        if (rowPos > 0) {         var prevRowCells = $($rows[rowPos - 1]).find('.cell');         checkCell($(prevRowCells[cellPos - 1]));         checkCell($(prevRowCells[cellPos]));         checkCell($(prevRowCells[cellPos + 1]));       }        if (rowPos < rows) {         var nextRowCells = $($rows[rowPos + 1]).find('.cell');         checkCell($(nextRowCells[cellPos - 1]));         checkCell($(nextRowCells[cellPos]));         checkCell($(nextRowCells[cellPos + 1]));       }     }      // Clicking on a number to clear free cells     function clearClick($cell) {       var cellPos = $cell.prevAll().length;       var $currentRow = $cell.closest('.row');       var rowPos = parseInt($currentRow.attr('data-row'));       var rowCells = $currentRow.find('.cell');       var adjacentCells = [];       var correctClear = true;       var adjacentMines = 0;       var adjacentFlags = 0;       var i;       adjacentCells.push($(rowCells[cellPos - 1]));       adjacentCells.push($(rowCells[cellPos + 1]));        if (rowPos > 0) {         var prevRowCells = $($rows[rowPos - 1]).find('.cell');         adjacentCells.push($(prevRowCells[cellPos - 1]));         adjacentCells.push($(prevRowCells[cellPos]));         adjacentCells.push($(prevRowCells[cellPos + 1]));       }        if (rowPos < rows) {         var nextRowCells = $($rows[rowPos + 1]).find('.cell');         adjacentCells.push($(nextRowCells[cellPos - 1]));         adjacentCells.push($(nextRowCells[cellPos]));         adjacentCells.push($(nextRowCells[cellPos + 1]));       }        for (i = 0; i < adjacentCells.length; i++) {         // add to mine count         if ($(adjacentCells[i]).is('.mine')) {           adjacentMines++;         }         // add to flag cout         if ($(adjacentCells[i]).is('.flagged')) {           adjacentFlags++;         }       }        if (adjacentFlags === adjacentMines) {         for (i = 0; i < adjacentCells.length; i++) {           if ($(adjacentCells[i]).is('.mine')) {             if ($(adjacentCells[i]).is('.flagged')) {               continue;             } else {               $(adjacentCells[i]).addClass('revealed');               correctClear = false;             }           } else if ($(adjacentCells[i]).is('.flagged')) {             correctClear = false;             $(adjacentCells[i]).addClass('incorrect');             lose();           }         }          if (correctClear) {           for (i = 0; i < adjacentCells.length; i++) {             if (!$(adjacentCells[i]).is('.mine')) {               if ($(adjacentCells[i]).is('.zero')) {                 zeroClick($(adjacentCells[i]));               }               cellClick($(adjacentCells[i]), 'reveal');             }           }         }       } else {         return;       }     }      // Check status     function statusCheck() {       if ($('.cell.revealed').length == freeCells) {         stopTimer();         var winTime = $('#timer').html();         $grid.addClass('disabled win');         resetHighScore(level, winTime);       }     }      function lose() {       $grid.addClass('disabled lose');       stopTimer();     }      // Clicking on a cell     $('html').on('click', '.cell', function(e) {       e.preventDefault();       var action = 'reveal';       var $cell = $(this);        if (e.altKey || e.which === 3) {         action = 'flag';       } else if ($cell.is('.revealed') || e.which === 1 & e.which === 3) {         action = 'clear';       }        if ($cell.is('.flagged') && !e.altKey) {         return;       }        if ($cell.is('.zero')) {         zeroClick($cell);       }        cellClick($cell, action);     });      // Mouse down on a cell     $('html').on('mousedown', '.cell:not(.revealed,.flagged)', function(e) {       if (!e.altKey && e.which !== 3) {         $(this).addClass('mousedown');       }     }).on('mouseup mouseleave', '.cell.mousedown', function() {       $(this).removeClass('mousedown');     });      // Scoreboard functionality     function resetHighScore(level, winTime) {       if (localStorage.getItem(level)) {         if (winTime < localStorage.getItem(level)) {           localStorage.setItem(level, winTime);           populateHighScore(level, winTime, true);         }       } else {         localStorage.setItem(level, winTime);         populateHighScore(level, winTime, true);       }     }      function populateHighScore(level, highScore, highlight) {       if (!$('#leaderboard').length) {         $board.find('.bottom').append('<div id="leaderboard"><h4>High Scores</h4><ul><li class="beginner"></li><li class="intermediate"></li><li class="expert"></li></ul><div><button id="score-reset" class="score-reset">Clear Scores</button></div></div>');       }       if (highlight === true) {         $('#leaderboard .highlight:not(.'+level+')').removeClass('highlight');         $('#leaderboard .'+level).addClass('highlight');       }       var highScoreDisplay = parseInt(highScore,10);       $('#leaderboard .'+level).html('<span>'+level+'</span>: '+highScoreDisplay+' seconds');     }      function clearScores() {       localStorage.clear();       $('#leaderboard').remove();     }      // Clicking on score reset to clear scores     $('html').on('click', '#score-reset', clearScores);   }    _init(); });   </script> </body></html>

Coba Sekarang

DRUM SEQUENCER - Code

<!DOCTYPE html><html lang="en" ><head>  <meta charset="UTF-8">  <title>DRUM SEQUENCER w/ SAMPLE PAD</title>  <style>@import url('https://fonts.googleapis.com/css2?family=Lexend+Zetta&display=swap');  * { 	margin: 0; 	padding: 0; 	user-select: none; }  html { 	font-family: 'Lexend Zetta', sans-serif; 	background-color: rgb(248, 248, 248); }  .container { 	background-color: rgb(255, 255, 255); 	/* box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.07); */ 	height: 370px; 	width: 950px; 	border-radius: 11px; 	position: absolute; 	top: 50%; 	left: 50%; 	transform: translate(-50%, -50%); 	padding: 12px 20px; 	display: flex; 	border: 1px solid rgba(0, 0, 0, 0.2); }  .sequencer { 	display: flex; 	height: 270px; 	width: 840px; 	margin-top: 100px; }  #p0 { 	margin-top: 109px; 	width: 160px; 	padding-left: 2px; 	padding-right: 26px; }  .drum-name { 	font-weight: bold; 	font-size: 12px; 	letter-spacing: -0.5px; 	line-height: 58px; 	padding: 0px 36px 0px 16px; 	border-radius: 6px; 	margin-bottom: 4px; 	background-color: #fff; 	color: rgba(0, 0, 0, 0.6); 	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05); 	border: 1px solid rgba(0, 0, 0, 0.2); }  #controls { 	position: absolute; 	left: 20px; 	right: 20px; 	top: 0px; 	height: 120px; }  #controls-left-side { 	float: left; 	height: 100%; }  #controls-right-side { 	float: right; 	height: 100%; }  .sampler { 	display: inline; 	padding: 30px 48px; 	border-radius: 6px; 	line-height: 120px; 	text-align: center; 	background-color: #fff; 	color: rgba(0, 0, 0, 0.6); 	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05); 	border: 1px solid rgba(0, 0, 0, 0.2); 	position: relative; }  .pressed { 	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05); 	top: 2px; 	background-color: rgba(0, 0, 0, 0.1); }  #bpm { 	font-weight: bold; 	color: rgba(0, 0, 0, 0.6); 	line-height: 120px; 	position: absolute; 	top: 25px; 	right: 200px; }  #bpm-slider { 	position: absolute; 	top: 24px; 	right: 150px; 	width: 180px; }  #bpm-slider:hover { 	cursor: pointer; }  #controls p { 	display: inline; 	font-size: 12px; 	position: relative; 	top: -1px; }  #clear-track { 	font-weight: bold; 	color: rgba(0, 0, 0, 0.6); 	padding: 16px 24px; 	border-radius: 6px; 	box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.05); 	border: 1px solid rgba(0, 0, 0, 0.2); 	margin-left: 36px; 	margin-right: 2px; 	position: relative; 	-webkit-user-select: none; }  #clear-track:hover { 	cursor: pointer; 	border: 1px solid rgba(0, 0, 0, 0.4); 	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05); }  #clear-track:active { 	top: 0px; 	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05); }  .d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8, .d9, .d10, .d11, .d12, .d13, .d14, .d15, .d16 { 	background-color: rgba(0, 0, 0, 0); 	height: 100%; 	width: 50%; 	margin: 5px 2px; 	display: inline-block; }  .sample { 	background-color: rgba(0, 0, 0, 0.1); 	margin: 4px 0px; 	display: block; 	height: 60px; 	border-radius: 6px; 	border: 1px solid rgba(0, 0, 0, 0.1); 	box-sizing: border-box; }  .sample:hover { 	cursor: pointer; }  .row-highlight { 	background-color: rgba(28, 29, 28, 0.2); }  .item-selected { 	background-color: rgba(0, 0, 0, 0.8); }  #d-split { 	margin-right: 20px; }  input[type=range] { 	height: 50px; 	-webkit-appearance: none; 	margin: 10px 0; 	width: 100%; }  input[type=range]:focus { 	outline: none; }  input[type=range]::-webkit-slider-runnable-track { 	width: 100%; 	height: 10px; 	cursor: pointer; 	box-shadow: 0px 0px 0px #000000; 	background: #EDEDED; 	border-radius: 5px; 	border: 1px solid #C2C2C2; }  input[type=range]::-webkit-slider-thumb { 	box-shadow: 0px 0px 0px #707070; 	border: 1px solid #A3A3A3; 	height: 42px; 	width: 15px; 	border-radius: 17px; 	background: #FFFFFF; 	cursor: pointer; 	-webkit-appearance: none; 	margin-top: -17px; }  input[type=range]:focus::-webkit-slider-runnable-track { 	background: #EDEDED; }  input[type=range]::-moz-range-track { 	width: 100%; 	height: 7px; 	cursor: pointer; 	background: #EDEDED; 	border-radius: 50px; 	border: 1px solid #C2C2C2; }  input[type=range]::-moz-range-thumb { 	border: 1px solid #A3A3A3; 	height: 42px; 	width: 13px; 	border-radius: 17px; 	background: #FFFFFF; 	cursor: pointer; }  input[type=range]::-ms-track { 	width: 100%; 	height: 10px; 	cursor: pointer; 	animate: 0.2s; 	background: transparent; 	border-color: transparent; 	color: transparent; }  input[type=range]::-ms-fill-lower { 	background: #EDEDED; 	border: 1px solid #C2C2C2; 	border-radius: 10px; }  input[type=range]::-ms-fill-upper { 	background: #EDEDED; 	border: 1px solid #C2C2C2; 	border-radius: 10px; }  input[type=range]::-ms-thumb { 	margin-top: 1px; 	border: 1px solid #A3A3A3; 	height: 43px; 	width: 15px; 	border-radius: 50px; 	background: #FFFFFF; 	cursor: pointer; }  input[type=range]:focus::-ms-fill-lower { 	background: #EDEDED; }  input[type=range]:focus::-ms-fill-upper { 	background: #EDEDED; }                 /* .parent, .parent2 { 	margin-top: 10px; 	display: flex; 	flex-wrap: no-wrap; }  .kick, .clap { 	width: 50%; 	height: 40px; 	background-color: rgba(0, 0, 0, 0.1); 	margin: 0px 2px; 	line-height: 50px; 	text-align: center; 	font-weight: bold; 	font-family: "Courier New"; 	font-size: 12px; 	border-radius: 12px; 	box-sizing: border-box; }  .kick:hover, .clap:hover { 	cursor: pointer; }  .item-selected { 	background-color: salmon; }  .row { 	background-color: rgba(0, 0, 0, 0.25); } */ </style> </head><body><html lang="en"><head>	<meta charset="UTF-8">	<meta name="viewport" content="width=device-width, initial-scale=1.0">	<title>Drum Sequencer</title>	<link rel="stylesheet" href="./style.css">	<link rel="icon" type="image/png" href="./favicon.png"></head><body>	 	<div class="container">		<div id="p0">			<p class="drum-name">KICK</p>			<p class="drum-name">CLAP</p>			<p class="drum-name">HIHAT</p>			<p class="drum-name">RIM</p>		</div> 		<div id="controls">			<div id="controls-left-side">				<div class="sampler" id="sampler1">Q</div>				<div class="sampler" id="sampler2">W</div>				<div class="sampler" id="sampler3">E</div>				<div class="sampler" id="sampler4">R</div>			</div> 			<div id="controls-right-side">				<p id="bpm">130 BPM</p>				<input type="range" min="30" max="200" value="130" id="bpm-slider">	 				<p id="clear-track">CLEAR</p>			</div>		</div> 		<div class="sequencer">			<div class="d1">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div> 			<div class="d2">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div>	 			<div class="d3">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div>	 			<div class="d4" id="d-split">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div>	 			<div class="d5">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div>	 			<div class="d6">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div>	 			<div class="d7">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div>	 			<div class="d8" id="d-split">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div>	 			<div class="d9">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div>	 			<div class="d10">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div>	 			<div class="d11">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div>	 			<div class="d12" id="d-split">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div>	 			<div class="d13">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div>	 			<div class="d14">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div>	 			<div class="d15">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div>	 			<div class="d16">				<div class="sample" data-sample="kick.wav"></div>				<div class="sample" data-sample="clap.wav"></div>				<div class="sample" data-sample="hihat.wav"></div>				<div class="sample" data-sample="rim.wav"></div>			</div>		</div>	</div> 	<script src="./app.js"></script></body></html>	   <script>  const rows = document.querySelector(".sequencer").children;  const kick = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/kick.mp3"), 	clap = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/clap.mp3"), 	hihat = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/hihat.mp3"), 	rim = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/rim.mp3"), 	Q = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/Q.mp3"), 	W = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/W.mp3"), 	E = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/E.mp3"), 	R = new Audio("https://raw.githubusercontent.com/kucerajacob/DRUM-SEQUENCER/master/audio/R.mp3");  const item = document.querySelectorAll(".sample");  // Checkbox toggle functionality item.forEach(function (el) { 	el.onclick = function () { 		if (el.classList.contains("item-selected")) { 			el.classList.remove("item-selected"); 		} else { 			el.classList.add("item-selected"); 		} 	} });  // Clear button functionality document.getElementById("clear-track").onclick = function () { 	[].forEach.call(item, function (el) { 		el.classList.remove("item-selected"); 	}); }  // Sample pad key press functionality document.onkeydown = function (e) { 	e = e || window.event;  	switch (e.key) { 		case "q": 			Q.load(); 			Q.play(); 			document.getElementById("sampler1").classList.add("pressed"); 			break; 		case "w": 			W.load(); 			W.play(); 			document.getElementById("sampler2").classList.add("pressed"); 			break; 		case "e": 			E.load(); 			E.play(); 			document.getElementById("sampler3").classList.add("pressed"); 			break; 		case "r": 			R.load(); 			R.play(); 			document.getElementById("sampler4").classList.add("pressed"); 			break;	 	} }  document.onkeyup = function (e) { 	e = e || window.event;  	switch (e.key) { 		case "q": 			// Q.pause(); 			// Q.currentTime = 0; 			document.getElementById("sampler1").classList.remove("pressed"); 			break; 		case "w": 			// W.pause(); 			// W.currentTime = 0; 			document.getElementById("sampler2").classList.remove("pressed"); 			break; 		case "e": 			// E.pause(); 			// E.currentTime = 0; 			document.getElementById("sampler3").classList.remove("pressed"); 			break; 		case "r": 			// R.pause(); 			// R.currentTime = 0; 			document.getElementById("sampler4").classList.remove("pressed"); 			break;	 	} }  // BPM slider const bpmSlider = document.getElementById("bpm-slider"); const bpmText = document.getElementById("bpm"); var BPM = bpmSlider.value;  bpmText.innerHTML = bpmSlider.value + " BPM";  bpmSlider.oninput = function () { 	bpmText.innerHTML = this.value + " BPM"; 	BPM = parseInt(((60 / bpmSlider.value) * 1000) / 4); }  let i = -1; rowLoop = () => { 	setTimeout(function () { 		i++;  		if (i === rows.length) { 			i = 0; 			document.querySelector(".d16").childNodes[1].classList.remove("row-highlight"); 			document.querySelector(".d16").childNodes[3].classList.remove("row-highlight"); 			document.querySelector(".d16").childNodes[5].classList.remove("row-highlight"); 			document.querySelector(".d16").childNodes[7].classList.remove("row-highlight"); 		}  		document.querySelector(".d" + (i + 1)).childNodes[1].classList.add("row-highlight"); 		document.querySelector(".d" + (i + 1)).childNodes[3].classList.add("row-highlight"); 		document.querySelector(".d" + (i + 1)).childNodes[5].classList.add("row-highlight"); 		document.querySelector(".d" + (i + 1)).childNodes[7].classList.add("row-highlight");  		if (i > 0) { 			document.querySelector(".d" + i).childNodes[1].classList.remove("row-highlight"); 			document.querySelector(".d" + i).childNodes[3].classList.remove("row-highlight"); 			document.querySelector(".d" + i).childNodes[5].classList.remove("row-highlight"); 			document.querySelector(".d" + i).childNodes[7].classList.remove("row-highlight"); 		}  		document.querySelectorAll(".d" + (i + 1)).forEach(function (bruh) { 			if (bruh.childNodes[1].classList.contains("row-highlight") && bruh.childNodes[1].classList.contains("item-selected")) { 				kick.load(); 				kick.play(); 			}  			if (bruh.childNodes[3].classList.contains("row-highlight") && bruh.childNodes[3].classList.contains("item-selected")) { 				clap.load(); 				clap.play(); 			}  			if (bruh.childNodes[5].classList.contains("row-highlight") && bruh.childNodes[5].classList.contains("item-selected")) { 				hihat.load(); 				hihat.play(); 			}  			if (bruh.childNodes[7].classList.contains("row-highlight") && bruh.childNodes[7].classList.contains("item-selected")) { 				rim.load(); 				rim.play(); 			} 		});  		rowLoop(); 	}, BPM); }  // Call rowLoop() function rowLoop();   </script> </body></html>

Coba Sekarang

Thanks for clicking.

͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏

Baca juga :

Semangat berkarya mekipun hasil copy paste!

Blogger : Cerdasin62+

Mau donasi keh?

Dana Paypal

Dana - 0887435373103

Jika dana kalian terlalu banyak bisa beri admin sedikit banyak dana sesuka hati. klik icon panah di atas

Pemblokir Iklan Terdeteksi

CerdasIn +62.

Kumpulan Code Html Fun

Tic tac toe - Code

Dragons vs Unicorns - Code

Snake CSS3 3D - Code

Flappy Bird - Code

Zombie Shooter - Code

Coronavirus Shooting - Code

Exciting HTML - Code

Minesweeper - Code

DRUM SEQUENCER - Code

Mau donasi keh?

You may like these posts

Post a Comment

MusicallyDown CapCut Download Video Tanpa Tanda Air

Download Apk Mod Free Fire v1.39 Anti Banned

Arena of Valor

Mengenal 7 Jenis Tipe Data C++ Dan Contoh Penggunaannya

Cara Melihat dan Mengetahui Tanggal Lahir di TikTok

Generate Link

Cookies Consent

Pemblokir Iklan Terdeteksi

Kumpulan Code Html Fun

Tic tac toe - Code

Dragons vs Unicorns - Code

Snake CSS3 3D - Code

Flappy Bird - Code

Zombie Shooter - Code

Coronavirus Shooting - Code

Exciting HTML - Code

Minesweeper - Code

DRUM SEQUENCER - Code

Wiki

Wiki

Mau donasi keh?

You may like these posts

Post a Comment

Generate Link

Cookies Consent