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.
Please check your email for instructions to activate your account.
Written by 12 July 2013
If you want to create games you must know how to detect pressed key. HTML5 can make a successful connection with users' keyboard by Javascript. The following example shows how to move objects by keyboard. The code detect whether you have reached to walls and surfaces or not; if yes the movement in the direction is stopped. Press Left or Right arrow to move and Up for jumping!
<!-- this script is provided by https://www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<img src="http://www.html5freecode.com/files/mario-r.png" id="mr" style="display:none"/>
<img src="http://www.html5freecode.com/files/mario-l.png" id="ml" style="display:none"/>
<canvas id="myCanvas" width="400" height="230"onmouseenter="mousein()" onmouseleave="mouseout()" onclick="start()" ></canvas>
<script>
var cnv = document.getElementById('myCanvas');
var ctx = cnv.getContext('2d');
var deg = Math.PI/180;
var mr= document.getElementById('mr'),mario=mr;
var ml= document.getElementById('ml');
var posx= 15, posy, speedX= 1, speedY= 2;
var jump=false, tjump=0, posj, jumpx=0, jumpfrom, tmr=0, drop=false;
key=new Array();
window.addEventListener('load', loaded, false);
window.addEventListener("keyup", keyup, true);
window.addEventListener("keydown", keydown, true);
var txt= 'Click to Start';
var w= ctx.measureText(txt).width
ctx.font= "bold 40pt serif"
ctx.textBaseline= 'middle'
var RadGrad= ctx.createRadialGradient(2+w/2, 100, 1, 2+w/2, 150, 180)
RadGrad.addColorStop(0, "rgba(1, 150, 225, 0.5)")
RadGrad.addColorStop(0.33, "rgba(2, 30, 225, 0.9)")
RadGrad.addColorStop(0.66, "rgba(78, 1, 225, 0.9)")
RadGrad.addColorStop(1, "rgba(155, 1, 225, 0.5)")
function loaded(){
posy= 220-mr.naturalHeight;
posj=posy
ctx.drawImage(mr, posx,posy);
DrawGeometry();
ctx.fillStyle="rgba(195,195,195,0.7)";
ctx.fillRect(10,10,380,210);
mouseout()
ctx.lineWidth=3
ctx.strokeStyle= "brown";
ctx.strokeRect(195-170,100-30,340,60);
}
function start(){
tmr=setInterval(DrawAll, 10);}
function mousein(){
if (tmr==0){
ctx.strokeStyle='yellow';
ctx.fillStyle= RadGrad;
ctx.strokeText(txt, 40, 100);
ctx.fillText(txt, 40, 100);
}
}
function mouseout(){
if (tmr==0){
ctx.strokeStyle='lightgreen';
ctx.fillStyle= RadGrad;
ctx.strokeText(txt, 40, 100);
ctx.fillText(txt, 40, 100);
}
}
function DrawAll(){
ctx.clearRect(0,0,400,250);
if (key[27]==1){
clearInterval(tmr);
}
if (key[37]==1){
if (checkPos('left')==true){
if (jump==false)
posx-=speedX;
else
jumpx=-1;
}
mario= ml;
}
if (key[39]==1){
if (checkPos('right')==true){
if (jump==false)
posx+=speedX;
else
jumpx=1;
}
mario= mr;
}
if (key[38]==1)
if(jump==false){
jump= true;
}
if (posx<(200-mr.naturalWidth) && posy==(180-mr.naturalHeight) && jump==false) drop=true;
if (jump==true){
tjump+=speedY;
posy= posj-(-0.005*Math.pow(tjump,2)+tjump)
if (jumpx==1 && checkPos('right')==false) jumpx=0;
if (jumpx==-1 && checkPos('left')==false) jumpx=0;
posx+= jumpx
if (posy>=base()){
jump=false
posy=base()
tjump=0
jumpx=0
posj=posy;
}
}
if (drop==true){
posy+=speedY
if (posy>=base()){
drop=false;
posj=base();
}
}
ctx.drawImage(mario, posx, posy);
DrawGeometry();
}
function base(){
if (posx<=(200-mr.naturalWidth))
return (220-mr.naturalHeight)
else
return (180-mr.naturalHeight)
}
function checkPos(direction){
switch(direction){
case 'right':
if (posx>=(390-mr.naturalWidth) ) return false;
if ((posx==(200-mr.naturalWidth)) && ((posy+mr.naturalHeight)>180)) return false;
return true;
break;
case 'left':
if (posx<=10) return false;
return true;
break;
}
}
function keydown(e){
key[e.keyCode]= 1;
}
function keyup(e){
key[e.keyCode]= 0;
}
function DrawGeometry(){
ctx.strokeStyle= "blue";
ctx.lineWidth=5;
ctx.strokeRect(10,10,380,210);
ctx.moveTo(200,180)
ctx.lineTo(390,180)
ctx.stroke();
}
</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='https://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!