Asteroids

Developer
Dave DeHaan
Size
2,846 Kb
Views
8,096
  1. Asteroids Previews
  2. Asteroids HTML Codes
  3. Asteroids CSS Codes
  4. Asteroids JS Codes

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,096
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
Javascript stopwatch
Tween Bubbles.
404 Glitch Effect
Global Composite Operation Test
Multi-color Text using globalCompositeOperation
More Fun with Lines
Merry Christmas.
Fun with Lines
HTML5 Logo Tracing
Unblur on Page Load
Create amazing video scripts 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!