Asteroids

Developer
Dave DeHaan
Size
2,846 Kb
Views
8,092

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 Previews
IQ Test

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();
Asteroids - Script Codes
Asteroids - Script Codes
Home Page Home
Developer Dave DeHaan
Username davedehaan
Uploaded January 04, 2023
Rating 3
Size 2,846 Kb
Views 8,092
Do you need developer help for Asteroids?

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!

Dave DeHaan (davedehaan) Script Codes
Name
404 Glitch Effect
Merry Christmas.
HTML5 Logo Tracing
Unblur on scroll
Unblur on Page Load
Christmas Countdown
Dynamic Hero Image
Randomly generated canvas clouds
Tween Bubbles.
Fun with Lines
Create amazing marketing copy with AI!

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!