API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 17th, 2019
67
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.58 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Pirate-Park</title>
  5. <meta charset='utf-8'>
  6. <link href='https://fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
  7. <style>
  8. html,body{
  9. height: 100%;
  10. }
  11.  
  12. body{
  13. background-color: #ccc;
  14. display: flex;
  15. align-items: center;
  16. justify-content: center;
  17. background: url('data/paper.png');
  18. font-family: 'Merriweather', serif;
  19. color:#465542;
  20. }
  21.  
  22. h1{
  23. text-align: center;
  24. }
  25.  
  26. div{
  27. width: 400px;
  28. }
  29.  
  30. p{
  31. padding-left: 20px;
  32. }
  33.  
  34. canvas{
  35. display: block;
  36. margin: 0 auto;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41.  
  42. <div>
  43. <h1>Ils nous ont volé notre recette<br>Piiiiii-rates</h1>
  44. <canvas></canvas>
  45. <p id='output'></p>
  46. </div>
  47. <script>
  48. //Créer un objet à partir d'un autre -> Object.create('nom')
  49.  
  50. // Les ojets de notre jeu -----
  51. var BgMap = {
  52. size: 384,
  53. sX: 0,
  54. sY: 0,
  55. }
  56.  
  57. var Water = {
  58. col: null,
  59. row: null,
  60. size: 64,
  61. sX: 384,
  62. sY: 0,
  63. visible: true,
  64. init: function(column, row){
  65. this.col = column;
  66. this.row = row;
  67. }
  68. }
  69.  
  70. var Island = {
  71. col: null,
  72. row: null,
  73. size: 64,
  74. sX: 384,
  75. sY: 64,
  76. visible: true,
  77. init: function(column, row){
  78. this.col = column;
  79. this.row = row;
  80. }
  81. }
  82.  
  83. var Pirate = {
  84. col: null,
  85. row: null,
  86. size: 64,
  87. sX: 384,
  88. sY: 128,
  89. visible: true,
  90. init: function(column, row){
  91. this.col = column;
  92. this.row = row;
  93. }
  94. }
  95.  
  96. var Home = {
  97. col: null,
  98. row: null,
  99. size: 64,
  100. sX: 384,
  101. sY: 192,
  102. visible: true,
  103. init: function(column, row){
  104. this.col = column;
  105. this.row = row;
  106. }
  107. }
  108.  
  109. var Ship = {
  110. col: null,
  111. row: null,
  112. size: 64,
  113. sX: 384,
  114. sY: 256,
  115. visible: true,
  116. init: function(column, row){
  117. this.col = column;
  118. this.row = row;
  119. }
  120. }
  121.  
  122. var Monster = {
  123. col: null,
  124. row: null,
  125. size: 64,
  126. sX: 384,
  127. sY: 320,
  128. visible: true,
  129. init: function(column, row){
  130. this.col = column;
  131. this.row = row;
  132. }
  133. }
  134.  
  135. // MODEL ----------------------
  136. var model = {
  137. //Sprites
  138. sprites:[],
  139. gameMessage: "",
  140.  
  141. bgMap: BgMap,
  142. // Etats du jeu
  143. LOADING: 0,
  144. BUILD_MAP: 1,
  145. PLAYING: 2,
  146. OVER: 3,
  147.  
  148. gameState: 0,
  149.  
  150. // Codes de la carte
  151. WATER: 0,
  152. ISLAND: 1,
  153. PIRATE: 2,
  154. HOME: 3,
  155.  
  156. SHIP: 4,
  157. MONSTER: 5,
  158. //Taille des cases
  159. SIZE: 64,
  160.  
  161. // Ma carte
  162. ROWS: 6,
  163. COLUMNS: 6,
  164.  
  165. // Map
  166. map: [
  167. [0,2,0,0,0,3],
  168. [0,0,0,0,1,0],
  169. [0,1,0,0,0,0],
  170. [0,0,0,0,2,0],
  171. [0,2,0,1,0,0],
  172. [0,0,0,0,0,0],
  173. ],
  174. gameObjects: [
  175. [0,0,0,0,0,0],
  176. [0,0,5,0,0,0],
  177. [0,0,0,0,0,0],
  178. [0,0,0,0,0,0],
  179. [0,0,0,0,0,0],
  180. [4,0,0,0,0,0],
  181. ],
  182.  
  183. buildMap: function(){
  184. for(var row=0; row < model.ROWS; row++){
  185. for(var column=0; column < model.COLUMNS; column++){
  186. var currentTile = model.map[row][column];
  187. switch(currentTile){
  188. case model.WATER:
  189. var tmp = Object.create(Water);
  190. tmp.init(column, row);
  191. model.sprites.push(tmp);
  192. break;
  193. case model.ISLAND:
  194. var tmp = Object.create(Island);
  195. tmp.init(column, row);
  196. model.sprites.push(tmp);
  197. break;
  198. case model.PIRATE:
  199. var tmp = Object.create(Pirate);
  200. tmp.init(column, row);
  201. model.sprites.push(tmp);
  202. break;
  203. case model.HOME:
  204. var tmp = Object.create(Home);
  205. tmp.init(column, row);
  206. model.sprites.push(tmp);
  207. break;
  208. }
  209. }
  210. }
  211. },
  212.  
  213. createObject:function(){
  214. for(var row=0; row < model.ROWS; row++){
  215. for(var column=0; column < model.COLUMNS; column++){
  216. var currentTile = model.gameObjects[row][column];
  217. switch(currentTile){
  218. case model.SHIP:
  219. var ship = Ship;
  220. ship.init(column, row);
  221. model.sprites.push(ship);
  222. model.sprites[(row*model.COLUMNS)+column].visible = false;
  223. break;
  224. case model.MONSTER:
  225. var monster = Monster;
  226. monster.init(column, row);
  227. model.sprites.push(monster);
  228. model.sprites[(row*model.COLUMNS)+column].visible = false;
  229. break;
  230. }
  231. }
  232. }
  233. }
  234. }
  235.  
  236. var octopus = {
  237. init: function(){
  238. view.init();
  239. },
  240.  
  241. // Etats du jeu
  242. gameLoop: function(){
  243. switch (model.gameState){
  244. case model.LOADING:
  245. view.loadsImage();
  246. model.gameMessage = "Loading";
  247. console.log(model.gameMessage);
  248. break;
  249. case model.BUILD_MAP:
  250. model.gameMessage = "Build Map";
  251. console.log(model.gameMessage);
  252. model.buildMap();
  253. model.createObject();
  254. break;
  255. case model.PLAYING:
  256.  
  257. break;
  258. case model.OVER:
  259.  
  260. break;
  261. }
  262. view.render();
  263. },
  264.  
  265. // Différentes phases du jeu
  266. playGame: function(){
  267.  
  268. },
  269.  
  270. fight: function(){
  271.  
  272. },
  273.  
  274. trade:function(){
  275.  
  276. },
  277.  
  278. endGame:function(){
  279.  
  280. },
  281.  
  282. // Handler
  283. loadHandler: function(){
  284. model.gameState = model.BUILD_MAP;
  285. octopus.gameLoop();
  286. },
  287.  
  288. keydownHandler: function(ev){
  289.  
  290. },
  291.  
  292. // Getter setter
  293. getRows: function(){
  294. var rows = model.ROWS;
  295. return rows;
  296. },
  297.  
  298. getColumns: function(){
  299. var columns = model.COLUMNS;
  300. return columns;
  301. },
  302.  
  303. getSize: function(){
  304. var size = model.SIZE;
  305. return size;
  306. },
  307.  
  308. getSprites: function(){
  309. var sprites = model.sprites;
  310. return sprites;
  311. },
  312.  
  313. getBgMap: function(){
  314. var bgMap = model.bgMap;
  315. return bgMap;
  316. }
  317. }
  318.  
  319. var view ={
  320. canvas: null,
  321. ctx: null,
  322. image: null,
  323.  
  324. init: function(){
  325. view.canvas = document.querySelector("canvas");
  326. view.ctx = view.canvas.getContext('2d');
  327. view.canvas.width = octopus.getColumns()*octopus.getSize();
  328. view.canvas.height = octopus.getRows()*octopus.getSize();
  329. octopus.gameLoop();
  330. },
  331.  
  332. loadsImage: function(){
  333. view.image = new Image();
  334. view.image.addEventListener('load', octopus.loadHandler);
  335. view.image.src = 'data/img.png';
  336. },
  337.  
  338. bindEvents: function(){
  339.  
  340. },
  341.  
  342. render: function(){
  343. //Dessiner l'arrière plan
  344. var bg = octopus.getBgMap();
  345. view.ctx.drawImage(view.image, 0, 0, bg.size, bg.size, 0, 0, bg.size, bg.size);
  346.  
  347. //Dessiner l'ensemble des sprites
  348. var sprites = octopus.getSprites();
  349. for(var i=0; i<sprites.length; i++){
  350. var tmp = sprites[i];
  351. if(tmp.visible){
  352. view.ctx.drawImage(view.image,
  353. tmp.sX,
  354. tmp.sY,
  355. tmp.size,
  356. tmp.size,
  357. tmp.col*tmp.size,
  358. tmp.row*tmp.size,
  359. tmp.size,
  360. tmp.size
  361. )
  362. }
  363. }
  364. }
  365. }
  366.  
  367. octopus.init();
  368. </script>
  369.  
  370. </body>
  371. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!