@@ -2,12 +2,13 @@ | |||||
<html> | <html> | ||||
<head> | <head> | ||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | ||||
<title>КОЛОБОК 0.1.0</title> | |||||
<title>К 0.2.0</title> | |||||
<script src="https://cdn.jsdelivr.net/npm/phaser@3.54.0/dist/phaser.min.js"></script> | <script src="https://cdn.jsdelivr.net/npm/phaser@3.54.0/dist/phaser.min.js"></script> | ||||
<style> | <style> | ||||
html, body { | html, body { | ||||
margin: 0; | margin: 0; | ||||
padding: 0; | padding: 0; | ||||
overflow: hidden; | |||||
} | } | ||||
body { | body { | ||||
@@ -5,9 +5,10 @@ | |||||
*/ | */ | ||||
НастроитьМышь = мир => | |||||
НастроитьМышьИКлаву = мир => | |||||
{ | { | ||||
мир.сцена.input.mouse.disableContextMenu(); | мир.сцена.input.mouse.disableContextMenu(); | ||||
мир.клавиши = мир.сцена.input.keyboard.createCursorKeys(); | |||||
}; | }; | ||||
@@ -41,7 +42,74 @@ | |||||
// // // // | // // // // | ||||
УведомитьОбУправлении = мир => | |||||
УведомитьОКлаве = мир => | |||||
{ | |||||
var новое = { | |||||
"направление": 0, | |||||
"прыжок": false, | |||||
}; | |||||
if (мир.клавиши.left.isDown) | |||||
{ | |||||
новое.направление = -1; | |||||
} | |||||
else if (мир.клавиши.right.isDown) | |||||
{ | |||||
новое.направление = 1; | |||||
} | |||||
if (мир.клавиши.space.isDown) | |||||
{ | |||||
новое.прыжок = true; | |||||
} | |||||
if ( | |||||
мир.клава && | |||||
мир.клава.направление == новое.направление && | |||||
мир.клава.прыжок == новое.прыжок | |||||
) { | |||||
// Ничего не делаем. | |||||
} | |||||
else | |||||
{ | |||||
мир.клава = новое; | |||||
мир.уведомить("изменили клаву"); | |||||
} | |||||
}; | |||||
// // // // | |||||
УведомитьОбУправленииКлавой = мир => | |||||
{ | |||||
const естьДвижение = (мир.клава.направление != 0 || мир.клава.прыжок); | |||||
// Начало движения. | |||||
if (!мир.управление && естьДвижение) | |||||
{ | |||||
мир.управление = мир.клава; | |||||
мир.уведомить("изменили управление"); | |||||
} | |||||
// Окончание движения. | |||||
else if (мир.управление && !естьДвижение) | |||||
{ | |||||
мир.управление = null; | |||||
мир.уведомить("изменили управление"); | |||||
} | |||||
// Продолжение движения. | |||||
else if ( | |||||
(мир.управление && естьДвижение) && | |||||
( | |||||
(мир.управление.направление != мир.клава.направление) || | |||||
(мир.управление.прыжок != мир.клава.прыжок) | |||||
) | |||||
) { | |||||
мир.управление = мир.клава; | |||||
мир.уведомить("изменили управление"); | |||||
} | |||||
}; | |||||
// // // // | |||||
УведомитьОбУправленииМышью = мир => | |||||
{ | { | ||||
const камера = мир.сцена.cameras.main; | const камера = мир.сцена.cameras.main; | ||||
const ширина = камера.width; | const ширина = камера.width; | ||||
@@ -95,10 +163,13 @@ | |||||
мир.разобрать(` | мир.разобрать(` | ||||
создать сцену | создать сцену | ||||
настроить мышь | |||||
настроить мышь и клаву | |||||
обновить сцену | обновить сцену | ||||
уведомить о клаве | |||||
уведомить о мыши | уведомить о мыши | ||||
изменили мышь | изменили мышь | ||||
уведомить об управлении | |||||
уведомить об управлении мышью | |||||
изменили клаву | |||||
уведомить об управлении клавой | |||||
`); | `); | ||||
@@ -7,16 +7,25 @@ | |||||
ЗагрузитьРесурсыКолобка= мир => | ЗагрузитьРесурсыКолобка= мир => | ||||
{ | { | ||||
мир.сцена.load.image("колобок", "ресурсы/колобок/колобок_неподвижен.png"); | |||||
//мир.сцена.load.image("колобок", "ресурсы/колобок/колобок_неподвижен.png"); | |||||
мир.сцена.load.spritesheet( | |||||
"колобок", | |||||
"ресурсы/колобок/колобок.png", | |||||
{ | |||||
frameWidth: 97, | |||||
frameHeight: 94, | |||||
} | |||||
); | |||||
}; | }; | ||||
// // // // | // // // // | ||||
СоздатьКаркас = мир => | |||||
СоздатьКаркасИПлатформы = мир => | |||||
{ | { | ||||
мир.каркас = мир.сцена.physics.add.staticGroup(); | мир.каркас = мир.сцена.physics.add.staticGroup(); | ||||
мир.платформы = мир.сцена.physics.add.staticGroup(); | |||||
}; | }; | ||||
@@ -27,7 +36,23 @@ | |||||
{ | { | ||||
мир.колобок = мир.сцена.physics.add.sprite(100, 100, "колобок"); | мир.колобок = мир.сцена.physics.add.sprite(100, 100, "колобок"); | ||||
мир.колобок.depth = 10; | мир.колобок.depth = 10; | ||||
//мир.колобок.setBounce(0.1); | |||||
мир.сцена.anims.create({ | |||||
key: "неподвижен", | |||||
frames: [{ key: "колобок", frame: 0 }], | |||||
frameRate: 20, | |||||
}) | |||||
мир.сцена.anims.create({ | |||||
key: "движение", | |||||
frames: мир.сцена.anims.generateFrameNumbers("колобок", { start: 23, end: 1 }), | |||||
frameRate: 20, | |||||
repeat: -1, | |||||
}) | |||||
мир.сцена.anims.create({ | |||||
key: "прыжок", | |||||
frames: [{ key: "колобок", frame: 24 }], | |||||
frameRate: 20, | |||||
}) | |||||
// Следить за колобком камерой. | // Следить за колобком камерой. | ||||
const камера = мир.сцена.cameras.main; | const камера = мир.сцена.cameras.main; | ||||
@@ -35,14 +60,13 @@ | |||||
}; | }; | ||||
// // // // | // // // // | ||||
СоздатьСтолкновениеКолобкаСКаркасом = мир => | |||||
СоздатьСтолкновениеКолобкаСКаркасомИПлатформами = мир => | |||||
{ | { | ||||
мир.сцена.physics.add.collider(мир.колобок, мир.каркас); | мир.сцена.physics.add.collider(мир.колобок, мир.каркас); | ||||
мир.столкновениеПлатформы = мир.сцена.physics.add.collider(мир.колобок, мир.платформы); | |||||
}; | }; | ||||
@@ -54,6 +78,7 @@ | |||||
if (!мир.управление) | if (!мир.управление) | ||||
{ | { | ||||
мир.колобок.setVelocityX(0); | мир.колобок.setVelocityX(0); | ||||
мир.колобок.anims.play("неподвижен"); | |||||
return; | return; | ||||
} | } | ||||
@@ -61,16 +86,21 @@ | |||||
if (мир.управление.направление == -1) | if (мир.управление.направление == -1) | ||||
{ | { | ||||
x = -200; | x = -200; | ||||
мир.колобок.anims.play("движение"); | |||||
мир.колобок.flipX = true; | |||||
} | } | ||||
else if (мир.управление.направление == 1) | else if (мир.управление.направление == 1) | ||||
{ | { | ||||
x = 200; | x = 200; | ||||
мир.колобок.anims.play("движение"); | |||||
мир.колобок.flipX = false; | |||||
} | } | ||||
мир.колобок.setVelocityX(x); | мир.колобок.setVelocityX(x); | ||||
if (мир.управление.прыжок && мир.колобок.body.touching.down) | if (мир.управление.прыжок && мир.колобок.body.touching.down) | ||||
{ | { | ||||
мир.колобок.setVelocityY(-500); | |||||
мир.колобок.setVelocityY(-570); | |||||
мир.колобок.anims.play("прыжок"); | |||||
} | } | ||||
}; | }; | ||||
@@ -86,9 +116,9 @@ | |||||
загрузить ресурсы сцены | загрузить ресурсы сцены | ||||
загрузить ресурсы колобка | загрузить ресурсы колобка | ||||
создать сцену | создать сцену | ||||
создать каркас | |||||
создать каркас и платформы | |||||
создать колобка | создать колобка | ||||
создать столкновение колобка с каркасом | |||||
создать столкновение колобка с каркасом и платформами | |||||
изменили управление | изменили управление | ||||
переместить колобка | переместить колобка | ||||
`); | `); | ||||
@@ -18,23 +18,133 @@ | |||||
СоздатьИзбу = мир => | СоздатьИзбу = мир => | ||||
{ | { | ||||
мир.сцена.add.image(0, 0, "изба").setOrigin(0, 0); | мир.сцена.add.image(0, 0, "изба").setOrigin(0, 0); | ||||
}; | |||||
// // // // | |||||
var полСлева = мир.каркас.create(0, 585, "основа").setOrigin(0, 0); | |||||
полСлева.setScale(43, 1).refreshBody(); | |||||
полСлева.setVisible(false); | |||||
var полСправа = мир.каркас.create(510, 585, "основа").setOrigin(0, 0); | |||||
полСправа.setScale(200, 1).refreshBody(); | |||||
полСправа.setVisible(false); | |||||
мир.полКрышки = мир.каркас.create(300, 585, "основа").setOrigin(0, 0); | |||||
мир.полКрышки.setScale(30, 1).refreshBody(); | |||||
мир.полКрышки.setVisible(false); | |||||
var стенаСлева = мир.каркас.create(0, 385, "основа"); | |||||
стенаСлева.setScale(1, 50).refreshBody(); | |||||
стенаСлева.setVisible(false); | |||||
var стенаСправа = мир.каркас.create(2000, 385, "основа"); | |||||
стенаСправа.setScale(1, 50).refreshBody(); | |||||
стенаСправа.setVisible(false); | |||||
СоздатьПолыИСтеныКаркаса = мир => | |||||
{ | |||||
var полы = [ | |||||
{ | |||||
x: 0, | |||||
y: 585, | |||||
ширина: 43, | |||||
}, | |||||
{ | |||||
x: 300, | |||||
y: 585, | |||||
ширина: 30, | |||||
}, | |||||
{ | |||||
x: 510, | |||||
y: 585, | |||||
ширина: 200, | |||||
}, | |||||
]; | |||||
for (var номер in полы) | |||||
{ | |||||
var пол = полы[номер]; | |||||
var элемент = мир.каркас.create(пол.x, пол.y, "основа").setOrigin(0, 0); | |||||
элемент.setScale(пол.ширина, 1).refreshBody(); | |||||
элемент.setVisible(false); | |||||
} | |||||
var стены = [ | |||||
{ | |||||
x: 0, | |||||
y: 385, | |||||
высота: 50, | |||||
}, | |||||
{ | |||||
x: 2000, | |||||
y: 385, | |||||
высота: 50, | |||||
}, | |||||
]; | |||||
for (var номер in стены) | |||||
{ | |||||
var стена = стены[номер]; | |||||
var элемент = мир.каркас.create(стена.x, стена.y, "основа"); | |||||
элемент.setScale(1, стена.высота).refreshBody(); | |||||
элемент.setVisible(false); | |||||
} | |||||
}; | |||||
// // // // | |||||
СоздатьПлатформы = мир => | |||||
{ | |||||
var п = [ | |||||
{ | |||||
x: 583, | |||||
y: 473, | |||||
ширина: 65, | |||||
}, | |||||
{ | |||||
x: 665, | |||||
y: 340, | |||||
ширина: 1, | |||||
}, | |||||
{ | |||||
x: 770, | |||||
y: 340, | |||||
ширина: 1, | |||||
}, | |||||
{ | |||||
x: 860, | |||||
y: 340, | |||||
ширина: 1, | |||||
}, | |||||
{ | |||||
x: 1005, | |||||
y: 355, | |||||
ширина: 1, | |||||
}, | |||||
{ | |||||
x: 620, | |||||
y: 245, | |||||
ширина: 35, | |||||
}, | |||||
{ | |||||
x: 950, | |||||
y: 180, | |||||
ширина: 12, | |||||
}, | |||||
{ | |||||
x: 1270, | |||||
y: 427, | |||||
ширина: 70, | |||||
}, | |||||
{ | |||||
x: 1690, | |||||
y: 375, | |||||
ширина: 20, | |||||
}, | |||||
]; | |||||
for (var номер in п) | |||||
{ | |||||
var часть = п[номер]; | |||||
var элемент = мир.платформы.create(часть.x, часть.y, "основа").setOrigin(0, 0); | |||||
элемент.setScale(часть.ширина, 1).refreshBody(); | |||||
//элемент.setVisible(false); | |||||
} | |||||
}; | |||||
// // // // | |||||
ПозволитьПлатформамПропускатьПрыжки = мир => | |||||
{ | |||||
мир.платформы.children.iterate(function(платформа) { | |||||
платформа.body.checkCollision.down = false; | |||||
платформа.body.checkCollision.left = false; | |||||
платформа.body.checkCollision.right = false; | |||||
}); | |||||
}; | }; | ||||
@@ -50,5 +160,8 @@ | |||||
загрузить ресурсы избы | загрузить ресурсы избы | ||||
создать сцену | создать сцену | ||||
создать избу | создать избу | ||||
создать полы и стены каркаса | |||||
создать платформы | |||||
позволить платформам пропускать прыжки | |||||
`); | `); | ||||
@@ -0,0 +1,53 @@ | |||||
<?xml version="1.0" encoding="UTF-8"?> | |||||
<spriter_data scml_version="1.0" generator="BrashMonkey Spriter" generator_version="r9"> | |||||
<folder id="0"> | |||||
<file id="0" name="колобок_вращение.png" width="70" height="70" pivot_x="0.5" pivot_y="0.5"/> | |||||
<file id="1" name="колобок_прыжок.png" width="56" height="90" pivot_x="0.5" pivot_y="0.357143"/> | |||||
</folder> | |||||
<entity id="0" name="колобок"> | |||||
<animation id="0" name="крутится-прыгает" length="1500" interval="100"> | |||||
<mainline> | |||||
<key id="0"> | |||||
<object_ref id="0" timeline="0" key="0" z_index="0"/> | |||||
</key> | |||||
<key id="1" time="200"> | |||||
<object_ref id="0" timeline="0" key="1" z_index="0"/> | |||||
</key> | |||||
<key id="2" time="400"> | |||||
<object_ref id="0" timeline="0" key="2" z_index="0"/> | |||||
</key> | |||||
<key id="3" time="600"> | |||||
<object_ref id="0" timeline="0" key="3" z_index="0"/> | |||||
</key> | |||||
<key id="4" time="800"> | |||||
<object_ref id="0" timeline="0" key="4" z_index="0"/> | |||||
</key> | |||||
<key id="5" time="1000"> | |||||
<object_ref id="0" timeline="1" key="0" z_index="0"/> | |||||
</key> | |||||
</mainline> | |||||
<timeline id="0" name="колобок_вращение"> | |||||
<key id="0"> | |||||
<object folder="0" file="0" angle="0"/> | |||||
</key> | |||||
<key id="1" time="200"> | |||||
<object folder="0" file="0" angle="90"/> | |||||
</key> | |||||
<key id="2" time="400"> | |||||
<object folder="0" file="0" angle="180"/> | |||||
</key> | |||||
<key id="3" time="600"> | |||||
<object folder="0" file="0" angle="270"/> | |||||
</key> | |||||
<key id="4" time="800" spin="0"> | |||||
<object folder="0" file="0" angle="0"/> | |||||
</key> | |||||
</timeline> | |||||
<timeline id="1" name="колобок_прыжок"> | |||||
<key id="0" time="1000" spin="0"> | |||||
<object folder="0" file="1"/> | |||||
</key> | |||||
</timeline> | |||||
</animation> | |||||
</entity> | |||||
</spriter_data> |
@@ -0,0 +1,53 @@ | |||||
<?xml version="1.0" encoding="UTF-8"?> | |||||
<spriter_data scml_version="1.0" generator="BrashMonkey Spriter" generator_version="r9"> | |||||
<folder id="0"> | |||||
<file id="0" name="колобок_вращение.png" width="70" height="70" pivot_x="0.5" pivot_y="0.5"/> | |||||
<file id="1" name="колобок_прыжок.png" width="56" height="90" pivot_x="0.5" pivot_y="0.357143"/> | |||||
</folder> | |||||
<entity id="0" name="колобок"> | |||||
<animation id="0" name="крутится-прыгает" length="1500" interval="100"> | |||||
<mainline> | |||||
<key id="0"> | |||||
<object_ref id="0" timeline="0" key="0" z_index="0"/> | |||||
</key> | |||||
<key id="1" time="200"> | |||||
<object_ref id="0" timeline="0" key="1" z_index="0"/> | |||||
</key> | |||||
<key id="2" time="400"> | |||||
<object_ref id="0" timeline="0" key="2" z_index="0"/> | |||||
</key> | |||||
<key id="3" time="600"> | |||||
<object_ref id="0" timeline="0" key="3" z_index="0"/> | |||||
</key> | |||||
<key id="4" time="800"> | |||||
<object_ref id="0" timeline="0" key="4" z_index="0"/> | |||||
</key> | |||||
<key id="5" time="1000"> | |||||
<object_ref id="0" timeline="1" key="0" z_index="0"/> | |||||
</key> | |||||
</mainline> | |||||
<timeline id="0" name="колобок_вращение"> | |||||
<key id="0"> | |||||
<object folder="0" file="0" angle="0"/> | |||||
</key> | |||||
<key id="1" time="200"> | |||||
<object folder="0" file="0" angle="90"/> | |||||
</key> | |||||
<key id="2" time="400"> | |||||
<object folder="0" file="0" angle="180"/> | |||||
</key> | |||||
<key id="3" time="600"> | |||||
<object folder="0" file="0" angle="270"/> | |||||
</key> | |||||
<key id="4" time="800" spin="0"> | |||||
<object folder="0" file="0" angle="0"/> | |||||
</key> | |||||
</timeline> | |||||
<timeline id="1" name="колобок_прыжок"> | |||||
<key id="0" time="1000" spin="0"> | |||||
<object folder="0" file="1"/> | |||||
</key> | |||||
</timeline> | |||||
</animation> | |||||
</entity> | |||||
</spriter_data> |