Javascript application

331 views

Published on

Tugas Web Programming dengan topik Javascript Application

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
331
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript application

  1. 1. Tugas Web Programming 05PZT
  2. 2. Draw ME !!!
  3. 3. Fitur (1/6) : Canvas
  4. 4. Fitur (2/6) : Generated & Input wordsScreen awal Screen player lain setelah input
  5. 5. Fitur (3/6) : Scoring and chance
  6. 6. Fitur 4/6 : Chat
  7. 7. Fitur (5/6) : Size + Drawing tools type
  8. 8. Fitur 6/6 : Login + Logout Login Logout
  9. 9. /* ======================================= Draw Events */ var canvas = document.getElementById('drawme');//canvas to draw var c_draw = canvas.getContext('2d');//to draw need to get context from javascript that prepared for drawing /* ======================================= Draw Events */ $("#drawme") .mousedown(function(e){ c_data.b_x = e.pageX - this.offsetLeft; c_data.b_y = e.pageY - this.offsetTop; status.hold = true; c_draw.strokeStyle = (status.eraser_flag)?"#fff":c_data.color; c_draw.lineWidth = c_data.size; c_draw.beginPath();//to begin drawing App.socket.emit("draw_socket",{ hold:1, s_style:c_draw.strokeStyle,//color l_width:c_draw.lineWidth//size }); })
  10. 10. .mousemove(function(e){ if(status.hold){ var pos_x = e.pageX - this.offsetLeft; var pos_y = e.pageY - this.offsetTop; //console.log(''+pos_x+' '+pos_y); c_draw.moveTo(c_data.b_x,c_data.b_y); c_draw.lineTo(pos_x,pos_y); c_draw.stroke(); App.socket.emit("draw_socket",{ x:pos_x, y:pos_y, b_x:c_data.b_x, b_y:c_data.b_y, s_style:0,//color l_width:0,//size hold:2 }); c_data.b_x = pos_x; c_data.b_y = pos_y; } }) .on("mouseup mouseleave",function(){ status.hold = false; App.socket.emit("draw_socket",{ hold:3 }); c_draw.closePath(); });
  11. 11. Code Chat /* ======================================= Chat Events */ send_msg.on("click",function(){//event utk mengirim chat handleChat(); }); txt_msg.on("keydown",function(e){//event utk mengirim chat if(e.keyCode == 13){ handleChat(); } }); /* Function handle */ //fungsi2 untuk menghandle chat /* Handle chat */ function handleChat(){ var tamp = txt_msg.val(); $source_e.chat_msg.append("<li>"+tamp+"</li>"); App.socket.emit("chatting_socket",tamp); txt_msg.val(""); $source_e.chat_msg.scrollTop($source_e.chat_msg.height()); }
  12. 12. Q & A
  13. 13. Thank You     

×