Open Technical Blog: HTML5 Canvas

This script shows a simple bouncing game written with Canvas in HTML5. The following techniques are adopted:

Canvas for graphics.
Detect mouse movement.
Collection detection.

Note that the middle of the bar is supposed to be at the mouse pointer, however the final output in this blog page is not. It may be due to the margin added to the document by blogger.

Output

When the file is viewed in a browser such as Chrome or Firefox, it appears as below.

Source Code

<!DOCTYPE HTML>
<html>
<head><style>
  body {
    margin: 10px;
    padding: 10px;
  }
  #myCanvas {
    border: 1px solid #9C9898;
  }
</style>
<script>
window.onload = function() {
var x = 0;  // x of ball
var y = 0;  // y of ball
var dx = 2; // x speed of ball
var dy = 2; // y speed of ball
var r = 20  // radius of ball
var mouseX = 0;  // mouse x pos
var batLen = 50; // length of bat
var cnvwidth = 0;
var cnvheight = 0;
var context, canvas;
var score = 0;

function init() {
  canvas = document.getElementById("myCanvas");
  context = canvas.getContext("2d");
  cnvwidth = canvas.width;
  cnvheight = canvas.height;
  mouseX =cnvwidth/2;
  //canvas.onmousemove = onMouseMove;
  document.onmousemove = onMouseMove;
  return setInterval(draw, 10);
}

function onMouseMove(evt) {
  var mx;
  var my;
  if (evt.offsetX != undefined || evt.offsetY != undefined) {
    mx = evt.offsetX;
    my = evt.offsetY; }
  else {
    mx = evt.layerX;
    my = evt.layerY;  }
  mouseX = mx;
}

function draw() {
  context.clearRect(0,0,cnvwidth,cnvheight);
  // draw score
  context.font = "bold 10pt Sans-Serif";
  context.fillText("Score: "+score, 20, 20);
  // draw ball
  context.beginPath();
  context.arc(x, y, r, 0, Math.PI*2, true);
  context.fillStyle = 'blue';
  context.fill();
  // collision detection
  // ball and bat
  if (x>mouseX-batLen/2 && x<mouseX+batLen/2 
      && y>cnvheight-r-10) {
    dy=-dy; y=cnvheight-r-10; score+=1;}
  // move to next position
  x += dx;
  y += dy;
  // ball and boundaries
  if (x>cnvwidth-r) {
    dx=-dx; x=cnvwidth-r;}
  if (x<r) {
    dx=-dx; x=r;}
  if (y>cnvheight-r) {
    dy=-dy; y=cnvheight-r;
    score-=1; if (score<0){score=0;}}
  if (y<r) {
    dy=-dy; y=r;}
  // draw bat
  context.beginPath();
  context.rect(mouseX-batLen/2,cnvheight-10,batLen,10);
  context.closePath();
  context.fillStyle = 'black';
  context.fill();
}

init();
}
</script>
</head>
<body>
This is a HTML5 Canvas Experiment.
</br></br></br>
<canvas id="myCanvas" width="600" height="400" ></canvas></br>
</body>
</html>

Open Technical Blog

Tuesday, 18 September 2012

HTML5 Canvas - A Bouncing Game

Output

Source Code

No comments:

Post a Comment