index.js - second - Mikhail-Shirokov/Space_Invaders_Game

index.js
192 строки4 KB
itcube22
shoot invaders я пропустил и Take new grid width и enemy explosions
25 дек 2025, 13:16
25 дек 2025, 13:16225f72e
const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')
//shoot invaders я пропустил и Take new grid width и enemy explosions
canvas.width = innerWidth - 5
canvas.height = innerHeight - 5

class Player {
    constructor() {
        this.velocity =
            {
                x: 0,
                y: 0
            }
        this.rotation = 0
        const image = new Image()
        image.src = './spaceship.png'

        image.onload = () => {
            const scale = 0.15
            this.image = image
            this.width = image.width * scale
            this.height = image.height * scale
            this.position = {
                x: canvas.width / 2 - this.width / 2,
                y: canvas.height - this.height - 20
            }
        }
    }

    draw() {
        if (this.image) {

            c.drawImage(this.image,
                this.position.x,
                this.position.y,
                this.width,
                this.height)

        }
    }

    update() {
        if (this.image) {
            this.draw()
            this.position.x += this.velocity.x
            this.position.y += this.velocity.y
        }
    }
}

class Projectile {
    constructor({position, velocity}) {
        this.position = position
        this.valosity = velocity
        this.radius = 3
    }
    draw() {
        c.beginPath()
        c.arc(this.position.x, this.position.y, this.radius,0, Math.PI * 2)
        c.fillStyle = 'red'
        c.fill()
        c.closePath()
    }
    update(){
        this.draw()
        this.position.x += this.valosity.x
        this.position.y += this.valosity.y
    }
}

const player = new Player()
const projectile = []
// grid убрать new Grid()
const keys = {
    a: {
        pressed: false
    },
    d: {
        pressed: false
    }
    , w: {
        pressed: false
    }
    , s: {
        pressed: false
    },
    space: {
        pressed: false
    }
}
// 1
let frames = 0
let randomIntarval = Math.floor(Math.random() * 500 + 500)

function animate() {
    requestAnimationFrame(animate)
    c.fillStyle = 'black'
    c.fillRect(0, 0, canvas.width, canvas.height)
    player.update()
    projectile.forEach((projectile, index )=> {
        if (projectile.position.x + projectile.radius <= 0) {
            setTimeout(() => {
                projectile.splice(index, 1)
            } , 0)



        }else {
            projectile.update()
        }
    })


    if (keys.a.pressed && player.position.x >= 0) {
        player.velocity.y = 0
        player.velocity.x = -5

    }
    else
    if (keys.d.pressed && player.position.x + player.width <= canvas.width) {
        player.velocity.y = 0
        player.velocity.x = +5
    }
    else
    if (keys.s.pressed && player.position.y + player.height < canvas.height- 10) {
        player.velocity.x = 0
        player.velocity.y = +5
    }
    else
    if (keys.w.pressed && player.position.y >= 60) {//настройка высоты и ширины работы персонажа
        player.velocity.x = 0
        player.velocity.y = -5
    }
    else {
        player.velocity.x = 0
        player.velocity.y = 0
    }
    if (frames % randomIntarval === 0){
        //grids.push(new Grid)
        randomIntarval = Math.floor(Math.random() * 500 + 500)
    }
    frames++
}

animate()

addEventListener('keydown', ({key}) => {
    switch (key) {
        case 'a':
            console.log("left")
            keys.a.pressed = true
            break
        case 'd':
            console.log("right")
            keys.d.pressed = true
        case 's':
            console.log("up")
            keys.s.pressed = true
        case 'w':
            console.log("down")
            keys.w.pressed = true
        case ' ':
            console.log('space')
            projectile.push(new Projectile({
                position: { x: player.position.x + player.width/2, y: player.position.y },
                velocity: { x: 0, y: -10 },
            }))
            break
    }

})
addEventListener('keyup', ({key}) => {
    switch (key) {
        case 'a':
            console.log("left")
            keys.a.pressed = false
            break
        case 'd':
            console.log("right")
            keys.d.pressed = false
        case 's':
            console.log("up")
            keys.s.pressed = false
        case 'w':
            console.log("down")
            keys.w.pressed = false
        case ' ':
            console.log('space')
            break
    }

})