AI game creator

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

No:43646

184

←

Prev Next

→

Pong Mobile
Developer Bowgray｜Date and time 24/2/16 6:03:37
Build time 13.402 sec｜Game capacity 4.207KB｜

Script

Sure! Here's an example of a simple Pong game implemented as a single HTML file. The game is designed to be played on a smartphone and uses pictograms for game elements.

To play the game, open the HTML file in a web browser on your smartphone. You can control the paddle's position by moving your finger up and down on the screen. The objective is to bounce the ball off your paddle and prevent it from hitting the AI paddle. Each successful bounce increases your score. Enjoy!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Sure! Here's an example of a simple Pong game implemented as a single HTML file. The game is designed to be played on a smartphone and uses pictograms for game elements.

```html
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="pong" width="400" height="400"></canvas>

// Ball Icon
        const ballIcon = '⚫';

// Game Variables
        let canvas, context;
        let paddleWidth, paddleHeight, paddleY;
        let ballX, ballY, ballSpeedX, ballSpeedY;
        let playerScore, aiScore;

function init() {
            canvas = document.getElementById('pong');
            context = canvas.getContext('2d');

paddleWidth = 15;
            paddleHeight = 80;
            paddleY = canvas.height / 2 - paddleHeight / 2;

ballX = canvas.width / 2;
            ballY = canvas.height / 2;
            ballSpeedX = -4;
            ballSpeedY = -4;

playerScore = 0;
            aiScore = 0;

canvas.addEventListener('mousemove', movePaddle);

setInterval(gameLoop, 16); // 60 FPS
        }

function movePaddle(event) {
            const rect = canvas.getBoundingClientRect();
            paddleY = event.clientY - rect.top - paddleHeight / 2;
        }

function drawPaddle(x, y, width, height) {
            context.fillStyle = 'white';
            context.fillRect(x, y, width, height);

// Draw paddle icons
            context.font = '20px Arial';
            context.fillText(paddleIcon[0], x + width / 2 - 8, y - 10);
            context.fillText(paddleIcon[1], x + width / 2 - 8, y + height + 20);
        }

function drawBall(x, y, radius) {
            context.fillStyle = 'white';
            context.beginPath();
            context.arc(x, y, radius, 0, Math.PI * 2, false);
            context.closePath();
            context.fill();

// Draw ball icon
            context.font = '20px Arial';
            context.fillText(ballIcon, x - radius / 2, y + radius / 6);
        }

function drawScore(x, y, score) {
            context.fillStyle = 'white';
            context.font = '30px Arial';
            context.fillText(score, x, y);
        }

function update() {
            // Move ball
            ballX += ballSpeedX;
            ballY += ballSpeedY;

// Bounce off walls
            if (ballY - 10 < 0 || ballY + 10 > canvas.height) {
                ballSpeedY *= -1;
            }

// Check collision with paddles
            if (ballX + 10 > canvas.width - paddleWidth && ballY + 10 >= paddleY && ballY - 10 <= paddleY + paddleHeight) {
                ballSpeedX *= -1; // Bounce back
                playerScore++; // Increase player score
            }

if (ballX - 10 < paddleWidth && ballY + 10 >= paddleY && ballY - 10 <= paddleY + paddleHeight) {
                ballSpeedX *= -1; // Bounce back
                aiScore++; // Increase AI score
            }
        }

function render() {
            // Clear canvas
            context.fillStyle = 'black';
            context.fillRect(0, 0, canvas.width, canvas.height);

// Draw paddles
            drawPaddle(canvas.width - paddleWidth, paddleY, paddleWidth, paddleHeight);

// Draw ball
            drawBall(ballX, ballY, 10);

// Draw scores
            drawScore(canvas.width / 2 - 50, 50, playerScore);
            drawScore(canvas.width / 2 + 30, 50, aiScore);
        }

function gameLoop() {
            update();
            render();
        }

init();
    </script>
</body>
</html>
```