Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!
Werbeanzeige
Treue Seele
Quellcode |
|
1 2 3 4 5 6 |
var player = new Image(); player.src = "Player.png"; var PlayerPositionX = 0.0; var PlayerPositionY = 0.0; var PlayerVelocityX = 0.0; var PlayerVelocityY = 0.0; |
Es ist ja keine Schande etwas falsch zu machen, als Programmierer tu ich das täglich, [...].
Ich verwende Variante 1:
http://www.phpied.com/3-ways-to-define-a-javascript-class/
ich habe jetz nochmal ein wenig nachgelesen:Ich verwende Variante 1:
http://www.phpied.com/3-ways-to-define-a-javascript-class/
die Vererbung in dem Buch wird auch so wie auf dieser Seite beschriebenMan kann OOP in JS recht gut machen:
http://www.peterkropff.de/site/javascript/oop.htm
Es ist ja keine Schande etwas falsch zu machen, als Programmierer tu ich das täglich, [...].
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Sacaldur« (23.11.2011, 11:06)
Treue Seele
Quellcode |
|
1 2 3 4 5 6 7 8 9 10 |
const FPS = 60; // ===========================================================// Player Class// ===========================================================function Player(imgPath, x, y) { this.Sprite = new Image(); this.Sprite.src = imgPath; this.PositionX = x; this.PositionY = y; this.VelocityX = 0.0; this.VelocityY = 0.0; this.Update = function() { this.PositionX += this.VelocityX * FPS; this.PositionY += this.VelocityY * FPS; this.VelocityX *= 0.95; this.VelocityY *= 0.95; }; this.Draw = function(drawArea) { drawArea.drawImage(this.Sprite, this.PositionX, this.PositionY); };} // ===========================================================// Game begins here!// ===========================================================// Init Game Componentsvar background = new Image();background.src = "Background.png";var player = new Player("Player.png", 0.0, 0.0); // Declare Drawing Area & Inputvar canvas = null;var context2d = null;var keys = new Array(); window.onload = init;window.addEventListener('keydown', onKeyDown, true);window.addEventListener('keyup', onKeyUp, true); // Handle KeyEventsfunction onKeyDown(evt) { keys[evt.keyCode] = true; }function onKeyUp(evt) { keys[evt.keyCode] = false; } // ===========================================================// Main Methods// ===========================================================// Update Game Components & Handle Inputfunction update() { if ((37 in keys && keys[37])) { player.VelocityX -= 0.02; } // Move Left if ((39 in keys && keys[39])) { player.VelocityX += 0.02; } // Move Right if ((38 in keys && keys[38])) { player.VelocityY -= 0.02; } // Move Up if ((40 in keys && keys[40])) { player.VelocityY += 0.02; } // Move Down player.Update();} // Draw Imagesfunction draw() { context2d.clearRect(0, 0, canvas.width, canvas.height); context2d.drawImage(background, 0, 0); player.Draw(context2d);} // Init Game Componentsfunction init() { canvas = document.getElementById('canvas'); context2d = canvas.getContext('2d'); setInterval(draw, 1000 / FPS); update(); draw();} |
Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »BLU3 L30PARD« (23.11.2011, 15:25)
Quellcode |
|
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 |
const FPS = 60; // ===========================================================// Player Class// =========================================================== function Player(imgPath, x, y) { this.Sprite = new Image(); this.Sprite.src = imgPath; this.PositionX = x; this.PositionY = y; this.VelocityX = 0.0; this.VelocityY = 0.0; this.Update = function() { this.PositionX += this.VelocityX * FPS; this.PositionY += this.VelocityY * FPS; this.VelocityX *= 0.95; this.VelocityY *= 0.95; }; this.Draw = function(drawArea) { drawArea.drawImage(this.Sprite, this.PositionX, this.PositionY); }; } // ===========================================================// Game begins here!// =========================================================== // Init Game Components var background = new Image(); background.src = "Background.png"; var player = new Player("Player.png", 0.0, 0.0); // Declare Drawing Area & Input var canvas = null; var context2d = null; var keys = new Array(); window.onload = init; window.addEventListener('keydown', onKeyDown, true); window.addEventListener('keyup', onKeyUp, true); // Handle KeyEvents function onKeyDown(evt) { keys[evt.keyCode] = true; } function onKeyUp(evt) { keys[evt.keyCode] = false; } // ===========================================================// Main Methods// =========================================================== // Update Game Components & Handle Input function update() { if ((37 in keys && keys[37])) { player.VelocityX -= 0.02; } // Move Left if ((39 in keys && keys[39])) { player.VelocityX += 0.02; } // Move Right if ((38 in keys && keys[38])) { player.VelocityY -= 0.02; } // Move Up if ((40 in keys && keys[40])) { player.VelocityY += 0.02; } // Move Down player.Update(); } // Draw Images function draw() { context2d.clearRect(0, 0, canvas.width, canvas.height); context2d.drawImage(background, 0, 0); player.Draw(context2d); } // Init Game Components function init() { canvas = document.getElementById('canvas'); context2d = canvas.getContext('2d'); setInterval(draw, 1000 / FPS); update(); draw(); } |
Es ist ja keine Schande etwas falsch zu machen, als Programmierer tu ich das täglich, [...].
Treue Seele
Werbeanzeige