how to make minecraft game in html

Solutions on MaxInterview for how to make minecraft game in html by the best coders in the world

showing results for - "how to make minecraft game in html"
04 Jan 2019
1<!DOCTYPE html>
2<html>
3<head>
4<link rel="icon" href="images/mclogo.png" type="image/gif" sizes="16x16">
5
6<link rel="stylesheet" type="text/css" href="minecraft.css">
7
8<!-- Latest compiled and minified CSS -->
9<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
10
11<!-- jQuery library -->
12<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
13
14<!-- Latest compiled JavaScript -->
15<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
16
17<title>Minecraft Game</title>
18</head>
19
20<body>
21    <audio id="music">
22      <source src="pokemon.mp3" type="audio/mp3">
23    </audio>
24
25    <div id="layout">
26        <div id="board"></div>
27        <div class="wrapper">
28            <div id="healthbar"></div>
29            <div id="tools"></div>
30            <div id="inventory"></div>
31            <button id="restore">Reset</button>
32        </div>
33    </div>
34
35    <div class="modal fade bd-example-modal-sm" id="myModal">
36        <div class="modal-dialog modal-lg text-center">
37            <div id="logo"></div>
38            <div id="pokelogo"></div>
39            <div class="button-container">
40                <button id="play" class="button btn btn-lg btn-primary">Play Game</button>
41                <button id="tutorial" class="button btn btn-lg btn-primary">Tutorial</button>
42            </div>
43        </div>
44    </div>
45
46    <div class="modal fade bd-example-modal-sm" id="tutorialModal">
47        <div class="modal-dialog modal-lg text-center">
48            <div id="rules">
49                <h2>Welcome Player!</h2>
50                <p>Minecraft-Pokemon Edition is a simplified version of the game Minecraft where you can catch pokemon, build, dig, mine, and more!</p>
51                <p>Use your axe to cut down trees and leaves.</p>
52                <p>Use your shovel to dig dirt and grass.</p>
53                <p>Use your pickaxe to mine rock.</p>
54                <p>Use your pokeball to catch pokemon.</p>
55                <p>There are six different types of pokemon for you to catch. The green health-bar on the right hand corner displays their health.</p>
56                <p>Attack the wild pokemon by selecting your pokemon and just click to weaken them. When their health is low, use your Pokeball to capture them</p>
57                <p>I've given you a Pikachu so you can fight other pokemon</p>
58                <p>Try to capture all the wild pokemon before the sun goes down</p>
59                <button id="returnToMain" class="button btn btn-lg btn-primary">Return</button>
60            </div>
61        </div>
62    </div>
63
64    <div class="modal fade bd-example-modal-sm captureMessage">
65        <div class="modal-dialog modal-lg text-center">
66                <div id="capturedCaption"></div>
67            </div>
68        </div>
69
70        <div class="modal fade bd-example-modal-sm failcaptureMessage">
71            <div class="modal-dialog modal-lg text-center">
72                    <div id="failedCapture">Wild pokemon broke free! Try to weaken it with your pokemon first!</div>
73                </div>
74            </div>
75
76
77
78
79    <div class="modal fade bd-example-modal-sm" id="winningModal">
80        <div class="modal-dialog modal-lg text-center">
81            <div id="rules">
82                <h2>Congratulations Player!</h2>
83                <p>You caught all the wild pokemon!!!</p>
84                <p>The creators hope you enjoyed their game.</p>
85                <p>If you liked this game, be sure to share with your fellow trainers and check out their github.</p>
86                <div>
87
88                    <img src="images/charmander.png">
89                    <img src="images/bulbasaur.png">
90                    <img src="images/squirtle.png">
91                    <img src="images/pika.png">
92                    <img src="images/pidgey.png">
93                    <img src="images/mewtwo.png">
94                    <img src="images/diglett.png">
95
96
97                </div>
98                <div>
99                    <button class="button btn btn-lg btn-primary"><a href="https://github.com/baldetorres" target="_blank">Baldemar</a></button>
100                    <button class="button btn btn-lg btn-primary"><a href="https://github.com/nehemiahk" target="_blank">Nehemiah</a></button>
101                </div>
102            </div>
103        </div>
104    </div>
105
106    <div class="modal fade bd-example-modal-sm professorMessage">
107        <div class="modal-dialog modal-lg text-center">
108                <div id="oakMessage"><div>
109            </div>
110        </div>
111
112
113
114<script src="minecraft.js">
115</script>
116</body>
117</html>