AI game creator

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

No:21202

130

←

Prev Next

→

Racing game
Developer User9420｜Date and time 23/10/14 2:12:00
Build time 93.038 sec｜Game capacity 4.567KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Racing Game</title>
<style>
    body {
        margin: 0;
    }
    canvas {
        display: block;
    }
</style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        // Implementazione del gioco di corse

// Funzioni di utilità per gestire il disegno delle immagini
        function drawImage(context, image, x, y, width, height) {
            context.drawImage(image, x, y, width, height);
        }

function clearCanvas(context, canvas) {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

// Funzione per caricare le immagini dei veicoli e del tracciato
        function loadImages(images, callback) {
            var loadedImages = 0;
            var numImages = Object.keys(images).length;

for (var key in images) {
                images[key].onload = function() {
                    loadedImages++;
                    if (loadedImages === numImages) {
                        callback();
                    }
                }
            }
        }

// Inizializzazione del gioco
        function init() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");

canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

var carImage = new Image();
            carImage.src = "car.png";

var trackImage = new Image();
            trackImage.src = "track.png";

var images = {
                car: carImage,
                track: trackImage
            };

loadImages(images, function() {
                // Quando tutte le immagini sono caricate, iniziamo il gioco
                startGame(canvas, context, images);
            });
        }

// Funzione per avviare il gioco
        function startGame(canvas, context, images) {
            var car = {
                x: 100,
                y: canvas.height - 200,
                width: 80,
                height: 160,
                speed: 5
            };

var track = {
                x: 0,
                y: 0,
                width: canvas.width,
                height: canvas.height
            };

var keysPressed = {};

// Ascolta gli eventi dei tasti premuti e rilasciati
            window.addEventListener('keydown', function(event) {
                keysPressed[event.keyCode] = true;
            });

window.addEventListener('keyup', function(event) {
                delete keysPressed[event.keyCode];
            });

// Funzione per aggiornare la posizione del veicolo
            function updateCar() {
                if (38 in keysPressed) { // Freccia su
                    car.y -= car.speed;
                }
                if (40 in keysPressed) { // Freccia giù
                    car.y += car.speed;
                }
                if (37 in keysPressed) { // Freccia sinistra
                    car.x -= car.speed;
                }
                if (39 in keysPressed) { // Freccia destra
                    car.x += car.speed;
                }

// Assicurarsi che il veicolo rimanga all'interno del tracciato
                if (car.y < track.y) {
                    car.y = track.y;
                }
                if (car.y + car.height > track.height) {
                    car.y = track.height - car.height;
                }
                if (car.x < track.x) {
                    car.x = track.x;
                }
                if (car.x + car.width > track.width) {
                    car.x = track.width - car.width;
                }
            }

// Funzione per disegnare il gioco sul canvas
            function drawGame() {
                clearCanvas(context, canvas);

drawImage(context, images.track, track.x, track.y, track.width, track.height);
                drawImage(context, images.car, car.x, car.y, car.width, car.height);

requestAnimationFrame(drawGame);
            }

// Funzione per avviare il gioco e continuare ad aggiornarlo
            function gameLoop() {
                updateCar();
                drawGame();

requestAnimationFrame(gameLoop);
            }

// Avvia il ciclo di gioco
            gameLoop();
        }

// Avvia il gioco quando la pagina è completamente caricata
        window.addEventListener('load', init);
    </script>
</body>
</html>