Make a Pixilart game's game

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

No:13621

←

Prev Next

→

Make a Pixilart game
Developer User5967｜Date and time 23/8/29 4:30:20
Build time 14.924 sec｜Game capacity 3.768KB｜

Script

Sure! Here is a simple example of a Pixilart game implemented as a single HTML file using JavaScript. Please note that this is a basic game and can be further enhanced and customized as per your requirements.

In this game, you control a blue player square using touch or mouse input. The goal is to collide with a red target square placed at random positions on the canvas. When a collision occurs, the target square is repositioned randomly. The game continuously redraws the canvas using the `draw()` function and utilizes the `requestAnimationFrame` method for smooth animations. Feel free to modify and add more features to further develop this game based on your specific requirements.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pixilart Game</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Get canvas element
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

// Player variables
        let playerX = canvas.width / 2;
        let playerY = canvas.height / 2;
        const playerSize = 50;

// Target variables
        let targetX = Math.random() * (canvas.width - playerSize);
        let targetY = Math.random() * (canvas.height - playerSize);
        const targetSize = 50;

// Event listeners for touch/mouse input
        canvas.addEventListener("touchstart", handleTouchStart, false);
        canvas.addEventListener("touchmove", handleTouchMove, false);
        canvas.addEventListener("mousedown", handleMouseDown, false);
        canvas.addEventListener("mousemove", handleMouseMove, false);

// Touch input handlers
        function handleTouchStart(event) {
            event.preventDefault();
            playerX = event.touches[0].clientX - canvas.offsetLeft - playerSize / 2;
            playerY = event.touches[0].clientY - canvas.offsetTop - playerSize / 2;
        }

function handleTouchMove(event) {
            event.preventDefault();
            playerX = event.touches[0].clientX - canvas.offsetLeft - playerSize / 2;
            playerY = event.touches[0].clientY - canvas.offsetTop - playerSize / 2;
        }

// Mouse input handlers
        function handleMouseDown(event) {
            playerX = event.clientX - canvas.offsetLeft - playerSize / 2;
            playerY = event.clientY - canvas.offsetTop - playerSize / 2;
        }

function handleMouseMove(event) {
            playerX = event.clientX - canvas.offsetLeft - playerSize / 2;
            playerY = event.clientY - canvas.offsetTop - playerSize / 2;
        }

// Draw the game
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
            ctx.fillStyle = "blue";
            ctx.fillRect(playerX, playerY, playerSize, playerSize);

// Draw target
            ctx.fillStyle = "red";
            ctx.fillRect(targetX, targetY, targetSize, targetSize);

// Check for collision
            if (
                playerX < targetX + targetSize &&
                playerX + playerSize > targetX &&
                playerY < targetY + targetSize &&
                playerY + playerSize > targetY
            ) {
                // Player and target collided
                targetX = Math.random() * (canvas.width - playerSize);
                targetY = Math.random() * (canvas.height - playerSize);
            }

requestAnimationFrame(draw);
        }

// Start the game
        draw();
    </script>
</body>
</html>
```

Feel free to modify and add more features to further develop this game based on your specific requirements.