JSFiddle - React, Tailwind, and code Playground

by Aycan Yasit

HTML

<div id="bildirim"></div>
<div id="oyunAlani"></div>
<div id="seviyeBilgisi"></div>
USE ARROW KEYS TO GO TO BLUE SQUARE.

CSS

.oyunAlani {
    border-collapse: collapse;
}
.oyunAlani tr {
    height: 20px;
}
.oyunAlani td {
    border: 1px solid gray;
    min-width: 20px;
}
.oyuncu {
    background-color: #BC4;
}
.engel {
    background-color: #444;
}
.kapi {
    background-color: #4CB;
}

JavaScript

var boyut = 20;
var oyunAktif = false;
var seviye = 1;
var diziSeviyeEngel = new Array(0, 30, 50, 70, 100, 120, 140, 160, 180, 200, 220, 240, 250, 260, 280, 300, 320, 340, 360, 380, 400, 420, 440, 460, 480, 500, 520, 540, 560, 580, 600);

//////////
//Oyun mekanizmaları ayarlanıyor
///Oyun başlatılıyor veya seviye atlatılıyor.
function oyunBaslat() {
    //YAPILACAK: YERLEŞTİRİLEN ELEMENTLERİ ULAŞILABİLİR YERLERDE OLMASI GARANTİ ALTINA ALINACAK
    oyunAktif = true;
    oyunAlaniOlustur();
    alanaElementSerpistir('oyuncu', 1, 'dolu');
    alanaElementSerpistir('kapi', 1, 'bos');
    alanaElementSerpistir('engel', diziSeviyeEngel[seviye], 'dolu');
    document.getElementById('seviyeBilgisi').innerHTML = 'Level: ' + seviye.toString();
}
///Oyun alanı hazırlanıyor
function oyunAlaniOlustur() {
    oyunAlani = document.getElementById('oyunAlani');
    var tabloString = '';
    tabloString = '<table class="oyunAlani">';
    for (var y = 1; y <= boyut; y++) {
        tabloString += '<tr>';
        for (var x = 1; x <= boyut; x++) {
            tabloString += '<td name="kare" class="bos" id="' + x + '-' + y + '"></td>';
        }
        tabloString += '</tr>';
    }
    tabloString += '</table>';
    oyunAlani.innerHTML = tabloString;
}

////////////
//Temel mekanizmalar
function alanaElementSerpistir(elementTipi, miktar, kaynakDoluluk, hedefDoluluk) {
    hedefDoluluk = typeof hedefDoluluk !== 'undefined' ? hedefDoluluk : 'bos';
    var diziKoordinatlar;
    var hedefKare;
    var hataYok = true;
    for (var i = 1; i <= miktar; i++) {
        diziKoordinatlar = rastgeleKoordinat(hedefDoluluk);
        hedefKare = document.getElementById(diziKoordinatlar[0] + '-' + diziKoordinatlar[1]);
        hedefKare.className = kaynakDoluluk + ' ' + elementTipi;
    }
}

function hareketEt(hareketX, hareketY) { //X ve Y koordinatlarındaki değişim parametre olarak sağlanır
    var mevcutKoordinat = oyuncuKoordinati();
    var yeniX = parseInt(mevcutKoordinat[0]) +...