HTML5游戏开发系列教程5(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-5/
最终我决定准备下一篇游戏开发系列的文章,我们将继续使用canvas来进行HTML5游戏开发系列的文章。今天我准备音乐的例子(有点儿像音乐合成器),它用到了使用CSS3来制作的基于DOM的对话框。为什么我使用独立的对话框--简单,最主要是因为CSS有很多处理标准元素的文本和样式的方法,且它可以使JS的代码简单,同时能提升例子程序的速度。所以你可以对这些对话框应用特定的样式,例如我利用CSS3定制了一个滚动条。
前一篇的的介绍在HTML5游戏开发系列教程4(译)。
第一步:HTML
下面是我们第5课的源代码
index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>HTML5 Game Development - Lesson 5 | Script Tutorials</title> 6 <link href="css/main.css" rel="stylesheet" type="text/css" /> 7 <script src="js/jquery-2.0.0.min.js"></script> 8 <script src="js/script.js"></script> 9 </head> 10 <body> 11 <header> 12 <h2>HTML5 Game Development - Lesson 5</h2> 13 <a href="http://www.script-tutorials.com/html5-game-development-lesson-5/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> 14 </header> 15 <div class="container"> 16 <div class="bar"> 17 <button id="options">Options</button> 18 </div> 19 <canvas id="scene" width="800" height="600"></canvas> 20 <div id="controls"> 21 <div id="dialogs" class="dialogs"> 22 <div id="dialog1" class="dialog dialogVisible"> 23 <h1>Welcome to lesson #5</h1> 24 <textarea> 25 Please click buttons from 0 to 9 to produce different sounds. 26 Please click buttons from 0 to 9 to produce different sounds. 27 Please click buttons from 0 to 9 to produce different sounds. 28 Please click buttons from 0 to 9 to produce different sounds. 29 Please click buttons from 0 to 9 to produce different sounds. 30 Please click buttons from 0 to 9 to produce different sounds. 31 Please click buttons from 0 to 9 to produce different sounds. 32 Please click buttons from 0 to 9 to produce different sounds. 33 </textarea> 34 <button id="but1">Next</button> 35 </div> 36 <div id="dialog2" class="dialog"> 37 <h1>Second page</h1> 38 <textarea> 39 Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery. 40 Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery. 41 Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery. 42 Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery. 43 Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery. 44 </textarea> 45 <button id="but2">Next</button> 46 </div> 47 <div id="dialog3" class="dialog"> 48 <h1>Third page</h1> 49 <button id="but3">First page</button> 50 <button id="but_close">Close</button> 51 </div> 52 </div> 53 </div> 54 </div> 55 </body> 56 </html>
上面代码中,我们的Canvas里,我添加了控制条(该控制条可以放一些操作按钮),目前它包含一个按钮,用来显示对话框的。在Canvas下面是一系列的对话框信息。
第二步 CSS
下面是CSS的层叠样式
1 /* page layout styles */ 2 *{ 3 margin:0; 4 padding:0; 5 } 6 body { 7 background-color:#eee; 8 color:#fff; 9 font:14px/1.3 Arial,sans-serif; 10 } 11 header { 12 background-color:#212121; 13 box-shadow: 0 -1px 2px #111111; 14 display:block; 15 height:70px; 16 position:relative; 17 width:100%; 18 z-index:100; 19 } 20 header h2{ 21 font-size:22px; 22 font-weight:normal; 23 left:50%; 24 margin-left:-400px; 25 padding:22px 0; 26 position:absolute; 27 width:540px; 28 } 29 header a.stuts,a.stuts:visited{ 30 border:none; 31 text-decoration:none; 32 color:#fcfcfc; 33 font-size:14px; 34 left:50%; 35 line-height:31px; 36 margin:23px 0 0 110px; 37 position:absolute; 38 top:0; 39 } 40 header .stuts span { 41 font-size:22px; 42 font-weight:bold; 43 margin-left:5px; 44 } 45 .container { 46 margin: 20px auto; 47 overflow: hidden; 48 position: relative; 49 width: 800px; 50 } 51 52 /* game lesson styles */ 53 .bar { 54 background-color: #337755; 55 height: 0; 56 opacity: 0.9; 57 overflow: hidden; 58 position: absolute; 59 width: 800px; 60 z-index: 10; 61 62 -moz-transition: 1s; 63 -ms-transition: 1s; 64 -o-transition: 1s; 65 -webkit-transition: 1s; 66 transition: 1s; 67 } 68 .bar button { 69 padding:3px; 70 float:right; 71 } 72 .barVisible { 73 height: 30px; 74 } 75 #scene { 76 position:relative; 77 } 78 #controls { 79 height: 600px; 80 opacity: 1; 81 position: absolute; 82 top: 0; 83 width: 800px; 84 z-index: 1; 85 86 -moz-transition: 1s; 87 -ms-transition: 1s; 88 -o-transition: 1s; 89 -webkit-transition: 1s; 90 transition: 1s; 91 } 92 .controlsPanel { 93 height:80px; 94 opacity: 0 !important; 95 width:120px; 96 z-index: -1 !important; 97 98 -moz-transform: scale(0.2); 99 -ms-transform: scale(0.2); 100 -o-transform: scale(0.2); 101 -webkit-transform: scale(0.2); 102 transform: scale(0.2); 103 } 104 #controls .dialogs { 105 height: 400px; 106 margin: 100px auto; 107 overflow: hidden; 108 position: relative; 109 width: 600px; 110 111 -moz-transition: 1s; 112 -ms-transition: 1s; 113 -o-transition: 1s; 114 -webkit-transition: 1s; 115 transition: 1s; 116 } 117 #controls .dialog { 118 background-color: #444; 119 border-radius: 25px; 120 display: none; 121 height: 400px; 122 opacity: 0.95; 123 position: absolute; 124 text-align: center; 125 width: 600px; 126 127 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 128 129 -moz-transition: 1s; 130 -ms-transition: 1s; 131 -o-transition: 1s; 132 -webkit-transition: 1s; 133 transition: 1s; 134 } 135 #controls .dialogVisible { 136 display:block; 137 } 138 #controls .dialog > * { 139 margin-bottom:20px; 140 } 141 #controls .dialog h1 { 142 font-size: 36px; 143 padding-top: 50px; 144 position: relative; 145 text-align: center; 146 } 147 #controls .dialog textarea { 148 display: block; 149 height: 150px; 150 margin: 0 auto 20px; 151 width: 400px; 152 } 153 #controls .dialog button { 154 border-radius:20px; 155 border-width:2px; 156 width:100px; 157 height:60px; 158 159 -moz-transition: 1s; 160 -ms-transition: 1s; 161 -o-transition: 1s; 162 -webkit-transition: 1s; 163 transition: 1s; 164 } 165 #controls .dialog button:hover { 166 border-radius:30px; 167 border-width:4px; 168 width:120px; 169 } 170 171 /* customized scrollbar */ 172 #controls .dialog textarea::-webkit-scrollbar { 173 width: 12px; 174 } 175 #controls .dialog textarea::-webkit-scrollbar-track { 176 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 177 -webkit-border-radius: 10px; 178 border-radius: 10px; 179 } 180 #controls .dialog textarea::-webkit-scrollbar-thumb { 181 -webkit-border-radius: 10px; 182 border-radius: 10px; 183 background: rgba(255,0,0,0.8); 184 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 185 } 186 #controls .dialog textarea::-webkit-scrollbar-thumb:window-inactive { 187 background: rgba(255,0,0,0.4); 188 }
在上面代码的最后部分,你可以看见我是如何用CSS3来定制文本区的滚动条样式,目前这个功能只能在Chrome浏览器上工作(firefox也可以了)
第三步:JS
js/script.js
1 //内部变量 2 var canvas, ctx; 3 var image; 4 var sounds = []; 5 var lastColor = 'rgba(255, 128, 0, 0.5)'; 6 7 //清楚画布 8 function clear() { 9 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 10 } 11 12 // 13 function drawScene() { 14 clear(); 15 ctx.drawImage(image, 0, 0); 16 17 ctx.fillStyle = lastColor; 18 ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 19 } 20 21 //初始化 22 $(function() { 23 canvas = document.getElementById('scene'); 24 ctx = canvas.getContext('2d'); 25 26 var width = canvas.width; 27 var height = canvas.height; 28 29 //加载背景图片 30 image = new Image(); 31 image.src = 'images/synthesizer.png'; 32 image.onload = function() {} 33 image.onerror = function() { 34 console.log('Error loading the background image.'); 35 } 36 37 //每个按键的声音 38 sounds[0] = new Audio('media/button-1.wav'); 39 sounds[0].volume = 0.9; 40 sounds[1] = new Audio('media/button-2.wav'); 41 sounds[1].volume = 0.9; 42 sounds[2] = new Audio('media/button-3.wav'); 43 sounds[2].volume = 0.9; 44 sounds[3] = new Audio('media/button-4.wav'); 45 sounds[3].volume = 0.9; 46 sounds[4] = new Audio('media/button-5.wav'); 47 sounds[4].volume = 0.9; 48 sounds[5] = new Audio('media/button-6.wav'); 49 sounds[5].volume = 0.9; 50 sounds[6] = new Audio('media/button-7.wav'); 51 sounds[6].volume = 0.9; 52 sounds[7] = new Audio('media/button-8.wav'); 53 sounds[7].volume = 0.9; 54 sounds[8] = new Audio('media/button-9.wav'); 55 sounds[8].volume = 0.9; 56 sounds[9] = new Audio('media/button-10.wav'); 57 sounds[9].volume = 0.9; 58 59 //对话框按钮上的点击事件 60 $('#but1').click(function() { 61 $('.dialog').removeClass('dialogVisible'); 62 $('#dialog2').addClass('dialogVisible'); 63 }); 64 $('#but2').click(function() { 65 $('.dialog').removeClass('dialogVisible'); 66 $('#dialog3').addClass('dialogVisible'); 67 }); 68 $('#but3').click(function() { 69 $('.dialog').removeClass('dialogVisible'); 70 $('#dialog1').addClass('dialogVisible'); 71 }); 72 $('#but_close').click(function() { 73 $('#controls').addClass('controlsPanel'); 74 $('.bar').addClass('barVisible'); 75 }); 76 $('#options').click(function() { 77 $('#controls').removeClass('controlsPanel'); 78 $('.bar').removeClass('barVisible'); 79 $('.dialog').removeClass('dialogVisible'); 80 $('#dialog1').addClass('dialogVisible'); 81 }); 82 83 //键盘事件 84 $(window).keydown(function(event) { 85 switch (event.keyCode) { 86 case 48: // ‘0’ key 87 sounds[0].currentTime = 0; 88 sounds[0].play(); 89 lastColor = 'rgba(0, 128, 255, 0.5)'; 90 break; 91 case 49: // ‘1’ key 92 sounds[1].currentTime = 0; 93 sounds[1].play(); 94 lastColor = 'rgba(128, 128, 0, 0.5)'; 95 break; 96 case 50: // '2' key 97 sounds[2].currentTime = 0; 98 sounds[2].play(); 99 lastColor = 'rgba(255, 128, 0, 0.5)'; 100 break; 101 case 51: 102 sounds[3].currentTime = 0; 103 sounds[3].play(); 104 lastColor = 'rgba(0, 255, 0, 0.5)'; 105 break; 106 case 52: 107 sounds[4].currentTime = 0; 108 sounds[4].play(); 109 lastColor = 'rgba(128, 255, 0, 0.5)'; 110 break; 111 case 53: 112 sounds[5].currentTime = 0; 113 sounds[5].play(); 114 lastColor = 'rgba(255, 255, 0, 0.5)'; 115 break; 116 case 54: 117 sounds[6].currentTime = 0; 118 sounds[6].play(); 119 lastColor = 'rgba(0, 0, 0, 0.5)'; 120 break; 121 case 55: 122 sounds[7].currentTime = 0; 123 sounds[7].play(); 124 lastColor = 'rgba(0, 128, 0, 0.5)'; 125 break; 126 case 56: 127 sounds[8].currentTime = 0; 128 sounds[8].play(); 129 lastColor = 'rgba(0, 255, 0, 0.5)'; 130 break; 131 case 57: 132 sounds[9].currentTime = 0; 133 sounds[9].play(); 134 lastColor = 'rgba(128, 128, 255, 0.5)'; 135 break; 136 137 } 138 }); 139 setInterval(drawScene, 200); //循环重绘 140 });
结论:
今天,我们复习了在html5中使用声音,并且学习了如何使用CSS3来制作基于DOM的对话框。我将非常高兴看到你们的谢意和评论。好运!
源代码下载地址:http://www.script-tutorials.com/demos/205/source.zip
转载于:https://www.cnblogs.com/pigzhu/p/3175160.html
HTML5游戏开发系列教程5(译)相关推荐
- HTML5游戏开发高级教程 | Lynda教程 中文字幕
HTML5游戏开发高级教程 | Lynda教程 中文字幕 Advanced HTML5 Game Development 课程ID: 597988 时长: 2.3小时 所属类别:Html 全部游戏开发 ...
- unity2d游戏开发系列教程:一、环境安装
从这篇文章开始,一步一步教大家从0开始通过2DGameKit项目进行2D游戏开发 第一步.环境安装 1.先使用手机下载Unity Connect并注册登陆 2.进入unity官网https://uni ...
- unity2d游戏开发系列教程:四、一个2D游戏所需要的主要功能(游戏框架)
目录 unity2d游戏开发系列教程:一.环境安装 unity2d游戏开发系列教程:二.新建工程并熟悉Unity编辑器常用功能 unity2d游戏开发系列教程:三.场景布置,增加怪物和机关 原文下载 ...
- unity2d游戏开发系列教程:三、场景布置,增加怪物和机关
目录 unity2d游戏开发系列教程:一.环境安装 unity2d游戏开发系列教程:二.新建工程并熟悉Unity编辑器常用功能 第一节.场景草地布置 先查看一下资源文件里都有什么,一会就要用到的 打开 ...
- unity2d游戏开发系列教程:二、新建工程并熟悉Unity编辑器常用功能
目录 unity2d游戏开发系列教程:一.环境安装 第一步.打开项目 耐心等待一小会 工程界面 第二步.创建第一个场景(第一关)进行试玩 点击图中标号1的运行按钮,即可简单试玩感受,操作如下 移动A, ...
- HTML5游戏开发案例教程
学习本套HTML5游戏案例开发教程需要您有一定的HTML5.JS基础,如果您还没有学过HTML5和JS请您查看本店相关教程.如果您已经具备一定的开发基础,这些教程将有助于您快速入门HTML5游戏开发. ...
- 2d unity 多物体 射线_24小时入门Unity游戏开发系列教程
版权声明: 本系列教程来自Unity Game Development in 24 Hours, Sams Teach Yourself(出版日期:2013年12月6日) 教程内容仅供个人学习参考,版 ...
- UE4游戏开发系列教程之————world machine地编教程
写在前面,我写这篇教程原因还是今年的年假太长了~~~自己在家闲着无聊,就继续做我"独立3A游戏"的梦.我从一开始的unity3d转战到了UE4.因为Unity3D的表现力实在有待提 ...
- [cocos2d-x]游戏开发系列教程-搭建cocos2d-x的windows开发环境
1.在上一篇中我们成功运行了HelloCpp和TestCpp工程,我们到目录cocos2d-x-2.2.1\Debug.win32下 查看生成的文件,在我电脑上绝对路径是H:\source\cocos ...
最新文章
- Android 监听多个Spinner 的点击事件
- 显示-连接-删除管理数据库管理应用
- 英文VS2010安装中文版MSDN文档方法
- leetcode 412. Fizz Buzz
- iOS 从实际出发理解多线程
- 两个排序数组的中位数(4.Median of Two Sorted Arrays)
- 修改网站自动关闭时间timeout_Testbench仿真方法2:在Quartus下Testbench编写及脚本文件修改...
- 为什么 Django 框架持续统治着 Python 开发?
- a data source instance has not been supplied for the datasource 'dataset1'. rdlc
- HALCON示例程序pcb_inspection.hdev检测pcb印刷缺陷
- spgridview的过滤功能回调时发生错误~
- 梯度下降、随机梯度下降、方差减小的梯度下降(matlab实现)
- 视觉里程计02 基于特征匹配的位姿估计
- java过载保护_微服务过载保护原理与实战
- 信号峰峰值Vpp与功率和dbm的换算
- 古剑奇谭网络版服务器位置,《古剑奇谭网络版》部分服务器“数据互通”公告...
- ValueError: 2 columns passed, passed data had 5 columns
- 83 项开源视觉 SLAM 方案够你用了吗?
- 动词ing基本用法_动词ing形式的用法
- 计算机打字200字,学打字的作文200字
热门文章
- BEIT:基于图像重建进行预训练!微软提出BEIT,Top-1准确率达86.3%!代码已开源!...
- 社招 | 腾讯天天P图 定义视频新科技~base上海
- matlab画滤波器频响应,matlab如何画出“凯泽窗FIR滤波器”的幅频相频响应图
- 人生苦短,Python值得 这些Pandas隐藏小技巧你知道吗?
- Python凭啥这么受欢迎?
- 学游戏3d建模好找工作吗?待遇如何?
- 【OpenCV】OpenCV函数精讲之 -- imshow()函数
- 收藏 | 一文读懂深度学习中的各种卷积
- 谷歌开源EfficientNets:ImageNet准确率创纪录,效率提高10倍
- Github | ICCV2019论文1000余篇更新!附下载链接