我在jQuery中从用户输入创建了一个网格(div),如何重置并重新开始

时间:2016-10-28 14:56:21

标签: javascript jquery

我正在学习JS和JQuery,我正在制作一个绘图游戏,现在我需要能够重置游戏。

用户在开头提示并选择网格大小。现在当我重置时,再次询问用户,但我找不到正确删除现有单元格的方法。

我想也许这与我如何组织我的职能有关?

任何帮助都会很棒,我在脚本的底部放了两个选项。

提前致谢

http://codepen.io/Middi/pen/rrgqOv


$(document).ready(function() { 


createGrid();

}); 


function createGrid() {


  // if('.cell'.length > 0) {
  //
  //   $(.cell).remove()
  //
  // }




var boxes = prompt("select a grid between 2 - 128?","0");


var x = parseInt(boxes);

  if(x > 128) {

    alert("must be between 1-128");
  }

    else {


    }

    for(elementCount = 0; elementCount < x; elementCount++) {

      $('#container').append('<div class="col"></div>');



    }

    for(columnCount = 0; columnCount < x; columnCount++) {

      $('.col').append('<div class="cell"></div>');

      $(".cell").width(572/x);
      $(".cell").height(572/x);
    }






    $('.cell').mouseenter(function () {
       $(this).addClass('highlight');

   });


}





function clearButton() {
  $(".cell").removeClass('highlight');

}

// --------- OPTION ONE ---------- //

// function resetButton() {
//   $('#container').remove('.cell');

// }



// --------  OPTION TWO ---------- //

function resetButton() {
  createGrid();

}

2 个答案:

答案 0 :(得分:1)

尝试删除所有.cell

//like $('#container').empty()

function removeCell() {
   $('#container').empty()
}

function resetButton() {
    removeCell();
    createGrid();
}

答案 1 :(得分:0)

你的resetButton只创建新的网格,这意味着它会对现有网格进行重新定标...如果你想在调整大小之前清除它,你可以在调整大小之前调用clearButton()函数。

import pygame
import math

# --- constants --- (UPPER_CASE)

WHITE = (255, 255, 255)
BLACK = (  0,   0,   0)

DISPLAY_WIDTH = 1200
DISPLAY_HEIGHT = 800

FPS = 30

CAR_WIDTH = 76
CAR_HEIGHT = 154

# --- functions --- (lower_case)

def rotate(image, rect, angle):
    rot_image = pygame.transform.rotate(image, angle)
    rot_rect = rot_image.get_rect(center=rect.center)
    return rot_image, rot_rect

def rotate_car_pos(angle):
    x = math.cos(math.radians(angle-90))
    y = math.sin(math.radians(angle-90))
    return x, y

def gameloop():

    # start position - screen center - so I don't have to add center later
    car_rect = role_model.get_rect(center=screen_rect.center)

    # ---

    angle = 0
    angle_change = 0

    x = 0
    y = 0
    x_change = 0
    y_change = 0

    speed = 0
    speed_change = 0

    # ---

    pos_x = 0
    pos_y = 0

    #---

    moving_up = False
    moving_down = False

    #recalculate = True

    running = True

    while running:

        # --- events ---

        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                running = False

            if event.type == pygame.KEYDOWN:
                if event.key == pygame.K_ESCAPE:
                    running = False

                elif event.key == pygame.K_BACKSPACE:
                    # reset position [for test only]
                    pos_x = 0
                    pos_y = 0
                    angle = 0

                elif event.key == pygame.K_LEFT:
                    angle_change = 5

                elif event.key == pygame.K_RIGHT:
                    angle_change = -5

                elif event.key == pygame.K_UP:
                    moving_up = True
                    x_change = -x
                    y_change = y
                    speed_change = speed_change**2 + 1

                elif event.key == pygame.K_DOWN:
                    moving_down = True
                    x_change = x
                    y_change = -y
                    speed_change = speed_change**2 + 1

            elif event.type == pygame.KEYUP:
                if event.key == pygame.K_LEFT:
                    angle_change = 0

                elif event.key == pygame.K_RIGHT:
                    angle_change = 0

                elif event.key == pygame.K_UP:
                    moving_up = False
                    x_change = 0
                    y_change = 0
                    speed = 0
                    speed_change = 0

                elif event.key == pygame.K_DOWN:
                    moving_down = False
                    x_change = 0
                    y_change = 0
                    speed = 0
                    speed_change = 0

        # --- updates ---

        # - pos -

        if x_change or y_change:
            pos_x += x_change
            pos_y += y_change

            print('[DEBUG]: pos_x, pos_y: ', pos_x, pos_y)

        # - angle - 

        # rotate olny when moving
        #if moving_up or moving_down:
        if angle_change:
            angle += angle_change

            while angle > 360:
                angle -= 360

            while angle < -360:
                angle += 360

            print('[DEBUG]: angle: ', angle)

        # - speed -

        if speed_change:
            speed += speed_change

            if speed > 20:
                speed = 20

            print('[DEBUG]: speed: ', speed)

        # - others - 

        x, y = rotate_car_pos(angle)

        x = round(x*speed, 5)
        y = round(y*speed, 5)

        print('[DEBUG]: x, y: ', x, y)

        if moving_up:
            x_change = -x
            y_change = y
        elif moving_down:
            x_change = x
            y_change = -y

        #if recalculate:
        rot_image, rot_rect = rotate(car_image, car_rect, angle)

        rot_rect.centerx += pos_x
        rot_rect.centery += pos_y

        # --- draws ---

        screen.fill(WHITE)
        screen.blit(rot_image, rot_rect)
        pygame.display.update()

        # --- clock ---

        clock.tick(FPS)

# --- main ---

pygame.init()

car_image = pygame.image.load('car.png')
role_model = pygame.image.load('car.png')

screen = pygame.display.set_mode( (DISPLAY_WIDTH, DISPLAY_HEIGHT) )
screen_rect = screen.get_rect()

clock = pygame.time.Clock()

gameloop()

pygame.quit()

我在你的例子中进行过测试,它就是诀窍! 那是你想要的吗?