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

No:15789

103

←

Prev Next

→

TPS RPG Game With Joystick, enemies that if you ge..ALL
Developer User6883｜Date and time 23/9/11 19:10:23
Build time 55.316 sec｜Game capacity 6.18KB｜

Script

Sure! Here is a sample implementation of a TPS RPG game with a joystick, enemies, and collectible coins, using JavaScript and pictograms. Please note that this is a simplified version and you can enhance and modify it according to your requirements:

TPS RPG Game

This is a simple TPS RPG game where you control the player (blue circle) using the joystick to avoid enemies (red circles) and collect coins (golden circles). If an enemy collides with the player, it's game over. If the player collects a coin, the score increases. You can customize the game's appearance and add additional features as per your requirements.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>TPS RPG Game</title>
    <style>
        #game-container {
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }
        
        #player {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: blue;
            border-radius: 50%;
            left: 225px;
            top: 225px;
        }
        
        .enemy {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
        }
        
        .coin {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: gold;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <h1>TPS RPG Game</h1>
    
    <div id="game-container">
        <div id="player"></div>
    </div>
    
    <script>
        // Game variables
        var player;
        var enemies = [];
        var coins = [];
        var score = 0;
        
        // Create joystick
        const joystick = nipplejs.create({
            zone: document.getElementById('game-container'),
            color: 'rgba(0,0,0,0.5)',
        });
        
        // Initialize game
        function initGame() {
            player = document.getElementById('player');
            joystick.on("end", onJoystickEnd);
            
            createEnemies(5);
            createCoins(10);
            
            // Start game loop
            setInterval(gameLoop, 100);
        }
        
        // Handle joystick movements
        function onJoystickEnd() {
            player.style.left = "225px";
            player.style.top = "225px";
        }
        
        // Game loop
        function gameLoop() {
            movePlayer();
            checkCollision();
        }
        
        // Move player based on joystick direction
        function movePlayer() {
            var joyDirection = joystick.get();
            var speed = 5;
            
            var currentX = player.offsetLeft;
            var currentY = player.offsetTop;
            
            if (joyDirection.angle != undefined) {
                var offsetX = Math.cos(joyDirection.angle.radian) * speed;
                var offsetY = Math.sin(joyDirection.angle.radian) * speed;
                
                var newX = currentX + offsetX;
                var newY = currentY + offsetY;
                
                if (newX > 0 && newX < 450 && newY > 0 && newY < 450) {
                    player.style.left = newX + "px";
                    player.style.top = newY + "px";
                }
            }
        }
        
        // Create specified number of enemies
        function createEnemies(num) {
            for (var i = 0; i < num; i++) {
                var enemy = document.createElement("div");
                enemy.className = "enemy";
                enemy.style.left = Math.floor(Math.random() * 450) + "px";
                enemy.style.top = Math.floor(Math.random() * 450) + "px";
                document.getElementById("game-container").appendChild(enemy);
                enemies.push(enemy);
            }
        }
        
        // Create specified number of coins
        function createCoins(num) {
            for (var i = 0; i < num; i++) {
                var coin = document.createElement("div");
                coin.className = "coin";
                coin.style.left = Math.floor(Math.random() * 450) + "px";
                coin.style.top = Math.floor(Math.random() * 450) + "px";
                document.getElementById("game-container").appendChild(coin);
                coins.push(coin);
            }
        }
        
        // Check collision between player, enemies, and coins
        function checkCollision() {
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];
                if (isColliding(player, enemy)) {
                    alert("Game Over! The enemy ripped you into pieces.");
                    resetGame();
                    return;
                }
            }
            
            for (var j = 0; j < coins.length; j++) {
                var coin = coins[j];
                if (isColliding(player, coin)) {
                    coin.style.display = "none";
                    coins.splice(j, 1);
                    score++;
                }
            }
        }
        
        // Check if two elements are colliding
        function isColliding(element1, element2) {
            var rec1 = element1.getBoundingClientRect();
            var rec2 = element2.getBoundingClientRect();
            
            return !(rec1.right < rec2.left || 
                    rec1.left > rec2.right || 
                    rec1.bottom < rec2.top || 
                    rec1.top > rec2.bottom);
        }
        
        // Reset the game
        function resetGame() {
            for (var i = 0; i < enemies.length; i++) {
                enemies[i].parentNode.removeChild(enemies[i]);
            }
            
            for (var j = 0; j < coins.length; j++) {
                coins[j].parentNode.removeChild(coins[j]);
            }
            
            enemies = [];
            coins = [];
            score = 0;
            
            createEnemies(5);
            createCoins(10);
        }
        
        // Start the game
        initGame();
    </script>
</body>
</html>
```