Asteroids
How do I make an asteroids?
This is a work in progress.. What is a asteroids? How do you make a asteroids? This script and codes were developed by Dave DeHaan on 04 January 2023, Wednesday.
Asteroids - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Asteroids</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="myCanvas" width="1000" height="1000"></canvas>
<pre> Up = Forward Down = Backward Right = Turn Right Left = Turn Left Space = Shoot <script src="js/index.js"></script>
</body>
</html>
Asteroids - Script Codes CSS Codes
body { margin: 0px;
}
#myCanvas { background: #333;
}
Asteroids - Script Codes JS Codes
var game = { ship: { x: 50, y: 50, angle: 0, inertia: 0, xRatio: 1, yRatio: 0 }, dimensions: { width: 0, height: 0 }, lasers: [], meteors: [], score: 0, gameLoop: null, init: function() { var gameObj = this; this.canvas = document.getElementById('myCanvas'); this.context = this.canvas.getContext('2d'); this.context.strokeStyle = '#FFF'; this.context.fillStyle = '#FFF'; this.initKeyboard(); meteorCount = 5; i = 0; while (i < meteorCount) { this.createMeteor(); i++; } this.ship.x = this.canvas.width / 2; this.ship.y = this.canvas.height / 2; this.gameLoop = setInterval(function() { gameObj.loop(); }, 1000/60); }, createMeteor: function() { this.meteors.push({ x: this.canvas.width, y: this.canvas.height, angle: Math.floor(Math.random() * 360), speed: Math.floor(Math.random() * 2) + 2 }); }, loop: function() { this.context.clearRect(0,0,this.canvas.width,this.canvas.height); this.calculateMovement(); this.drawShip(); this.drawLasers(); this.drawMeteors(); this.detectCollisions(); this.context.fillText('Score: '+this.score, 2, this.canvas.height - 2); }, detectCollisions: function() { for (key in this.meteors) { meteor = this.meteors[key]; if (Math.abs(meteor.x - this.ship.x) < 6 && Math.abs(meteor.y - this.ship.y) < 6) { this.endGame(); } for (laserKey in this.lasers) { laser = this.lasers[laserKey]; if (Math.abs(meteor.x - laser.x) < 5 && Math.abs(meteor.y - laser.y) < 5) { this.lasers.splice(laserKey, 1); this.meteors.splice(key, 1); this.score++; this.createMeteor(); this.createMeteor(); } } } }, endGame: function() { clearInterval(this.gameLoop); }, calculateMovement: function() { if (this.ship.inertia > 0) { this.ship.inertia -= .05; } if (this.ship.inertia < 0) { this.ship.inertia += .05; } if (this.ship.y > this.canvas.height) { this.ship.y = 0; } if (this.ship.y < 0) { this.ship.y = this.canvas.height; } if (this.ship.x > this.canvas.width) { this.ship.x = 0; } if (this.ship.x < 0) { this.ship.x = this.canvas.width; } if (this.ship.angle > 360) { this.ship.angle = 0; } if (this.ship.angle < 0) { this.ship.angle = 360; } this.ship.xRatio = Math.sin(Math.PI * this.ship.angle / 180); this.ship.yRatio = Math.cos(Math.PI * this.ship.angle / 180); this.ship.x += Math.round(this.ship.inertia * this.ship.xRatio); this.ship.y += Math.round(this.ship.inertia * this.ship.yRatio); }, drawMeteors: function() { for (key in this.meteors) { meteor = this.meteors[key]; this.context.beginPath(); this.context.arc(meteor.x,meteor.y,5,0,2*Math.PI); this.context.fill(); this.meteors[key].x += Math.sin(Math.PI * meteor.angle / 180) * meteor.speed; this.meteors[key].y += Math.cos(Math.PI * meteor.angle / 180) * meteor.speed; if (this.meteors[key].y > this.canvas.height) { this.meteors[key].y = 0; } if (this.meteors[key].y < 0) { this.meteors[key].y = this.canvas.height; } if (this.meteors[key].x > this.canvas.width) { this.meteors[key].x = 0; } if (this.meteors[key].x < 0) { this.meteors[key].x = this.canvas.width; } } }, drawShip: function() { this.context.beginPath(); this.context.moveTo(this.ship.x - this.ship.xRatio * 5, this.ship.y - this.ship.yRatio * 5); this.context.lineTo(this.ship.x + this.ship.xRatio * 5, this.ship.y + this.ship.yRatio * 5); this.context.stroke(); }, createLaser: function() { this.lasers.push({ x: this.ship.x, y: this.ship.y, inertia: this.ship.inertia, xRatio: this.ship.xRatio, yRatio: this.ship.yRatio, }); }, drawLasers: function() { for (key in this.lasers) { laser = this.lasers[key]; this.context.beginPath(); this.context.moveTo(laser.x - laser.xRatio * 3, laser.y - laser.yRatio * 3); this.context.lineTo(laser.x + laser.xRatio * 3, laser.y + laser.yRatio * 3); this.context.stroke(); this.lasers[key].x += laser.xRatio * (laser.inertia + 2); this.lasers[key].y += laser.yRatio * (laser.inertia + 2); if (laser.x > this.canvas.width || laser.y > this.canvas.height || laser.x < 0 || laser.y < 0) this.lasers.splice(key, 1); } }, initKeyboard: function() { var gameObj = this; window.addEventListener('keydown', function(e) { if (e.keyCode == 38 || e.keyCode == 87) { if (gameObj.ship.inertia < 10) gameObj.ship.inertia++; } if (e.keyCode == 40 || e.keyCode == 83) { if (gameObj.ship.inertia > -10) gameObj.ship.inertia--; } if (e.keyCode == 37 || e.keyCode == 65) { gameObj.ship.angle += 10; } if (e.keyCode == 39 || e.keyCode == 68) { gameObj.ship.angle -= 10; } if (e.keyCode == 32 || e.keyCode == 13) { gameObj.createLaser(); } }); }
};
game.init();
Developer | Dave DeHaan |
Username | davedehaan |
Uploaded | January 04, 2023 |
Rating | 3 |
Size | 2,846 Kb |
Views | 8,096 |
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 |
HTML5 Logo Tracing | 2,301 Kb |
Global Composite Operation Test | 1,992 Kb |
Winter | 2,613 Kb |
Unblur on scroll | 1,930 Kb |
Randomly generated canvas clouds | 2,028 Kb |
More Fun with Lines | 3,118 Kb |
Merry Christmas. | 3,030 Kb |
Spotlight Search 404 | 3,033 Kb |
Fun with Lines | 2,897 Kb |
Dynamic Hero Image | 2,435 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 |
Perspective Origin Demo | Agelber | 3,614 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
Nav Test -- cats 1 | Payls | 4,735 Kb |
Css3 loader | Clknap | 2,391 Kb |
Simple content swap | Snografx | 1,859 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Box Shadow Effects | Retrofuturistic | 2,143 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
Roman Numerical Converter | Vhall_io | 2,102 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!