CodePun: May 2018

Membuat Live Chat Ala Facebook Menggunakan Php dan Jquery

Mungkin bagi kalian penggun facebook sudah tidak asing dengan tampilan chat nya facebook yang di kenal dengan istilah live chat. Nah pada postingan kali ini yang akan bahas mengenai bagaiman sih cara buat chating online atau live chat mirip mirip facebook ini. ?

ok langsung saja kita ke code dan apa saja sih bahan yang di butuhkan

Langkah 1:

Kita butuh file jquery dan css yakni :

Langkah ke 2:

Kita buat file dengan nama tes.php copy kode di bawah

<span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('Ceena')">Ceena</a></span>

</div>

</div>

</div>

<span id="slider-username"> <a href="javascript:void(0)" onclick="javascript:chatWith('maman')">maman</a> </span>

</div>

</div>

<span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('knting')">knting</a> </span>

</div>

</div>

<span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('dadan')">dadan</a> </span>

</div>

Sampai di sini tahapan sudah selesai tinggal tes utnuk kode lengkap silahkan donlod di sini

Sekian postingan kali ini semoga bermanfaat terima kasih

Tutorial Membuat Game ular menggunakan HTML dan Jquery

Admin 4:59 AM Add Comment

CodePun

Bismilah

Lama tidak posting kali ini saya akan membagikan game ular atau game snake sebenarnya game ini bukan buatan saya namun dengan game ini saya banyak belajar ok langsung saja Let,s go pertama apa saja yang di butuhkan tentunya file jquery.min.js setelah itu kita buat file dengan nama index.hml lalu pastekan kode di bawah

<!DOCTYPE html>

<html>

<head>

<title> Snake Game </title>

<style>

#container {

margin: auto;

width: 600px;

}

#myCanvas {

background-color: black;

border: 3px white solid;

}

#gameover {

position : absolute;

top: 200px;

left: 600px;

font-size: 25px;

text-align: center;

color: #FFFFFF;

display: none;

}

#score {

width: 600px;

height: 100px;

margin: auto;

background-color: white;

border: 3px black solid;

color: black;

-webkit-box-shadow:0 0 20px #000;

-moz-box-shadow: 0 0 20px #000;

box-shadow:0 0 20px #000;

padding-left:5px;

}

#current, #highest {

font-size : 25px;

color: black;

text-align: center;

}

a {

text-decoration: none;

color : #FFFFFF;

background-color: #9c27b0;

padding-left:5px;

padding-right:5px;

border-radius: 7px;

}

a:hover{

text-decoration: none;

color : #FFFFFF;

background-color: #673ab7;

padding-left:5px;

padding-right:5px;

border-radius: 7px;

}

span {

color : #FFFFFF;

}

</style>

$(document).ready(function() {

var canvas = $("#myCanvas")[0];

var ctx = canvas.getContext("2d");

var w = $("#myCanvas").width();

var h = $("#myCanvas").height();

var cw = 15;

var food;

var snake;

var d = "RIGHT";

var gameloop = setInterval(update, 100);

function update() {

if (d == "RIGHT")

snake.x = snake.x + 1;

else if (d == "LEFT")

snake.x = snake.x - 1;

else if (d == "UP")

snake.y = snake.y - 1;

else if (d == "DOWN")

snake.y = snake.y + 1;

check_borders();

check_food();

blank();

paint_cell(food.x, food.y, "grey");

paint_cell(snake.x, snake.y, "green");

}

function showGameOver() {

var current = $('#current').text();

$('#final').text(current);

$('#gameover').fadeIn();

}

function updateHighScore() {

var current = $("#current").text();

var highest = $("#highest").text();

if (parseInt(current) > parseInt(highest)) {

$('#highest').text(current)

}

function placeFood() {

food = {

x : Math.round(Math.random()*(w-cw)/cw),

y : Math.round(Math.random()*(h-cw)/cw)

}

function placeSnake() {

snake = {

x : Math.round(Math.random()*(w-cw)/cw),

y : Math.round(Math.random()*(h-cw)/cw)

}

function blank(){

//Paint The Canvas

ctx.fillStyle = "black";

ctx.fillRect(0, 0, w, h);

ctx.strokeStyle = "white";

ctx.strokeRect(0, 0, w, h);

}

function check_borders() {

if (snake.x < 0 || snake.x > (w-cw)/cw || snake.y < 0 || snake.y > (h-cw)/cw) {

clearInterval(gameloop);

showGameOver();

}

function paint_cell(x,y, color){

ctx.fillStyle=color;

ctx.fillRect(x*cw,y*cw,cw,cw);

ctx.strokeStyle="white";

ctx.strokeRect(x*cw,y*cw,cw,cw);

}

function check_food() {

if (food.x == snake.x && food.y == snake.y) {

var current = parseInt($('#current').text());

current += 1;

$('#current').text(current);

placeFood();

}

placeFood();

paint_cell(food.x, food.y, "grey");

placeSnake();

paint_cell(snake.x, snake.y, "green");

//Keyboard Controller

$(document).keydown(function(e){

//39: RIGHT

//37: LEFT

//38: UP

//40: DOWN

var key = e.which;

if(key == "37") {

snake.x -= 1;

d = "LEFT";

}

else if(key == "38") {

snake.y -= 1;

d = "UP";

}

else if(key == "39") {

snake.x += 1;

d = "RIGHT";

}

else if(key == "40") {

snake.y += 1;

d = "DOWN";

}

check_food();

blank();

color = "grey";

paint_cell(food.x, food.y);

color = "green";

paint_cell(snake.x, snake.y);

});

</script>

</head>

<body>

Game over!

<br>

skor kamu <span id="final"></span>

<br>

<a onClick="window.location.reload()" href="#">klik untuk main lagi</a>

</div>

Your browser does not support the canvas feature

</canvas>

</div>

<div>gunakan panah ke kiri kanan atas dan bawah untuk menggerakan <span id="highest"></span>

</div>

</body>

</html>

Cukup sekian postingan kali ini semoga bermanfaat untuk source codenya silahkan download di sini