repl.it
@KodDavid/

programmerKoddavid

HTML, CSS, JS

pokemon game

fork
loading
Files
  • index.html
  • index.css
  • index.js
  • reset.css
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="reset.css" rel="stylesheet" type="text/css" />
	<link href="index.css" rel="stylesheet" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Bangers|Cabin+Sketch:400,700|Freckle+Face|Press+Start+2P" rel="stylesheet">
</head>

<body>
	<div class="select-screen">
      <div class="header">
        <div class="mode">VS Mode</div>
        <div class="title">
          Choose a Pokemon
        </div>
      </div>
      <div class="main">
        <div class="character charmander" data-pokemon="charmander">
          <div class="title">Charmander</div>
          <div style="background: url(http://www.smogon.com/dex/media/sprites/xy/charmander.gif) no-repeat center center; 
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;height: 100px; width: 100px;"></div>
        </div>
        
        <div class="character bulbasaur" data-pokemon="bulbasaur">
          <div class="title">Bulbasaur</div>
          <div style="background: url(http://www.smogon.com/dex/media/sprites/xy/bulbasaur.gif) no-repeat center center; 
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;height: 100px; width: 100px;"></div>
        </div>
        
        <div class="character squirtle" data-pokemon="squirtle">
          <div class="title">Squirtle</div>
          <div style="background: url(http://www.smogon.com/dex/media/sprites/xy/squirtle.gif) no-repeat center center; 
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;height: 100px; width: 100px;"></div>
        </div>
      </div>
    </div>

	<div id="battle-screen" >
		<div class="fight-btn">
			fight
		</div>

		<div class="battle-btns">
			<div class="attack rock" data-attack="rock">
				<img src="//i.imgur.com/0sWAgmm.png" width="100%">
       Rock
     </div><div class="attack paper" data-attack="paper">
       <img src="//i.imgur.com/aU8NcKH.png">
       Paper
     </div><div class="attack scissors" data-attack="scissors">
       <img src="//i.imgur.com/n4HFHgj.png">
       Scissors
     </div>
   </div>
    
   <div class="player">
     <div class="player1">
       <div class="stats">
         <div class="name">
           Charmander
           <div class="level">
             Lv5
           </div>
         </div>
          
         <div class="health">
           <div class="title">HP:</div>
           <div class="health-bar">
             <div class="inside" style="width: 100%;"></div>
           </div>
         </div>
          
       </div>
       <img src="http://www.smogon.com/dex/media/sprites/xy/charmander.gif" />
        
     </div>
   </div>
    
   <div class="cpu">
     <div class="player2">
       <div class="stats">
         <div class="name">
           Charmander
           <div class="level">
             Lv5
           </div>
         </div>
          
         <div class="health">
           <div class="title">HP:</div>
           <div class="health-bar">
             <div class="inside" style="width: 100%;"></div>
           </div>
         </div>
          
       </div>
       <img src="http://www.smogon.com/dex/media/sprites/xy/charmander.gif" />
     </div>
   </div>
  </div>
    
    
    
    
    
    <script src="index.js"></script>
  </body>
</html>
result
console