HTML5のCanvasとJavaScriptを使った「もぐらたたきゲーム」です。
ソースコードは次のとおり。

<script>
var size = 10; // 原っぱの大きさ
var areasize = 40; // 升目の大きさ
var margin = 1; // 升目のマージン
var interval = 1000; // 出現間隔（ミリ秒）
var score; // 退治したモグラの数
var moles; // 出現したモグラの数
var rect; // Canvas の位置と大きさ
var scoreboard;
var canvas;
var context;
var rect;
var field; // 原っぱ
var timer;
var dxd;
var nowMagniFication;
var chgZoom;
var bareasize;
var startflag;

window.onload = init;
// 初期処理
function init()
{
  startflag = true;
  score = 0;
  moles = 0;
  dxd = screen.deviceXDPI;
  nowMagniFication = dxd/96;
  chgZoom = 1/nowMagniFication;
  scoreboard = document.getElementById("scoreboard");
  canvas = document.getElementById("canvas1");
  context = canvas.getContext("2d");
  rect = canvas.getBoundingClientRect();
  field = new Field(); 
  bareasize = areasize * chgZoom;
}

function Field() {
  this.position = { i: 0, j: 0 }; // モグラの位置
  this.mole = false; // モグラが出現中かどうか
  this.table = new Array(size);

  this.click = function(event) {
    var i = this.position.i;
    var j = this.position.j;
    var new_x = event.clientX;
    var new_y = event.clientY;
    var mouse = this.mousePosition(new_x, new_y);
    if (startflag && this.mole && i == mouse.i && j == mouse.j) {
       scoreboard.innerHTML = ++score + "/" + moles;
       this.mole = false;
       this.table[i][j].drawRect();
    }
  };
  this.emerge = function() {
    if(moles>=100){
      startflag = false;
      clearInterval(timer);
      window.alert('ゲームオーバー');
    }
    else {
      this.table[this.position.i][this.position.j].drawRect();
      this.position = this.randomPosition();
      this.table[this.position.i][this.position.j].drawMole();
      this.mole = true;
      scoreboard.innerHTML = score + "/" + ++moles;
    }
  };
  this.randomPosition = function() {
    return {
      i: Math.floor(Math.random() * size),
      j: Math.floor(Math.random() * size)
    };
  }
  this.createTable = function() {
    for (var i = 0; i < size; i++) {
      this.table[i] = new Array(size);
      for (var j = 0; j < size; j++) {
        this.table[i][j] = new Area(i, j);
      }
    }
  };
  this.mousePosition = function(x, y) {
    return {
      i: Math.floor((y - rect.top) / bareasize),
      j: Math.floor((x - rect.left) / bareasize)
    };
  };
  this.isInsideField = function(i, j) {
    return i >= 0 && i < size && j >= 0 && j < size;
  };
  this.createTable();
}

function Area(i, j) {
  this.i = i; // 縦方向の位置
  this.j = j; // 横方向の位置
  this.drawRect = function() {
    context.fillStyle = "lime";
    context.fillRect(
      this.j * areasize + margin,
      this.i * areasize + margin,
      areasize - margin * 2, areasize - margin * 2);
  };
  this.drawMole = function() {
    context.fillStyle = "maroon";
    context.beginPath();
    context.arc(
    this.j * areasize + areasize * 0.5,
    this.i * areasize + areasize * 0.5,
    areasize * 0.3, 0, Math.PI*2);
    context.fill();
  };
  this.drawRect();
}

function gstart() {
  score = 0;
  moles = 0;
  startflag = true;
  timer = setInterval(function() { field.emerge(); }, interval);
  document.attachEvent("onclick", function(event) {
    field.click(event);
  }); 
}
</script>
<form action="" name="form1">
<p><input type="button" value="開始" onClick="gstart()"></p>
<p><input type="button" value="停止" onClick="clearInterval(timer)"></p>
</form>
<p id="scoreboard">0/0</p>
<canvas id="canvas1" width="420" height="420"></canvas>

もぐらたたきの実行