.onFocusMeContainer
{
background-color:#000000;
opacity:0.7;
z-index:12;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
display:none;
}
<div class="onFocusMeContainer"></div>
$(".post-outer").click(function (event) {
if (lastClicked == null) {
if (!$(event.target).is("a")) {
lastClicked = $(event.target);
while (!$(lastClicked).hasClass("post-outer")) {
lastClicked = $(lastClicked).parent();
}
$(lastClicked).css("position", "relative");
$(lastClicked).css("z-index", 5000);
$(".onFocusMeContainer").show("fast");
}
}
});
$(".onFocusMeContainer").click(function (event) {
$(lastClicked).css("position", "relative");
$(lastClicked).css("z-index", 0);
$(".onFocusMeContainer").hide("fast");
lastClicked = null;
});
<style>
.mainContainerAngularExample {
width:300px;
margin:10px;
}
.detailAngularExample {
margin-top:10px;
}
.detailAngularExample input:focus {
background-color:lightblue;
}
.footerAngularExample {
margin-top:10px;
text-align:right;
}
.arrayContainerAngularExample {
margin-top:10px;
color:coral
}
</style>
Sonraki aşamada DOM elementleri ve veri katmanı arasındaki bağlantıyı tanımlamak için angularjs kodlarını yazalım. Aşağıdaki kodlarda "myApp" modulü altında "MainCtrl" kontrolcüsü tanımlanmaktadır. Scope (Kapsam) içinde yer alan "addItem" fonksiyonu ile diziye elemen eklenmekte ve "removeItem" ile diziden eleman silinmektedir. Bu amaçla diziler üzerinde tanımlı "splice" fonksiyonu kullanılmıştır. Scope içinde yer alan "id" değişkeni ile dizi elemanlarının isimlendirilmesi yapılmaktadır. Ayrıca eğer gerekli olursa (dizi içinde yer alan elemanların tekrar ekmesi durumunda) "id" eşsiz anahtar olarak da kullanılabilir. Burada en önemli nokda dizi içinde nesne(object) kullanılmasıdır. "np-repeat" işlemi gerçekleştirirken kendi scope (kavramı) nesnesini yaratmaktadır. Bu sırada javascript prototype yapısından dolayı "primitive (ilkel)" değişkenlerin değeri programlama dillerindeki fonksiyonlara parametre gönderilirken ki durumla benzer olarak kopyalanmaktadır. Bu sebeple dizi içindeki değişikliğin "parentScope" üzerinde geçerli olabilmesi için dizi içinde referans olarak JSON nesnesi kullanılmıştır.var app = angular.module('myApp', []);
app.controller('MainCtrl', ['$scope','$http',function ($scope, $http) {
$scope.pages = [
{ val: 'Item 1' }
];
$scope.id = 1;
$scope.addItem = function (index) {
$scope.id++;
$scope.pages.splice(index + 1, 0, { val: 'Item ' + $scope.id });
}
$scope.removeItem = function (index) {
if (index != 0)
$scope.pages.splice(index, 1);
}
$scope.saveData = function () {
$http.post("./Home/SaveData", $scope.pages).success(function () {
alert("Veriler Başarıyla Kaydedildi.");
}).error(function () {
alert("Veriler Kaydedilirken Bir Hata Oluştu!");
});
}
}]);
<div class="mainContainerAngularExample" ng-app="myApp" ng-controller="MainCtrl">
<div class="detailAngularExample" ng-repeat="page in pages">
<input ng-model="page.val" type="text" />
<button class="btn btn-default btn-xs" ng-click="addItem($index)" type="button"><span class="glyphicon glyphicon-plus"></span>EKLE</button>
<button class="btn btn-default btn-xs" ng-click="removeItem($index)" ng-hide="$index === 0" type="button"><span class="glyphicon glyphicon-minus"></span>SİL</button>
</div>
<div class="footerAngularExample">
<button class="btn btn-success" ng-click="saveData()" type="button"><span class="glyphicon glyphicon-save"></span>KAYDET</button>
</div>
<div class="arrayContainerAngularExample">
CurrentArray = {{pages}}
</div>
</div>
public struct postTemplate
{
public string val { get; set; }
}
[HttpPost]
public ActionResult SaveData(List<postTemplate> Datas)
{
return Json("OK");
}
using System.IO.Compression;
StringBuilder builder = new StringBuilder();
builder.AppendLine("Veli");
builder.AppendLine("Yigit");
builder.AppendLine("Yolcu");
byte[] ZipThat(string FileName, byte[] TxtData)
{
using (MemoryStream mst = new MemoryStream())
{
using (ZipArchive arc = new ZipArchive(mst, ZipArchiveMode.Create))
{
var zipEntry = arc.CreateEntry(FileName);
using (Stream st = zipEntry.Open())
{
st.Write(TxtData, 0, TxtData.Length);
}
}
return mst.ToArray();
}
}
byte[] txtData = Encoding.Default.GetBytes(builder.ToString());
File.WriteAllBytes(string.Format(@"C:\Deneme\{0}.zip", "ZipFile"), ZipThat("FileThatInZipArchive.txt"));
<style>
.FlyingEagle {
position:fixed;
background-image:url('Images/eagle5.png');
width:150px;
height:150px;
background-size:150px 150px;
display:none;
top:100%;
left:100%;
margin-top:-180px;
margin-left:-180px;
opacity:0.7;
}
</style>
$(document).ready(function () {
$(".FlyingEagle").click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
});
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$(".FlyingEagle").show("fast");
} else {
$(".FlyingEagle").hide("fast");
}
});
});
[HttpGet]
public ActionResult GetData()
{
XDocument doc = XDocument.Load("http://www.tcmb.gov.tr/kurlar/today.xml");
var dox = doc.Descendants()
.Where(r => r.Name == "Currency")
.Select(r => new {
Isim = r.Element("Isim").Value,
Kod = r.Attribute("Kod").Value,
AlisKur = r.Element("BanknoteBuying").Value,
SatisKur = r.Element("BanknoteSelling").Value
});
return Json(dox, JsonRequestBehavior.AllowGet);
}
var currencyapp = angular.module('currencyapp', []);
currencyapp.controller('currencyListController', ['$scope', '$http',
function ($scope, $http) {
$http.get('./Home/GetData').success(function (data) {
$scope.kurs = data;
});
}]);
<div ng-app="currencyapp">
<table ng-controller="currencyListController" class="table table-striped table-condensed">
<thead>
<tr>
<th>Döviz Adı</th>
<th>Döviz Kodu</th>
<th>Alış</th>
<th>Satış</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="kur in kurs">
<td>{{kur.Isim}}</td>
<td>{{kur.Kod}}</td>
<td>{{kur.AlisKur}}</td>
<td>{{kur.SatisKur}}</td>
</tr>
</table>
</div>
$.ajax({
type: "POST",
url: "./WebForm3.aspx/GetImage",
data: '{"FotoId": "10" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var imageSrc = "data:image/jpg;base64," + msg.d;
$("#Base64Image").attr("src", imageSrc);
},
error: function (msg) {
alert("Hata Oluştu.");
}
});
data:image/jpg;base64,...
[WebMethod]
public static string GetImage(string FotoId)
{
byte[] arr = File.ReadAllBytes("IMAGE_PATH");
string base64 = Convert.ToBase64String(arr);
return base64;
}
Value Encoding Value Encoding Value Encoding Value Encoding
0 A 17 R 34 i 51 z
1 B 18 S 35 j 52 0
2 C 19 T 36 k 53 1
3 D 20 U 37 l 54 2
4 E 21 V 38 m 55 3
5 F 22 W 39 n 56 4
6 G 23 X 40 o 57 5
7 H 24 Y 41 p 58 6
8 I 25 Z 42 q 59 7
9 J 26 a 43 r 60 8
10 K 27 b 44 s 61 9
11 L 28 c 45 t 62 +
12 M 29 d 46 u 63 /
13 N 30 e 47 v
14 O 31 f 48 w (pad) =
15 P 32 g 49 x
16 Q 33 h 50 y
| Text content | M | |||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ASCII | 77 (0x4d) | 0 (0x00) | 0 (0x00) | |||||||||||||||||||||
| Bit pattern | 0 | 1 | 0 | 0 | 1 | 1 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| Index | 19 | 16 | 0 | 0 | ||||||||||||||||||||
| Base64-encoded | T | Q | = | = | ||||||||||||||||||||
function Base64ExampleFunction() {
var str = "M";
var enc = window.btoa(str);
var dec = window.atob(enc);
var res = "Encoded String: " + enc + "
" + "Decoded String: " + dec;
document.getElementById("base64Div").innerHTML = res;
}
<style>
.SGContainer
{
width:204px;
height:auto;
}
.SGCanvas
{
background-color:lightblue;
width:204px;
height:204px;
position:relative;
}
.SGCanvas:focus
{
border:solid;
border-width:2px;
border-color:darkgreen;
}
.SGSnakePart
{
background-color:black;
position:absolute;
width:5px;
height:5px;
}
.SGSnakeFood
{
background-color:darkred;
position:absolute;
width:5px;
height:5px;
}
.SGFinish
{
font-weight:bold;
background-color:brown;
color:white;
z-index:1;
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-50px;
width:100px;
height:50px;
justify-content: center;
align-items: center;
display:flex;
}
</style>
var Snake = [];
var Food = [];
var Direction = "Right";
var MoveNumber = 5
var Canvas = null;
var Interval = null;
var IsGameStarted = false;
var Score = 0;
var SnakePart = function () {
this.X = -1;
this.Y = -1;
this.DomObject = null;
}
function StartGame() {
IsGameStarted = false;
Canvas = $(".SGCanvas");
$(Canvas).children().remove();
Snake = [];
Food = [];
Direction = "Right";
Score = 0;
StopAnimation();
for (var i = 10; i > -1; i--) {
var part = new SnakePart();
part.X = i * 5;
part.Y = 100;
var domPart = $('<div class="SGSnakePart"></div>');
part.DomObject = domPart;
part.DomObject.css({ top: part.Y, left: part.X });
Snake.push(part);
AddPartToCanvas(part.DomObject)
}
$(Canvas).focus();
$(Canvas).keydown(function (event) {
event.preventDefault();
SGUpdateDirection(event.keyCode);
});
$(Canvas).focusout(function () {
if (IsGameStarted)
StopAnimation();
});
$(Canvas).focusin(function () {
if (IsGameStarted)
StartAnimation();
});
GenerateFood();
StartAnimation();
IsGameStarted = true;
}
function StartAnimation() {
if (Interval == null)
Interval = setInterval(SGUpdate, 50);
}
function StopAnimation() {
if (Interval != null)
clearInterval(Interval);
Interval = null;
}
function AddPartToCanvas(part)
{
$(Canvas).append(part);
}
function GenerateFood() {
var x = parseInt((Math.random() * 100) % 40) * 5;
var y = parseInt((Math.random() * 100) % 40) * 5;
var part = new SnakePart();
part.X = x;
part.Y = y;
var domPart = $('<div class="SGSnakeFood"></div>');
part.DomObject = domPart;
part.DomObject.css({ top: part.Y, left: part.X });
Food.push(part);
AddPartToCanvas(part.DomObject);
}
function EatFood() {
if(Snake[0].Y == Food[0].Y && Snake[0].X == Food[0].X)
{
Score++;
Snake.push(Food.pop());
GenerateFood();
}
}
function SGUpdateDirection(key) {
if (key == 39 && Direction != "Left") {
Direction = "Right";
}
if (key == 37 && Direction != "Right") {
Direction = "Left";
}
if (key == 38 && Direction != "Down") {
Direction = "Up";
}
if (key == 40 && Direction != "Up") {
Direction = "Down";
}
}
function SGUpdate() {
for (var i = Snake.length - 1; i > 0; i--) {
Snake[i].X = Snake[i - 1].X;
Snake[i].Y = Snake[i - 1].Y;
}
if (Direction == "Right") {
Snake[0].X += MoveNumber;
}
if (Direction == "Left") {
Snake[0].X -= MoveNumber;
}
if (Direction == "Up") {
Snake[0].Y -= MoveNumber;
}
if (Direction == "Down") {
Snake[0].Y += MoveNumber;
}
if (SGIsGameOver())
{
SGGameOver();
return;
}
EatFood();
UpdateScore();
SGUpdateCanvas();
}
function SGUpdateCanvas()
{
for (var i = Snake.length - 1; i > -1; i--) {
$(Snake[i].DomObject).css({ top: Snake[i].Y, left: Snake[i].X });
}
}
function SGIsGameOver() {
for (var i = Snake.length - 1; i > 0; i--) {
if (Snake[0].X == Snake[i].X && Snake[0].Y == Snake[i].Y)
return true;
if (Snake[0].X == 200 || Snake[0].X < 0 || Snake[0].Y == 200 || Snake[0].Y < 0)
return true;
}
return false;
}
function UpdateScore() {
$("#SGPuan").text(Score);
}
function SGGameOver() {
IsGameStarted = false;
StopAnimation();
$(Canvas).append($('<div class="SGFinish">OYUN BİTTİ!</div>'));
}
Yukarda yer alan fonksiyonların açıklamaları şöyledir:<div class="SGContainer">
<div style="margin-bottom:10px">
<input id="Button1" class="btn btn-success" type="button" value="BAŞLA" onclick="StartGame()"/>
<span id="SGPuan" class="label label-info" style="float:right; font-size:large">0</span>
</div>
<div class="SGCanvas" tabindex="-1">
</div>
</div>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<style>
.PuzzleContainer
{
width: 545px;
height: 545px;
}
.PuzzleBoard
{
width: 545px;
height: 545px;
}
.PuzzleBox
{
width: 50px;
height: 50px;
float: left;
margin: 2px;
border: solid;
border-width: 1px;
}
.PuzzlePartContainerDiv
{
width: 50px;
height: 50px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijeyFxpSRzHq2d4NyPPy8bA9ybJECYVC1wmPTxj3yI5ih7711-T5Lfmqf44OT_4vx6TQVVko_cOMxGZoWW6CaZOpdRVr6LeMA88Go6S2nvsE8zktavDbEe9c2TBT6pwDvJd0dNUcvzKlo/s1600/puzzle1.jpg);
background-size: 500px 500px;
float: left;
margin: 2px;
}
.PuzzlePartContainerDiv:hover
{
padding: 2px;
background-clip: content-box;
}
.PuzzlePartContainerDiv:active
{
border: solid;
border-width: 2px;
border-color: red;
}
.PuzzleBoxHover
{
border: solid;
border-color: red;
}
.PuzzleBoxActive
{
background-color: lightblue;
}
.PuzzleContainerActive
{
background-color: lightgray;
}
</style>
<script>
var PuzzleArray = [];
var PuzzleTmpArray = [];
$(document).ready(function () {
CreateMyWorld(true);
});
var PuzzleWrapper = function () {
this.ActualX = -1,
this.ActualY = -1,
this.CurrentX = -1,
this.CurrentY = -1
}
function CreateMyWorld(Shuffle) {
$(".PuzzleContainer").children().remove();
$(".PuzzleBoard").children().remove();
PuzzleArray = CreateArray(10, 10);
SliceImageAndCreatePuzzle();
ShuffleImages(Shuffle);
ConfigurePuzzle();
}
function CreateButtonClick() {
var isShuffle = $("#CBShuffle").is(":Checked");
CreateMyWorld(isShuffle);
}
function ConfigurePuzzle() {
$(".PuzzlePartContainerDiv").draggable({ snap: ".PuzzleBox", snapMode: "inner", helper: "clone" });
$(".PuzzleContainer").droppable({
activeClass: "PuzzleContainerActive",
drop: function (event, ui) {
var parentBox = $(ui.draggable).parent();
if ($(parentBox).is(".PuzzleBox")) {
var x = parseInt($(parentBox).attr("pX"));
var y = parseInt($(parentBox).attr("pY"));
PuzzleArray[x][y].CurrentX = -1;
PuzzleArray[x][y].CurrentY = -1;
}
$(parentBox).css("border", "solid");
$(parentBox).css("border-width", "1px");
$(ui.draggable).css("margin", "2px");
$(ui.draggable).appendTo(event.target);
}
});
$(".PuzzleBox").droppable({
activeClass: "PuzzleBoxActive",
hoverClass: "PuzzleBoxHover",
drop: function (event, ui) {
var x2 = parseInt($(event.target).attr("pX"));
var y2 = parseInt($(event.target).attr("pY"));
var container = $(ui.draggable).parent();
if ($(event.target).children().length > 0)
return false;
if ($(container).is(".PuzzleBox")) {
$(container).css("border", "solid");
$(container).css("border-width", "1px");
}
$(ui.draggable).css("margin", "0px");
$(event.target).css("border", "none");
$(ui.draggable).appendTo(event.target);
var x = parseInt($(ui.draggable).attr("pX"));
var y = parseInt($(ui.draggable).attr("pY"));
PuzzleArray[x2][y2].CurrentX = x;
PuzzleArray[x2][y2].CurrentY = y;
if (IsGameFinished()) {
$(".PuzzleBox").animate({ duration: "slow", margin: 0 });
}
}
});
}
function IsGameFinished() {
for (var y = 0; y < 10; y++) {
for (var x = 0; x < 10; x++) {
if (PuzzleArray[x][y].ActualX != PuzzleArray[x][y].CurrentX || PuzzleArray[x][y].ActualY != PuzzleArray[x][y].CurrentY)
return false;
}
}
return true;
}
function SliceImageAndCreatePuzzle() {
var ContainerDiv = $(".PuzzleContainer");
var puzzleBoard = $(".PuzzleBoard");
for (var y = 0; y < 10; y++) {
for (var x = 0; x < 10; x++) {
var item = $('<div class="PuzzlePartContainerDiv" pX=' + x + ' pY=' + y + ' style="background-position:-' + x * 50 + 'px -' + y * 50 + 'px"></div>');
var itemBox = $('<div class="PuzzleBox" pX=' + x + ' pY=' + y + '></div>');
PuzzleArray[x][y].ActualX = x;
PuzzleArray[x][y].ActualY = y;
PuzzleTmpArray.push(item);
puzzleBoard.append(itemBox);
}
}
}
function ShuffleImages(Shuffle) {
var containerDiv = $(".PuzzleContainer");
if (Shuffle) {
while (PuzzleTmpArray.length > 0) {
var rnd = Math.random();
var a = PuzzleTmpArray.shift();
if (rnd < 0.3) {
$(containerDiv).append(a);
} else
PuzzleTmpArray.push(a);
}
} else {
while (PuzzleTmpArray.length > 0) {
var a = PuzzleTmpArray.shift();
$(containerDiv).append(a);
}
}
}
function CreateArray(width, height) {
var arr = [];
for (var x = 0; x < width; x++) {
arr[x] = [];
for (var y = 0; y < height; y++) {
arr[x][y] = new PuzzleWrapper();
}
}
return arr;
}
</script>
<div> <div> <div class="checkbox-inline"> <label> <input checked="checked" id="CBShuffle" type="checkbox" />Görüntüleri Karıştır</label> </div> <button class="btn btn-success" onclick="CreateButtonClick()" type="button"> OYUNU OLUŞTUR</button> </div> <br /> <div class="PuzzleBoard"> </div> <div class="PuzzleContainer"> </div> </div>
<style>
.menuContainerVyy
{
position:relative;
width: 200px;
height: auto;
left:0;
top:0;
border-right: 3px solid black;
background-color:Orange;
}
.menuSubContainerVyy
{
overflow: hidden;
background-color:White;
margin-right:10px;
}
.menuButtonVyy
{
position: absolute;
left: 100%;
top: 50%;
margin-left: -3px;
margin-top: -15px;
}
.menuContainerVyy .nav
{
width: 200px;
}
</style>
function toggleMenu(sender) {
var parentElement = $(sender).parent("div");
if (parentElement.width() > 0) {
parentElement.animate({ width: '0px' }, "slow");
}
else {
parentElement.animate({ width: '200px' }, "slow");
}
}
#VerticalMenu1.nav.nav-pills.nav-stacked > li
.menuContainerVyy .nav.nav-pills.nav-stacked > li
<div class="menuContainerVyy"> <button class="btn btn-default menuButtonVyy" onclick="toggleMenu(this);" type="button"> <span class="glyphicon glyphicon-menu-hamburger"></span> </button> <div class="menuSubContainerVyy"> BURADA MENÜ KODLARI BULUNMAKTA! </div> </div>
<ul id="VerticalMenu1" class="nav nav-pills nav-stacked">
<li><a data-toggle="tab" href="#">Home <span class="glyphicon glyphicon-chevron-down" style="float: right;"></span></a></li>
<div class="panel-body" style = "display:none;">
Section1
</div>
<li><a data-toggle="tab" href="#">Menu 1<span class="glyphicon glyphicon-chevron-down" style="float: right;"></span></a></li>
<div class="panel-body" style = "display:none;">
Section2
</div>
<li><a data-toggle="tab" href="#">Menu 2<span class="glyphicon glyphicon-chevron-down" style="float: right;"></span></a></li>
<div class="panel-body" style = "display:none;">
Section3
</div>
<li><a data-toggle="tab" href="#">Menu 3<span class="glyphicon glyphicon-chevron-down" style="float: right;"></span></a></li>
<div class="panel-body" style = "display:none;">
Section4
</div>
</ul>
$(document).ready(function(){
$("#VerticalMenu1.nav.nav-pills.nav-stacked > li").click(function(){
var parentElement = this;
var section = $(parentElement).next("div").first();
if(!$(section).is(":visible"))
$(section).slideDown({ duration:"fast", complete: function(){
UpdateArrow($(section).is(":visible"), parentElement);
}});
else
$(section).slideUp({ duration:"fast", complete: function(){
UpdateArrow($(section).is(":visible"), parentElement);
}});
});
});
function UpdateArrow(Visible, Obj)
{
if(Visible)
{
$(Obj).find("span").addClass("glyphicon-chevron-up");
$(Obj).find("span").removeClass("glyphicon-chevron-down");
}else
{
$(Obj).find("span").removeClass("glyphicon-chevron-up");
$(Obj).find("span").addClass("glyphicon-chevron-down");
}
}
<div class="panel panel-primary"> <div class="panel-heading"> Panel with panel-primary class <span class="glyphicon glyphicon-circle-arrow-up" style="float: right;"></span></div> <div class="panel-body"> Panel Content</div> </div>Burada "panel panel-primary" ile "primary" tipinde bir bootstrap panel oluşturulacağı belirtilmektedir. "panel-heading" panelin başlık alanını, "panel-body" ise panelin içeriği taşıyacağı esas alanını belirtmektedir. Başlık içine eklenen "glyphicon" içeren "span" elementi ile panelin durumunu gösteren resim panel başlağına eklenmektedir. "float:right" yapılarak ok işaretinin sağ tarafa kayması sağlanmaktadır. "glyphicon-circle-arrow-up" yukarı işaretinin ekleneceğini belirtmektedir.
$(document).ready(function(){
$(".panel-primary").children(".panel-heading").click(function(){
$(this).parent().children(".panel-body").toggle();
$(this).children(".glyphicon").toggleClass("glyphicon-circle-arrow-up");
$(this).children(".glyphicon").toggleClass("glyphicon-circle-arrow-down");
});
});
<style>
.MineGameCanvas {
width:500px;
height:500px;
}
.MineButton {
float:left;
width:25px;
height:25px;
}
.MineButtonPressed {
float:left;
width:25px;
height:25px;
pointer-events:none;
background-color:gray;
border:inset;
}
.MineButtonT {
float:left;
width:25px;
height:25px;
background-color:red;
pointer-events:none;
}
.MineButtonT2 {
float: left;
width: 25px;
height: 25px;
background-color: orange;
pointer-events:none;
}
</style>
<script type="text/javascript">
var mineCount = 50;
var arr = [];
var width = 20;
var height = 20;
var possibility = mineCount / (width * height);
var BoomClass = "MineButtonT";
var BoomClassShow = "MineButtonT2";
var MinePressed = "MineButtonPressed";
var MineSweeperWrapper = function () {
this.HasMine = false,
this.IsEnabled = true,
this.IsPressed = false,
this.IsFlagged = false,
this.MineButton = null
}
function ButtonPressed(sender) {
var btNumx = $(sender).attr("btNumx");
var btNumy = $(sender).attr("btNumy");
var x = parseInt(btNumx);
var y = parseInt(btNumy);
if (arr[x][y].HasMine) {
arr[x][y].IsPressed = true;
OpenAll();
} else {
EvaluateSituation(x, y);
}
}
function PressMine(X, Y) {
arr[X][Y].IsEnabled = false;
$(arr[X][Y].MineButton).toggleClass(MinePressed);
}
function EvaluateSituation(X, Y) {
var stack = [];
var neighborCount = 0;
if (ControlButtonHasMine(X, Y + 1, stack)) {
neighborCount++;
}
if (ControlButtonHasMine(X, Y - 1, stack)) {
neighborCount++;
}
if (ControlButtonHasMine(X + 1, Y, stack)) {
neighborCount++;
}
if (ControlButtonHasMine(X + 1, Y - 1, stack)) {
neighborCount++;
}
if (ControlButtonHasMine(X + 1, Y + 1, stack)) {
neighborCount++;
}
if (ControlButtonHasMine(X - 1, Y, stack)) {
neighborCount++;
}
if (ControlButtonHasMine(X - 1, Y - 1, stack)) {
neighborCount++;
}
if (ControlButtonHasMine(X - 1, Y + 1, stack)) {
neighborCount++;
}
if (arr[X][Y].IsEnabled)
PressMine(X, Y);
if (neighborCount > 0) {
$(arr[X][Y].MineButton).val(neighborCount);
} else {
while (stack.length > 0) {
var neighbour = stack.pop();
EvaluateSituation(neighbour.X, neighbour.Y);
}
}
}
function ControlButtonHasMine(X, Y, stack) {
if (X >= 0 && X < width && Y >= 0 && Y < height) {
if (arr[X][Y].IsEnabled) {
stack.push(arr[X][Y]);
if (!arr[X][Y].HasMine) {
return false;
} else {
return true;
}
}
}
}
function OpenAll() {
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
if (arr[x][y].HasMine) {
if (!arr[x][y].IsPressed)
$(arr[x][y].MineButton).toggleClass(BoomClassShow);
else
$(arr[x][y].MineButton).toggleClass(BoomClass);
} else {
if (arr[x][y].IsEnabled) {
$(arr[x][y].MineButton).toggleClass(MinePressed);
arr[x][y].IsEnabled = false;
}
}
arr[x][y].IsEnabled = false;
}
}
}
$(document).ready(function () {
arr = CreateArray(width, height, 0);
PlantMines();
GenerateMineField();
});
function GenerateMineField() {
var canvas = $(".MineGameCanvas");
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
var button = $('<input id="Button-' + x + '-' + y + '" type="button" value="" class ="MineButton" btNumx="' + x + '" btNumy="' + y + '" onClick="ButtonPressed(this)"/>');
arr[x][y].MineButton = button;
arr[x][y].X = x;
arr[x][y].Y = y;
canvas.append(button);
}
}
}
function CreateArray(witdh, height, defaultValue) {
var arr = [];
for (var x = 0; x < width; x++) {
arr[x] = [];
for (var y = 0; y < height; y++) {
arr[x][y] = new MineSweeperWrapper();
}
}
return arr;
}
function PlantMines() {
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
if (!arr[x][y].HasMine) {
var deger = Math.random();
if (deger <= possibility) {
arr[x][y].HasMine = true;
mineCount--;
if (mineCount == 0)
return;
}
else {
arr[x][y].HasMine = false;;
}
}
}
}
if (mineCount > 0)
PlantMines();
}
</script>
var MineSweeperWrapper = function () {
this.HasMine = false,
this.IsEnabled = true,
this.IsPressed = false,
this.IsFlagged = false,
this.MineButton = null
}
<div class="MineGameCanvas"></div>
<style>
.MineGameCanvas {
width:500px;
height:500px;
}
.MineButton {
float:left;
width:25px;
height:25px;
}
.MineButtonT {
float:left;
width:25px;
height:25px;
background-color:red;
}
</style>
<script type="text/javascript">
var mineCount = 50;
var arr = [];
var width = 20;
var height = 20;
var possibility = mineCount / (width * height);
function ButtonPressed(sender) {
var btNumx = $(sender).attr("btNumx");
var btNumy = $(sender).attr("btNumy");
alert("Pressed to " + btNumx + "," + btNumy );
if (arr[btNumx][btNumy] == 1)
alert('Boom');
}
$(document).ready(function () {
arr = CreateArray(width, height, 0);
PlantMines();
GenerateMineField();
});
function GenerateMineField() {
var canvas = $(".MineGameCanvas");
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
if (arr[x][y] == 0) {
var button = $('<input id="Button-' + x + '-' + y + '" type="button" value="" class ="MineButton" btNumx="' + x + '" btNumy="' + y + '" onClick="ButtonPressed(this)"/>');
canvas.append(button);
} else {
var button = $('<input id="Button-' + x + '-' + y + '" type="button" value="" class ="MineButtonT" btNumx="' + x + '" btNumy="' + y + '" onClick="ButtonPressed(this)"/>');
canvas.append(button);
}
}
}
}
function CreateArray(witdh, height, defaultValue) {
var arr = [];
for (var x = 0; x < width; x++) {
arr[x] = [];
for (var y = 0; y < height; y++) {
arr[x][y] = defaultValue;
}
}
return arr;
}
function PlantMines() {
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
if (arr[x][y] != 1) {
var deger = Math.random();
if (deger <= possibility) {
arr[x][y] = 1;
mineCount--;
if (mineCount == 0)
return;
}
else {
arr[x][y] = 0;
}
}
}
}
if (mineCount > 0)
PlantMines();
}
</script>
var possibility = mineCount / (width * height);
var button = $('<input id="Button-' + x + '-' + y + '" type="button" value="" class ="MineButton" btNumx="' + x + '" btNumy="' + y + '" onClick="ButtonPressed(this)"/>');