flex reset Grid

/***
   * 重置 Grid
   */ 
  public static function resetClick(event:Event,grid:Grid):void{
   var rows:int = grid.numChildren;
   for(var i:int=0;i<rows;i++){
    var disp:GridRow = grid.getChildAt(i) as GridRow;
    if(disp){
     var arr:Array = disp.getChildren();
     for each(var items:GridItem in arr){
      var objs:Array = items.getChildren();
      for each(var item:DisplayObject in objs){
       if(item && item is ComboBox){
        (item as ComboBox).text = "";
        (item as ComboBox).selectedIndex = -1;
       }
       if(item && item is TextInput){
        (item as TextInput).text = "";
       }
       if(item && item is DateField){
        (item as DateField).text = "";
       }
       if(item && item is NumericStepper){
        (item as NumericStepper).value = 0;
       }
       if(item && item is TextArea){
        (item as TextArea).text = "";
       }
      }
     }
    }
   }
   
  }

以下是一个基于 HTML5 技术的 2048 游戏代码: HTML: ``` <!DOCTYPE html> <html> <head> <title>2048 Game</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="header"> <h1>2048 Game</h1> <p>Use arrow keys to move the tiles. Combine tiles with the same number to create a new one.</p> </div> <div class="game"> <div class="grid-container"> <div class="grid-row"> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> </div> <div class="grid-row"> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> </div> <div class="grid-row"> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> </div> <div class="grid-row"> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> </div> </div> </div> <div class="score-container"> <p>Score: <span id="score">0</span></p> <p>Best Score: <span id="best-score">0</span></p> </div> <button id="new-game-btn">New Game</button> </div> <script type="text/javascript" src="script.js"></script> </body> </html> ``` CSS: ``` * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background-color: #faf8ef; color: #776e65; font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; font-size: 18px; line-height: 1.5; } .container { max-width: 600px; margin: 0 auto; padding: 20px; } .header { text-align: center; margin-bottom: 20px; } .game { background-color: #bbada0; padding: 10px; border-radius: 5px; } .grid-container { display: flex; flex-wrap: wrap; background-color: #bbada0; border-radius: 5px; } .grid-row { display: flex; flex-wrap: nowrap; } .grid-cell { width: calc(25% - 10px); height: calc(25% - 10px); margin: 5px; background-color: #cdc1b4; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: bold; text-align: center; transition: background-color 0.2s ease-in-out; } .grid-cell:nth-child(1) { animation: slide-left 0.5s forwards; } .grid-cell:nth-child(2) { animation: slide-up 0.5s forwards; animation-delay: 0.1s; } .grid-cell:nth-child(3) { animation: slide-up 0.5s forwards; animation-delay: 0.2s; } .grid-cell:nth-child(4) { animation: slide-right 0.5s forwards; animation-delay: 0.3s; } @keyframes slide-left { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes slide-right { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slide-up { from { transform: translateY(-100%); } to { transform: translateY(0); } } .score-container { display: flex; justify-content: space-between; margin-top: 20px; } #new-game-btn { display: block; margin: 20px auto 0; font-size: 20px; padding: 10px 20px; background-color: #8f7a66; color: #fff; border-radius: 5px; border: none; cursor: pointer; transition: background-color 0.2s ease-in-out; } #new-game-btn:hover { background-color: #9c806b; } ``` JavaScript: ``` var GRID_SIZE = 4; var MAX_SCORE = 2048; var gameGrid = []; var score = 0; var gridContainer = document.querySelector('.grid-container'); var scoreElem = document.querySelector('#score'); var bestScoreElem = document.querySelector('#best-score'); var newGameBtn = document.querySelector('#new-game-btn'); function init() { // Initialize game grid for (var i = 0; i < GRID_SIZE; i++) { var row = []; for (var j = 0; j < GRID_SIZE; j++) { row.push(0); } gameGrid.push(row); } // Add initial tiles addRandomTile(); addRandomTile(); // Update score display updateScore(); // Listen for arrow key events document.addEventListener('keydown', handleKeyDown); } function addRandomTile() { // Find all empty cells var emptyCells = []; for (var i = 0; i < GRID_SIZE; i++) { for (var j = 0; j < GRID_SIZE; j++) { if (gameGrid[i][j] === 0) { emptyCells.push({row: i, col: j}); } } } // Pick a random empty cell var randomIndex = Math.floor(Math.random() * emptyCells.length); var randomCell = emptyCells[randomIndex]; // Set value of random cell to 2 or 4 gameGrid[randomCell.row][randomCell.col] = (Math.random() < 0.9) ? 2 : 4; // Add tile to grid addTile(randomCell.row, randomCell.col); } function addTile(row, col) { var tile = document.createElement('div'); tile.classList.add('grid-cell'); tile.textContent = gameGrid[row][col]; tile.style.animationDelay = (row + col) * 0.1 + 's'; gridContainer.appendChild(tile); } function handleKeyDown(event) { event.preventDefault(); if (event.keyCode === 37) { // Left moveLeft(); } else if (event.keyCode === 38) { // Up moveUp(); } else if (event.keyCode === 39) { // Right moveRight(); } else if (event.keyCode === 40) { // Down moveDown(); } } function moveLeft() { var moved = false; for (var i = 0; i < GRID_SIZE; i++) { for (var j = 1; j < GRID_SIZE; j++) { if (gameGrid[i][j] !== 0) { for (var k = j; k > 0; k--) { if (gameGrid[i][k - 1] === 0) { // Move tile left gameGrid[i][k - 1] = gameGrid[i][k]; gameGrid[i][k] = 0; moved = true; } else if (gameGrid[i][k - 1] === gameGrid[i][k]) { // Combine tiles gameGrid[i][k - 1] *= 2; gameGrid[i][k] = 0; score += gameGrid[i][k - 1]; moved = true; break; } else { break; } } } } } if (moved) { addRandomTile(); updateScore(); checkGameOver(); } } function moveRight() { var moved = false; for (var i = 0; i < GRID_SIZE; i++) { for (var j = GRID_SIZE - 2; j >= 0; j--) { if (gameGrid[i][j] !== 0) { for (var k = j; k < GRID_SIZE - 1; k++) { if (gameGrid[i][k + 1] === 0) { // Move tile right gameGrid[i][k + 1] = gameGrid[i][k]; gameGrid[i][k] = 0; moved = true; } else if (gameGrid[i][k + 1] === gameGrid[i][k]) { // Combine tiles gameGrid[i][k + 1] *= 2; gameGrid[i][k] = 0; score += gameGrid[i][k + 1]; moved = true; break; } else { break; } } } } } if (moved) { addRandomTile(); updateScore(); checkGameOver(); } } function moveUp() { var moved = false; for (var i = 1; i < GRID_SIZE; i++) { for (var j = 0; j < GRID_SIZE; j++) { if (gameGrid[i][j] !== 0) { for (var k = i; k > 0; k--) { if (gameGrid[k - 1][j] === 0) { // Move tile up gameGrid[k - 1][j] = gameGrid[k][j]; gameGrid[k][j] = 0; moved = true; } else if (gameGrid[k - 1][j] === gameGrid[k][j]) { // Combine tiles gameGrid[k - 1][j] *= 2; gameGrid[k][j] = 0; score += gameGrid[k - 1][j]; moved = true; break; } else { break; } } } } } if (moved) { addRandomTile(); updateScore(); checkGameOver(); } } function moveDown() { var moved = false; for (var i = GRID_SIZE - 2; i >= 0; i--) { for (var j = 0; j < GRID_SIZE; j++) { if (gameGrid[i][j] !== 0) { for (var k = i; k < GRID_SIZE - 1; k++) { if (gameGrid[k + 1][j] === 0) { // Move tile down gameGrid[k + 1][j] = gameGrid[k][j]; gameGrid[k][j] = 0; moved = true; } else if (gameGrid[k + 1][j] === gameGrid[k][j]) { // Combine tiles gameGrid[k + 1][j] *= 2; gameGrid[k][j] = 0; score += gameGrid[k + 1][j]; moved = true; break; } else { break; } } } } } if (moved) { addRandomTile(); updateScore(); checkGameOver(); } } function updateScore() { scoreElem.textContent = score; bestScoreElem.textContent = (score > parseInt(bestScoreElem.textContent)) ? score : bestScoreElem.textContent; } function checkGameOver() { // Check for win for (var i = 0; i < GRID_SIZE; i++) { for (var j = 0; j < GRID_SIZE; j++) { if (gameGrid[i][j] === MAX_SCORE) { alert('You win!'); } } } // Check for game over var gameOver = true; for (var i = 0; i < GRID_SIZE; i++) { for (var j = 0; j < GRID_SIZE; j++) { if (gameGrid[i][j] === 0) { gameOver = false; } else if (i < GRID_SIZE - 1 && gameGrid[i][j] === gameGrid[i + 1][j]) { gameOver = false; } else if (j < GRID_SIZE - 1 && gameGrid[i][j] === gameGrid[i][j + 1]) { gameOver = false; } } } if (gameOver) { alert('Game over!'); newGame(); } } function newGame() { // Clear game grid for (var i = 0; i < GRID_SIZE; i++) { for (var j = 0; j < GRID_SIZE; j++) { gameGrid[i][j] = 0; } } // Remove tiles from grid container var tiles = document.querySelectorAll('.grid-cell'); for (var i = 0; i < tiles.length; i++) { gridContainer.removeChild(tiles[i]); } // Reset score score = 0; updateScore(); // Add initial tiles addRandomTile(); addRandomTile(); } init(); newGameBtn.addEventListener('click', newGame); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值