PacMan crossed with Space invaders's game

Click here for free DL of the app version that can save data.

No:19197

←

Prev Next

→

PacMan crossed with Space invaders
Developer User7851｜Date and time 23/10/2 1:14:49
Build time 23.729 sec｜Game capacity 6.167KB｜

Script

Sure! Here is a basic implementation of a game combining PacMan and Space Invaders using JavaScript, enclosed in script tags within a single HTML file. The game can be played on a smartphone and utilizes pictograms for visuals.

Please note that this is a basic implementation to get you started. You can enhance the game by adding levels, obstacles, power-ups, or any additional features according to your preference.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
    <title>PacInvaders</title>
    <style>
        body {
            background-color: black;
            margin: 0;
            cursor: none;
        }
        
        #gameCanvas {
            display: block;
            margin: auto;
            background-color: #333;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Pictograms
const pacmanImg = "🙂";
const invaderImg = "👾";

// Game Constants
const PACMAN_SPEED = 5;
const INVADER_SPEED = 2;
const INVADER_SIZE = 20;
const PACMAN_SIZE = 30;
const DELAY = 50;
const INVADER_ROWS = 5;
const INVADER_COLS = 8;

// Keyboard Input
const keys = {};
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(event) {
    keys[event.code] = true;
}

function keyUpHandler(event) {
    keys[event.code] = false;
}

// PacMan Object
class PacMan {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = PACMAN_SIZE;
        this.speed = PACMAN_SPEED;
        this.direction = "Right";
    }

update() {
        if (keys["ArrowUp"]) {
            this.y -= this.speed;
            this.direction = "Up";
        }
        if (keys["ArrowDown"]) {
            this.y += this.speed;
            this.direction = "Down";
        }
        if (keys["ArrowLeft"]) {
            this.x -= this.speed;
            this.direction = "Left";
        }
        if (keys["ArrowRight"]) {
            this.x += this.speed;
            this.direction = "Right";
        }

// Keep PacMan within the canvas
        if (this.x < 0) {
            this.x = 0;
        }
        if (this.x + this.size > canvas.width) {
            this.x = canvas.width - this.size;
        }
        if (this.y < 0) {
            this.y = 0;
        }
        if (this.y + this.size > canvas.height) {
            this.y = canvas.height - this.size;
        }
    }

draw() {
        ctx.font = "30px Arial";
        ctx.fillStyle = "yellow";

if (this.direction === "Right") {
            ctx.fillText(pacmanImg, this.x, this.y + this.size);
        } else if (this.direction === "Left") {
            ctx.translate(this.x + this.size, this.y);
            ctx.scale(-1, 1);
            ctx.fillText(pacmanImg, 0, 0);
            ctx.scale(-1, 1);
            ctx.translate(-(this.x + this.size), -this.y);
        } else if (this.direction === "Up") {
            ctx.translate(this.x, this.y + this.size);
            ctx.rotate(-Math.PI / 2);
            ctx.fillText(pacmanImg, 0, 0);
            ctx.rotate(Math.PI / 2);
            ctx.translate(-this.x, -(this.y + this.size));
        } else if (this.direction === "Down") {
            ctx.translate(this.x + this.size, this.y);
            ctx.rotate(Math.PI / 2);
            ctx.fillText(pacmanImg, 0, 0);
            ctx.rotate(-Math.PI / 2);
            ctx.translate(-(this.x + this.size), -this.y);
        }
    }
}

// Space Invader Object
class Invader {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = INVADER_SIZE;
        this.speed = INVADER_SPEED;
        this.direction = 1; // -1 for left, 1 for right
    }

update() {
        this.x += this.speed * this.direction;

// Change direction if the invader reaches the canvas boundaries
        if (this.x < 0 || this.x + this.size > canvas.width) {
            this.direction *= -1;
            this.y += 20;
        }
    }

draw() {
        ctx.font = "30px Arial";
        ctx.fillStyle = "green";
        ctx.fillText(invaderImg, this.x, this.y + this.size);
    }
}

// Game Initialization
function init() {
    canvas = document.getElementById("gameCanvas");
    ctx = canvas.getContext("2d");
    pacman = new PacMan(canvas.width / 2 - PACMAN_SIZE / 2, canvas.height - PACMAN_SIZE);
    invaders = [];

// Create Invaders
    for (let row = 0; row < INVADER_ROWS; row++) {
        for (let col = 0; col < INVADER_COLS; col++) {
            const x = col * (INVADER_SIZE * 1.5) + (canvas.width / 2 - (INVADER_COLS * INVADER_SIZE * 1.5) / 2);
            const y = row * (INVADER_SIZE * 1.5) + 50;
            invaders.push(new Invader(x, y));
        }
    }

gameState = "running";
    gameLoop();
}

// Game Loop
function gameLoop() {
    update();
    draw();

if (gameState === "running") {
        setTimeout(gameLoop, DELAY);
    }
}

// Game Update
function update() {
    pacman.update();

// Update Invaders
    invaders.forEach((invader) => {
        invader.update();
        
        // Check collision with PacMan
        if (collided(pacman, invader)) {
            gameState = "gameover";
        }
    });
}

// Game Draw
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    pacman.draw();
    invaders.forEach((invader) => invader.draw());

if (gameState === "gameover") {
        ctx.font = "40px Arial";
        ctx.fillStyle = "white";
        ctx.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2 - 20);
    }
}

// Collision Detection
function collided(pacman, invader) {
    return pacman.x < invader.x + invader.size &&
           pacman.x + pacman.size > invader.x &&
           pacman.y < invader.y + invader.size &&
           pacman.y + pacman.size > invader.y;
}

// Start the Game
init();
</script>
</body>
</html>
```

Please note that this is a basic implementation to get you started. You can enhance the game by adding levels, obstacles, power-ups, or any additional features according to your preference.