Posted By

Vejfil on 05/13/18


Tagged

fil sachy


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Vejfil


sachy


 / Published in: JavaScript
 

sachy fil

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>Šachy</title>
  4.  
  5. <style>
  6. #cernykral { position: absolute; top: 58px; left: 58px; width: 50px; height: 50px; border: 1px solid black; background-image: url("C_kral.png")}
  7. #bilykral { position: absolute; top: 408px; left: 58px; width: 50px; height: 50px; border: 1px solid black; background-image: url("B_kral.png")}
  8. [class^="field"] { z-index: -1; position: relative; top: 50px; left: 50px; float: left; display: inline-block; box-sizing: border-box; width: 50px; height: 50px; border: 1px solid black; }
  9. .fieldblack { background-color: #666; }
  10. .fieldwhite { background-color: #EEE; }
  11. #board { width: 400px; }
  12. #testbox {float: left; position: absolute; top: 500px; left: 500px; width: 50px; height: 50px; border: 1px solid black; }
  13.  
  14. </style>
  15. <div id="board" onclick="xofpage1(event)"></div>
  16. <div id="cernykral"></div>
  17. <div id="bilykral"></div>
  18. <script>
  19. for(var i=0; i<8; ++i)
  20. for(var j=0; j<8; ++j) {
  21. var div = document.createElement("div");
  22. div.id = "f"+i+"x"+j;
  23. div.className = "field";
  24. div.className+= (i+j)%2 ? "black" : "white";
  25. document.getElementById("board").appendChild(div);
  26. };
  27. // document.getElementByID("figurka").style.marginTop= ;
  28. // document.getElementByID("figurka").style.marginLeft= ;
  29. // <button onclick="check()">TEST</div>
  30. var ck = document.getElementById("cernykral");
  31. var bk = document.getElementById("bilykral");
  32. var coordy;
  33. var coordx;
  34. var a;
  35. var movey;
  36. var movex;
  37. function xofpage1(event){
  38. coordx = event.clientX;
  39. coordy = event.clientY;
  40. a = ck.offsetTop;
  41. b = ck.offsetLeft;
  42. c = bk.offsetTop;
  43. d = bk.offsetLeft;
  44. document.getElementById("testbox").innerText = coordy;
  45. movey = coordy - a;
  46. movex = coordx - b;
  47. bmovey = coordy - c;
  48. bmovex = coordx - d;
  49. if (a<458 && movey<=100 && movey>=58){
  50. movey = 50;
  51. ck.style.top= movey + a + 'px'; }
  52. else if (a<458 && a>58 && movey<=0){
  53. movey = -50;
  54. ck.style.top= movey + a + 'px'; }
  55. else if (movex <=100 && movex>=58 && b<458){
  56. movex = 50;
  57. ck.style.left= movex + b + 'px'; }
  58. else if (movex <=0 && b<458 && b>58){
  59. movex = -50;
  60. ck.style.left= movex + b + 'px'; }
  61.  
  62. else {
  63. alert("nelze provést")
  64. }
  65. console.log(coordx);
  66. console.log(b);
  67. console.log(movex);
  68. }
  69.  
  70. function check() {
  71. var y = ck.offsetTop;
  72. document.getElementById("testbox").innerText = y;
  73.  
  74. }
  75.  
  76.  
  77. </script>
  78. <div id="testbox"></div>

Report this snippet  

You need to login to post a comment.