<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>连连看</title>
<script type="text/javascript" src="board.js"></script>
<script type="text/javascript">
// canvas obj
var _canvas = null;
// context obj
var _ctx = null;
// face image obj
var _img_face = null;
// face img size
var _img_face_m = 0;
var _img_face_n = 0;
var _img_face_src_width = 0;
var _img_face_src_height = 0;
var _img_face_width = 0;
var _img_face_height = 0;
var _img_face_radius = 0;
// board size
var _board_m = 0;
var _board_n = 0;
var _boardsize = 0;
var _board_m_offset = 0;
var _board_n_offset = 0;
// board obj
var _board = null;
// canvas size
var _width = 0;
var _height = 0;
// first selected face
var _first_p = null;
// last moveout face
var _old_p = null;
// animation flag
var _is_play_animation = false;
// board state flag
// 0: start
// 1: pause
// 2: stop
var _board_state = 0;
// current time
var _current_time = null;
var _pause_time = null;
var _timer_time = null;
// entry point
window.onload = function () {
// face img resource size
_img_face_m = 13;
_img_face_n = 4;
_img_face_src_width = 60;
_img_face_src_height = 60;
_img_face_width = 60;
_img_face_height = 60;
_img_face_radius = 10;
//// calc canvas size
//_width = (16 + 2) * _img_face_width;
//_height = (9 + 2) * _img_face_height;
// get canvas obj
_canvas = document.getElementById('canvas');
if (_canvas != null && _canvas.getContext != null) {
//_canvas.width = _width;
//_canvas.height = _height;
_canvas.style.backgroundImage = 'url(' + img_bg + ')';
_ctx = _canvas.getContext("2d");
_ctx.save();
_canvas.onmousemove = OnCanvas_MouseMove;
_canvas.onmousedown = OnCanvas_Click;
}
// load face image to image obj
_img_face = new Image();
_img_face.onload = function () {
// new game
btnNewGame_Click();
}
_img_face.src = img_src;
}
// event
function btnNewGame_Click() {
if (_is_play_animation) return;
_board_state = 0;
document.getElementById('btnOrder').value = '暂停查看排名';
var boardsize = parseInt(document.getElementById('boardsize').value);
if (boardsize != _boardsize) {
_boardsize = boardsize;
_first_p = null;
_old_p = null;
switch (boardsize) {
case 1:
_board_m = 8;
_board_n = 6;
break;
case 3:
_board_m = 16;
_board_n = 9;
break;
case 2:
default:
_board_m = 12;
_board_n = 8;
break;
}
_width = (_board_m + 2) * _img_face_width;
_height = (_board_n + 2) * _img_face_height;
_board_m_offset = (_width - (_board_m + 2) * _img_face_width) / 2;
_board_n_offset = (_height - (_board_n + 2) * _img_face_height) / 2;
if (_ctx != null) {
_canvas.width = _width;
_canvas.height = _height;
_ctx.restore();
_ctx.save();
_ctx.clearRect(0, 0, _width, _height);
_ctx.translate(_board_m_offset, _board_n_offset);
}
_board = null;
_board = new Board();
_board.Init(_board_m, _board_n, _img_face_m * _img_face_n);
}
_board.NewGame();
if (_ctx != null) {
draw_board();
}
if (_timer_time != null) {
clearInterval(_timer_time);
_current_time = null;
_timer_time = null;
}
_current_time = (new Date()).getTime();
draw_time(calc_time());
_timer_time = setInterval(function () {
draw_time(calc_time());
}, 500);
}
function btnHint_Click() {
if (_is_play_animation) return;
if (_board_state > 0) return;
if (_board != null) {
var path = new PATH();
if (_board.GetHint(path) && _ctx != null) {
// draw path
draw_face_animation(path.Start.X, path.Start.Y, 'rgba(255,40,40, 1.0)');
draw_face_animation(path.End.X, path.End.Y, 'rgba(255,40,40, 1.0)');
draw_path(path, 'rgba(255,40,40, 1.0)');
_is_play_animation = true;
setTimeout(function () {
_is_play_animation = false;
// erase path
erase_path(path);
// draw face
draw_face(_board.FaceItems[path.Start.X][path.Start.Y], path.Start.X, path.Start.Y);
draw_face(_board.FaceItems[path.End.X][path.End.Y], path.End.X, path.End.Y);
}, 300);
}
}
}
function btnOrder_Click() {
if (_is_play_animation) return;
if (_board_state == 2) return;
if (localStorage == null || _ctx == null) return;
if (_timer_time != null) {
_board_state = 1;
document.getElementById('btnOrder').value = '恢复游戏';
// pause timer
clearInterval(_timer_time);
_timer_time = null;
_pause_time = (new Date()).getTime();
// draw order
draw_order(true);
}
else {
_board_state = 0;
document.getElementById('btnOrder').value = '暂停查看排名';
// draw board
draw_board();
// restart timer
_current_time += (new Date()).getTime() - _pause_time;
_pause_time = null;
draw_time(calc_time());
_timer_time = setInterval(function () {
draw_time(calc_time());
}, 500);
}
}
function btnRemoveOrder_Click() {
if (localStorage == null) return;
for (var i = 0; i < 5; i++) {
var keyName = "name" + _boardsize + "_" + i;
var keyTime = "time" + _boardsize + "_" + i;
localStorage.removeItem(keyName);
localStorage.removeItem(keyTime);
}
}
function OnCanvas_MouseMove(e) {
if (_is_play_animation) return;
if (_board_state > 0) return;
if (!e.offsetX) {
var offsetP = calc_offset(_canvas);
e.offsetX = e.pageX - offsetP.X;
e.offsetY = e.clientY - offsetP.Y;
}
var x = e.offsetX - _board_m_offset;
var y
Android参考源码-三国杀版连连看（使用html5的canvas特性，纯javascript开发）.zip （2个子文件） 
lianliankan.htm 24KB board.js 664KB资源评论
等天晴i
- 粉丝: 5869
- 资源: 10万+
