Contrôle objet java-scripts

**houssem123456** · 22/01/2018, 16h38

merci les gars, vous étiez vraiment utile dans cet endroit ... j'ai un champ de saisie et je veux transmettre des informations au code.
mon but est de faire bouger le Cube rouge en le contrôlant suivant en passant le commande a partir du champ de saisie .
J'ai trouvé un code et j'ai essayé de l'améliorer comme je le voulais ... mais jusqu'à maintenant je n'ai pas trouvé un moyen de transmettre l'information du champ de saisie

.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
 
 
<script>
var myGamePiece;
 
function startGame() {
    myGamePiece = new component(30, 30, "red", 225, 225);
    myGameArea.start();
}
 
var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            e.preventDefault();
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
    },
    stop : function() {
        clearInterval(this.interval);
    },    
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}
 
function component(width, height, color, x, y, type) {
 
    this.type = type;
    this.width = width;
    this.height = height;
    this.speed = 0;
    this.angle = 0;
    this.moveAngle = 0;
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.angle);
        ctx.fillStyle = color;
        ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
        ctx.restore();    
    }
    this.newPos = function() {
        this.angle += this.moveAngle * Math.PI / 180;
        this.x += this.speed * Math.sin(this.angle);
        this.y -= this.speed * Math.cos(this.angle);
    }
}
 
function updateGameArea() {
    myGameArea.clear();
    myGamePiece.moveAngle = 0;
    myGamePiece.speed = 0;
    if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.moveAngle = -1; }
    if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.moveAngle = 1; }
    if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speed= 1; }
    if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speed= -1; }
    myGamePiece.newPos();
    myGamePiece.update();
}
</script>
 
<p>Example of information : <br/>
A : avancer <br/>
L : rotation d une angle 90 degré vers la gauche</p>
<form>
<label>Met ton ordre ici exemple = "LAA" (tourner a gauche et avancer deux fois)</label>
<input type="text">
</from>
 
</body>
</html>

**NoSmoking** · 23/01/2018, 15h25

Bonjour,
met un écouteur, par exemple onchange, sur ton élément <input> et déclenche/appelle une fonction qui va interpréter caractère par caractère la chaine saisie et agir en conséquence.

Contrôle objet java-scripts

JavaScript

Vue hybride

Discussions similaires

Partager

Partager