{"id":2823,"date":"2023-11-30T23:51:07","date_gmt":"2023-12-01T07:51:07","guid":{"rendered":"https:\/\/rose.dev\/blog\/?p=2823"},"modified":"2024-01-24T21:13:40","modified_gmt":"2024-01-25T05:13:40","slug":"pure-javascript-asteroids-clone-with-enemy-ships-source-code","status":"publish","type":"post","link":"https:\/\/rose.dev\/blog\/2023\/11\/30\/pure-javascript-asteroids-clone-with-enemy-ships-source-code\/","title":{"rendered":"Pure JavaScript Asteroids Clone with Enemy Ships Source Code"},"content":{"rendered":"\n

There are many acceptable JavaScript game engines out nowadays, but often you can get good performance from writing your own simple engine or renderer depending on your use case. The code for this project will be on my GitHub linked below.<\/p>\n\n\n\n

What goes into writing a game engine?<\/h2>\n\n\n\n

Ideally, we want to handle a few important things.<\/p>\n\n\n\n

    \n
  1. States, whether that be states of objects (alive, dead, moving, the type of enemy)<\/li>\n\n\n\n
  2. Rendering<\/li>\n\n\n\n
  3. Spawnable objects (with previously mentioned states)<\/li>\n\n\n\n
  4. Input<\/li>\n\n\n\n
  5. Save data<\/li>\n<\/ol>\n\n\n\n

    We approach this task with an object-oriented mindset instead of a functional programming mindset. Although there are a few global variables such as the overall running game state or the object pool arrays, most of the memory or information we need to remember occurs on a per-object basis.<\/p>\n\n\n\n

    We will be using a ‘Canvas<\/a>‘ to draw our simple asteroid graphics. Writing a 3d renderer in JS is a much more complex task, although libraries like threeJS<\/a> exist to get you started.<\/p>\n\n\n\n

    To begin with, we want to define a Vector2D class that we can reuse throughout our game. I’m familiar with Unity so I imagine an implementation similar to their engine’s GameObject setup, but any class that can read \/ write an X and Y will work.<\/p>\n\n\n\n

    var Vec2D = (function() {\nvar create = function(x, y) {\n        var obj = Object.create(def);\n        obj.setXY(x, y);\n\n        return obj;\n    };\n\n    var def = {\n        _x: 1,\n        _y: 0,\n\n        getX: function() {\n            return this._x;\n        },\n\n        setX: function(value) {\n            this._x = value;\n        },\n\n        getY: function() {\n            return this._y;\n        },\n\n        setY: function(value) {\n            this._y = value;\n        },\n\n        setXY: function(x, y) {\n            this._x = x;\n            this._y = y;\n        },\n\n        getLength: function() {\n            return Math.sqrt(this._x * this._x + this._y * this._y);\n        },\n\n        setLength: function(length) {\n            var angle = this.getAngle();\n            this._x = Math.cos(angle) * length;\n            this._y = Math.sin(angle) * length;\n        },\n\n        getAngle: function() {\n            return Math.atan2(this._y, this._x);\n        },\n\n        setAngle: function(angle) {\n            var length = this.getLength();\n            this._x = Math.cos(angle) * length;\n            this._y = Math.sin(angle) * length;\n        },\n\n        add: function(vector) {\n            this._x += vector.getX();\n            this._y += vector.getY();\n        },\n\n        sub: function(vector) {\n            this._x -= vector.getX();\n            this._y -= vector.getY();\n        },\n\n        mul: function(value) {\n            this._x *= value;\n            this._y *= value;\n        },\n\n        div: function(value) {\n            this._x \/= value;\n            this._y \/= value;\n        }\n    };\n\n    return {\n        create: create\n    };\n}());       <\/code><\/pre>\n\n\n\n
    This will allow us to reference positions easier. It’s vital to implement a few capabilities for our renderer. One important need is to be able to draw an object to our canvas at a specified position, and have the capability to clear said canvas, preparing for the next frame the game renders.<\/p>\n\n\n\n
    To draw a line, we can write JavaScript such as:<\/p>\n\n\n\n
    var c = document.getElementById(\"canvas\");\nvar ctx = c.getContext(\"2d\");\nctx.moveTo(0, 0);\nctx.lineTo(200, 100);\nctx.stroke();<\/code><\/pre>\n\n\n\n
    And if we wanted to clear our canvas, we can use clearRect<\/code>:<\/p>\n\n\n\n
    ctx.clearRect(0, 0, canvas.width, canvas.height);<\/code><\/pre>\n\n\n\n
    We can define a render function to handle our different objects.<\/p>\n\n\n\n
    window.getAnimationFrame =\n    window.requestAnimationFrame ||\n    window.webkitRequestAnimationFrame ||\n    window.mozRequestAnimationFrame ||\n    window.oRequestAnimationFrame ||\n    window.msRequestAnimationFrame ||\nfunction(callback) {\n    window.setTimeout(callback, 16.6);\n};\nrender(){\n    context.clearRect(0,0,screenWidth,screenHeight);\n    renderShips();\n    renderAsteroids();\n    renderBullets();\n    getAnimationFrame(loop);\n}\n\nrenderShips(){\n    ship.renderSelf();\n    for (int i = 0; i < enemies.length; i++)\n    enemies.renderSelf();\n}\n...etc<\/code><\/pre>\n\n\n\n
    Then an example render self function:<\/p>\n\n\n\n
    renderSelf: function() {\n    if (this.hasDied)\n        return;\n    context.save();\n    context.translate(this.pos.getX() >> 0, this.pos.getY() >> 0);\n    context.rotate(this.angle);\n    context.strokeStyle = playerColor;\n    context.lineWidth = (Math.random() > 0.9) ? 4 : 2;\n    context.beginPath();\n    context.moveTo(10, 0);\n    context.lineTo(-10, -10);\n    context.lineTo(-10, 10);\n    context.lineTo(10, 0);\n    context.stroke();\n    context.closePath();\n\n    context.restore();\n}<\/code><\/pre>\n\n\n\n
    Which would render our object assuming a class holding some variables with our Vector2 class we described earlier.<\/p>\n\n\n\n
    var Ship = (function() {\nvar create = function(x, y, ref) {\n    var obj = Object.create(def);\n    obj.ref = ref;\n    obj.angle = 0;\n    obj.pos = Vec2D.create(x, y);\n    obj.vel = Vec2D.create(0, 0);\n    obj.thrust = Vec2D.create(0, 0);\n    obj.invincible = false;\n    obj.hasDied = false;\n    obj.radius = 8;\n    obj.idleDelay = 0;\n    obj.isSpectating = false;\n\n    return obj;\n};\n...etc<\/code><\/pre>\n\n\n\n
    We are handling rendering and state management from inside an object now. All that just for a triangle.<\/p>\n\n\n\n
    \"player<\/figure>\n\n\n\n
    We aren’t done yet. Next we need to handle Input. The goal with creating object classes is reusability and extensibility. We don’t need to spawn multiple instances of an input, so we can handle that globally. Your Input function may look something like this:<\/p>\n\n\n\n
    window.onkeydown = function(e) {\n    switch (e.keyCode) {\n        \/\/key A or LEFT\n        case 65:\n        case 37:\n            keyLeft = true;\n            break;\n            \/\/key W or UP\n        case 87:\n        case 38:\n            keyUp = true;\n            break;\n            \/\/key D or RIGHT\n        case 68:\n        case 39:\n            keyRight = true;\n            break;\n            \/\/key S or DOWN\n        case 83:\n        case 40:\n            keyDown = true;\n            break;\n            \/\/key Space\n        case 32:\n        case 75:\n            keySpace = true;\n            break;\n            \/\/key Shift\n        case 16:\n            keyShift = true;\n            break;\n    }\n\n    e.preventDefault();\n};\n\nwindow.onkeyup = function(e) {\n    switch (e.keyCode) {\n        \/\/key A or LEFT\n        case 65:\n        case 37:\n            keyLeft = false;\n            break;\n            \/\/key W or UP\n        case 87:\n        case 38:\n            keyUp = false;\n            break;\n            \/\/key D or RIGHT\n        case 68:\n        case 39:\n            keyRight = false;\n            break;\n            \/\/key S or DOWN\n        case 83:\n        case 40:\n            keyDown = false;\n            break;\n            \/\/key Space\n        case 75:\n        case 32:\n            keySpace = false;\n            break;\n            \/\/key Shift\n        case 16:\n            keyShift = false;\n            break;\n    }\n\n    e.preventDefault();\n};<\/code><\/pre>\n\n\n\n
    e.preventDefault()<\/code> will stop users from accidentally hitting keys such as ctrl + L and losing focus from the window, or jumping the page with Space, for instance.<\/p>\n\n\n\n
    function updateShip() {\n    ship.update();\n\n    if (ship.hasDied) return;\n\n    if (keySpace) ship.shoot();\n    if (keyLeft && keyShift) ship.angle -= 0.1;\n    else if (keyLeft) ship.angle -= 0.05;\n    if (keyRight && keyShift) ship.angle += 0.1;\n    else if (keyRight) ship.angle += 0.05;\n\n    if (keyUp) {\n        ship.thrust.setLength(0.1);\n        ship.thrust.setAngle(ship.angle);\n    } else {\n        ship.vel.mul(0.94);\n        ship.thrust.setLength(0);\n    }\n\n    if (ship.pos.getX() > screenWidth) ship.pos.setX(0);\n    else if (ship.pos.getX() < 0) ship.pos.setX(screenWidth);\n\n    if (ship.pos.getY() > screenHeight) ship.pos.setY(0);\n    else if (ship.pos.getY() < 0) ship.pos.setY(screenHeight);\n}\n\n...etc\n\nfunction checkDistanceCollision(obj1, obj2) {\n    var vx = obj1.pos.getX() - obj2.pos.getX();\n    var vy = obj1.pos.getY() - obj2.pos.getY();\n    var vec = Vec2D.create(vx, vy);\n\n    if (vec.getLength() < obj1.radius + obj2.radius) {\n        return true;\n    }\n\n    return false;\n}\n\n...etc<\/code><\/pre>\n\n\n\n
    Once we have the ability to render a reusable object to a canvas and read \/ write a position that can be checked, we use that as a template to create other objects (particles, asteroids, other ships).<\/p>\n\n\n\n
    \n
    \n
    \"hexagon<\/figure>\n<\/div>\n\n\n\n
    \n
    \"enemy<\/figure>\n<\/div>\n<\/div>\n\n\n\n
    You can make interesting graphics with just basic shapes. We handle collision by assigning either an xWidth and yWidth + xOffset and yOffset, OR a radius. This again would be assigned to the object itself to keep track of.<\/p>\n\n\n\n
    \"asteroids<\/figure>\n\n\n\n
    Further Techniques<\/h2>\n\n\n\n
    If we can control the rendering manually we can leave an ‘afterimage’ on our canvas before rendering the next frame as opposed to clearing it entirely. To do this, we can manipulate the canvas’ global alpha.<\/p>\n\n\n\n
    \/\/ Get the canvas element and its 2D rendering context\nconst canvas = document.getElementById('myCanvas');\nconst ctx = canvas.getContext('2d');\n\/\/ Set the initial alpha value\nlet alpha = 0.1; \/\/ You can adjust this value to control the fading speed\n\/\/ Function to create the afterimage effect\nfunction createAfterimage() {\n    \/\/ Set a semi-transparent color for the shapes\n    ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;\n    \/\/ Fill a rectangle covering the entire canvas\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n    \/\/ Decrease alpha for the next frame\n    alpha *= 0.9; \/\/ You can adjust this multiplier for a different fade rate\n    \/\/ Request animation frame to update\n    requestAnimationFrame(createAfterimage);\n}\n\/\/ Call the function to start creating the afterimage effect\ncreateAfterimage();<\/code><\/pre>\n\n\n\n
    And a simple localStorage can be used to save scores.<\/p>\n\n\n\n
    function checkLocalScores() {\n    if (localStorage.getItem(\"rocks\") != null) {\n        visualRocks = localStorage.getItem(\"rocks\");\n    }\n    if (localStorage.getItem(\"deaths\") != null) {\n        visualDeaths = localStorage.getItem(\"deaths\");\n    }\n    if (localStorage.getItem(\"enemyShips\") != null) {\n        visualEnemyShips = localStorage.getItem(\"enemyShips\");\n    }\n    updateVisualStats();\n}\nfunction saveLocalScores() {\n    localStorage.setItem(\"rocks\", visualRocks);\n    localStorage.setItem(\"deaths\", visualDeaths);\n    localStorage.setItem(\"enemyShips\", visualEnemyShips);\n}<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    End Result<\/h2>\n\n\n\n
    You can see and play the game here<\/a>. <\/p>\n\n\n\n
    Source code is here<\/a>. \u2728<\/p>\n
    \r\nIt helps me if you share this post\r\n\r\n\r\nPublished 2023-11-30 23:51:07 ","protected":false},"excerpt":{"rendered":"
    There are many acceptable JavaScript game engines out nowadays, but often you can get good performance from writing your own simple engine or renderer depending on your use case. The code for this project will be on my GitHub linked below. What goes into writing a game engine? Ideally, we want to handle a few … Continue reading Pure JavaScript Asteroids Clone with Enemy Ships Source Code<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":2845,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"categories":[922,832,833],"tags":[1193,1189,1190,1188,858,1187,1194,1191,1192],"class_list":["post-2823","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-release","category-software","category-technology","tag-2d","tag-asteroids","tag-clone","tag-engine","tag-game","tag-javascript","tag-renderer","tag-ships","tag-spaceship"],"jetpack_featured_media_url":"https:\/\/rose.dev\/blog\/wp-content\/uploads\/2023\/11\/splatteroidsgamepreview.png","_links":{"self":[{"href":"https:\/\/rose.dev\/blog\/wp-json\/wp\/v2\/posts\/2823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rose.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rose.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rose.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rose.dev\/blog\/wp-json\/wp\/v2\/comments?post=2823"}],"version-history":[{"count":20,"href":"https:\/\/rose.dev\/blog\/wp-json\/wp\/v2\/posts\/2823\/revisions"}],"predecessor-version":[{"id":3151,"href":"https:\/\/rose.dev\/blog\/wp-json\/wp\/v2\/posts\/2823\/revisions\/3151"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rose.dev\/blog\/wp-json\/wp\/v2\/media\/2845"}],"wp:attachment":[{"href":"https:\/\/rose.dev\/blog\/wp-json\/wp\/v2\/media?parent=2823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rose.dev\/blog\/wp-json\/wp\/v2\/categories?post=2823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rose.dev\/blog\/wp-json\/wp\/v2\/tags?post=2823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}