html5确实强大,运用html5的元件<canvas>和js就能简单的完成捕鱼达人的部分功能。
1)代码如下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var nowInterval = 0;//现在所流逝的时间100ms的倍数
var baseInterval = 100;//100ms调用方法
var createInterval = 3000;//3000ms创建鱼
var swimInterval = 200;//200ms鱼游动
var iID;//存放setInterval()返回的ID
var canvas;//画布
var width;//画布的宽
var height;//画布的高
var context;//画布内容
var fishList = new Array();//数组,用来存放鱼
var nowTypeCount = 0;//已加载鱼的种类数
//定义鱼种类列表,类表包含鱼的种类,图片的位置,动态运动的位置
var fishTypeList = [
{
type: 1,
src: 'fish1.png',
speed: 5,
swimFrameCount: 4,
frames: [
{ x: 0, y: 0, w: 78, h: 64 },
{ x: 0, y: 64, w: 78, h: 64 },
{ x: 0, y: 128, w: 78, h: 64 },
{ x: 0, y: 192, w: 78, h: 64 },
{ x: 0, y: 256, w: 78, h: 64 },
{ x: 0, y: 320, w: 78, h: 64 },
{ x: 0, y: 384, w: 78, h: 64 },
{ x: 0, y: 448, w: 78, h: 64 }
]
},
{
type: 2,
src: 'fish2.png',
speed: 10,
swimFrameCount: 4,
frames: [
{ x: 0, y: 0, w: 77, h: 59 },
{ x: 0, y: 59, w: 77, h: 59 },
{ x: 0, y: 118, w: 77, h: 59 },
{ x: 0, y: 177, w: 77, h: 59 },
{ x: 0, y: 236, w: 77, h: 59 },
{ x: 0, y: 295, w: 77, h: 59 },
{ x: 0, y: 354, w: 77, h: 59 },
{ x: 0, y: 413, w: 77, h: 59 }
]
}
]
$(function () {
width = window.innerWidth - 22;
height = window.innerHeight - 22;
var canvasHtml = '<canvas id="myCanvas" width="'
+ width + '" height="'
+ height + '">这个浏览器不支持HTML5元素。</canvas>';
$('body').append(canvasHtml);
canvas = $('#myCanvas')[0];
canvas.addEventListener('click', catchFish, false);
context = canvas.getContext('2d');
initFishImage();
});
function initFishImage() {//加载鱼的图片
if (fishTypeList.length == 0) {
return;
}
for (var i = 0; i < fishTypeList.length; i++) {
var img = new Image();
img.src = fishTypeList[i].src;
fishTypeList[i].img = img;//将Image对象放到鱼类型类表
img.onload = function () {
nowTypeCount++;
if (nowTypeCount == fishTypeList.length) {
//只创建一个interval,
//因为创建多个interval浏览器在失去焦点后,不同的interval运行次数会混乱
iID = setInterval(fishAction, baseInterval);
}
}
img.onerror = function () {
alert('图片加载失败!');
}
}
}
function catchFish(e) {//捕捉鱼
if (fishList.length > 0) {
var p = getEventPosition(e);
for (var i = 0; i < fishList.length; i++) {
var fish = fishList[i];
if (p.x >= fish.x && p.x <= (fish.x + fish.frames[0].w)
&& p.y >= fish.y && p.y <= (fish.y + fish.frames[0].h)) {
fish.speed = 0;
fish.frameIndex = fish.swimFrameCount;
fish.isCatched = true;
}
}
}
}
function fishAction() {
nowInterval += baseInterval;
if (nowInterval % createInterval == 0) {
createFish();
}
if (nowInterval % swimInterval == 0) {
fishSwin();
}
}
function createFish() {//创建鱼
var type = Math.ceil(Math.random() * fishTypeList.length);//随机获取鱼的种类
for (var i = 0; i < fishTypeList.length; i++) {
if (fishTypeList[i].type == type) {
var fish = {};
fish.id = new Date().getTime();
fish.frameIndex = 0;
fish.type = fishTypeList[i].type;
fish.img = fishTypeList[i].img;
fish.frames = fishTypeList[i].frames;
fish.speed = fishTypeList[i].speed;
fish.swimFrameCount = fishTypeList[i].swimFrameCount;
fish.x = -fishTypeList[i].frames[0].w;
fish.y = Math.random() * (canvas.height - fish.frames[0].h);
fish.isCatched = false;
fishList.push(fish);
break;
}
}
}
function fishSwin() {//鱼游动
context.clearRect(0, 0, canvas.width, canvas.height);
if (fishList.length > 0) {
for (var i = 0; i < fishList.length; i++) {//画鱼
var fish = fishList[i];
context.globalAlpha = fish.frameIndex >= fish.swimFrameCount
? (fish.frames.length - fish.frameIndex)
/ (fish.frames.length - fish.swimFrameCount) : 1;
context.drawImage(fish.img//规定要使用的图像、画布或视频。
, fish.frames[fish.frameIndex].x//可选。开始剪切的 x 坐标位置。
, fish.frames[fish.frameIndex].y//可选。开始剪切的 y 坐标位置。
, fish.frames[fish.frameIndex].w//可选。被剪切图像的宽度。
, fish.frames[fish.frameIndex].h//可选。被剪切图像的高度。
, fish.x//在画布上放置图像的 x 坐标位置。
, fish.y//在画布上放置图像的 y 坐标位置。
, fish.frames[fish.frameIndex].w//可选。要使用的图像的宽度。(伸展或缩小图像)
, fish.frames[fish.frameIndex].h);//可选。要使用的图像的高度。(伸展或缩小图像)
context.globalAlpha = 1;
}
for (var i = 0; i < fishList.length; i++) {//1)如果鱼游出界面删除,改变鱼的游动状态,改变鱼的位置
var fish = fishList[i];
if (fish.x > width) {//如果鱼游出画布,从数组中删除鱼
fishList.splice(fishList.indexOf(fish), 1);
} else {//如果鱼没有游出画布改变鱼的游动帧和位置
fish.frameIndex++;
if (fish.isCatched) {//鱼被抓到
if (fish.frameIndex == fish.frames.length) {
fishList.splice(fishList.indexOf(fish), 1);
}
} else {//鱼没有被抓到
if (fish.frameIndex == fish.swimFrameCount) {
fish.frameIndex = 0;
}
fish.x += fish.speed;
}
}
}
}
}
function getEventPosition(ev) {//获取事件对象发生的位置
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return { x: x, y: y };
}
</script>
</head>
<body>
</body>
</html>
2)图片如下