html5 实现简单捕鱼达人部分功能
来源：互联网 发布：vb中variant是什么意思 编辑：程序博客网 时间：2024/05/22 13:17
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）图片如下
0 0
- html5 实现简单捕鱼达人部分功能
- Cocos2d-x简单游戏<捕鱼达人>代码实现|第一部分：鱼类
- Cocos2d-x简单游戏<捕鱼达人>代码实现|第二部分：子弹、渔网、大炮类
- Cocos2d-x简单游戏<捕鱼达人>代码实现|第四部分：加载场景类
- Cocos2d-x简单游戏<捕鱼达人>代码实现|第三部分：菜单类
- Cocos2d-x简单游戏<捕鱼达人>代码实现|第五部分：游戏类
- html5捕鱼达人游戏
- 【IOS】《捕鱼达人》的简单实现（一）
- HTML5游戏实战(2)：90行代码实现捕鱼达人
- 简单版捕鱼达人的制做
- HTML5介绍和部分功能实现
- 打鱼机，捕鱼游戏， 捕鱼达人
- HTML5实现简单的拖放功能
- 关于《捕鱼达人》
- 捕鱼达人
- 实现简单的聊天功能部分Vue
- 简单实现部分HTML表单校验功能
- cocos2d-x 捕鱼达人 子弹层的实现.
- canvas.translate(x,y)一点新的认识
- php memcached使用中的坑
- D3.js 的一般处理步骤
- 安装低版本Ubuntu和GCC[转]
- 《Systems Performance: Enterprise and the Cloud》读书笔记系列（四） —— 第二章（三）
- html5 实现简单捕鱼达人部分功能
- shell浅谈之八I/O重定向
- mybatis整理笔记MapperXML文件2 -- MapperXML文件中的insert, update and delete[文章摘自文档]
- 使应用可以从iTunes中导入资料（即共享）
- 二阶 group by 实现
- RHEL6.4安装nginx
- 找工作
- jquery cache 缓存
- Android Security
