Lumpy Art Tutorial: Tap The Screen To Play, Choose Your Art Drawings, Draw The Line & Done's game

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

No:34478

105

←

Prev Next

→

Lumpy Art Tutorial: Tap The Screen To Play, Choose..ALL
Developer User13970｜Date and time 24/1/10 19:15:46
Build time 13.187 sec｜Game capacity 3.304KB｜

Script

Here's an example of a simple game implemented as a single HTML file, using JavaScript within script tags:

This code sets up a simple game where you can tap/click and draw lines on a canvas. You can choose from pre-defined drawings (represented as pictograms) and draw lines freely on the canvas. The lines are drawn as you move your finger/mouse while tapping/clicking, and they can be reset by releasing the tap/click. Please note that you would need to replace the `emozi_cat.png` and `emozi_himawari.png` with the actual paths to the corresponding image files for the drawings you want to include in your game. Also, feel free to modify the code and add more drawings as needed. I hope this serves as a starting point for your game!

←

Prev　Next

→ 　

Back　

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

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

Here's an example of a simple game implemented as a single HTML file, using JavaScript within script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Lumpy Art Tutorial</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 20px auto;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

var currentDrawing = null;

var drawings = [
            { name: "Cat", path: "path_to_cat_image.png" },
            { name: "Flower", path: "path_to_flower_image.png" },
            // Add more drawings as needed
        ];

// Event listeners
        canvas.addEventListener("mousedown", startDraw);
        canvas.addEventListener("mousemove", draw);
        canvas.addEventListener("mouseup", endDraw);

// Game functions
        function startDraw(e) {
            var rect = canvas.getBoundingClientRect();
            var x = e.clientX - rect.left;
            var y = e.clientY - rect.top;

currentDrawing = { x: x, y: y, points: [] };
            currentDrawing.points.push({ x: x, y: y });
        }

function draw(e) {
            if (currentDrawing) {
                var rect = canvas.getBoundingClientRect();
                var x = e.clientX - rect.left;
                var y = e.clientY - rect.top;

currentDrawing.points.push({ x: x, y: y });

ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawDrawings();
                drawCurrentDrawing();
            }
        }

function endDraw() {
            if (currentDrawing) {
                currentDrawing = null;
            }
        }

function drawDrawings() {
            drawings.forEach(function (drawing, index) {
                var img = new Image();
                img.src = drawing.path;

img.onload = function () {
                    ctx.drawImage(img, index * 100, canvas.height - 100, 80, 80);
                }
            });
        }

function drawCurrentDrawing() {
            var lastPoint = currentDrawing.points[0];

ctx.beginPath();
            ctx.moveTo(lastPoint.x, lastPoint.y);

currentDrawing.points.forEach(function (point) {
                ctx.lineTo(point.x, point.y);
            });

ctx.stroke();
        }

// Initialize game
        drawDrawings();
    </script>
</body>
</html>
```

Please note that you would need to replace the `path_to_cat_image.png` and `path_to_flower_image.png` with the actual paths to the corresponding image files for the drawings you want to include in your game. Also, feel free to modify the code and add more drawings as needed.

I hope this serves as a starting point for your game!