• 08-202021
  • canvas和WebSocket练习笔记 <<返回

    ';console.log(send_str);c.ws.send(send_str);};(function() {document.addEventListener('keydown', client.keydown, false);document.addEventListener('keyup', client.keyup, false);})();}var Player = function(c,client_id,name){var player = this;player.x=c.canvas.width / 2;player.y=c.canvas.height / 2;player.map_x=250;player.map_y=100;player.is_me=false;player.is_del=false;player.del_msg="";//子弹数和同时上限player.bullet_num=0;player.bullet_max=4;player.name=name?name:"傻逼";player.client_id = client_id; //鍒涘缓鏂扮殑鍥剧墖瀵硅薄 player.player_img = new Image(); //鎸囧畾鍥剧墖鐨刄RL player.player_img.src = "/images/Mario.png";player.img_x_step=20;//图片X轴步进player.img_y_step=20;//图片Y轴步进player.frame = 1;//帧数player.max_frame = 10;//帧数上限//方向player.direction = 'r';player.is_move = false;player.is_move_l = false;player.is_move_r = false;player.is_jump = false;player.jump_speed = 0;player.raw_jump_speed = 10;player.fast_run_speed = 10;player.run_speed = player.normal_run_speed = 5;this.update = function() {//判断失败if(player.is_del||player.check_end()){return;}next_fix_y = player.is_jump?player.jump_speed:-1.4;//console.log(next_fix_y);if(player.is_impact(0,next_fix_y,c.map.fix_x,c.map.fix_y,1)){player.jump_speed = 0;player.is_jump = false;//console.log(player.y );//console.log(Math.ceil(player.y/player.img_y_step)*player.img_y_step);player.map_y = Math.round(player.map_y/player.img_y_step)*player.img_y_step;}else{console.log(player.map_y+"|"+player.name+"|"+next_fix_y);player.is_jump = true;player.frame = player.direction=='r'?1:2;player.map_y = player.map_y - next_fix_y;player.jump_speed-=1.4;if(player.jump_speed<-10)player.jump_speed = -10/* player.is_jump = true;player.jump_speed-=1.5;if(player.jump_speed<-10)player.jump_speed = -10player.y = player.y - next_fix_y; */}//行走动画if(player.is_move){if(!player.is_jump){player.frame++;player.frame>player.max_frame&&(player.frame=1);}//判断左右是否接触//获取下一步位置(地图卷动)var next_fix_x = player.direction=='r'? player.run_speed:(-1*player.run_speed);//判断碰撞if(!player.is_impact(next_fix_x,0,c.map.fix_x,c.map.fix_y,2)){//console.log(around);//未碰撞则设置下一步位置player.map_x+=next_fix_x;//设置地图卷动修正player.is_me && c.fix(player.map_x-c.canvas.width / 2);}}player.x=player.map_x - c.map.fix_x;player.y=player.map_y - c.map.fix_y;//console.log(player.map_x);//check()};this.draw = function() {//判断失败if(player.is_del){c.context.strokeStyle='#f00';c.context.textAlign='center';//添加的一行代码c.context.strokeText(player.del_msg,250,250);var x_step = 0;var y_step = 3*player.img_y_step;}else{var x_step = (player.frame-1)*player.img_x_step;var y_step = player.is_jump?(2*player.img_y_step):player.direction=='r'?(0*player.img_y_step):(1*player.img_y_step);}//console.log(y_step);var x = player.map_x - c.map.fix_x - player.img_x_step/2;var y = player.map_y - c.map.fix_y - player.img_y_step;c.context.drawImage(player.player_img,x_step,y_step, player.img_x_step, player.img_y_step, x, y, player.img_x_step, player.img_y_step);c.context.strokeStyle='#f00';c.context.textAlign='center';//添加的一行代码c.context.strokeText(player.name,x+player.img_x_step/2,y-10);};this.is_impact = function(player_fix_x,player_fix_y,next_fix_x,next_fix_y,type) {var player_x = player.map_x;var player_y = player.map_y - 1;//console.log(player_y);//计算碰撞var around = c.map.getAround(player_x,player_y,type);//console.log(around);//console.log(player.x+"|"+player.y);//console.log(player_x+"|"+player_y);var next_player_x = player_x+player_fix_x-player.img_x_step/2;var next_player_y = player_y-player_fix_y-player.img_y_step+1;//console.log(next_player_y);for(var i=0;i<around.length;i++){//-player.img_x_step用于角色居中后的修正var rect = check(next_player_x, next_player_y, player.img_x_step, player.img_y_step, around[i][0], around[i][1], c.map.step,c.map.step);var isHit = (rect[2] - rect[0]) * (rect[3] - rect[1]) > 0;//console.log(next_player_x,next_player_y);if(isHit){return true;}}return false;};this.check_end = function(){//摔死if(player.map_y>c.map.h){if(player.is_me){player.del_msg = '失败:摔死!';}player.is_del = true;return true;}//中弹判断for(var i=0;i<c.bullet.list.length;i++){if(c.bullet.list[i]['client_id'] == player.client_id) continue;var rect = check((player.map_x-player.img_x_step/2), player.map_y-player.img_y_step, player.img_x_step, player.img_y_step, c.bullet.list[i]['map_x'], c.bullet.list[i]['map_y'], c.bullet.list[i]['w'],c.bullet.list[i]['h']);var isHit = (rect[2] - rect[0]) * (rect[3] - rect[1]) > 0;if(isHit){console.log(player.map_x);console.log((player.img_y_step+(player.map_y-player.img_y_step))+"|"+c.bullet.list[i]['map_y']);console.log((c.bullet.list[i]['h']+c.bullet.list[i]['map_y'])+"|"+(player.map_y-player.img_y_step));//console.log((player.map_x-player.img_x_step/2)+"|"+(player.map_y-player.img_y_step)+"|"+player.img_x_step+"|"+player.img_y_step+"|"+c.bullet.list[i]['map_x']+"|"+c.bullet.list[i]['map_y']+"|"+c.bullet.list[i]['w']+"|"+c.bullet.list[i]['h']);if(player.is_me){player.del_msg = '失败:被'+c.client.client_list[c.bullet.list[i]['client_id']]['name']+'所杀!';}player.is_del = true;return true;}}};(function() {})();// 矩形一 top-left 坐标 (A, B), C 为 width, D 为 height// 矩形二 同上// 如果没有相交,返回 [0, 0, 0, 0]// 如果相交,假设相交矩形对角坐标 (x0, y0) (x1, y1) -- x1 > x0 & y1 > y0// return [x0, y0, x1, y1]function check(A, B, C, D, E, F, G, H) { // 转为对角线坐标 C += A, D += B, G += E, H += F; // 没有相交 if (C <= E || G <= A || D <= F || H <= B)return [0, 0, 0, 0]; //console.log(A+"|"+B+"|"+C+"|"+D+"|"+E+"|"+F+"|"+G+"|"+H); var tmpX, tmpY; if (E > A) { tmpX = G < C ? [E, G] : [E, C]; } else { tmpX = C < G ? [A, C] : [A, G]; } if (F > B) { tmpY = H < D ? [F, H] : [F, D]; } else { tmpY = D < H ? [B, D] : [B, H]; } return [tmpX[0], tmpY[0], tmpX[1], tmpY[1]];}};var Bullet = function(c){var bullet = this;//子弹列表//{{//client_id://map_x://map_y://w://h://speed://img_index://},}/* bullet.list = [{client_id:1,map_x:50,map_y:100,w:8,h:8,direction:'r',speed:8,img_index:0,}]; */bullet.list = [];//子弹贴图 bullet.texture_img = new Image(); bullet.texture_img.src = "/images/Texture.png";bullet.texture = [[63,81,8,8]];this.update = function() {for(var i=0;i<bullet.list.length;i++){switch(bullet.list[i].direction){case 'l': bullet.list[i].map_x -= bullet.list[i].speed; break;case 'r': bullet.list[i].map_x += bullet.list[i].speed; break;case 'u': bullet.list[i].map_y -= bullet.list[i].speed; break;case 'd': bullet.list[i].map_y += bullet.list[i].speed; break;}var max_x = c.map.fix_x+c.canvas.width;var min_x = c.map.fix_x;var max_y = c.map.fix_y+c.canvas.height;var min_y = c.map.fix_y;//console.log(bullet.list[i]);if(bullet.list[i].map_x<min_x || bullet.list[i].map_x>max_x || bullet.list[i].map_y<min_y || bullet.list[i].map_y>max_y){c.client.bullet_remove(bullet.list[i].client_id);bullet.list.splice(i,1);}}};this.draw = function() {for(var i=0;i<bullet.list.length;i++){var texture = bullet.texture[bullet.list[i].img_index];var x_step = texture[0];var y_step = texture[1];var x = bullet.list[i].map_x - c.map.fix_x - texture[2]/2;var y = bullet.list[i].map_y - c.map.fix_y - texture[3]/2;//console.log(x+"|"+y);c.context.drawImage(bullet.texture_img,x_step,y_step, texture[2], texture[3], x, y, texture[2], texture[3]);}};this.add = function(new_bullet) {bullet.list.push(new_bullet);console.log(bullet.list);};}var c = new C();var runloop = function(){c.runloop();}function restart(){c.restart();}//50毫秒一帧,一秒20帧setInterval(runloop,50);</script></body></html>

    服务端php:就是简单分发,因为简单就不贴了