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

No:7912

175

←

Prev Next

→

Tap on time
Developer User4098｜Date and time 23/7/10 23:13:40
Build time 14.242 sec｜Game capacity 3.92KB｜

Script

The tutorial… Score:

Simple Game

This game is a simple paddle and ball game. The objective is to bounce the ball off the paddle and prevent it from touching the bottom of the screen. The paddle is controlled by moving the mouse horizontally. The game starts automatically when the HTML file is loaded in a browser on a smartphone. The canvas element is used to render the game graphics. The JavaScript code handles the game logic, including moving the paddle and ball, checking for collisions, and drawing the elements on the canvas. Note: This is a very basic example, and you can expand and customize the game further based on your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

The tutorial…
Score:
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Simple Game</title>
    <style>
        body {
            font-family: Arial, bodyf;
            text-align: center;
        }
        canvas {
            border: 10px solid black;
        }
    </style>
</head>
<body>
    <h1>Simple Game</h1>
    <canvas id="gameCanvas" width="400" height="300"></canvas>

let ballX = 200;
        let ballY = 50;
        let ballSpeedX = 20;
        let ballSpeedY = 10;
        const ballSize = 10;

// Initialize the game
        function gameInit() {
            canvas = document.getElementById("gameCanvas");
            canvasContext = canvas.getContext("2d");
            setInterval(update, 1000 / 60);

canvas.addEventListener("mousemove", function(event) {
                const rect = canvas.getBoundingClientRect();
                const root = document.documentElement;
                const mouseX = event.clientX - rect.left - root.scrollLeft;
                paddleX = mouseX - paddleWidth / 2;
            });
        }

// Update the game logic
        function update() {
            moveElements();
            drawElements();
        }

// Move game elements
        function moveElements() {
            ballX += ballSpeedX;
            ballY += ballSpeedY;

if (ballX < 0 || ballX > canvas.width) {
                ballSpeedX *= -1;
            }

if (ballY < 0) {
                ballSpeedY *= -1;
            }

if (ballY > canvas.height) {
                resetBall();
            }

if (
                ballY + ballSize >= canvas.height - paddleHeight &&
                ballX >= paddleX && ballX <= paddleX + paddleWidth
            ) {
                ballSpeedY *= -1;
            }
        }

// Draw game elements
        function drawElements() {
            // Clear canvas
            canvasContext.fillStyle = "#FFF";
            canvasContext.fillRect(0, 0, canvas.width, canvas.height);

// Draw paddle
            canvasContext.fillStyle = "#DDD";
            canvasContext.fillRect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);

// Draw ball
            canvasContext.beginPath();
            canvasContext.arc(ballX, ballY, ballSize, 0, Math.PI * 2, true);
            canvasContext.fillStyle = "#000";
            canvasContext.fill();

// Draw game over message
            if (ballY > canvas.height) {
                canvasContext.fillStyle = "#F00";
                canvasContext.fillText("Game Over", canvas.width / 2, canvas.height / 2);
            }
        }

// Reset the ball position
        function resetBall() {
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
            ballSpeedY *= -1;
        }

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

The game starts automatically when the HTML file is loaded in a browser on a smartphone. The canvas element is used to render the game graphics. The JavaScript code handles the game logic, including moving the paddle and ball, checking for collisions, and drawing the elements on the canvas.

Note: This is a very basic example, and you can expand and customize the game further based on your requirements.