Script: déplacer un objet sur une page ??? | CommentCaMarche Salut sjlouis, Voici un truc que tu peux tester. Je sais pas si ca répond parfaitement à ta question En tout cas ca permet de déplacer n'importe quel élément HTML à la souris en utilisant le drag & drop pour peu que tu positionnes cet élément de manière absolu Par contre ca dépasse et de loin les 25 lignes .... Cela dit tu peux optimiser le code et supprimer toute la gestion de la liste si tu ne veux utiliser qu'un seul objet. Mais trève de discussion voici mon code : D'abord la librairie javascript : fichier drap.js // Php // Déclaration object Mouse // Une seule instance de l'objet Mouse sera crée : // elle va servir à stocker la position absolue de la souris function Mouse() { this.x=0; this.y=0; } // Convertit les coordonnées relatives de la souris en coordonnées absolues function mouse_rel2abs(event_object) { this.x=document.body.scrollLeft+event_object.clientX; this.y=document.body.scrollTop+event_object.clientY; } Mouse.prototype.rel2abs=mouse_rel2abs; if (this.ref) this.show() }
Jeux en JavaScript JavaScript devient un langage de jeu, une tendance qui va se confirmer avec l'apparition en 2008 de JavaScript compilé et ultra rapide. Quelques exemples d'implémentations de jeux classiques, en DHTML pur, ou avec Ajax, Canvas, et des bibliothèques graphiques comme celle de Yahoo. Quelques liens supplémentaires... Counter Terror.
Créer une fonctionnalité drag and drop sur votre site Vous avez deux propriétés à définir pour initialiser l'objet. keyHTML correspond au code HTML que doivent contenir tous les éléments déplaçables. J'ai choisi un code HTML simple : une balise <a> avec une classe CSS pour permettre un peu de mise en forme. Vous pouvez utiliser le code HTML que vous voulez, mais il est important de noter que seul un lien <a> (en dehors des éléments de formulaire) peut obtenir le focus depuis le clavier sur tous les navigateurs, or la gestion du clavier impose qu'un élément puisse obtenir le focus pour que le script fonctionne correctement. keySpeed indique la vitesse de déplacement de l'élément au clavier, en pixels, par appui. Il y a sept autres propriétés, mais elles sont internes au script. Le drag and drop est une technique pour pouvoir déplacer un élément à l'écran. En théorie, il serait aussi possible d'utiliser position: relative, mais cela n'est quasiment jamais utile. Affecter les cordonnées est relativement simple. Initialiser un élément▲ Mouseup▲
Javascript : les frameworks de jeux videos Si nous avons vu précédemment comment certains outils Javascript peuvent vous simplifier vos développements, il existe aussi des outils très spécialisés. Voici donc une sélection de framework pour développer des jeux à l’aide du langage Javascript. Si l’idée de programmer un jeu vidéo complètement en HTML et Javascript vous paraît étrange, sachez que les canvas HTML5 et les animations CSS3 pourraient bien vous surprendre. Javascript est un langage qui s’avère capable de faire fonctionner des jeux videos pour peu qu’on s’attache à prendre en compte certaines de ses limitations (code un peu lent et optimisations difficile à mettre au point, par exemple). Par contre, l’avantage de créer un jeu complet en Javascript est important puisque si vous vous débrouillez bien, votre jeu sera jouable dans tous les navigateurs modernes (y compris ceux équipant les smartphones iPhone et Android) sans que l’internaute n’installe de plugin (Flash par exemple) ! Lime js Easel JS La démo convaincante de RPG JS
How to Drag and Drop in JavaScript JavaScript excels at modifying the DOM of a Web page, but we usually only do simple things with it, such as creating image rollovers, making tabs, etc. This article is going to show you how to create items on your page that you can drag and drop. There are several reasons you might want to encorporate this drag and drop ability into your Web pages. One of the simplest reasons is to reorganize Data. There's really not much involved with dragging an item around on your Web page. Demo - Drag any of the images Capturing Mouse Movement To start we need to capture the mouse coordinates. We must first explain the event object. To make ev contain the event object in every browser we OR it with window.event. Since we'll need to obtain the mouse coordinates many times over this article we make a mouseCoords function that takes one argument: the event. Again we run into differences between IE and other browsers. Capturing Mouse Clicks Moving an Item
JavaScript Animation Object movement JavaScript makes webpage content dynamic, allowing user interaction and animation. The principle of JavaScript animation is rather simple; webpage elements, most often images, have their style or position within the page altered by a script. Repeating this process at sufficiently short intervals has the effect of simulating smooth motion of the element about the page. Each of the elements comprising a webpage is defined by an object (a data storage structure) forming part of the page's Document Object Model (DOM). The image of the red ball on the right had id="ball" and the JavaScript to reference its DOM object and change its left and top style values is as follows: function moveBall() { var ballObj = document.getElementById("ball"); ballObj.style.left = "70px"; ballObj.style.top = "80px"; } Press here to try the code. Continuing movement To get repetitive movement, the window.setTimeout method can be used. In this example the stepBall2() function is called every 100msec.
Event information As with DHTML, this is always browser specific. When an event is triggered, the browser keeps some information about the event that we can use. There are two ways that browsers use to allow us to access this information. DOM compatible browsers (including Internet Explorer 9+ in standards mode) pass the event information to the event handler function as the first argument. Internet Explorer and a few other browsers store the event information in an event register, which we can access by writing 'window.event'. We also have to tell the browser what objects should detect what events and we also have to tell it what to do when that object detects that event. Although it is no longer used, you may want the script to work in Netscape 4, since it is capable of doing this. document.onkeyup = alertkey; Code designed to work with Netscape 4 will use this instead: if( document.captureEvents && Event.KEYUP ) { document.captureEvents( Event.KEYUP ); } document.onkeyup = alertkey;
Using Color and Style In the following tutorial we will be looking at the different ways to go about styling items in your project. Example Path For the examples in this tutorial we will be using a checkmark shaped path which we create using the following code: Stroke Color To add a stroke to our path, we need to set its strokeColor property. The following example shows how to set the stroke color of the path we created earlier to the color red, using a hexidecimal string (Also known from HTML CSS Styles): The hexadecimal color code is automatically converted to a Color object. The color can also be set using an Color object directly. Please note: In Paper.js color component values range from 0 to 1. Fill Color Fill color works exactly the same way as stroke color. Stroke Width To change the stroke width of an item, you can change its strokeWidth property. In the following example we give the path a red stroke of 10 pt: Stroke Cap Stroke Join Dashed Stroke The PathStyle Object Removing Styles