It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
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!
<!-- 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>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!