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="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 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();
	}

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 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);
            }

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);
            }

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;

// if (e.keyCode==69) {
	// 	moveZ = 10;
	// } else if (e.keyCode==81) {
	// 	moveZ = -10;
	// }
	// console.log(e.keyCode);
}

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="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-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 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");
  
}

// 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 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-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>

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

CaraWudy.

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

Post a Comment

Blog CaraWudy.

Blog WudysoftApp.

Blog BapakWudy.

Blog Wudysoft.

Blog WudyTech.