html5 实现简单捕鱼达人部分功能

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()返回的IDvar 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）图片如下

html5 实现简单捕鱼达人部分功能相关推荐

html 写字版插件,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
写字板能用html语言吗,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
【IOS】《捕鱼达人》的简单实现（一）
[原创作品, 欢迎转载,转载请在明显处注明! 谢谢. 原文地址:http://blog.csdn.net/toss156/article/details/7456156] 上次的文章中给大 ...
基于HTML5的捕鱼达人游戏网页版
之前给大家分享了html5实现的水果忍者,愤怒的小鸟,中国象棋游戏.今天给大家分享一款捕鱼达人(fishjoy)网页版游戏的源码.可以在线玩也可以下载到本地.它使用html5技术和javascript ...
html5游戏开发网页版-捕鱼达人游戏源码下载
html5游戏开发网页版-捕鱼达人游戏源码下载来玩一把! 转载于:https://www.cnblogs.com/jsfoot/p/3215371.html
html5 canvas简易版捕鱼达人游戏源码
插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...
HTML5游戏实战 2 90行代码实现捕鱼达人
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 捕鱼达人 ...
HTML5游戏实战(2)：90行代码实现捕鱼达人
捕鱼达人是一款非常流行的游戏,几年里赚取了数以千万的收入,这里借用它来介绍一下用Gamebuilder+CanTK开发游戏的方法.其实赚钱的游戏未必技术就很难,今天我们就仅用90来行代码来实现这个游戏 ...
用cocos2dx做一个简单的单机捕鱼达人游戏（1）
用cocos2dx做一个简单的单机捕鱼达人游戏(1) 我使用了cocos2dx 3.9版本和vs2017来开发今天先做游戏开始界面开始界面很简单,一个背景图,一个logo,3个button(三种登 ...

html5 实现简单捕鱼达人部分功能

html5 实现简单捕鱼达人部分功能相关推荐

最新文章

热门文章