How do I handle kb input with Canvas?

Problems with Canvas, OpenGL, etc...

How do I handle kb input with Canvas?

Postby oypuppu » Thu Jul 08, 2010 10:56 pm

**I think if I package this as an html5 app, I wont have any kb issues. I loaded up a html5 app that I used before and pressing buttons like "a" does nothing and up and down on the dpad makes the page scroll up and down.

Im trying to do 2d games and Canvas seems perfect if I want to avoid Java. So far basic html5 tutorials have been working well. I figured out how to get an image on the screen and move it around. I uploaded the file and browsed it with my phone but I cant do any keyboard input like the letter "a" which I have set to move the image up. If I press "a" on the keyboard of my phone, the search box comes up. How can I use the traditional keycodes without interfering with search box or anything coming up on my android phone.

Also, there isnt anyway to do touchscreen games with Canvas on Android correct? Everything has to be keyboard input?

Thanks!

Code: Select all
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Test</title>
</head>
<body>
<section>

<div>
<canvas id="canvas" width="300" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>

<script type="text/javascript">
var canvas;
var ctx;
var dx = 5;
var dy = 5;
var x = 170
var xx = 150;
var y = 100;
var WIDTH = 300;
var HEIGHT = 200;

var image = new Image();
image.src = "tyson.jpg";


function circle(x,y,r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.fill();
}

function rect(x,y,w,h) {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
ctx.stroke();
}


function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(draw, 10);
}

function doKeyDown(evt){
switch (evt.keyCode) {
case 97:  /* Up arrow was pressed */

y -= 1

break;
case 40:  /* Down arrow was pressed */
if (y + dy < HEIGHT){
y += dy;
}
break;
case 37:  /* Left arrow was pressed */
if (x - dx > 0){
x -= dx;
}
break;
case 39:  /* Right arrow was pressed */
if (x + dx < WIDTH){
x += dx;
}
break;
}
}

function draw() {
clear();
ctx.drawImage(image, x, y);
//ctx.fillStyle = "white";
//ctx.strokeStyle = "black";
//rect(0,0,WIDTH,HEIGHT);
//ctx.fillStyle = "purple";
//circle(x, y, 10);
}

init();
window.addEventListener('keydown',doKeyDown,true);
</script>
</section>
</body>
</html>
User avatar
oypuppu
Freshman
Freshman
 
Posts: 5
Joined: Sun Mar 21, 2010 4:06 pm

Top

Return to Android 2D/3D Graphics - OpenGL Problems

Who is online

Users browsing this forum: No registered users and 3 guests