Hướng dẫn 2048 game in html css js - trò chơi 2048 trong html css js
|
Show vargameobj = {point: {điểm: 0, lịch sử: [], trạng thái: 1}, giai đoạn: [], intistage: function () {for (varcell = 0; cell gameObj = { points: { score: 0, history: [], status: 1 }, stage: [], intiStage: function () { for (var cell = 0; cell < 4; cell++) { this.stage[cell] = []; for (var row = 0; row < 4; row++) { this.stage[cell][row] = { boxObj: null, position: [cell, row] }; } } }, empty: function () { var emptyList = []; for (var row = 0; row < 4; row++) { for (var cell = 0; cell < 4; cell++) { if (this.stage[cell][row].boxObj == null) { emptyList.push(this.stage[cell][row]); } } } return emptyList; }, newBox: function () { var _this = this; var box = function (obj) { var num = Math.random() > 0.9 ? 4 : 2; this.value = num; this.parent = obj; this.domObj = function () { var domBox = document.createElement('span'); domBox.innerText = num; domBox.textContent = num; domBox.className = 'row' + obj.position[0] + ' ' + 'cell' + obj.position[1] + ' ' + 'num' + num; var root = document.getElementById('stage'); root.appendChild(domBox); return domBox; }(); obj.boxObj = this; } var emptyList = this.empty(); if (emptyList.length) { var randomIndex = Math.floor(Math.random() * emptyList.length); new box(emptyList[randomIndex]); return true; } }, isEnd:function(){ var emptyList = this.empty(); if (!emptyList.length) { for(var i=0;i<4;i++){ for(var j=0;j<4;j++){ var obj=this.stage[i][j]; var objLeft=(j==0)?{boxObj:{value:0}}:this.stage[i][j-1]; var objRight=(j==3)?{boxObj:{value:0}}:this.stage[i][j+1]; var objUp=(i==0)?{boxObj:{value:0}}:this.stage[i-1][j]; var objDown=(i==3)?{boxObj:{value:0}}:this.stage[i+1][j]; if(obj.boxObj.value==objLeft.boxObj.value ||obj.boxObj.value==objDown.boxObj.value ||obj.boxObj.value==objRight.boxObj.value ||obj.boxObj.value==objUp.boxObj.value){ return false } } } return true; } return false; }, gameOver:function(){ alert('GAVE OVER!'); }, moveTo :function (obj1, obj2) { obj2.boxObj = obj1.boxObj; obj2.boxObj.domObj.className = 'row' + obj2.position[0] + ' ' + 'cell' + obj2.position[1] + ' ' + 'num' + obj2.boxObj.value; // obj1.boxObj.domObj.parentNode.removeChild(obj1.boxObj.domObj); obj1.boxObj = null; }, addTo : function (obj1, obj2) { obj2.boxObj.domObj.parentNode.removeChild(obj2.boxObj.domObj); obj2.boxObj = obj1.boxObj; obj1.boxObj = null; obj2.boxObj.value = obj2.boxObj.value * 2; obj2.boxObj.domObj.className = 'row' + obj2.position[0] + ' ' + 'cell' + obj2.position[1] + ' ' + 'num' + obj2.boxObj.value; obj2.boxObj.domObj.innerText = obj2.boxObj.value; obj2.boxObj.domObj.textContent = obj2.boxObj.value; this.points.score+=obj2.boxObj.value; var scoreBar= document.getElementById('score'); scoreBar.innerText=this.points.score; scoreBar.textContent=this.points.score; return obj2.boxObj.value; }, clear:function(x,y){ var can=0; for(var i=0;i<4;i++){ var fst=null; var fstEmpty=null; for(var j=0;j<4;j++){ var objInThisWay=null; switch (""+x+y){ case '00': objInThisWay=this.stage[i][j];break; case '10':objInThisWay=this.stage[j][i];break; case '11':objInThisWay=this.stage[3-j][i];break; case '01':objInThisWay=this.stage[i][3-j];break; } if(objInThisWay.boxObj!=null){ if(fstEmpty){ this.moveTo(objInThisWay,fstEmpty) fstEmpty=null; j=0; can=1; } }else if(!fstEmpty){ fstEmpty=objInThisWay; } } } return can; }, move: function (x,y) { var can=0; can=this.clear(x,y)?1:0; var add=0; for(var i=0;i<4;i++){ for(var j=0;j<3;j++){ var objInThisWay=null; var objInThisWay2=null; switch (""+x+y){ case '00':{ objInThisWay=this.stage[i][j]; objInThisWay2=this.stage[i][j+1];break; } case '10':{ objInThisWay=this.stage[j][i]; objInThisWay2=this.stage[j+1][i];break; } case '11':{ objInThisWay=this.stage[3-j][i]; objInThisWay2=this.stage[2-j][i];break; } case '01':{ objInThisWay=this.stage[i][3-j]; objInThisWay2=this.stage[i][2-j];break; } } if(objInThisWay2.boxObj&&objInThisWay.boxObj.value==objInThisWay2.boxObj.value){ add+=this.addTo(objInThisWay2,objInThisWay); this.clear(x,y); // j++; can=1; } // console.log(this.stage); } } if(add){ var addscore=document.getElementById('addScore'); addscore.innerText="+"+add; addscore.textContent="+"+add; addscore.className="show"; setTimeout(function(){ addscore.className="hide"; },500); } if(can){ this.newBox(); } if(this.isEnd()){ this.gameOver(); } }, inti: null } var controller = function () { var startX = 0; var startY = 0; var ready = 0; this.start = function (x, y) { ready = 1; startX = x; startY = y; }; this.move = function (x, y) { if (x - startX > 100 && ready) { gameObj.move(0, 1); ready = 0; } else if (startX - x > 100 && ready) { gameObj.move(0, 0); ready = 0; } else if (startY - y > 100 && ready) { gameObj.move(1, 0); ready = 0; } else if (y - startY > 100 && ready) { gameObj.move(1, 1); ready = 0; } } this.end = function (x, y) { ready = 0; } return { start: this.start, move: this.move, end: this.end } }(); function disableSelection(target){ if (typeof target.onselectstart!="undefined") //IE route target.onselectstart=function(){return false} else if (typeof target.style.MozUserSelect!="undefined") //Firefox route target.style.MozUserSelect="none" else //All other route (ie: Opera) target.onmousedown=function(){return false} target.style.cursor = "default" } window.onload = function () { gameObj.intiStage(); gameObj.newBox(); // gameObj.newBox(); var stage = document.getElementById('stage'); document.onmousedown = function (e) { var event = e || window.event; var obj = event.target || event.srcElement; var x = event.clientX; var y = event.clientY; controller.start(x, y); } document.onmousemove = function (e) { var event = e || window.event; var obj = event.target || event.srcElement; var x = event.clientX; var y = event.clientY; controller.move(x, y); } document.onmouseup = function (e) { var event = e || window.event; var obj = event.target || event.srcElement; var x = event.clientX; var y = event.clientY; controller.end(x, y); } function keyUp(e) { var currKey=0,e=e||event; currKey=e.keyCode||e.which||e.charCode; var keyName = String.fromCharCode(currKey); switch (currKey){ case 37:gameObj.move(0, 0);break; case 38:gameObj.move(1, 0);break; case 39:gameObj.move(0, 1);break; case 40:gameObj.move(1, 1);break; } // alert("key code: " + currKey + " Character: " + keyName); } document.onkeyup = keyUp; // disableSelection(document.body); } Làm thế nào để bạn mã hóa 2048 trong HTML?. 2048. 0. . Tham gia các con số và đến Gạch 2048 !. . . Làm thế nào để bạn xây dựng một trò chơi 2048?Dưới đây là các bước để phát triển trò chơi Python 2048 từ đầu:.. Nhập mô -đun .. Tạo lớp học trò chơi .. Tạo mã màu .. Tạo một chức năng để tạo GUI .. Tạo tiêu đề điểm .. Tạo một chức năng để bắt đầu trò chơi .. Tạo các chức năng thao tác ma trận .. Tạo một chức năng để thêm ngẫu nhiên gạch mới .. Cấu trúc dữ liệu nào được sử dụng trong trò chơi 2048?Một trò chơi năm 2048 được chơi trên bảng 4 × 4.Khi chúng tôi bắt đầu, bảng sẽ có hai gạch ở các vị trí ngẫu nhiên, mỗi ô có một trong số đó có một chiếc 2 2 hoặc một2 2.Các động tác được thực hiện bằng cách chuyển tất cả các gạch về phía một cạnh - lên, xuống, trái hoặc phải.4×4 board.
When we start, the board will have two tiles in random locations, each of which either has a “2” or a “4” on it – each has an independent 10% chance of being a “4”, or otherwise a is a “2”. Moves are performed by shifting all tiles towards one edge – up, down, left, or right.
2048 được tính toán như thế nào?Một bảng điểm ở phía trên bên phải theo dõi điểm số của người dùng.Điểm của người dùng bắt đầu từ 0 và được tăng lên bất cứ khi nào hai gạch kết hợp, theo giá trị của gạch mới.Trò chơi đã giành chiến thắng khi một gạch có giá trị 2048 xuất hiện trên bảng.Người chơi có thể tiếp tục vượt ra ngoài để đạt điểm cao hơn.The user's score starts at zero, and is increased whenever two tiles combine, by the value of the new tile. The game is won when a tile with a value of 2048 appears on the board. Players can continue beyond that to reach higher scores. |
