AI game creator

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

No:3137

1817

←

Prev Next

→

Drift jdm
Developer User3637｜Date and time 23/6/23 23:23:01
Build time 27.667 sec｜Game capacity 3.564KB｜

Script

This is an HTML file that implements a game called "Drift JDM" using JavaScript. The game is playable and can be operated on a smartphone. The game involves a car (represented as an image) drifting around the screen as the user tries to navigate it by pressing the left and right keys on their keyboard. The car rotates as it drifts, and the user must try to avoid going off the screen. This game is meant to be a fun and entertaining way to enjoy some classic arcade-style gaming on your phone! 🚗💨

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Drift JDM</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
            
            canvas {
                touch-action: none;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script>
            const canvas = document.getElementById("canvas");
            const context = canvas.getContext("2d");
            
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            const carImage = new Image();
            carImage.src = "car.png";
            
            const car = {
                x: canvas.width / 2 - 50,
                y: canvas.height - 150,
                width: 100,
                height: 147,
                speed: 5,
                angle: 0
            };
            
            let leftKeyDown = false;
            let rightKeyDown = false;
            
            document.addEventListener("keydown", function(event) {
                if (event.keyCode === 37) {
                    leftKeyDown = true;
                } else if (event.keyCode === 39) {
                    rightKeyDown = true;
                }
            });
            
            document.addEventListener("keyup", function(event) {
                if (event.keyCode === 37) {
                    leftKeyDown = false;
                } else if (event.keyCode === 39) {
                    rightKeyDown = false;
                }
            });
            
            function update() {
                if (leftKeyDown) {
                    car.angle -= 0.05;
                } else if (rightKeyDown) {
                    car.angle += 0.05;
                }
                
                car.x += car.speed * Math.sin(car.angle);
                car.y -= car.speed * Math.cos(car.angle);
                
                if (car.x < -car.width) {
                    car.x = canvas.width;
                } else if (car.x > canvas.width) {
                    car.x = -car.width;
                }
                
                if (car.y < -car.height) {
                    car.y = canvas.height;
                } else if (car.y > canvas.height) {
                    car.y = -car.height;
                }
            }
            
            function draw() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                
                context.save();
                context.translate(car.x + car.width / 2, car.y + car.height / 2);
                context.rotate(car.angle);
                context.drawImage(carImage, -car.width / 2, -car.height / 2, car.width, car.height);
                context.restore();
                
                requestAnimationFrame(draw);
            }
            
            draw();
            
            setInterval(update, 1000 / 60);
        </script>
    </body>
</html>