Bilgisayar-Bilişim Teknolojileri
Ana Sayfa
Bilişim Teknolojileri Forumu Son Konuları
24 Saat
Bilişim Teknolojileri - Formatör - Bilgisayar Öğretmeni Kayıt
Kayıt Olun
iletişim
iletişim
Detaylı Arama
Arama

BootStrap Tema ve JQuery Kodlarıyla Puzzle Oyunu Yapma

Konu, 'Teknik, Meslek Liseleri Uygulama ve Materyaller' kısmında klmno tarafından paylaşıldı.


Sayfayı Paylaş /bbnetsosyal

  1. klmno

    klmno Süper Üye Süper Üye

    Kayıt:
    30 Kasım 2015
    Mesajlar:
    1.326
    Beğeni:
    45
    Puzzle oyunu, ekrana gelen resimlerin belirtilen formatta dizilmesinden oluşur. Bu oyunda resmin tamamını görme be hamleleri bu resme ulaşmak için bilinçli olarak yapmak önemlidir. Bu uygulamada 1 ile 9 arasındaki sayıların dizilişi puzzle olarak istenmektedir. İlkokul ve ortaokul çocukları için eğlendirici bir oyun olabilir.

    Aşağıdaki kodları web sayfasına yapıştırınız.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Maarifi Cedid - Yenilikçi Eğitim</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <style type="text/css">
    img
    {
    width: 120px;
    height: 120px;
    }

    #hata
    {
    text-align: center;
    line-height: 60px;
    position: absolute;
    width: 120px;
    height: 60px;
    background-color: gray;
    display: none;
    }
    </style>
    <script language="javascript" type="text/javascript">
    var dizi = [];
    var konum = ["000000", "120000", "240000", "000120", "120120", "240120", "000240", "120240", "240240"];
    var indis = 0;
    var deneme = 0;
    var skor = 0;

    $(function () {
    $("img").hide();
    $("#btnYeni").click(function () {
    $("#btnYeni").attr("disabled", "disabled");
    dagit();
    $("img").show();
    $("#r99").hide();
    });
    });

    function dagit() {
    var i = 0;
    var isim, yol;
    var satir, sutun;

    dizi = [];
    deneme = 0;
    $("#sonuc").html("Hamle Sayısı : 0");

    do {
    indis = Math.floor(Math.random() * 9 + 1);
    if (dizi.indexOf(indis) == -1) {
    dizi = indis;
    i++;
    };
    } while (i < 9);

    for (i = 0; i < 9; i++) {
    isim = "#r" + dizi;
    yol = "img/" + dizi + ".png";

    satir = parseInt(konum.substr(0, 3));
    sutun = parseInt(konum.substr(3, 3));

    $(isim).attr("src", yol).css({
    position: "absolute", left: satir, top: sutun
    });
    }
    }

    function hamleniz(x, y) {
    deneme++;
    $("#sonuc").html("Hamle Sayısı : " + deneme.toString());

    var sol, ust, sols, usts;
    var pos1 = x.position();
    var pos2 = y.position();

    sol = Math.round(pos1.left);
    ust = Math.round(pos1.top);
    sols = Math.round(pos2.left);
    usts = Math.round(pos2.top);

    if (sol != sols && ust != usts) {
    hata();
    return;
    }

    if (sol - sols > 120 || sols - sol > 120) {
    hata();
    return;
    }

    if (ust - usts > 120 || usts - ust > 120) {
    hata();
    return;
    }

    x.css({ "left": sols + "px", "top": usts + "px" });
    y.css({ "left": sol + "px", "top": ust + "px" });
    }

    function hata() {
    var a = $("#alan").width();
    var b = $("#alan").height();
    var left = Math.round(a / 2) - 60, top = Math.round(b / 2) - 30;
    $("#hata").css({
    "top": top + "px",
    "left": left + "px",
    "font-size": "12px",
    "text-align": "center",
    "line-height": "60px"
    }).show();

    $("#hata").animate({
    "width": "+=242px",
    "height": "+=120px",
    "line-height": "+=120px",
    "font-size": "+=36px",
    "top": top / 2 + "px",
    "left": "0px",
    "opacity": '10.0'

    }, 1000, function () {
    $("#hata").animate({
    "width": "120px",
    "height": "60px",
    "line-height": "60px",
    "font-size": "12px",
    "top": top + "px",
    "left": left + "px",
    "opacity": '0.0'
    }, 1000, function () {
    $("#hata").hide();
    })
    });
    }
    </script>
    </head>
    <body>
    <div class="container">
    <div class="row">
    <div class="col-sm-3">
    </div>
    <div class="col-sm-6">
    <div style="width: 362px; height: 400px; margin: auto">
    <h2 style="text-align: center">
    Puzzle Oyunu</h2>
    <div id="alan" style="background-color: Orange; width: 100%; height: 360px; position: relative">
    <img id="r1" alt="" onclick="hamleniz($('#r1'),$('#r9'));" />
    <img id="r2" alt="" onclick="hamleniz($('#r2'),$('#r9'));" />
    <img id="r3" alt="" onclick="hamleniz($('#r3'),$('#r9'));" />
    <img id="r4" alt="" onclick="hamleniz($('#r4'),$('#r9'));" />
    <img id="r5" alt="" onclick="hamleniz($('#r5'),$('#r9'));" />
    <img id="r6" alt="" onclick="hamleniz($('#r6'),$('#r9'));" />
    <img id="r7" alt="" onclick="hamleniz($('#r7'),$('#r9'));" />
    <img id="r8" alt="" onclick="hamleniz($('#r8'),$('#r9'));" />
    <img id="r9" alt="" onclick="hata();" />
    <img id="r99" alt="" />
    <div id="hata">
    Hatalı Hamle
    </div>
    </div>
    <div style="background-color: Gray; width: 100%; height: 40px">
    <table style="width: 100%">
    <tr>
    <td style="text-align: left; width: 40%; color: White">
    <label id="sonuc">
    Hamle Sayısı :</label>
    </td>
    <td style="text-align: left; width: 30%; color: White">
    <label id="skor">
    Skor :</label>
    </td>
    <td>
    <input class="btn btn-info" id="btnYeni" type="button" value="Yeni Oyun" />
    </td>
    </tr>
    </table>
    </div>
    </div>
    </div>
    <div class="col-sm-3">
    </div>
    </div>
    </div>
    </body>
    </html>

    Oyunun çalışır hali:

    http://www.maarificedid.com/uygulamalar/jquery-puzzle-oyunu.html
     
  2. klmno

    klmno Süper Üye Süper Üye

    Kayıt:
    30 Kasım 2015
    Mesajlar:
    1.326
    Beğeni:
    45
    Web tasarim dersine giren yok herhalde
     
    gizemkar bunu beğendi.
  3. sas7979

    sas7979 Seçkin Üye Seçkin Üye

    Kayıt:
    1 Aralık 2009
    Mesajlar:
    537
    Beğeni:
    16
    Var olmaya var da javascript e geçmeden jquery css i bitirmeden bootstrap anlatmıyorum şahsen
     
  4. klmno

    klmno Süper Üye Süper Üye

    Kayıt:
    30 Kasım 2015
    Mesajlar:
    1.326
    Beğeni:
    45
  5. klmno

    klmno Süper Üye Süper Üye

    Kayıt:
    30 Kasım 2015
    Mesajlar:
    1.326
    Beğeni:
    45
    Oyunu bitiren cikmadi. Puzzle oyununu unutmusuz
     

Sayfayı Paylaş /bbnetsosyal