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

No:27664

Harry Potter, life at Hogwarts (character picking)
Developer User13744｜Date and time 23/12/8 3:12:38
Build time 30.322 sec｜Game capacity 2.503KB｜

Script

Harry Potter: Life at Hogwarts

Choose your character

Harry Potter

Hermione Granger

Ron Weasley

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Harry Potter: Life at Hogwarts</title>
    <style>
        body {
            text-align: center;
            background-color: #f2f2f2;
            font-family: Arial, sans-serif;
        }

h1 {
            color: #0660a6;
            margin-top: 30px;
        }

h2 {
            color: #333333;
            margin-bottom: 20px;
        }

.character {
            display: inline-block;
            margin: 20px;
            cursor: pointer;
        }

.character img {
            width: 150px;
            height: 150px;
            border: 3px solid transparent;
            border-radius: 50%;
            transition: border-color 0.3s ease-in-out;
        }

.character img:hover {
            border-color: #666666;
        }

#startButton {
            display: none;
            margin: 30px auto;
            padding: 10px 20px;
            background-color: #1a6ea0;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Harry Potter: Life at Hogwarts</h1>
    <h2>Choose your character</h2>
    
    <div class="character" onclick="selectCharacter('harry')">
        <img src="harry.png" alt="Harry Potter">
        <p>Harry Potter</p>
    </div>

<div class="character" onclick="selectCharacter('hermione')">
        <img src="hermione.png" alt="Hermione Granger">
        <p>Hermione Granger</p>
    </div>

<div class="character" onclick="selectCharacter('ron')">
        <img src="ron.png" alt="Ron Weasley">
        <p>Ron Weasley</p>
    </div>

<button id="startButton" onclick="startGame()">Start Game</button>

function selectCharacter(character) {
            selectedCharacter = character;
            var characters = document.querySelectorAll('.character');
            characters.forEach(function (character) {
                character.style.opacity = '0.5';
                character.style.pointerEvents = 'none';
            });
            document.querySelector('#startButton').style.display = 'block';
        }

function startGame() {
            if (selectedCharacter !== '') {
                // Start game logic here
                alert('You selected ' + selectedCharacter + ' and the game starts now!');
            }
        }
    </script>
</body>
</html>