JavaScript constructors
How do I make an javascript constructors?
What is a javascript constructors? How do you make a javascript constructors? This script and codes were developed by Sim Boon Long on 19 December 2022, Monday.
JavaScript constructors - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JavaScript constructors</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <p>Functional</p> <canvas id="canvas-functional"></canvas>
</div>
<div class="container"> <p>Prototypal Inheritance</p> <canvas id="canvas-prototypal"></canvas>
</div> <script src="js/index.js"></script>
</body>
</html>
JavaScript constructors - Script Codes CSS Codes
body{ background:#000; color:#fff; font-family:'Arial' sans-serif; font-size:10px;
}
.container { display:inline-block; margin-right:40px;
}
canvas{ border: white 1px solid;
}
JavaScript constructors - Script Codes JS Codes
// 2 different ways of writing constructors in JavaScript... does the same thing in this example.
//==================================
// Function Constructor
//==================================
(function(window, document, undefined) { "use strict"; var canvas = document.getElementById('canvas-functional'), ctx = canvas.getContext('2d'); canvas.width = 150; canvas.height = 150; var can_center_x = canvas.width / 2, can_center_y = canvas.height / 2, Hero = createCharacter(can_center_x, can_center_y, 10, 10); function createCharacter(x, y, w, h) { var Character = Character || {}; Character.x = x; Character.y = y; Character.w = w; Character.h = h; Character.moveRight = function() { this.x += 20; } Character.moveLeft = function() { this.x -= 20; } Character.moveDown = function() { this.y += 20; } Character.moveUp = function() { this.y -= 20; } Character.draw = function() { ctx.strokeRect(this.x, this.y, this.w, this.h); } return Character; } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.strokeRect(0, 0, canvas.width, canvas.height); Hero.draw(); } function initStyles() { ctx.fillStyle = "#000"; ctx.strokeStyle = "#FFF"; } function onDirectionalKeyDown(event) { switch (true) { // left case event.keyCode === 37: Hero.moveLeft(); break; // right case event.keyCode === 39: Hero.moveRight(); break; // up case event.keyCode === 38: Hero.moveUp(); break; // down case event.keyCode === 40: Hero.moveDown(); break; default: } } initStyles(); window.addEventListener('keydown', onDirectionalKeyDown); setInterval(draw, 1000 / 60);
})(this, this.document);
//==================================
// Prototypal Constructor
//==================================
(function(window, document, undefined) { "use strict"; var canvas = document.getElementById('canvas-prototypal'), ctx = canvas.getContext('2d'); canvas.width = 150; canvas.height = 150; var can_center_x = canvas.width / 2, can_center_y = canvas.height / 2, Hero = new Character(can_center_x, can_center_y, 10, 10); Character.prototype.moveRight = function() { this.x += 20; } Character.prototype.moveLeft = function() { this.x -= 20; } Character.prototype.moveDown = function() { this.y += 20; } Character.prototype.moveUp = function() { this.y -= 20; } Character.prototype.draw = function() { ctx.strokeRect(this.x, this.y, this.w, this.h); } function Character(x, y, w, h) { this.x = x; this.y = y; this.w = w; this.h = h; } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.strokeRect(0, 0, canvas.width, canvas.height); Hero.draw(); } function initStyles() { ctx.fillStyle = "#000"; ctx.strokeStyle = "#FFF"; } function onDirectionalKeyDown(event) { switch (true) { // left case event.keyCode === 37: Hero.moveLeft(); break; // right case event.keyCode === 39: Hero.moveRight(); break; // up case event.keyCode === 38: Hero.moveUp(); break; // down case event.keyCode === 40: Hero.moveDown(); break; default: } } initStyles(); window.addEventListener('keydown', onDirectionalKeyDown); setInterval(draw, 1000 / 60);
})(this, this.document);
Developer | Sim Boon Long |
Username | simboonlong |
Uploaded | December 19, 2022 |
Rating | 3 |
Size | 2,415 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Canvas clock | 3,093 Kb |
Fancy button | 3,001 Kb |
Stroke shapes with css border | 2,739 Kb |
Dogear effect with background image method | 3,046 Kb |
Customised underline | 2,011 Kb |
Line Study | 2,558 Kb |
For loops techniques | 1,961 Kb |
A Pen by Sim Boon Long | 2,703 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
The Rope | Chribbe | 2,886 Kb |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
Apple website | Jds317 | 1,835 Kb |
After America | Jonathangarner | 2,686 Kb |
Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
Portfolio page | Bhavya_j | 2,804 Kb |
Sticky div | Kaslab | 2,225 Kb |
Price Comparison Table | Orrinward | 3,459 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!