Yazılım Günlüğü

19 Temmuz 2016 Salı

Javascript Ping Pong Oyunu

Html5 ve javascript kullanarak yaptığım oyun

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
padding:0;
margin:0;
overflow:hidden;/*scroll çıkmaması için*/
}
</style>
</head>
<body>
<canvas id="canvas"> </canvas>
<audio preload="true" id="carp">
<source src="Tinie Tempah - Girls Like (Official Video).mp3"/>
// <source src="Tinie Tempah - Girls Like (Official Video).mp3"/>
<audio>
<script>
/* -----------------*/
//setInterval yerine kullandık aşağıdaki ifadeyi
//canvas animasyonumuz için gerekli kod
window.animasyonFrameIstegi=(function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msequestAnimationFrame ||
function (callback){
return window.setTimeout(callback,1000/60); //1 saniyede 60 defa kodu çalıştır demek.
};
})();

//animasyonu durdumak için kullanacaz.
window.animasyonFrameIptal=(function(){
return window.cancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout();
})();

/* ---------------*/
//canvas değişkeni
var canvas=document.getElementById("canvas"),
ctx=canvas.getContext("2d"),//canvas context oluşturduk.
G=window.innerWidth, //oyun alanı genişliği
Y=window.innerHeight,//oyun alanı yüksekliği
mouse={},//mouse objesi(nesnesi) tanımladık
parcalar=[],//parçaları içeren array
topum={}, //top objesi(top nesnesi)
cubuk=[2], //iki cubugu içeren array
puanlar=0,//kullanıcıların puanları
hiz=60,//hız saniye başına frame
carpismaParcacigi=20,//carpışma anaında çıkacak parçaçık sayısı
carpismaDegiskeni=0,
parcaPozisyonu={},//parçaların yörüngesi
kivilcimDegiskeni=1,
baslatButon={},//başlat butonu objesi(nesnesi)
resetButon={},//reset buton objesi(nesnesi)
bitti=0,
res,//animasyonu başlatan değişken
cubukCarpisma;

//canvasın tam ekran olmasını sağladık.
canvas.width=G;
canvas.height=Y;

//canvasta mouse hareketlerini algılamak için yaptık bu ifadeleri
canvas.addEventListener("mousemove",mouseHareket,true);//mouse hareket ederken mouseHareket fonksiyonunu çağır
canvas.addEventListener("mousedown",butonTiklandi,true);//mouse basılıyken butonTiklandi fonksiyonunu çağır

//carpışma müziği
carpisma=document.getElementById("carp");

//top nesnemizi tanımlıyoruz.
topum={
x:50, //topun x eksenindeki konumu
y:50, //topun y eksenindeki konumu
r:5, //yarıçap
c:"white", //renk
xh:4, //x ekseni hızı
yh:8, //y ekseni hızı

ciz:function(){
ctx.beginPath();
ctx.fillStyle=this.c;
ctx.arc(this.x,this.y,this.r,0*Math.PI,2*Math.PI,false);
ctx.fill();
}
};

//başlat butonu
baslatButon={
w:100, //genişlik
h:50, //yükseklik
x:G/2-50, //x konumu
y:Y/2-25, //y konumu

ciz:function(){
ctx.strokeStyle="white"; //karenin rengi
ctx.lineWidth=2; //karenin çizgi genişliği
ctx.strokeRect(this.x,this.y,this.w,this.h); //karenin x ve y konumu //karenin genişliği yüksekliği
ctx.font="18px Arial,sans-serif";
ctx.textAlign="center"; //karenin içindeki yazının konumunu belirttik
ctx.textBaseline="middle";
ctx.fillStyle="white"; //Başla yazısının rengi
ctx.fillText("Başla",G/2,Y/2); //Başla yazısının konumu

}
};

//reset butonu
//başlat butonu
resetButon={
w:100, //genişlik
h:50, //yükseklik
x:G/2-50, //x konumu
y:Y/2-50, //y konumu

ciz:function(){
ctx.strokeStyle="white"; //karenin rengi
ctx.lineWidth=2; //karenin çizgi genişliği
ctx.strokeRect(this.x,this.y,this.w,this.h); //karenin x ve y konumu //karenin genişliği yüksekliği
ctx.font="18px Arial,sans-serif";
ctx.textAlign="center"; //karenin içindeki yazının konumunu belirttik
ctx.textBaseline="middle";
ctx.fillStyle="white"; //Başla yazısının rengi
ctx.fillText("Tekrar Oyna",G/2,Y/2-25); //Başla yazısının konumu

}
};

//kivilcim oluştur
function parcacikOlustur(x,y,m){ //x ve y pozisyon m 'de parcacık sayısı
this.x=x || 0;
this.y || 0 ;

this.radius=1.2;

this.xh=-1.5+Math.random()*3; //topun x hızı
this.yh=m*Math.random()*1.5; //topun y hızı

}

//hizi arttırıyoruz.
function hizArttir(){

if(puanlar%4 ==0)
if(Math.abs(topum.xh)<15){
topum.xh+=(topum.xh<0)? -1 : 1;
topum.yh+=(topum.yh<0)? -2 : 2;
}
}

//çubuk için fonksyion oluştur
function Kurek(poz){
this.h=5; //kürek yüksekliği
this.w=150; //kürek genişliği

//kurek pozisyonu
this.x=G/2-this.w/2;
this.y=(poz=="ust")? 0:Y-this.h; //ternary(if yapısı) kullandık. //aşağıdaki çubuğun düzgün görünmesi için yaptık.
}

//çubuk arrrayimize küreklerimizi ekliyoruz.
cubuk.push(new Kurek("asagi"));
cubuk.push(new Kurek("ust"));

//tuval çizmek için gerekli fonksiyon
function canvasCiz(){
ctx.fillStyle="black";
ctx.fillRect(0,0,G,Y);/*ekranı doldurduk. siyah yaptık.*/
}

//herşeyi canvas bölgesinde çizmek için gerekli fonksiyon
function ciz(){
canvasCiz();
for(var i=0;i<cubuk.length;i++){
p=cubuk[i];
ctx.fillStyle="white";
ctx.fillRect(p.x,p.y,p.w,p.h);
}
topum.ciz();
guncelle();
}

//animasyonları çalıştırmak için oluşturduğumuz döngü
function animDongu(){
res=animasyonFrameIstegi(animDongu);
ciz();
}
//animDongu(); //browser açıldığında başlar bu döngü.

function baslamaEkranı(){
ciz();
baslatButon.ciz();
}

//ekrandaki değişiklikleri güncelle fonksyionu gösterecek.
function guncelle(){

skoruGuncelle();//skorumuzu güncellicez.

//topu hareket ettiriyoruz
topum.x+=topum.xh;
topum.y+=topum.yh;

//cubugu hareket ettiriyoruz
if(mouse.x && mouse.y){ //eğer mouseda bir hareketlilik varsa aşağıdakileri yap.

for(var i=1;i<cubuk.length;i++ ){

p=cubuk[i];
p.x=mouse.x-p.w/2; //mouse nereye giderse çubukda oraya gidiyor.
}
}

//cucukları çağır
p1=cubuk[1];
p2=cubuk[2];

//çarpışma işleminin gerçekleştiği yer.
if(carpismalar(topum,p1)){ //topla çubuk birbirine değdiği anı yapıyoruz.carpısmalar fonksyionundan true dönerse bunu yapıyoruz.
carpismaEylemi(topum,p1);

}else if(carpismalar(topum,p2)){
carpismaEylemi(topum,p2);
}else{// oyunda yandığımızda yapılan işlemler (carpismalar fonksiyonundan false dönerse bunu yapıyoruz.)
//top üst veya aşağı çubuga çarparsa yapılacak işlemler
if(topum.y+topum.r>Y){ //top yüksekliği geçerse yani oyun dışına çıkarsa kaybediyoruz.üst kısım için
topum.y=Y-topum.r;
oyunBitti();
}else if(topum.y<0){//top yüksekliği geçerse yani oyun dışına çıkarsa kaybediyoruz.alt kısım için
topum.y =topum.r;
oyunBitti();
}

//top sağ ve sol duvara çarparsa
if(topum.x+topum.r>G){
topum.xh=-topum.xh; //sağ tarafa çarparsa geri dönmesi için.
topum.x=G- topum.r;//top sağ tarafa tam çarptığı anda geri dönmesi için
}else if(topum.x-topum.r<0){
topum.xh=-topum.xh;//sol tarafa çarparsa geri dönmesi için.
topum.x=topum.r;
}

}//else bitişi

if(carpismaDegiskeni==1){
for(var k=0;k<carpismaParcacigi;k++){
parcalar.push(new parcacikOlustur(parcaPozisyonu.x,parcaPozisyonu.y,cogalt));

}

}

//parcalarıyay fonksiyonu
parcalariyay();
carpismaDegiskeni=0;//parçaları sonradan silmek için

}//güncelle fonksiyon sonu

//mousemuzu hareket ettiriyoruz.
function mouseHareket(e){
//sağ ve sol yönde hareket ettirmemizi sağlayan işlemler
mouse.x=e.pageX; // x koordinatı
mouse.y=e.pageY; // y koordinatı

}

//top ile çubuk arasındaki çarpışmyı kontrol eden fonksiyon
function carpismalar(b,p){ //b:top ,p:cubuk
if(b.x +topum.r>=p.x && b.x-topum.r<=p.x+p.w){ // (x ekseni yani x koordinatı) x ekseninde top ile cubugun çarpışma durumunu kontrol ettik
if(b.y>=(p.y-p.h) && p.y>0){ //y ekseninde top çubugu geçmeden için yapılan işlemler.
cubukCarpisma=1;
return true;

}else if(b.y<=p.h && p.y==0){ //buradada oyunun bitmesini sağlıyoruz.top cubugu geçerse yanıyoruz.
cubukCarpisma=2;
return true;
}else {
return false;
}

}

}

//carpışma işlemninin gerçekleştiği an
function carpismaEylemi(topum,p){ //p:parçaçık
topum.yh= -topum.yh;

if(cubukCarpisma==1){ //top yukarı çarptığında
topum.y=p.y-p.h;
parcaPozisyonu.y=topum.y-topum.r;
cogalt=-1;
}else if(cubukCarpisma==2){ //top aşağıya çarptığında
topum.y=p.h+topum.r;
parcaPozisyonu.y=topum.y-topum.r;
cogalt=1;
}
puanlar++;
hizArttir();

if(carpisma){
if(puanlar>0){
carpisma.pause();
}
carpisma.currentTime=0;
carpisma.play();

}
parcaPozisyonu.x=topum.x;
carpismaDegiskeni=1;

}

//parçaları dağıttığımız bölüm
function parcalariyay(){
for(var j=0;j<parcalar.length;j++){
par=parcalar[j];
ctx.beginPath();
ctx.fillStyle="white";
if(par.radius>0){
ctx.arc(par.x,par.y,par.radius,0,2*Math.PI,false);
}
ctx.fill();
par.x+=par.xh;
par.y+=par.yh;

//parçacıkları oluştuktan sonra kaybet
par.radius=Math.max(par.radius-0.05,00);
}

}

//puan tablosu
function skoruGuncelle(){
ctx.fillStyle="white";
ctx.font="16px Arial,sans-serif";
ctx.textAlign="left"; //solda
ctx.textBaseline="top";//pozisyonu belirledik yukarıda solda
ctx.fillText("Puan: "+puanlar,20,20);//yazının genişliği ve yüksekliği 20 20

}

//oyunu bitiren fonksyion
function oyunBitti(){
ctx.fillStyle="white";
ctx.font="20px Arial,sans-serif";
ctx.textAlign="center";
ctx.textBaseline="middle";//yazıyı ortalayacak
ctx.fillText("Yenildin loo :( -Toplamda"+puanlar+"puan aldin",G/2,Y/2+25);//yazının konumunu belirledik.

animasyonFrameIptal(res);

bitti=1;

resetButon.ciz();//oyun bittiğinde reset butonu belirir.
}

//buton tıklandığında başla veya resetle
function butonTiklandi(e){

//mouse pozisyonu sakla
var mx=e.pageX, //mouseun x eksenindeki hareketini yakaladık
my=e.pageY; //mouseun y ekesenindeki hareketini yakaladık

//başlat butonuna tıkla
if(mx>baslatButon.x && mx<=baslatButon.x+baslatButon.w){
animDongu();

//baslat butonu ekrandan sil
baslatButon={};
}
if(bitti==1){
if(mx>resetButon.x && mx<=resetButon.x+resetButon.w){
topum.x=20;
topum.y=20;
puanlar=0;
topum.xh=4;
topum.yh=8;
animDongu();

bitti=0;
}
}
}
baslamaEkranı();

</script>
</body>
</html>

18 Temmuz 2016 Pazartesi

HTML5 CANVAS ÇİZİM PALETİ YAPMA(KALEMLE ÇİZİM YAPMA)

HTML5 CANVAS DUVARA ÇARPAN TOPLAR

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var mycanvas = document.getElementById("canvas");
var ctx = mycanvas.getContext("2d");
var w=window.innerWidth;
var h=window.innerHeight;
mycanvas.width=w;
mycanvas.height=h;
ctx.fillStyle="black";/*ekranın tamamını siyahla kapladık*/
ctx.fillRect(0,0,w,h);

var toplar=[];
for(var a=0;a<50;a++){
toplar.push({"px":w/2,"py":h/2,"vx":5-10*Math.random(),"vy":5-10*Math.random()});

}
function animasyon(){
ctx.clearRect(0,0,w,h);
ctx.fillStyle="black";/*canvasın rengini belirledik*/
ctx.fillRect(0,0,w,h);/*canvası çizdik*/
ctx.fillStyle="white";/*topların rengini beyaz yaptık*/
for(var b=0;b<50;b++){
ctx.beginPath();
ctx.arc(toplar[b].px,toplar[b].py,15,0*Math.PI,2*Math.PI); /*toplarımızın konumunu ve yarıçapını belirledik*/
ctx.fill();
toplar[b].px+=toplar[b].vx*2; /*pozisyonuna hızı ekledik*/
toplar[b].py+=toplar[b].vy*2;

if(toplar[b].px>=w){ /*duvara çarptıgında geri dönmesini sağladık*/
toplar[b].vx=-toplar[b].vx;
}
if(toplar[b].px<=0){/*duvara çarptıgında geri dönmesini sağladık*/
toplar[b].vx=-toplar[b].vx;
}
if(toplar[b].py>=h){/*duvara çarptıgında geri dönmesini sağladık*/
toplar[b].vy=-toplar[b].vy;
}
if(toplar[b].py<=0){/*duvara çarptıgında geri dönmesini sağladık*/
toplar[b].vy=-toplar[b].vy;
}

}
}

setInterval(animasyon,20);

}
</script>
</head>

<body>
<canvas id="canvas" ></canvas>
</body>
</html>

HTML5 CANVAS DAİRESEL GRAFİK ÇİZİMİ

<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.test{
border:2px solid #eee;
width:20px;
height:20px;
display:inline-block;
}
canvas{
background-color: #eee;
border:2px solid dotted;
border:2px solid #d3d3d3;
/* background-color: #000;*/
}
#gosterge{
position:absolute;
top:380px;
left:50px;
}
</style>
<script>
window.onload = function () {
var angle=Math.PI/180;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var domates=120;//red
var patates=180;//sarı
var patlican=60;//black
var sayi=0;
function eylem(){
if(sayi>=360){
clearInterval(saydir);
ctx.beginPath();
ctx.arc(200,200,20,0*Math.PI,2*Math.PI);
ctx.fill();

ctx.beginPath();
ctx.strokeStyle="blue";
ctx.arc(200,200,100,0*Math.PI,2*Math.PI);
ctx.stroke();
}
if(sayi<=domates){
ctx.fillStyle="red";
}
else if(sayi>domates && sayi<=patates+domates){
ctx.fillStyle="yellow";
}
else{
ctx.fillStyle="black";
}
// ctx.clearRect(0,0,400,400);
ctx.translate(200,200);
ctx.rotate(angle);
ctx.translate(-200,-200);
ctx.fillRect(200,200,2,100);
sayi+=1;
}

saydir=setInterval(eylem,5);
}
</script>

</head>
<body>

<canvas id="canvas" height="400" width="400" >
Your browser does not support the HTML5 canvas tag.</canvas>
<div id="gosterge">
<div style="background-color:red" class="test"></div>domates 120
<div style="background:yellow" class="test"></div>patates 150
<div style="background:black" class="test"></div>patlıcan 90
</div>

</body>
</html>

HTML5 CANVAS ATEŞ EFEKTİ YAPMA

<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
canvas{
position:absolute;
top:0;
left:0;
margin:0;
padding:0;

border:2px solid #d3d3d3;
/* background-color: #000;*/
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
h=window.innerHeight;/*windowsun yükseklik değerini alır*/
w=window.innerWidth;/*windowsun genişlik değerini alır*/
canvas.height=h;
canvas.width=w;
//ctx.fillRect(0,0,w,h);

fires=[];
for (var a=0;a<100;a++){
fires.push({"x":w/2-100*Math.random(),"y":h/2,"r":30*Math.random(),"vy":5*Math.random(),"life":100*Math.random()})
}

function eylem(){
ctx.fillStyle="black";//çizilen karenin rengini siyah yaptık
ctx.clearRect(0,0,w,h);
ctx.fillRect(0,0,w,h);/*ekranı tamemen siyahla kapladık windowsun genişliği ve yüksekliği kadar.*/

ctx.globalCompositeOperation="lighter";/*renkleri saydamlaştırıyor üst üste bindiriyor.*/
for(var b=0;b<100;b++){
var renk=ctx.createRadialGradient(fires[b].x,fires[b].y,2,fires[b].x,fires[b].y,fires[b].r)//x1,y1,r1,x2,y2,r2
renk.addColorStop(0,"white");
renk.addColorStop(0.4,"yellow");
renk.addColorStop(0.6,"orange");
renk.addColorStop(1,"red");
ctx.fillStyle=renk;/*topların rengini gradient renklerinden yaptık*/
ctx.beginPath();
ctx.arc(fires[b].x,fires[b].y,fires[b].r,0*Math.PI,2*Math.PI);
ctx.fill();

fires[b].y-=fires[b].vy;
fires[b].r-=0.4;
fires[b].life-=1;

if(fires[b].life<0 || fires[b].r<0 || fires[b].y<100){
fires[b].x=w/2-100*Math.random();
fires[b].y=h/2;
fires[b].r=30*Math.random();
fires[b].life=100*Math.PI;
}
}

}

setInterval(eylem,30);

}
</script>

</head>
<body>

<canvas id="canvas" >
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>

HTML5 CANVAS TEXT ALİGN ÖZELLİĞİ

<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="newCascadeStyleSheet.css" rel="stylesheet" type="text/css"/>
<style>
canvas{

border:1px solid #d3d3d3;
/* background-color: #000;*/
}
</style>
<script>
window.onload = function () {
var benimtuval = document.getElementById("mycanvas");
var ctx = benimtuval.getContext("2d");
ctx.font="30px arial";
ctx.textAlign="start";//end:bitişe ekler start:noktanın başına ekliyor ,right sağına ekler,left soluna ekler.
ctx.fillText("merhaba dünya ",300,200);

ctx.beginPath();
ctx.arc(300,200,5,0*Math.PI,2*Math.PI);
ctx.fill();

}
</script>

</head>
<body>

<canvas id="mycanvas" width="600" height="400" >
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>

HTML5 CANVAS KAR YAĞIŞI EFEKTİ YAPTIK GÜZEL UYGULAMA

<!DOCTYPE html>
<html>
<head>
<style>
canvas{

border:1px solid #d3d3d3;
/* background-color: #000;*/
}
</style>
<script>
window.onload = function () {
karlar=[];
for(var a=0;a<1000;a++){
karlar.push({"x":600*Math.random(),"y":400*Math.random(),"vy":1,"r":Math.random()});
//"ad":ramazan, "soyad":aras obje mantıgında yaptık
}
var benimtuval = document.getElementById("mycanvas");
var ctx = benimtuval.getContext("2d");
pen=new Image();
pen.src="pen.png";
resim=new Image();
resim.src="kartanesi.jpg";

function eylem(){
ctx.clearRect(0,0,600,400);
ctx.drawImage(pen,0,0,pen.width,pen.height,0,0,benimtuval.width,benimtuval.height);
ctx.fillStyle="#eee";
ctx.globalAlpha=0.8;
for(var b=0;b<karlar.length;b++){
ctx.beginPath();
ctx.arc(karlar[b].x,karlar[b].y,karlar[b].r,0*Math.PI,2*Math.PI);
ctx.fill();

karlar[b].y+=karlar[b].vy;
karlar[b].x+=0.3-Math.random();
if(karlar[b].y>600){
karlar[b].x=600*Math.random();/*0 ile 600 arasında değer üretir*/
karlar[b].y=-400*Math.random();
karlar[b].r=Math.random();/*0 ile 1 arasında değerler üretir*/
karlar[b].vy=10*Math.random();
}
ctx.globalAlpha=0.5;/*saydamlık veriyoruz yazıya*/
ctx.font="bold 30pt arial";
ctx.fillText("NEW YEARS",150,150);
ctx.globalAlpha=1;
}
}
setInterval(eylem,20);
}
</script>

</head>
<body>
<img src="pen.png" style="display:none" />
<img src="kartanesi.jpg" id="resim" style="display:none" />
<canvas id="mycanvas" width="600" height="400" >
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>