Canvas- Bow and Arrow Shooting with Sound
Written by 4 July 2013
One exciting feature of any graphical programming language is to develop games. HTML5 Canvas can also be used for this purpose. For starting gaming, it is necessary to know how to move objects, change direction by mouse, playing sounds at special conditions, do actions with mouse and keyboard keys and etc. The following example is a bow and arrow game which uses Javascript to interact between HTML5 Canvas element, audio element and user's mouse. Click as many as you want to throw an arrow each time!
Code Snippet:
<!-- this script is provided by http://www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<div style="color: #B51717"><strong>Click as fast as you can!</strong></div>
<canvas id="myCanvas" width="400" height="230" onmousemove="gun(event)" onclick="shoot(event)"></canvas>
<audio controls id="sh1" style="display:none">
<source src="http://www.html5freecode.com/files/html5-canvas-shoot.ogg" type="audio/ogg">
<source src="http://www.html5freecode.com/files/html5-canvas-shoot.mp3" type="audio/mpeg">
<p>The browser doesn't support the audio element.</p>
</audio>
<audio controls id="sh2" style="display:none">
<source src="http://www.html5freecode.com/files/html5-canvas-shoot.ogg" type="audio/ogg">
<source src="http://www.html5freecode.com/files/html5-canvas-shoot.mp3" type="audio/mpeg">
<p>The browser doesn't support the audio element.</p>
</audio>
<audio controls id="sh3" style="display:none">
<source src="http://www.html5freecode.com/files/html5-canvas-shoot.ogg" type="audio/ogg">
<source src="http://www.html5freecode.com/files/html5-canvas-shoot.mp3" type="audio/mpeg">
<p>The browser doesn't support the audio element.</p>
</audio>
<audio controls id="sh4" style="display:none">
<source src="http://www.html5freecode.com/files/html5-canvas-shoot.ogg" type="audio/ogg">
<source src="http://www.html5freecode.com/files/html5-canvas-shoot.mp3" type="audio/mpeg">
<p>The browser doesn't support the audio element.</p>
</audio>
<script>
var cnv = document.getElementById('myCanvas')
var ctx = cnv.getContext('2d')
var deg = Math.PI/180
var spx, shoots=0, ply=1
sh=new Array;
xO=new Array();yO=new Array()
xn=new Array();yn=new Array()
xi=new Array();yi=new Array()
spx=10
ctx.beginPath()
ctx.shadowBlur = 3
ctx.strokeStyle= "blue"
ctx.lineWidth= 5
ctx.strokeRect(10,10,380,210)
ctx.closePath()
gun(null)
function gun(event){
var bb, x1, y1,x,y
if (event!=null){
bb = cnv.getBoundingClientRect()
x1 = (event.clientX-bb.left) * (cnv.width/bb.width)
y1 = (event.clientY-bb.top) * (cnv.height/bb.height)
}else{
x1=250
y1=115
}
var a,b,AA,BB,CC,Del, x0=10,y0=115,r=30, teta,fi,fi2,dx,dy
ctx.beginPath()
ctx.clearRect(0,15,r+15,150)
ctx.strokeStyle= "blue"
ctx.lineWidth=5
ctx.stroke()
ctx.strokeRect(10,10,380,210)
ctx.closePath()
ctx.translate(x0,y0)
x1=x1-x0
y1=y1-y0
x0=0
y0=0
a= (y1-y0)/(x1-x0)
b= -a*x0 + y0
AA= Math.pow(a,2)+1
BB= 2*a*b
CC= Math.pow(b,2)-Math.pow(r,2)
Del= Math.pow(BB,2) - 4*AA*CC
x=(-BB + Math.sqrt(Del))/(2*AA)
y= a*x + b
teta= Math.atan(y/x)
ctx.beginPath()
ctx.moveTo(0,0)
ctx.lineTo(x,y)
ctx.strokeStyle= "darkblue"
ctx.lineWidth=1.5
ctx.stroke()
ctx.closePath()
ctx.beginPath()
ctx.rotate(teta)
ctx.moveTo(r,0)
ctx.lineTo(r-6,6)
ctx.moveTo(r,0)
ctx.lineTo(r-6,-6)
ctx.stroke()
ctx.closePath()
ctx.rotate(-teta)
ctx.beginPath()
ctx.arc(x0,y0,r,teta+45*deg,teta-45*deg,true)
ctx.lineTo(0,0)
ctx.closePath()
ctx.strokeStyle= "brown"
ctx.lineWidth=2
ctx.stroke()
ctx.setTransform(1, 0, 0, 1, 0, 0)
}
function shoot(event){
var bb, x1, y1
bb = cnv.getBoundingClientRect()
x1 = (event.clientX-bb.left) * (cnv.width/bb.width)
y1 = (event.clientY-bb.top) * (cnv.height/bb.height)
xO.push(0)
yO.push(0)
xn.push(0)
yn.push(0)
xi.push(x1)
yi.push(y1)
document.getElementById('sh'+ply).play()
ply++
if(ply==5)ply=1
shoots++
if (shoots==1) sh.push(setInterval(shootOnce, 33))
}
function shootOnce(){
var a,b,AA,BB,CC,Del, x0=10,y0=115,r=30, teta,fi,fi2,dx,dy
for (ind=0;ind<shoots;ind++){
x0=10;y0=115
ctx.translate(x0,y0)
x1= xi[ind]-x0
y1= yi[ind]-y0
x0= 0
y0= 0
a= (y1-y0)/(x1-x0)
b= -a*x0 + y0
if (xO[ind]!=0 && xO[ind]<360){
ctx.translate(xO[ind],yO[ind])
ctx.rotate(teta)
ctx.clearRect(-3,-6,r+3,12)
ctx.rotate(-teta)
ctx.setTransform(1, 0, 0, 1, 0, 0)
ctx.strokeStyle= "blue"
ctx.lineWidth=5
ctx.strokeRect(10,10,380,210)
ctx.translate(10,115)
}
teta= Math.atan(y1/x1)
if (xO[ind]==0)
xO[ind]=r*Math.cos(teta)+4
else
if (xn[ind]<377 && yn[ind]>-102 && yn[ind]<102 ) xO[ind]+= spx*Math.cos(teta)
yO[ind]= a*xO[ind] + b
xn[ind]= xO[ind]+r*Math.cos(teta)
yn[ind]= a*xn[ind] + b
ctx.beginPath()
ctx.moveTo(xO[ind],yO[ind])
ctx.lineTo(xn[ind],yn[ind])
ctx.strokeStyle= "darkblue"
ctx.lineWidth=1.5
ctx.stroke()
ctx.closePath()
ctx.setTransform(1, 0, 0, 1, 0, 0)
}
}
</script>
<div style="text-align: left"><font face="Tahoma"><br><a target="_blank" href="https://html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div>
<a target='_blank' href='http://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
FOTPU
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!