AI game creator

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

No:44350

←

Prev Next

→

Platformer
Developer User19369｜Date and time 24/2/17 23:54:44
Build time 9.45 sec｜Game capacity 3.303KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Platformer Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            background: #f0f0f0;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="400"></canvas>
    <script>
        window.onload = function() {
            var canvas = document.getElementById("gameCanvas");
            var ctx = canvas.getContext("2d");
            
            var player = {
                x: 50,
                y: 350,
                width: 50,
                height: 50,
                dx: 0,
                dy: 0,
                speed: 4
            };
            
            var platform = {
                x: 0,
                y: 390,
                width: 800,
                height: 10
            };
            
            function drawPlayer() {
                ctx.fillStyle = "#ff0000";
                ctx.fillRect(player.x, player.y, player.width, player.height);
            }
            
            function drawPlatform() {
                ctx.fillStyle = "#0000ff";
                ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
            }
            
            function clearCanvas() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }
            
            function newPos() {
                player.x += player.dx;
                player.y += player.dy;
            }
            
            function checkCollision() {
                if(player.x < 0) {
                    player.x = 0;
                }
                if(player.x + player.width > canvas.width) {
                    player.x = canvas.width - player.width;
                }
                if(player.y < 0) {
                    player.y = 0;
                }
                if(player.y + player.height > platform.y && player.y < platform.y + platform.height && player.x + player.width > platform.x && player.x < platform.x + platform.width) {
                    player.y = platform.y - player.height;
                }
            }
            
            function updateGameArea() {
                clearCanvas();
                drawPlayer();
                drawPlatform();
                checkCollision();
                newPos();
            }
            
            window.addEventListener('keydown', function(e) {
                if(e.key === "ArrowLeft") {
                    player.dx = -player.speed;
                }
                if(e.key === "ArrowRight") {
                    player.dx = player.speed;
                }
                if(e.key === "ArrowUp" && player.y === platform.y - player.height) {
                    player.dy = -player.speed;
                }
            });
            
            window.addEventListener('keyup', function(e) {
                if(e.key === "ArrowLeft" || e.key === "ArrowRight") {
                    player.dx = 0;
                }
                if(e.key === "ArrowUp") {
                    player.dy = 0;
                }
            });
            
            setInterval(updateGameArea, 20);
        }
    </script>
</body>
</html>