• 朵拉钓鱼，快来一起钓鱼

    欢迎来到程序小院

    朵拉钓鱼

    玩法：鼠标对准鱼的位置点击左键进行钓鱼，钓到不同鱼有不同分数奖励，钓到鞋子-2，钓到鲨鱼游戏结束，统计分数，快去钓鱼吧^^。

    开始游戏icon-default.png?t=N7T8https://www.ormcc.com/play/gameStart/195

    html

    <canvas id="gameCanvas" width="480" height="800"></canvas>

    css

    1. #main
    2. {
    3.     width:320px;
    4.     margin:0 auto;
    5.     background-color:#FFF;
    6. }
    7. .popup-base {
    8.     position:fixed;
    9.     top:0;
    10.     left:0;
    11.     bottom:0;
    12.     right:0;
    13.     visibility:hidden;
    14.     z-index:1000000;
    15.     opacity:1;
    16.     -moz-transition:all .3s;
    17.     -webkit-transition:opacity .3s;
    18.     -o-transition:all .3s;
    19.     transition:all .3s;
    20.     background:rgba(0,0,0,.3);
    21. }
    22.  
    23. .popup-base.popup-visible {
    24.     opacity:1;
    25.     visibility:visible;
    26. }
    27.  
    28. #popup-bg {
    29.     position:fixed;
    30.     top:0;
    31.     left:0;
    32.     bottom:0;
    33.     right:0;
    34. }
    35.  
    36. .popup-base .dialog {
    37.     position:absolute;
    38. }
    39.  
    40. .dialog-prompt {
    41.     margin-top:10px;
    42.     text-align:center;
    43. }
    44.  
    45. .dialog-buttons {
    46.     padding:10px;
    47.     text-align:right;
    48.     background:-webkit-gradient(linear , 0% 0% , 0% 100%, from(#E6E6E6), to(#F7F6F6));
    49.     border-bottom-left-radius:4px;
    50.     border-bottom-right-radius:4px;
    51. }
    52.  
    53. .popup {
    54.     font-family:sans-serif;
    55.     font-weight:700;
    56.     text-align:center;
    57.     font-size:12px;
    58.     line-height:130%;
    59.     /* text-transform:uppercase; */
    60.     background-color:rgba(049,049,049,.7);
    61.     border-radius:6px;
    62.     -webkit-box-shadow:0px 0px 5px rgba(0,0,0,1);
    63.     z-index:999999999;
    64. }

    js

    1. //鱼对象
    2. var fishObj = function (id, imgid, speed, direction, sizeindex, x, y, w, h, status, weight) {
    3.   this.id = id;
    4.   this.imgid = imgid;
    5.   this.speed = speed;
    6.   this.direction = direction;
    7.   this.sizeindex = sizeindex;
    8.   this.x = x;
    9.   this.y = y;
    10.   this.w = w;
    11.   this.h = h;
    12.   this.status = status;
    13.   this.weight = weight;
    14. }
    15. //玩家对象
    16. var MainObj = function () {
    17.   this.direction = 2;
    18.   this.status = -1;
    19.   this.x = 130;
    20.   this.y = 80;
    21.   this.defaultY = 80;
    22.   this.speed = brower.isIphone == true ? 100 : 105;
    23.   this.lese = 0;
    24.   this.isShark = 0;
    25. }
    26. //鲨鱼
    27. var SharkObj = function () {
    28.   this.flag = 0;
    29.   this.direction = 1;
    30.   this.speed = 4;
    31.   this.x = 30;
    32.   this.y = 180;
    33.   this.w = 30;
    34.   this.h = 20;
    35.   this.status = 0;
    36.   this.playnum = 10;
    37. }
    38. var mainObj = new MainObj();
    39. var sharkObj = new SharkObj();
    40. brower.InvaliBrower();
    41. $(document).ready(function (e) {
    42.   setInterval(function () { window.scrollTo(0, 2); }, 500);
    43.   context = document.getElementById("mycanvas");
    44.   if (context.getContext) {
    45.       context = context.getContext("2d");
    46.       loadedimg = new Image();
    47.       loadedimg.src = '/default/game/dldy/img/load.png';
    48.       loadedimg.onload=drawLoaded;        
    49.       loadImages();
    50.   } else {
    51.       alert("is Not");
    52.   }
    53. });
    54. //点击钓鱼事件
    55. function Start(e) {
    56.   e.preventDefault();
    57.   var x = 0;
    58.   var x_2 = 0;
    59.   var y_2 = 0;
    60.   if (window.innerWidth > 320) {
    61.       if (brower.isIphone == false && brower.isMobile == false) {
    62.           x_2 = e.clientX;
    63.           y_2 = parseInt(event.clientY);
    64.       } else {
    65.           x_2 = event.touches[0].clientX;
    66.           y_2 = parseInt(event.touches[0].clientY);
    67.       }
    68.       x = x_2 - parseInt((window.innerWidth - 320) / 2);
    69.   } else {
    70.       if (brower.isIphone == false && brower.isMobile == false) {
    71.           x_2 = parseInt(event.clientX);
    72.           y_2 = parseInt(event.clientY);
    73.       } else {
    74.           x_2 = parseInt(event.touches[0].clientX);
    75.           y_2 = parseInt(event.touches[0].clientY);
    76.       }
    77.       x = x_2;
    78.   }
    79.   var need_y1 = 0;
    80.   var need_y2 = 40;
    81.   var need_x1 = 260;
    82.   var need_x2 = 300;
    83.   if(brower.isQQ==true){
    84.       need_y1 = -30;
    85.       need_y2 = 30;
    86.       need_x1 = 290;
    87.       need_x2 = 340;
    88.   }
    89.   if (x >= need_x1 && x <= need_x2 && y_2 >= need_y1 && y_2 <= need_y2) {
    90.       jQuery("#mycanvas").unbind(brower.clickEventName);
    91.       drawMsg(35);
    92.   } else if (mainObj.status == -1 && mainObj.y == mainObj.defaultY) {
    93.       if (x <= 75) {
    94.           mainObj.direction = 0;
    95.           mainObj.x = 50;
    96.       }
    97.       if (x > 75 && x <= 125) {
    98.           mainObj.direction = 1;
    99.           mainObj.x = 90;
    100.       }
    101.       if (x > 125 && x <= 170) {
    102.           mainObj.direction = 2;
    103.           mainObj.x = 130;
    104.       }
    105.       if (x > 170 && x <= 210) {
    106.           mainObj.direction = 3;
    107.           mainObj.x = 180;
    108.       }
    109.       if (x > 210) {
    110.           mainObj.direction = 4;
    111.           mainObj.x = 200;
    112.       }
    113.       mainObj.status = 0;
    114.   }
    115. }
    116.  
    117. //加载图片
    118. function loadImages() {
    119.   var imgOnload = function () {
    120.       this.onload = null;
    121.       ld++;
    122.       loaded = ld;
    123.   }
    124.   for (var i = 0, ld = 0; i < imgfilelist.length; i++) {
    125.       var img = new Image();
    126.       img.onload = imgOnload;
    127.       img.src = "/default/game/dldy/img/" + imgfilelist[i];
    128.       if (img.complete) {
    129.           img.onload();
    130.       }
    131.       imglist.push(img);
    132.   }
    133. }
    134.  
    135. //玩家钓鱼动作
    136. function MainTimer() {
    137.   var sx = mainObj.status > 0 ? mainObj.status * 46 : 0;
    138.   if (mainObj.status == 3) {
    139.       mainObj.y = parseInt(mainObj.y - ((mainObj.speed) * timer) / 100);
    140.       if (mainObj.lese == 1) {
    141.           if (mainObj.direction < 3)
    142.               context.drawImage(imglist[32], 0, 0, 280, 226, mainObj.x - 16, mainObj.y + 15, 50, 50);
    143.           else
    144.               context.drawImage(imglist[33], 0, 0, 280, 226, mainObj.x, mainObj.y + 15, 50, 50);
    145.       }
    146.  
    147.       if (mainObj.y <= mainObj.defaultY) {
    148.           mainObj.y = mainObj.defaultY;
    149.           mainObj.status = -1;
    150.           if (mainObj.lese == 1) {
    151.               mainObj.lese = 0;
    152.               score - 2 < 0 ? score = 0 : score -= 2;
    153.           }
    154.           else {
    155.               if (fishList.length > 0) {
    156.                   for (var i = 0; i < fishList.length; i++) {
    157.                       if (fishList[i].status == 1) {
    158.                           switch (fishList[i].sizeindex) {
    159.                               case -1: { score += 3; break; }
    160.                               case 0: { score += 1; break; }
    161.                               case 1: { score += 5; break; }
    162.                           }
    163.                           fishList.splice(i, 1); //成功吊到了一只鱼
    164.                       }
    165.                   }
    166.               }
    167.           }
    168.       }
    169.   }
    170.   if (mainObj.status == 0) {
    171.       mainObj.y = parseInt(mainObj.y + ((mainObj.speed - 90) * timer) / 100);
    172.       //钓到鱼了
    173.       if (fishList.length > 0) {
    174.           for (var i = 0; i < fishList.length; i++) {
    175.               if ((mainObj.x + 15 >= fishList[i].x) && (mainObj.x + 15 <= fishList[i].x +
    176.               fishList[i].w) && (mainObj.y + 10 >= fishList[i].y && mainObj.y + 10 <= 
    177.               fishList[i].y + fishList[i].h)) {
    178.                   fishList[i].status = 1;
    179.                   mainObj.status = mainObj.status + 1;
    180.                   break;
    181.               }
    182.           }
    183.       }
    184.       if (mainObj.y >= height + 260) {
    185.           mainObj.y = height + 260;
    186.           mainObj.status = 3;
    187.           mainObj.lese = 1;
    188.       }
    189.  
    190.  
    191.       //钓到鲨鱼
    192.       if (((sharkObj.x >= mainObj.x && sharkObj.x <= mainObj.x + 46) || 
    193.       ((sharkObj.x + sharkObj.w >= mainObj.x) && (sharkObj.x + sharkObj.w <= mainObj.x + 46))) 
    194.       && ((sharkObj.y >= mainObj.y && sharkObj.y <= mainObj.y + 46) || 
    195.       sharkObj.y + sharkObj.h >= mainObj.y) && (sharkObj.y + sharkObj.h <= mainObj.y + 46)) {
    196.           sharkObj.status = 1;
    197.           if (sharkObj.x > 150) {
    198.               sharkObj.flag = 3;
    199.           } else {
    200.               sharkObj.flag = 1;
    201.           }
    202.           mainObj.isShark = 1;
    203.           mainObj.status = 3;
    204.       }
    205.  
    206.   } else if (mainObj.status > 0 && mainObj.status < 3) {
    207.       mainObj.status = mainObj.status + 1;
    208.   }
    209.  
    210.   context.beginPath();
    211.   var qx;
    212.   switch (mainObj.direction) {
    213.       case 0: { qx = 65; break; }
    214.       case 1: { qx = 107; break; }
    215.       case 2: { qx = 150; break; }
    216.       case 3: { qx = 195; break; }
    217.       case 4: { qx = 220; break; }
    218.   }
    219.   context.moveTo(qx, 0);
    220.   context.lineTo(mainObj.x + 18, mainObj.y);
    221.   context.globalAlpha = 1;
    222.   context.lineWidth = 1;
    223.   context.stroke();
    224.   context.closePath();
    225.   context.drawImage(imglist[18], sx, 0, 46, 48, mainObj.x, mainObj.y, 35, 35);
    226. }

    源码icon-default.png?t=N7T8https://www.ormcc.com/

    需要源码请关注添加好友哦^ ^

    转载：欢迎来到本站，转载请注明文章出处https://ormcc.com/

  • 相关阅读:
    机器人制作开源方案 | 智能家庭防护机器人
    仿射密码 affine
    474. 一和零
    react create-react-app v5配置 px2rem （不暴露 eject方式）
    2021年5月IB考试报告出炉
    Cesium
    SpringBoot基础
    数据⼀致性模型有哪些？
    redis能否替代threadlocal
    Node历史版本下载及配置npm镜像
  • 原文地址：https://blog.csdn.net/qq_16659821/article/details/134059871