ایجاد سرگرمی در فضای وب یکی از ضروریات این فضا است . بازی های ساده که هر کسی با هر درجه از توانایی جسمی و ذهنی بتواند آنها را انجام دهد میتواند مخاطب هر سایت و وبلاگی را افزایش دهد.
سپس در Body دو جاوا اسکریپت یکی خارجی و یکی داخلی تعریف کرده ایم.
!function(t){function e(n){if(i[n])return i[n].exports;var o=i[n]={i:n,l:!1,exports:{}};return
t[n].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var i={};e.m=t,e.c=i,e.i=function(t){return
t},e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})}
,e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t}
;return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)}
,e.p="",e(e.s=4)}([function(t,e,i){"use strict";var n=this&&this.__extends||function()
{var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e)
{for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])};return function(e,i){function
n(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}();Object.defineProperty
(e,"__esModule",{value:!0});var o=function(){function t(t,e,i){this.ctx=t,this.x=e,this.y=i}return t}();
e.Component=o;var s=function(t){function e(e,i,n,o,s){var r=t.call(this,e,i,n)||this;return r.width=o,r.height=s,r}return
n(e,t),e}(o);e.RectComponent=s},function(t,e,i){"use strict";function n(t,e){return Math.round(t*e/100)}
function o(t,e){return Math.floor(Math.random()*(e-t+1))+t}function s(t){for(var e=[],i=1;i<arguments.length;i++)
e[i-1]=arguments[i];for(var n,o,r,h=0;h<e.length;++h){n=e[h];for(o in n)r=n[o],"object"==typeof r?
("object"!=typeof t[o]&&(t[o]={}),s(t[o],r)):t[o]=r}return t}Object.defineProperty
(e,"__esModule",{value:!0}),e.perOfNum=n,e.randomNum=o,e.merge=s},
function(t,e,i){"use strict";var n=this&&this.__extends||function(){var t=Object.setPrototypeOf||
{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)
&&(t[i]=e[i])};return function(e,i){function n(){this.constructor=e}t(e,i),
e.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}();
Object.defineProperty(e,"__esModule",{value:!0});var o,s=i(0);
!function(t){t[t.None=0]="None",t[t.Miss=1]="Miss",t[t.Hit=2]="Hit"}
(o=e.BulletStatus||(e.BulletStatus={}));var r=function(t){function e(e,i,n,s,r)
{var h=t.call(this,e,i,n)||this;return h.radius=s,h.options=r,h.status=o.None,h}return n(e,t),
e.prototype.draw=function(){var t=this.ctx,e=this.options;t.fillStyle=e.fill,t.beginPath(),
t.arc(this.x,this.y,this.radius,0,2*Math.PI),t.fill()},e}
(s.Component);e.Bullet=r},function(t,e,i){"use strict";
Object.defineProperty(e,"__esModule",{value:!0});
var n=i(5),o=i(2),s=i(7),r=i(6),h=i(1),a=function(){function t(t,e)
{this.options=t,this.parent=e,this.createStats=function(){var t=h.perOfNum(2,this.width),e=h.perOfNum(95,this.height),
i=h.perOfNum(2.5,this.height);this.stats=new r.Stats(this.ctx,t,e,i,this.options.stats)},
this.width=t.screen.width,this.height=t.screen.height,
this.gunStep=h.perOfNum(1.7,this.width),this.bulletStep=h.perOfNum(1,this.height),
this.createCanvas(),this.createStats(),this.createGun()}return
t.prototype.newGame=function(){this.gameOver=!1,this.bullets=[],this.bulletsLen=0,this.targets=[],
this.targetsLen=0,this.closestTarget=null,this.stats.update(0,0,0),this.createTargets()},
t.prototype.createCanvas=function(){var t=document.createElement("canvas");
t.width=this.width,t.height=this.height,
this.canvas=t,this.ctx=t.getContext("2d"),this.parent.appendChild(t),
this.canvasRect=t.getBoundingClientRect()},t.prototype.createGun=function(){var
t=this.stats,e=h.perOfNum(6,this.width),i=h.perOfNum(6,this.width),o=Math.round(this.width/2-e/2),
s=Math.round(t.y-t.fontSize-i);this.gun=new n.Gun(this.ctx,o,s,e,i,this.options.gun)},
t.prototype.createBullet=function(){var t=this.gun,e=this.bullets,i=t.x+t.width/2,n=t.y,
s=h.perOfNum(1,this.width);e.push(new o.Bullet(this.ctx,i,n,s,this.options.bullet)),this.bulletsLen=e.length},
t.prototype.createTargets=function(){for(var t=this.targets,e=this.targetsLen,i=h.perOfNum(1.8,this.width),
n=Math.round((this.width-i)/12),
o=i,r=i,a=n-i,u=n-i,l=0,c=void 0;l<e;++l)c=t[l],c.active()&&(c.y=c.y+c.height+i,c.draw());
for(var l=0;l<12;++l)t.push(new s.Target(this.ctx,o,r,a,u,this.options.target)),o+=a+i;this.targetsLen=t.length},
t.prototype.clear=function(){this.ctx.fillStyle=this.options.bg.fill,this.ctx.fillRect(0,0,this.width,this.height)}
,t.prototype.draw=function(){this.clear(),this.drawGun(),this.drawBullets(),this.drawTargets(),this.drawStats(), this.checkGameOver(),this.gameOver&&this.drawGameOver()},t.prototype.drawGun=function(){this.gun.draw()},
t.prototype.drawBullets=function(){for(var t,e=this.bullets,i=this.bulletsLen,n=this.bulletStep,s=0;s<i;++s)t=e[s],t.status!==o.BulletStatus.Hit&&
t.status!==o.BulletStatus.Miss&&(t.y+t.radius<=0?t.status=o.BulletStatus.Miss:(t.y-=n,t.draw()))},t.prototype.drawTargets=function(){for(var t,e,i=this.targets,n=this.targetsLen,s=this.bullets,r=this.bulletsLen,h=i[0],a=0;a<n;++a)if(t=i[a],t.active())
{for(var u=0;u<r;++u)if(e=s[u],t.hitByBullet(e)){--t.life,e.status=o.BulletStatus.Hit;break}t.active()&&
(t.draw(),t.y+t.height>h.y+h.height&&(h=t))}this.closestTarget=h},t.prototype.drawStats=function()
{for(var t,e=this.bullets,i=this.bulletsLen,n=this.stats,s=0,
r=0,h=0;h<i;++h)t=e[h].status,t===o.BulletStatus.Hit?++s:t===o.BulletStatus.Miss&&
++r;n.update(i,s,r),n.draw()},t.prototype.drawGameOver=function(){var t=this.ctx;t.save(),
t.globalAlpha=.8,t.fillStyle="white",t.fillRect(0,0,this.width,this.height);
var e=.1*this.width;t.globalAlpha=1,t.fillStyle="black",t.textAlign="center"
,t.textBaseline="bottom",t.font=e+"px sans-serif",t.fillText("Game Over"
,this.width/2,this.height/2),e/=3,t.textBaseline="top",t.font=e+"px sans-serif"
,t.fillText(this.stats.text,this.width/2,this.height/2),t.restore()},t.prototype.checkGameOver=function()
{var t=this.closestTarget;this.gameOver=t&&t.y+t.height>=this.gun.y},t.prototype.moveGun=function(t)
{var e=this.gun,i=this.width-e.width;t<0?t=0:t>i&&(t=i),e.x=t},
t.prototype.moveGunByMouse=function(t){this.moveGun(t.clientX-this.canvasRect.left-this.gun.width/2)}
,t.prototype.moveGunRight=function(){this.moveGun(this.gun.x+this.gunStep)},t.prototype.moveGunLeft=function()
{this.moveGun(this.gun.x-this.gunStep)},
t.prototype.destroy=function(){this.parent.removeChild(this.canvas)},t}();e.Playground=a},function(t,e,i)
{"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n,o=i(3),s=i(1);
!function(t){t[t.Space=32]="Space",t[t.Left=37]="Left",t[t.Up=38]="Up",
t[t.Right=39]="Right"}(n=e.Key||(e.Key={}));var r=function(){function t(e,i){void 0===i&&
(i=document.body),this.keys=[],this.options=s.merge({},t.defaultOptions,e),
this.parent=i;var n=new o.Playground(this.options,this.parent);this.playground=n,
this.canvas=n.canvas,this.bindMethods(),this.newGame()}return t.prototype.bindMethods=function()
{this.onMouseMove=this.onMouseMove.bind(this),
this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),
this.onKeyDown=this.onKeyDown.bind(this),this.onKeyUp=this.onKeyUp.bind(this),
this.onNewFrame=this.onNewFrame.bind(this),this.onNewTargets=this.onNewTargets.bind(this)},t.prototype.newGame=function()
{this.playground.newGame(),this.canvas.addEventListener("mousemove",this.onMouseMove),
.this.canvas.addEventListener("mousedown",this.onMouseDown),
this.canvas.addEventListener("mouseup",this.onMouseUp),
window.addEventListener("keydown",this.onKeyDown),window.addEventListener("keyup"
,this.onKeyUp),this.frameId=setInterval(this.onNewFrame,20),this.targetsId=setInterval
(this.onNewTargets,this.options.delays.targets)},t.prototype.stopGame=function(){var t=this.canvas;
t.removeEventListener("mousemove",this.onMouseMove),t.removeEventListener
("mousedown",this.onMouseDown),
t.removeEventListener("mouseup",this.onMouseUp),window.removeEventListener("keydown",this.onKeyDown),window.removeEventListener("keyup
",this.onKeyUp),clearInterval(this.frameId),clearInterval(this.targetsId),clearInterval(this.fireId)},
t.prototype.startFire=function(){if(!this.fireId){var t=this.playground;t.createBullet(),clearInterval(this.fireId)
,this.fireId=setInterval(function()
{return
t.createBullet()},this.options.delays.fire)}},t.prototype.stopFire=function(){clearInterval(this.fireId)
,this.fireId=null},t.prototype.onNewFrame=function(){var t=this.playground,e=this.keys;e[n.Left]?t.moveGunLeft():e[n.Right]&&
t.moveGunRight(),t.draw(),t.gameOver&&
this.stopGame()},t.prototype.onNewTargets=function(){this.playground.createTargets()},t.prototype.onMouseMove=function(t)
{this.playground.moveGunByMouse(t)},t.prototype.onMouseDown=function(t){this.startFire()},t.prototype.onMouseUp=function(t)
{this.stopFire()},t.prototype.onKeyDown=function(t){var e=t.keyCode||t.which;this.keys[e]=!0,e!==n.Space&&
e!==n.Up||this.startFire()},t.prototype.onKeyUp=function(t){var e=t.keyCode||t.which;this.keys[e]=!1,e!==n.Space&&
e!==n.Up||this.stopFire()},t.prototype.destroy=function(){this.stopGame(),this.playground.destroy()},t}();
r.defaultOptions={screen:{width:500,height:500},delays:{targets:2e3,fire:150},bg:{fill:"white"},
gun:{fill:"green",aim:!1},bullet:{fill:"green"},target:{fill:"green",
life:{fill:"white",max:1}},stats:{fill:"black"}},e.Game=r,window.ShootingRange=r},
function(t,e,i){"use strict";var n=this&&this.__extends||function()
{var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e) {t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])}
;return function(e,i){function n(){this.constructor=e}t
(e,i),e.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}();Object.defineProperty
(e,"__esModule",{value:!0});var o=i(0),s=function(t){function e(e,i,n,o,s,r){
var h=t.call(this,e,i,n,o,s)||this;return h.options=r,h}return n(e,t),e.prototype.draw=function(){
var t=this.options,e=this.ctx;e.fillStyle=t.fill,e.fillRect(this.x,this.y,this.width,this.height),t.aim&&
this.drawAim()},e.prototype.drawAim=function(){
var t=this.ctx,e=this.options,i=Math.round(this.x+this.width/2);t.save(),t.strokeStyle=e.fill,t.setLineDash
([12,12]),t.beginPath(),t.moveTo(i,this.y),t.lineTo(i,0),t.stroke(),t.restore()},e}(o.RectComponent);e.Gun=s}
,function(t,e,i){"use strict";var n=this&&this.__extends||function(){
var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){
t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])}
;return function(e,i){function n(){this.constructor=e}t(e,i),
e.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}
();Object.defineProperty(e,"__esModule",{value:!0});var o=i(0),
s=function(t){function e(e,i,n,o,s){var r=t.call(this,e,i,n)||this;return r.fontSize=o,
r.options=s,r.update(0,0,0),r}return n(e,t),e.prototype.update=function(t,e,i)
{this.text="Shoots: "+t+" / Hits: "+e+" / Miss: "+i}
,e.prototype.draw=function(){var t=this.ctx,e=this.options;t.font=this.fontSize+"
px sans-serif",t.fillStyle=e.fill,t.textBaseline="top",t.textAlign="
start",t.fillText(this.text,this.x,this.y)},e}(o.Component);e.Stats=s},function(t,e,i)
{"use strict";var n=this&&this.__extends||function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&
function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])};return function(e,i)
{function n(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}
();Object.defineProperty(e,"__esModule",{value:!0});var o=i(0),s=i(2),r=i(1),h=function()
{function t(){}return t}();e.TargetOptions=h;var a=function(t){function e(e,i,n,o,s,h){
var a=t.call(this,e,i,n,o,s)||this;return a.options=h,a.life=r.randomNum(1,h.life.max),
a.lifeFontSize=r.perOfNum(40,o),a}return n(e,t),e.prototype.draw=function(){
var t=this.ctx,e=this.options;t.fillStyle=e.fill,t.fillRect(this.x,this.y,this.width,this.height),
this.life>1&&this.drawLifeIndicator()},e.prototype.drawLifeIndicator=function(){
var t=this.x+this.width/2,e=this.y+this.height/2,i=this.ctx,n=this.options;i.fillStyle=n.life.fill,
i.textBaseline="middle",i.textAlign="center",i.font=this.lifeFontSize+"px sans-serif"
,i.fillText(this.life+"",t,e)},e.prototype.active=function(){return this.life>
0},e.prototype.hitByBullet=function(t){if(t.status!==s.BulletStatus.None)return!1;var
e=this.x,i=this.x+this.width,n=this.y+this.height,o=t.x-t.radius,r=t.x+t.radius;
return t.y-t.radius<=n&&(o>=e&&o<=i||r>=e&&r<=i)},e}(o.RectComponent);e.Target=a}]);
این کد ها با ایجاد بوم و سپس دادن افکت های مد نظر به آن بازی ما را ایجاد خواهند کرد.