Javascript application
Upcoming SlideShare
Loading in...5
×
 

Javascript application

on

  • 251 views

Tugas Web Programming dengan topik Javascript Application

Tugas Web Programming dengan topik Javascript Application

Statistics

Views

Total Views
251
Views on SlideShare
251
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Javascript application Javascript application Presentation Transcript

  • Tugas Web Programming 05PZT
  • Draw ME !!!
  • Fitur (1/6) : Canvas
  • Fitur (2/6) : Generated & Input wordsScreen awal Screen player lain setelah input
  • Fitur (3/6) : Scoring and chance
  • Fitur 4/6 : Chat
  • Fitur (5/6) : Size + Drawing tools type
  • Fitur 6/6 : Login + Logout Login Logout
  • /* ======================================= 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 }); })
  • .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(); });
  • 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()); }
  • Q & A
  • Thank You     