Javascript Girl
  1. Javascript Girl
  3. HTML5 – Création d'une fenêtre pour un canevas
Intereting Posts
BackgroundPositionX ne fonctionne pas sur Firefox Passez div de fixe à absolu au bas du navigateur Fonction d'annulation (p. Ex. "Alerte") et appeler la fonction d'origine? Sélectionnez div en utilisant l'ID de caractère générique Problèmes Affectation d'un tableau multidimensionnel avec json.js Comment obtenir des paramètres d'URL avec Javascript? Comment extraire des données spécifiques du json en utilisant python Comment optimiser le code javascript / jquery pour accélérer sa performance? HTML / JAVASCRIPT: Disable HTML CONTENT dans contentEditable = true Besoin de montrer les emplacements sur la carte à partir de la base de données en fonction de la longitude et de la Latitude Backbone.js structurant des vues et des modèles imbriqués Onglets Bootstrap de Twitter: passez à l'onglet Spécifique en page Recharger ou Hyperlien Comment puis-je détecter un plugin personnalisé dans Firefox / IE / Chrome? Tooltip sur le clic d'un bouton Solution de JavaScript pour le glisser-déplacer dans Selenium WebDriver

HTML5 – Création d'une fenêtre pour un canevas

J'ai un tableau 2D de 30 à travers, 20 en bas. Cependant, la fenêtre ne représente que 15 et 10. J'ai eu un jeu comme ça à l'origine et j'ai essayé de réaliser quelque chose comme ça:

Entrez la description de l'image ici

Voici mon violon: http://jsfiddle.net/sTr7q/

Ici, j'ai fait une vue d'ensemble rudimentaire pour vous:

http://jsfiddle.net/kmHZt/

Vous devez suivre la fenêtre X et Y (vX, vY) qui représentent l'endroit où vous êtes dans le monde entier. J'ai également gardé la largeur et la hauteur de la fenêtre comme des vars au lieu de les coder dur.

Vous pouvez utiliser les touches fléchées pour modifier la fenêtre X et Y qui défilera la carte, en dessinant uniquement les carreaux corrects.

J'espère que cela pourra aider! Faites moi savoir si vous avez des questions!

EDIT: exemple de viewport se déplaçant avec un joueur: http://jsfiddle.net/kmHZt/10/ 

var canvas, context, board, imageObj, tiles, board, display; var NUM_OF_TILES = 2; // viewport var vX = 0, vY = 0, vWidth = 15, vHeight = 10; var playerX = 0, playerY = 0; var worldWidth = 29, worldHeight = 19; function loadMap(map) { if (map == 1) { return [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0], [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0], [0, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 0], [0, 1, 1, 2, 1, 1, 1, 1, 1, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 0], [0, 1, 1, 2, 1, 1, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 0], [0, 1, 1, 2, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 0], [0, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 1, 1, 1, 2, 1, 1, 0], [0, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 2, 2, 1, 2, 1, 1, 1, 2, 1, 1, 0], [0, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 2, 1, 1, 0], [0, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 2, 1, 1, 0], [0, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 2, 1, 1, 2, 1, 1, 0], [0, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 2, 1, 1, 0], [0, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 2, 2, 1, 1, 2, 1, 1, 0], [0, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 0], [0, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 2, 1, 1, 1, 0], [0, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 1, 1, 1, 1, 0], [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0], [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]]; } } $(document).ready(function() { canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); canvas.tabIndex = 0; canvas.focus(); canvas.addEventListener('keydown', function(e) { console.log(e); var key = null; switch (e.which) { case 37: // Left if (playerX > 0) playerX--; break; case 38: // Up if (playerY > 0) playerY--; break; case 39: // Right if (playerX < worldWidth) playerX++; break; case 40: // Down if (playerY < worldHeight) playerY++; break; } // Okay! The player is done moving, now we have to determine the "best" viewport. // Ideally the viewport centers the player, // but if its too close to an edge we'll have to deal with that edge vX = playerX - Math.floor(0.5 * vWidth); if (vX < 0) vX = 0; if (vX+vWidth > worldWidth) vX = worldWidth - vWidth; vY = playerY - Math.floor(0.5 * vHeight); if (vY < 0) vY = 0; if (vY+vHeight > worldHeight) vY = worldHeight - vHeight; draw(); }, false); var board = []; canvas.width = 512; canvas.height = 352; board = loadMap(1); imageObj = new Image(); tiles = []; var loadedImagesCount = 0; for (x = 0; x <= NUM_OF_TILES; x++) { var imageObj = new Image(); // new instance for each image imageObj.src = "http://mystikrpg.com/canvas/img/tiles/t" + x + ".png"; imageObj.onload = function() { // console.log("Added tile ... "+loadedImagesCount); loadedImagesCount++; if (loadedImagesCount == NUM_OF_TILES) { // Onces all tiles are loaded ... // We paint the map draw(); } }; tiles.push(imageObj); } function draw() { context.clearRect(0,0,canvas.width, canvas.height); for (y = 0; y <= vHeight; y++) { for (x = 0; x <= vWidth; x++) { theX = x * 32; theY = y * 32; context.drawImage(tiles[board[y+vY][x+vX]], theX, theY, 32, 32); } } context.fillStyle = 'red'; context.fillRect((playerX-vX)*32, (playerY-vY)*32, 32, 32); } });