html 游戏开发
HTML5 Game Development – Lesson 5 Finally I decided to prepare next Game-development article. We continue a series of articles on game development in HTML5 using canvas. Today I prepared musical example (it will something like program – synthesizer) with alternative DOM-based dialogs on CSS3. Why I added separated dialogs – easy, mostly because CSS have much more possibilities to play with text and styles of standard elements, then it can make result JS code smaller, and can increase result speed of example. So, you can apply nice custom styles for these dialogs with full power of CSS3 (as example – I customized scrollbar with css3). Here you can read our previous lesson: Developing Your First HTML5 Game – Lesson 4.
HTML5游戏开发–第5课最后，我决定编写下一篇游戏开发文章。 我们继续使用画布在HTML5中进行有关游戏开发的一系列文章。 今天，我准备了带有CSS3上基于DOM的替代对话框的音乐示例(它将类似于程序–合成器)。 为什么我添加分离的对话框-简单，主要是因为CSS具有更多的可能性来处理文本和标准元素的样式，所以它可以使结果JS代码更小，并可以提高示例的结果速度。 因此，您可以使用CSS3的全部功能为这些对话框应用漂亮的自定义样式(例如-我使用css3自定义了滚动条)。 在这里，您可以阅读我们的上一课： 开发您的第一个HTML5游戏–第4课 。
Here are our demo and downloadable package:
这是我们的演示和可下载的软件包：
现场演示
打包下载
Ok, download the example files and lets start coding !
好的，下载示例文件并开始编码！
步骤1. HTML (Step 1. HTML)
Here is source code of our fifth lesson
这是第五课的源代码
index.html (index.html)
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 Game Development - Lesson 5 | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<header>
<h2>HTML5 Game Development - Lesson 5</h2>
<a href="https://www.script-tutorials.com/html5-game-development-lesson-5/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="container">
<div class="bar">
<button id="options">Options</button>
</div>
<canvas id="scene" width="800" height="600"></canvas>
<div id="controls">
<div id="dialogs" class="dialogs">
<div id="dialog1" class="dialog dialogVisible">
<h1>Welcome to lesson #5</h1>
<textarea>
Please click buttons from 0 to 9 to produce different sounds.
Please click buttons from 0 to 9 to produce different sounds.
Please click buttons from 0 to 9 to produce different sounds.
Please click buttons from 0 to 9 to produce different sounds.
Please click buttons from 0 to 9 to produce different sounds.
Please click buttons from 0 to 9 to produce different sounds.
Please click buttons from 0 to 9 to produce different sounds.
Please click buttons from 0 to 9 to produce different sounds.
</textarea>
<button id="but1">Next</button>
</div>
<div id="dialog2" class="dialog">
<h1>Second page</h1>
<textarea>
Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery.
Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery.
Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery.
Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery.
Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery.
</textarea>
<button id="but2">Next</button>
</div>
<div id="dialog3" class="dialog">
<h1>Third page</h1>
<button id="but3">First page</button>
<button id="but_close">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 Game Development - Lesson 5 | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<header>
<h2>HTML5 Game Development - Lesson 5</h2>
<a href="https://www.script-tutorials.com/html5-game-development-lesson-5/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="container">
<div class="bar">
<button id="options">Options</button>
</div>
<canvas id="scene" width="800" height="600"></canvas>
<div id="controls">
<div id="dialogs" class="dialogs">
<div id="dialog1" class="dialog dialogVisible">
<h1>Welcome to lesson #5</h1>
<textarea>
Please click buttons from 0 to 9 to produce different sounds.
Please click buttons from 0 to 9 to produce different sounds.
Please click buttons from 0 to 9 to produce different sounds.
Please click buttons from 0 to 9 to produce different sounds.
Please click buttons from 0 to 9 to produce different sounds.
Please click buttons from 0 to 9 to produce different sounds.
Please click buttons from 0 to 9 to produce different sounds.
Please click buttons from 0 to 9 to produce different sounds.
</textarea>
<button id="but1">Next</button>
</div>
<div id="dialog2" class="dialog">
<h1>Second page</h1>
<textarea>
Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery.
Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery.
Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery.
Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery.
Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery.
</textarea>
<button id="but2">Next</button>
</div>
<div id="dialog3" class="dialog">
<h1>Third page</h1>
<button id="but3">First page</button>
<button id="but_close">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Above our Canvas object I added extra controls bar (where we can add some action buttons). For now – it will contain single button to display dialog box. Below canvas – here is set of dialog messages.
在Canvas对象上方，我添加了额外的控件栏(我们可以在其中添加一些操作按钮)。 现在-它将包含单个按钮以显示对话框。 在画布下方–这是一组对话框消息。
步骤2. CSS (Step 2. CSS)
Here are used CSS styles.
这是使用CSS样式。
css / main.css (css/main.css)
/* page layout styles */
*{
margin:0;
padding:0;
}
body {
background-color:#eee;
color:#fff;
font:14px/1.3 Arial,sans-serif;
}
header {
background-color:#212121;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
position:relative;
width:100%;
z-index:100;
}
header h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
header a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
header .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
margin: 20px auto;
overflow: hidden;
position: relative;
width: 800px;
}
/* game lesson styles */
.bar {
background-color: #337755;
height: 0;
opacity: 0.9;
overflow: hidden;
position: absolute;
width: 800px;
z-index: 10;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
.bar button {
padding:3px;
float:right;
}
.barVisible {
height: 30px;
}
#scene {
position:relative;
}
#controls {
height: 600px;
opacity: 1;
position: absolute;
top: 0;
width: 800px;
z-index: 1;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
.controlsPanel {
height:80px;
opacity: 0 !important;
width:120px;
z-index: -1 !important;
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
-webkit-transform: scale(0.2);
transform: scale(0.2);
}
#controls .dialogs {
height: 400px;
margin: 100px auto;
overflow: hidden;
position: relative;
width: 600px;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
#controls .dialog {
background-color: #444;
border-radius: 25px;
display: none;
height: 400px;
opacity: 0.95;
position: absolute;
text-align: center;
width: 600px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
#controls .dialogVisible {
display:block;
}
#controls .dialog > * {
margin-bottom:20px;
}
#controls .dialog h1 {
font-size: 36px;
padding-top: 50px;
position: relative;
text-align: center;
}
#controls .dialog textarea {
display: block;
height: 150px;
margin: 0 auto 20px;
width: 400px;
}
#controls .dialog button {
border-radius:20px;
border-width:2px;
width:100px;
height:60px;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
#controls .dialog button:hover {
border-radius:30px;
border-width:4px;
width:120px;
}
/* customized scrollbar */
#controls .dialog textarea::-webkit-scrollbar {
width: 12px;
}
#controls .dialog textarea::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#controls .dialog textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
#controls .dialog textarea::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
/* page layout styles */
*{
margin:0;
padding:0;
}
body {
background-color:#eee;
color:#fff;
font:14px/1.3 Arial,sans-serif;
}
header {
background-color:#212121;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
position:relative;
width:100%;
z-index:100;
}
header h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
header a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
header .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
margin: 20px auto;
overflow: hidden;
position: relative;
width: 800px;
}
/* game lesson styles */
.bar {
background-color: #337755;
height: 0;
opacity: 0.9;
overflow: hidden;
position: absolute;
width: 800px;
z-index: 10;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
.bar button {
padding:3px;
float:right;
}
.barVisible {
height: 30px;
}
#scene {
position:relative;
}
#controls {
height: 600px;
opacity: 1;
position: absolute;
top: 0;
width: 800px;
z-index: 1;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
.controlsPanel {
height:80px;
opacity: 0 !important;
width:120px;
z-index: -1 !important;
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
-webkit-transform: scale(0.2);
transform: scale(0.2);
}
#controls .dialogs {
height: 400px;
margin: 100px auto;
overflow: hidden;
position: relative;
width: 600px;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
#controls .dialog {
background-color: #444;
border-radius: 25px;
display: none;
height: 400px;
opacity: 0.95;
position: absolute;
text-align: center;
width: 600px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
#controls .dialogVisible {
display:block;
}
#controls .dialog > * {
margin-bottom:20px;
}
#controls .dialog h1 {
font-size: 36px;
padding-top: 50px;
position: relative;
text-align: center;
}
#controls .dialog textarea {
display: block;
height: 150px;
margin: 0 auto 20px;
width: 400px;
}
#controls .dialog button {
border-radius:20px;
border-width:2px;
width:100px;
height:60px;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
#controls .dialog button:hover {
border-radius:30px;
border-width:4px;
width:120px;
}
/* customized scrollbar */
#controls .dialog textarea::-webkit-scrollbar {
width: 12px;
}
#controls .dialog textarea::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#controls .dialog textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
#controls .dialog textarea::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
In bottom of these styles you can see how I customized scrollbar styles (of textarea) with CSS3. Right now it will work only for Chrome browser.
在这些样式的底部，您可以看到如何使用CSS3自定义(文本区域的)滚动条样式。 目前，它仅适用于Chrome浏览器。
步骤3. JS (Step 3. JS)
js / jquery-1.5.2.min.js (js/jquery-1.5.2.min.js)
We use jQuery for our lesson. Available in package. Next file most important (here are all our html5 functional):
我们使用jQuery作为本课。 封装形式。 下一个最重要的文件(这是我们所有的html5功能)：
js / script.js (js/script.js)
// inner variables
var canvas, ctx;
var image;
var sounds = []; // sounds
var lastColor = 'rgba(255, 128, 0, 0.5)';
// -------------------------------------------------------------
// draw functions :
function clear() { // clear canvas function
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // main drawScene function
clear(); // clear canvas
ctx.drawImage(image, 0, 0);
ctx.fillStyle = lastColor;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
// -------------------------------------------------------------
// initialization
$(function(){
canvas = document.getElementById('scene');
ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
// load background image
image = new Image();
image.src = 'images/synthesizer.png';
image.onload = function() {
}
image.onerror = function() {
console.log('Error loading the background image.');
}
// sounds
sounds[0] = new Audio('media/button-1.wav');
sounds[0].volume = 0.9;
sounds[1] = new Audio('media/button-2.wav');
sounds[1].volume = 0.9;
sounds[2] = new Audio('media/button-3.wav');
sounds[2].volume = 0.9;
sounds[3] = new Audio('media/button-4.wav');
sounds[3].volume = 0.9;
sounds[4] = new Audio('media/button-5.wav');
sounds[4].volume = 0.9;
sounds[5] = new Audio('media/button-6.wav');
sounds[5].volume = 0.9;
sounds[6] = new Audio('media/button-7.wav');
sounds[6].volume = 0.9;
sounds[7] = new Audio('media/button-8.wav');
sounds[7].volume = 0.9;
sounds[8] = new Audio('media/button-9.wav');
sounds[8].volume = 0.9;
sounds[9] = new Audio('media/button-10.wav');
sounds[9].volume = 0.9;
// click alerts
$('#but1').click(function () {
$('.dialog').removeClass('dialogVisible');
$('#dialog2').addClass('dialogVisible');
});
$('#but2').click(function () {
$('.dialog').removeClass('dialogVisible');
$('#dialog3').addClass('dialogVisible');
});
$('#but3').click(function () {
$('.dialog').removeClass('dialogVisible');
$('#dialog1').addClass('dialogVisible');
});
$('#but_close').click(function () {
$('#controls').addClass('controlsPanel');
$('.bar').addClass('barVisible');
});
$('#options').click(function () {
$('#controls').removeClass('controlsPanel');
$('.bar').removeClass('barVisible');
$('.dialog').removeClass('dialogVisible');
$('#dialog1').addClass('dialogVisible');
});
$(window).keydown(function(event){ // keyboard alerts
switch (event.keyCode) {
case 48: // '0' key
sounds[0].currentTime = 0;
sounds[0].play(); // play sound #1
lastColor = 'rgba(0, 128, 255, 0.5)';
break;
case 49: // '1' key
sounds[1].currentTime = 0;
sounds[1].play(); // play sound #1
lastColor = 'rgba(128, 128, 0, 0.5)';
break;
case 50: // '2' key
sounds[2].currentTime = 0;
sounds[2].play(); // play sound #1
lastColor = 'rgba(255, 128, 0, 0.5)';
break;
case 51: // '3' key
sounds[3].currentTime = 0;
sounds[3].play(); // play sound #1
lastColor = 'rgba(0, 255, 0, 0.5)';
break;
case 52: // '4' key
sounds[4].currentTime = 0;
sounds[4].play(); // play sound #1
lastColor = 'rgba(128, 255, 0, 0.5)';
break;
case 53: // '5' key
sounds[5].currentTime = 0;
sounds[5].play(); // play sound #1
lastColor = 'rgba(255, 255, 0, 0.5)';
break;
case 54: // '6' key
sounds[6].currentTime = 0;
sounds[6].play(); // play sound #1
lastColor = 'rgba(0, 0, 0, 0.5)';
break;
case 55: // '7' key
sounds[7].currentTime = 0;
sounds[7].play(); // play sound #1
lastColor = 'rgba(0, 128, 0, 0.5)';
break;
case 56: // '8' key
sounds[8].currentTime = 0;
sounds[8].play(); // play sound #1
lastColor = 'rgba(0, 255, 0, 0.5)';
break;
case 57: // '9' key
sounds[9].currentTime = 0;
sounds[9].play(); // play sound #1
lastColor = 'rgba(128, 128, 256, 0.5)';
break;
}
});
setInterval(drawScene, 200); // loop drawScene
});
// inner variables
var canvas, ctx;
var image;
var sounds = []; // sounds
var lastColor = 'rgba(255, 128, 0, 0.5)';
// -------------------------------------------------------------
// draw functions :
function clear() { // clear canvas function
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // main drawScene function
clear(); // clear canvas
ctx.drawImage(image, 0, 0);
ctx.fillStyle = lastColor;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
// -------------------------------------------------------------
// initialization
$(function(){
canvas = document.getElementById('scene');
ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
// load background image
image = new Image();
image.src = 'images/synthesizer.png';
image.onload = function() {
}
image.onerror = function() {
console.log('Error loading the background image.');
}
// sounds
sounds[0] = new Audio('media/button-1.wav');
sounds[0].volume = 0.9;
sounds[1] = new Audio('media/button-2.wav');
sounds[1].volume = 0.9;
sounds[2] = new Audio('media/button-3.wav');
sounds[2].volume = 0.9;
sounds[3] = new Audio('media/button-4.wav');
sounds[3].volume = 0.9;
sounds[4] = new Audio('media/button-5.wav');
sounds[4].volume = 0.9;
sounds[5] = new Audio('media/button-6.wav');
sounds[5].volume = 0.9;
sounds[6] = new Audio('media/button-7.wav');
sounds[6].volume = 0.9;
sounds[7] = new Audio('media/button-8.wav');
sounds[7].volume = 0.9;
sounds[8] = new Audio('media/button-9.wav');
sounds[8].volume = 0.9;
sounds[9] = new Audio('media/button-10.wav');
sounds[9].volume = 0.9;
// click alerts
$('#but1').click(function () {
$('.dialog').removeClass('dialogVisible');
$('#dialog2').addClass('dialogVisible');
});
$('#but2').click(function () {
$('.dialog').removeClass('dialogVisible');
$('#dialog3').addClass('dialogVisible');
});
$('#but3').click(function () {
$('.dialog').removeClass('dialogVisible');
$('#dialog1').addClass('dialogVisible');
});
$('#but_close').click(function () {
$('#controls').addClass('controlsPanel');
$('.bar').addClass('barVisible');
});
$('#options').click(function () {
$('#controls').removeClass('controlsPanel');
$('.bar').removeClass('barVisible');
$('.dialog').removeClass('dialogVisible');
$('#dialog1').addClass('dialogVisible');
});
$(window).keydown(function(event){ // keyboard alerts
switch (event.keyCode) {
case 48: // '0' key
sounds[0].currentTime = 0;
sounds[0].play(); // play sound #1
lastColor = 'rgba(0, 128, 255, 0.5)';
break;
case 49: // '1' key
sounds[1].currentTime = 0;
sounds[1].play(); // play sound #1
lastColor = 'rgba(128, 128, 0, 0.5)';
break;
case 50: // '2' key
sounds[2].currentTime = 0;
sounds[2].play(); // play sound #1
lastColor = 'rgba(255, 128, 0, 0.5)';
break;
case 51: // '3' key
sounds[3].currentTime = 0;
sounds[3].play(); // play sound #1
lastColor = 'rgba(0, 255, 0, 0.5)';
break;
case 52: // '4' key
sounds[4].currentTime = 0;
sounds[4].play(); // play sound #1
lastColor = 'rgba(128, 255, 0, 0.5)';
break;
case 53: // '5' key
sounds[5].currentTime = 0;
sounds[5].play(); // play sound #1
lastColor = 'rgba(255, 255, 0, 0.5)';
break;
case 54: // '6' key
sounds[6].currentTime = 0;
sounds[6].play(); // play sound #1
lastColor = 'rgba(0, 0, 0, 0.5)';
break;
case 55: // '7' key
sounds[7].currentTime = 0;
sounds[7].play(); // play sound #1
lastColor = 'rgba(0, 128, 0, 0.5)';
break;
case 56: // '8' key
sounds[8].currentTime = 0;
sounds[8].play(); // play sound #1
lastColor = 'rgba(0, 255, 0, 0.5)';
break;
case 57: // '9' key
sounds[9].currentTime = 0;
sounds[9].play(); // play sound #1
lastColor = 'rgba(128, 128, 256, 0.5)';
break;
}
});
setInterval(drawScene, 200); // loop drawScene
});
I added my comments anywhere, hope that all code is pretty understandable.
我在任何地方添加了评论，希望所有代码都可以理解。
现场演示
打包下载
结论 (Conclusion)
Today, we repeated the knowledge on the use of sound in html5, and learn how to make alternative DOM-based dialogues with CSS3. I will be glad to see your thanks and comments. Good luck!
今天，我们重复了在html5中使用声音的知识，并学习了如何使用CSS3进行基于DOM的替代对话。 看到您的感谢和评论，我将非常高兴。 祝好运！
翻译自: https://www.script-tutorials.com/html5-game-development-lesson-5/
html 游戏开发
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
