Простая игра на Html 5 canvas

@ShadowWarrior · Регистрация: 01.08.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте, хотел бы спросить, как сделать условно поле 4x4, состоящее из ячеек для игры "кладоискатель", чтобы на них можно было нажимать. Что-то вроде сапера, мы сначала видим только ячейку, а если нажать то увидим что там есть или пусто, и сделать например попытки нажатий. Подскажите возможно это реализовать и как это сделать грамотнее?

@8Observer8 · 23.08.2018, 23:07

Для работы с элементом сanvas удобнее всего использовать посредника в виде библиотеки Phaser или Pixi.js

Я сделал картинку 64x64px "состояние закрыто" в редакторе GIMP:
Название: shirt.png
Просмотров: 30

Размер: 937 байт

Название: shirt.png
Просмотров: 30

Размер: 937 байт

Сделал ещё две картинки: "пусто" и "клад":
Название: empty.png
Просмотров: 31

Размер: 296 байт

Название: treasure.png
Просмотров: 31

Размер: 350 байт

Картинки открываются по клику мышки: http://jsfiddle.net/8Observer8/4201ptxk/5/

Положение сокровищ задаётся в массиве field:
"0" - пусто
"1" - клад

Пример:

JavaScript
1
2
3
4
5
6
var field = [
    0, 1, 0, 0,
    0, 0, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 0
];

index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Treasure Hunter</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
 
        #game-area {
            width: 256px;
            height: 256px;
            display: block;
            margin: 0 auto;
            margin-top: 25px;
            touch-action: none;
        }
    </style>
</head>
 
<body>
    <h1 align="center">Treasure Hunter</h1>
    <div id="game-area"></div>
 
    <script>
        var game = new Phaser.Game(256, 256, Phaser.AUTO, "game-area", { preload: preload, create: create, update: update });
 
        var field = [
            0, 1, 0, 0,
            0, 0, 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 0
        ];
 
        function preload()
        {
            handleRemoteImagesOnJSFiddle();
            game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
            game.stage.backgroundColor = '#eee';
            game.load.image("shirt", "https://dl.dropboxusercontent.com/s/tgjvyz9qydl3mo6/shirt.png");
            game.load.image("empty", "https://dl.dropboxusercontent.com/s/vrpergz5phg81kw/empty.png");
            game.load.image("treasure", "https://dl.dropboxusercontent.com/s/18izawchx3wpai3/treasure.png");
        }
 
        function create()
        {
            this.shirts = [];
 
            for (var index = 0; index < field.length; index++)
            {
                var x = index % 4 * 64;
                var y = Math.floor(index / 4) * 64;
 
                this.shirts.push(game.add.sprite(x, y, 'shirt'));
 
                this.shirts[index].inputEnabled = true;
                this.shirts[index].events.onInputDown.add(setCell, this);
                this.shirts[index].customParams = { x: x, y: y, index: index };
            }
        }
 
        function setCell(sprite, event)
        {
            sprite.visible = false;
 
            var x = sprite.customParams.x;
            var y = sprite.customParams.y;
            var index = sprite.customParams.index;
 
            if (field[index] === 0)
            {
                game.add.sprite(x, y, 'empty');
            }
            else if (field[index] === 1)
            {
                game.add.sprite(x, y, 'treasure');
            }
 
        }
 
        function update() { }
 
        // This function (needed only on JSFiddle) take care of loading the images from the remote server
        function handleRemoteImagesOnJSFiddle()
        {
            // game.load.baseURL = "";
            game.load.crossOrigin = "anonymous";
        }
    </script>
</body>
 
</html>

Новые блоги и статьи Все статьи Все блоги /
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .

@ShadowWarrior 0 / 0 / 0 Регистрация: 01.08.2018 Сообщений: 3

	Простая игра на Html 5 canvas 22.08.2018, 22:45. Показов 3433. Ответов 1 Метки нет (Все метки) Здравствуйте, хотел бы спросить, как сделать условно поле 4x4, состоящее из ячеек для игры "кладоискатель", чтобы на них можно было нажимать. Что-то вроде сапера, мы сначала видим только ячейку, а если нажать то увидим что там есть или пусто, и сделать например попытки нажатий. Подскажите возможно это реализовать и как это сделать грамотнее? 0

Простая игра на Html 5 canvas

Решение