Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
patorjk
GitHub Repository: patorjk/JavaScript-Snake
 Path: blob/main/src/css/main-snake.css
163 views
1
/*

2
JavaScript Snake

3
By Patrick Gillespie

4
http://patorjk.com/games/snake

5
*/

6
body {

7
  margin: 0px;

8
  padding: 0px;

9
  background-color: #fc5454;

10
}

11


12
#game-area {

13
  margin: 10px;

14
  padding: 0px;

15
}

16


17
#mode-wrapper {

18
  color: #ffffff;

19
  font-family: Verdana, arial, helvetica, sans-serif;

20
  font-size: 14px;

21
}

22


23
#game-area:focus {

24
  outline: none;

25
}

26


27
a.snake-link,

28
a.snake-link:link,

29
a.snake-link:visited {

30
  color: #fcfc54;

31
}

32


33
a.snake-link:hover {

34
  color: #ffff54;

35
}

36


37
.snake-pause-screen {

38
  font-family: Verdana, arial, helvetica, sans-serif;

39
  font-size: 14px;

40
  position: absolute;

41
  width: 300px;

42
  height: 80px;

43
  text-align: center;

44
  top: 50%;

45
  left: 50%;

46
  margin-top: -40px;

47
  margin-left: -150px;

48
  display: none;

49
  background-color: black;

50
  color: white;

51
}

52


53
.snake-panel-component {

54
  position: absolute;

55
  font-family: Verdana, arial, helvetica, sans-serif;

56
  font-size: 14px;

57
  color: #ffffff;

58
  text-align: center;

59
  padding: 8px;

60
  margin: 0px;

61
}

62


63
.snake-snakebody-block {

64
  margin: 0px;

65
  padding: 0px;

66
  background-color: #ff0000;

67
  position: absolute;

68
  border: 0px solid #000080;

69
  background-repeat: no-repeat;

70
}

71


72
.snake-snakebody-alive {

73
  background-image: url("./images/snakeblock.png"),

74
    url("./images/snakeblock.png");

75
}

76
.snake-snakebody-dead {

77
  background-image: url("./images/deadblock.png"), url("./images/deadblock.png");

78
}

79


80
.snake-food-block {

81
  margin: 0px;

82
  padding: 0px;

83
  background-color: #ff0000;

84
  border: 0px solid #000080;

85
  position: absolute;

86
}

87


88
.snake-playing-field {

89
  margin: 0px;

90
  padding: 0px;

91
  position: absolute;

92
  background-color: #0000a8;

93
  border: 0px solid #0000a8;

94
}

95


96
.snake-game-container {

97
  margin: 0px;

98
  padding: 0px;

99
  border-width: 0px;

100
  border-style: none;

101
  zoom: 1;

102
  position: relative;

103
}

104


105
.snake-welcome-dialog {

106
  padding: 8px;

107
  margin: 0px;

108
  background-color: #000000;

109
  color: #ffffff;

110
  font-family: Verdana, arial, helvetica, sans-serif;

111
  font-size: 14px;

112
  position: absolute;

113
  top: 50%;

114
  left: 50%;

115
  width: 300px;

116
  /*height: 150px;*/

117
  margin-top: -100px;

118
  margin-left: -158px;

119
  text-align: center;

120
  display: block;

121
}

122


123
.snake-try-again-dialog,

124
.snake-win-dialog {

125
  padding: 8px;

126
  margin: 0px;

127
  background-color: #000000;

128
  color: #ffffff;

129
  font-family: Verdana, arial, helvetica, sans-serif;

130
  font-size: 14px;

131
  position: absolute;

132
  top: 50%;

133
  left: 50%;

134
  width: 300px;

135
  height: 100px;

136
  margin-top: -75px;

137
  margin-left: -158px;

138
  text-align: center;

139
  display: none;

140
}

141


142