A light source you can drag around. This light source lights up a pitch black area. There is also a cube in the middle that affects the light by making a shadow.'s game

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

No:6924

143

←

Prev Next

→

A light source you can drag around. This light sou..ALL
Developer User3943｜Date and time 23/7/4 8:20:01
Build time 25.503 sec｜Game capacity 3.385KB｜

Script

Sure, here's a sample HTML file with a game where you can drag a light source to illuminate a pitch black area. There is also a cube in the middle that casts a shadow and affects the light.

To play the game, you can open the HTML file in a web browser, and you will see a black area with a yellow circular light source and a gray cube in the middle. You can click and drag the light source to move it around. The cube will cast a shadow based on the position of the light source. When the light is inside the cube, the shadow disappears.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure, here's a sample HTML file with a game where you can drag a light source to illuminate a pitch black area. There is also a cube in the middle that casts a shadow and affects the light.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Light Source Game</title>
    <style>
        #container {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: black;
            overflow: hidden;
        }
        #light {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: yellow;
            border-radius: 50%;
            pointer-events: none;
        }
        #cube {
            position: absolute;
            top: 200px;
            left: 200px;
            width: 100px;
            height: 100px;
            background-color: gray;
            box-shadow: 10px 10px 20px black;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="light"></div>
        <div id="cube"></div>
    </div>

var isDraggingLight = false;
            var lightX = 0;
            var lightY = 0;

light.addEventListener('mousedown', function(e) {
                isDraggingLight = true;
                light.style.transition = 'none';
                light.style.opacity = '1';
                lightX = e.clientX - light.offsetWidth / 2 - container.offsetLeft;
                lightY = e.clientY - light.offsetHeight / 2 - container.offsetTop;
            });

document.addEventListener('mousemove', function(e) {
                if (isDraggingLight) {
                    lightX = e.clientX - light.offsetWidth / 2 - container.offsetLeft;
                    lightY = e.clientY - light.offsetHeight / 2 - container.offsetTop;
                    updateLightPosition();
                }
            });

document.addEventListener('mouseup', function() {
                isDraggingLight = false;
                light.style.transition = 'opacity 0.5s';
                light.style.opacity = '0.5';
            });