HTML5游戏开发(一)

最新推荐文章于 2024-07-11 10:43:05 发布
最新推荐文章于 2024-07-11 10:43:05 发布
阅读量1k 收藏 4
点赞数
分类专栏： HTML5 文章标签： H5游戏开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MARQUIS888/article/details/79009619
版权

HTML5游戏开发(一)

一、Canvas元素

  HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

1、一个简单的示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>H5Canvas</title>
        <style>
            body{
                background:#4F4B43;
            }
            #canvas{
                margin: 10px;
                padding: 10px;
                background: #82A36F;
                /*thin定义细的边框 inset将外部阴影 (outset) 改为内部阴影*/
                border: thin inset #EDE176;
            }
        </style>
    </head>
    <body>
        <canvas id='canvas' width="600" height="300"></canvas>
        <script type="text/javascript" src="js/canvas.js" ></script>
    </body>
</html>

    //获取Canvas对象
    var canvas=document.querySelector("#canvas");
    context=canvas.getContext('2d');
    context.font='38pt Arial';
    //填充色
    context.fillStyle='#EDE176';
    //设置字符轮廓线颜色
    context.strokeStyle='#C2A84A';
    //字符填充，并使文字内容居中
    context.fillText("一个Canvas示例", canvas.width/2 - 200,
                                     canvas.height/2 + 15);
    //字符轮廓                                 
    context.strokeText("一个Canvas示例", canvas.width/2 - 200,
                                       canvas.height/2 + 15 );

查看效果：
iamge

注意：
在设置canvas的宽度与高度时，不能使用px后缀。
默认的canvas元素大小是300x500个屏幕像素。
如果是通过CSS来设定canvas元素的大小，那么只会改变元素本身的大小，而不会影响到绘图表面。当canvas元素的大小不符合其绘图表面的大小时，浏览器就会对绘衅表面进行缩放，使其符合元素的大小。
尽量使用属性来设置元素大小，而不使用CSS。

二、时钟绘制

（一）绘制外圆

//定义多个变量
var canvas=document.querySelector("#canvas"),
context=canvas.getContext('2d'),
FONT_HEIGHT = 15,   //字体高度
MARGIN = 35,        //外边距
RADIUS = canvas.width/2 - MARGIN;       //半径

//绘制圆形
function drawCircle() {
   context.beginPath();
   //路径颜色
   context.strokeStyle="#A66085";
   //参数分别为：x,y 圆的中心坐标 半径 起始角 结束角 逆时还是顺时true为逆时
   context.arc(canvas.width/2, canvas.height/2,
               RADIUS, 0, Math.PI*2, true);
   context.stroke();
}

function drawClock() {
    //清除画布
   context.clearRect(0,0,canvas.width,canvas.height);
    //绘制外圆
   drawCircle();
}
//函数调用
drawClock();

（二）绘制钟表时间数字

var NUMERAL_SPACING = -10,       //数字与圆之间的间隔
HAND_RADIUS = RADIUS + NUMERAL_SPACING; //数字半径
//绘制时间数据
function drawNumerals() {
    //定义12个小时的数组
   var numerals = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ],
       angle = 0,
       numeralWidth = 0;
    //通过循环进行绘制
   numerals.forEach(function(numeral) {
      //角度
      angle = Math.PI/6 * (numeral-3);
      numeralWidth = context.measureText(numeral).width;
      //填充文字,参数 文本，坐标x,y
      context.fillText(numeral, 
         canvas.width/2  + Math.cos(angle)*(HAND_RADIUS) - numeralWidth/2,
         canvas.height/2 + Math.sin(angle)*(HAND_RADIUS) + FONT_HEIGHT/3);
   });
}

function drawClock() {
    //清除画布
   context.clearRect(0,0,canvas.width,canvas.height);
    //绘制外圆
   drawCircle();
   //绘制时间
   drawNumerals() ;
}
//函数调用
drawClock();

(三)绘制中心点

//绘制中心点
function drawCenter() {
   context.beginPath();
   //填充颜色
   context.fillStyle="#585E6B";
   //绘制位置：参数：坐标x,y 半径，起始角，结束角，方向
   context.arc(canvas.width/2, canvas.height/2, 5, 0, Math.PI*2, true);
   //填充
   context.fill();
}

function drawClock() {
    //清除画布
   context.clearRect(0,0,canvas.width,canvas.height);
    //绘制外圆
   drawCircle();
   //绘制时间
   drawNumerals() ;
   //绘制中心点
   drawCenter()
}
//函数调用
drawClock();

(三)绘制时分秒针

//时针长短差
var   HAND_TRUNCATION = canvas.width/25,
      //分针短差
      MIN_HAND_TRUNCATION = canvas.width/20,
      //时针长度差
      HOUR_HAND_TRUNCATION = canvas.width/10;

/**
 *  绘制时分秒针通用函数
 * @param {Object} loc
 * @param {Object} isHour 是否是小时
 */
function drawHand(loc, isType) {
    //计算角度
   var angle = (Math.PI*2) * (loc/60) - Math.PI/2;
    //console.log(isType)
    //计算半径
    if(isType=='hour'){
         handRadius =RADIUS - HAND_TRUNCATION-HOUR_HAND_TRUNCATION;
    }else if(isType=='min'){
        handRadius =RADIUS - HAND_TRUNCATION-HOUR_HAND_TRUNCATION-MIN_HAND_TRUNCATION;
    }else if(isType=='sec'){
        handRadius=RADIUS - HAND_TRUNCATION;
    }
    //起始点为中心点
   context.moveTo(canvas.width/2, canvas.height/2);
   //结束点，通过向量计算
   context.lineTo(canvas.width/2  + Math.cos(angle)*handRadius, 
                  canvas.height/2 + Math.sin(angle)*handRadius);              
   context.stroke();
}
//绘制时分秒
function drawHands() {
   //获取当前小时数
   var date = new Date,
       hour = date.getHours();
   //进行12时计算    
   hour = hour > 12 ? hour - 12 : hour;
   //绘制时针
   drawHand(hour*5 + (date.getMinutes()/60)*5, 'hour');
   //绘制分针
   drawHand(date.getMinutes(), 'min');
   //绘制秒针
   drawHand(date.getSeconds(), 'sec');
}

function drawClock() {
    //清除画布
   context.clearRect(0,0,canvas.width,canvas.height);
    //绘制外圆
   drawCircle();
   //绘制时间
   drawNumerals() ;
   //绘制中心点
   drawCenter();
   //绘制时分秒针
   drawHands();
}
drawClock();

(四)动态显示

//每秒调用一次
setInterval(drawClock,1000);

显示结果：
image

二、事件处理

HTML5应用程序是以事件来驱动的。可以在HTML元素上注册事件监听器，并编写用一应这些事件的实现代码。
分别有：鼠标事件、键盘事件、触摸事件

（一）鼠标事件

将鼠标坐标转换为Canvas坐标
浏览器通过事件对象传递给监听器的鼠标坐标，是窗口坐标，而不是相对于canvas自身的坐标。
大部分情况下，开发者需要知道的是发生鼠标事件的点相对于canvas的位置，而不是整个窗口中的位置，所以必须进行坐标转换。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>H5Canvas</title>
        <style>
            body{
                background:#4F4B43;
            }
            #canvas{
                margin: 10px;
                padding: 10px;
                background: #82A36F;
                /*thin定义细的边框 inset将外部阴影 (outset) 改为内部阴影*/
                border: thin inset #EDE176;
            }
        </style>
    </head>
    <body>
         <div id='readout'></div>
        <canvas id='canvas' width="500" height="250"></canvas>
        <script type="text/javascript" src="js/canvasmouse.js" ></script>
    </body>
</html>
1、绘制背景
var canvas = document.querySelector('#canvas'),
    //用于读取转换后的坐标值
    readout = document.querySelector('#readout'),
    context = canvas.getContext('2d'),
    //创建一个精灵对象
    spritesheet = new Image();

//绘制带行分隔线的背景
function drawBackground() {
  //定义12个像素的间隔
   var VERTICAL_LINE_SPACING = 12,
   //获取画布的高度
   i = context.canvas.height;
   //清空画布
   context.clearRect(0,0,canvas.width,canvas.height);
   //设定路径颜色
   context.strokeStyle = '#61665C';
   //线的粗细为0.5
   context.lineWidth = 0.5;
   //绘制水平分隔线 间隔为12 ，第一行为VERTICAL_LINE_SPACING*4
   while(i > VERTICAL_LINE_SPACING*4) {
      context.beginPath();
      context.moveTo(0, i);
      //到画布的宽度
      context.lineTo(context.canvas.width, i);
      context.stroke();
      //一次减去12
      i -= VERTICAL_LINE_SPACING;
   }
}
drawBackground();
2、绘制精灵
//绘制精灵
function drawSpritesheet() {
   context.drawImage(spritesheet, 0, 0);
}
spritesheet.src = 'img/running-sprite-sheet.png';
//通过图像加载事件进行绘制
spritesheet.onload = function(e) {
   drawSpritesheet();
};
3、绘制参考线，并读取画布坐标值
//绘制水平线
function drawHorizontalLine (y) {
   context.beginPath();
   context.moveTo(0,y + 0.5);
   context.lineTo(context.canvas.width, y + 0.5);
   context.stroke();
}
//绘制垂直线
function drawVerticalLine (x) {
   context.beginPath();
   context.moveTo(x + 0.5, 0);
   context.lineTo(x + 0.5, context.canvas.height);
   context.stroke();
}
//绘制引导线
function drawGuidelines(x, y) {
   //设置线的颜色
   context.strokeStyle = 'rgba(0,0,230,0.8)';
   context.lineWidth = 0.5;
   //绘制水平线
   drawVerticalLine(x);
   //绘制垂直线
   drawHorizontalLine(y);
}
//更新读取的值
function updateReadout(x, y) {
   readout.innerHTML = '(' + x.toFixed(0) + ', ' + y.toFixed(0) + ')';
}

 //坐标转换 将window的坐标转换为Canvas的坐标
function windowToCanvas(canvas, x, y) {
    //返回canvas的大小与位置
   var bbox = canvas.getBoundingClientRect();
   //返回x,y值
   return { x: x - bbox.left * (canvas.width  / bbox.width),
            y: y - bbox.top  * (canvas.height / bbox.height)
          };
}
/**
 * 添加鼠标移动事件
 * @param {Object} e
 */
canvas.onmousemove = function (e) {
    //将window坐标转换为画布坐标
   var loc = windowToCanvas(canvas, e.clientX, e.clientY);
   //当鼠标移动时，重绘精灵与背景 
   drawBackground();
   drawSpritesheet();
   //绘制参考线
   drawGuidelines(loc.x, loc.y);
   //读取坐标值
   updateReadout(loc.x, loc.y);
};

显示效果：
image

Gambit_hou
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
一个H5游戏的开发（五）
一天到晚红烧鱼的博客
06-11 520
游戏精灵ActionRenderer 动作渲染类ActionView 动作视图RoleActionView 角色动作*-*!!! 上一章讲了地图的搭建,游戏中有了地图接下来就可以实现地图上的精灵了(npc,玩家角色,怪物,物品,传送阵). 在2d游戏中动画基本上都是有序列帧动画实现. 动作的编辑器就不在这里讲了,主要讲一下实现精灵显示的代码构成吧. ActionRenderer 动作渲染类 这个类就是实现最基础的动画播放,把序列帧图片按照帧频顺序连续替换显示就形成了动画.主要有一下几个功能函数 动态加载
一个H5游戏的开发（四）
一天到晚红烧鱼的博客
06-10 322
游戏地图thumbnailBitmap缩略图层blockContainer地图块容器重要的参数理解重要的函数寻路 游戏地图设计成2层显示（缩略图层，地图块层） mapContainer.addChild(this._thumbnailBitmap); mapContainer.addChild(this._blockContainer); thumbnailBitmap缩略图层 这层比较简单，就是把实际的大地图按比列缩小的图片，加载到这个层，然后按实际地图大小放大显示，达到的效果是在没有加载完地图实际图片时
MelonJS游戏开发框架：轻松创建HTML5游戏
gitblog_00056的博客
03-14 643
MelonJS游戏开发框架：轻松创建HTML5游戏 如果你正在寻找一个易于使用的开源游戏开发框架，以在Web上构建功能丰富的HTML5游戏，那么MelonJS可能是一个不错的选择。 什么是MelonJS？ MelonJS是一款轻量级的游戏开发框架，旨在简化HTML5游戏的开发过程。它提供了一系列强大的工具和技术，使开发者能够快速、高效地创建各种类型的游戏，包括2D平台游戏、射击游戏、解谜游戏等。...
HTML5 游戏开发实战 ｜ 俄罗斯方块_俄罗斯方块h5(1)
2401_84165919的博客
04-27 412
x’=yy’=-x注意，正方形形状不发生旋转。根据上面的分析，可以使用两个全局方法，用来对形状进行全局定位和旋转。translate(data.row.col)函数将形状自身的坐标系转换为屏幕的全局坐标系，（row,col）为当前形状原点在屏幕中的位置。每种形状向右旋转就会形成一个新的形状，rotate(data)函数可以得到当前形状的方块旋转后的坐标数组。3． 游戏流程俄罗斯方块游戏就是用一个定时器控制方块下落并重绘的过程，用户可以利用键盘输入改变方块状态。
GameMaker HTML5 游戏开发（一）
最新发布
龙哥盟
07-11 320
HTML5 的引入彻底改变了 Web 浏览器作为一个合法的游戏平台，具有无限的潜力。制作浏览器游戏从未如此简单，特别是使用 GameMaker Studio。HTML5 Game Development with GameMaker 将向您展示如何使用实际示例制作和发布基于浏览器的游戏。本书利用 GameMaker 强大的脚本语言，让您能够在短时间内创建您的第一个游戏。通过本指南，您将开发出全面的技能和对开发逐渐复杂的游戏的工具的一致理解，逐渐增强您的编码能力，并将其提升到一个全新的水平。
HTML5 游戏开发快速提升
sybh的博客
10-24 3213
带你快速掌握html5游戏开发基本功，助你快速进阶游戏开发
打造你的HTML5打地鼠游戏：零基础入门教程
interest_ing_的博客
03-09 2032
在这个教程中，我们将一起学习如何使用HTML、CSS和JavaScript来创建一个简单的打地鼠游戏。这不仅是一个有趣的项目，也是学习前端开发技能的绝佳方式。
HTML5 游戏开发实战 ｜ 俄罗斯方块_俄罗斯方块h5(1)，2024年最新你有过迷茫吗
2401_84185074的博客
04-17 849
/产生一个新的形状方块Block.prototype.born = function () //随机选择一个形状this.shape id = Math.floor(Math.random() * 7)+1;//将形状自身的坐标系转换为屏幕 Map 的坐标系//(row，col)为当前形状的方块的原点在 Map 中的位置Block.prototype.translate = function (row，col)var copy=[l;onTick();
html5游戏开发技术
01-02
HTML5游戏开发技术是当前互联网领域的一个热门话题，随着移动设备的普及和浏览器技术的提升，HTML5成为了创建跨平台游戏的理想选择。本资源提供的"HTML5游戏开发(全).pdf"很可能是一本全面介绍HTML5游戏开发的书籍，...
HTML5游戏开发实例分享
07-23
资源名称：HTML5游戏开发实例分享资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
HTML5游戏前端开发秘籍
03-01
QQ空间Android版4.2和4.5上线的玩吧游戏“空间疯狂套牛”是一款使用HTML5开发出的手机游戏，虽然还有很多不足，但其中使用的一些技术与技巧还是很有必要为大家分享出来，方便大家用秘籍打通各种关卡创造出更多更好的...
html5游戏制作入门系列教程（三）
08-08
NULL 博文链接：https://justcoding.iteye.com/blog/2166578
使用Phaser框架构建你的第一个H5游戏
热门推荐
洒满阳光的午后的博客
06-15 1万+
还记得贪吃蛇这个经典游戏吗？在诺基亚时代，在黑白像素点游戏机时代，就是这样一个简单的游戏也能让我们玩上几个小时。 在这篇文章，我们将使用HTML5来重现这个游戏，基于著名的开源HTML5游戏框架——Phaser。你将了解到游戏精灵、游戏状态，以及如何使用预加载（preload）、创建（create）与刷新（update）方法。最终效果呈现如下： 一、开发准备 首先访问Ph
使用JS和Canvas做一个html5小游戏_html canvas用javascript制作一款网页游戏(1)
2401_84976170的博客
05-16 983
这是游戏的截图：1.有计算抓住的怪物的数量2.有背景，英雄，怪物。
HTML5游戏开发(六)
MARQUIS888的专栏
01-11 673
HTML5游戏开发(六) 多边形绘制、缩放、移动、旋转功能。
基于HTML5的游戏网站设计与实现(源码+开题)
seryue11的博客
02-23 1331
首先，对HTML5技术的核心特性和在游戏开发中的应用进行深入分析，为游戏网站的设计提供技术支撑。本研究内容的实现，将为HTML5游戏网站的开发提供有益的参考和借鉴，推动游戏行业的技术进步和创新发展。本研究旨在探索基于HTML5技术的游戏网站设计与实现方法，通过深入研究HTML5技术的特点和应用，结合用户需求和市场趋势，开发出一个功能完善、用户体验良好的HTML5游戏网站。最后，HTML5游戏网站的研究还有助于提升整个游戏行业的用户体验，通过优化游戏界面、提升游戏流畅度等方式，为用户带来更加愉快的游戏体验。
HTML5游戏开发经验及开发工具分享
wangchewen的博客
09-27 1513
当你开发基于HTML5的游戏时，你有很多选择。使用什么样的编辑器？是否用到Canvas 2d、WebGL？采用什么样的呈现框架和游戏引擎？这些选择大部分由开发者的个人经验和游戏将要发布的平台决定。幸运的是，有关HTML5游戏开发的指南现在已经有很多了。而这篇文章则是要告诉开发者在开发HTML5游戏以前应该具备的一些全局概念。你能从这篇文章中学到什么？这里会介绍HTML5游戏开发的一些框架，你将知道如何使你设计的游戏能够在更多的平台上运行，了解如何管理在线游戏的状态，如何处理性能问题。话不多说，现在就...
完全分享，共同进步——我开发的第一款HTML5游戏《驴子跳》
yujianshenbing的专栏
04-03 438
在线演示：http://yujianshenbing.w108.mc-test.com/game/donkeyjump/index.html（如果无法访问，请大家暂时先直接下载源码运行） 源码下载：请查看附件 操作方法：游戏开始后，按键盘“A”或“D”控制左右方向，也可以通过方向键控制。 　　（请了解：游戏中所有图片和音乐均来自手机版同名游戏，本游戏仅供学习参考。本文所有内容及结论均属...
HTML5游戏开发实战指南
"HTML5 Game Development by Example.pdf 是一本适合初学者的H5游戏开发指南，通过实例详细介绍了HTML5在游戏开发中的应用。" 本书详细阐述了HTML5游戏开发的相关知识点，包括HTML5的新特性以及如何利用这些特性来...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值