作为一个热衷HTML5游戏开发的程序猿，我对这事儿特别有热情。前不久看了本书叫《TheEssentialGuidetoHtml5》，让我更好地理解了HTML5游戏开发的内容。现在，我把学到的东西和一些实际操作跟大家说说，希望对那些也喜欢这方面的小伙伴有所启发。
一、书籍概述与个人感受
这本书里头，每章都是讲怎么做一款小游戏的，从画图开始，一直到用到各种复杂的数学知识。虽然书里的游戏看起来不咋地，但是对新手来说，那些简单易懂的例子和详细的解释真的很有用。我大概用了一周看完这本书，觉得挺值的。
二、基础图形绘制
做游戏开发，画图可是关键！这本书教你怎么用HTML5的Canvas元素画出各种形状，比如矩形、圆形等等。学完这些基本功，你就会知道怎么控制画布，怎么选颜色和线条类型，这样以后画更复杂的东西就不怕。
三、按键输入与事件监听
想让游戏更有趣？学会抓取玩家的按键信息很重要！书里有详细案例教我们怎么捕获键盘事件，看懂各种按键信号怎样操控游戏里的角色或元素。还有，那啥事件监听也很重要，让我们明白了游戏要怎么实时回应玩家的操作才行。
四、运动图形与定时器
学到了怎么用定时器做出游戏里的动态效果？其实就是每隔一段时间就重新画一下那些动图，这样就能让它们看起来更生动！虽然这个过程看似简单，但是对于理解游戏的运行机制和逻辑可是很重要的~
五、数学知识在游戏中的应用
玩儿游戏其实也挺需要数学概念的！这本书里举了好多像小球碰来碰去这样接地气的例子，让人更好地明白了什么叫做“运用数学来解决游戏问题”。比如说我们用摆弄对象的x和y坐标来模拟物理碰撞，或者算算两个动来动去的东西离得多近才会撞上——都是常见又实用的数学方法！
六、游戏逻辑与判断
//ball 球function Ball(sx, sy, rad, stylestring) { this.sx = sx; this.sy = sy; this.rad = rad; this.draw = drawball; this.moveit = moveball; this.fillstyle = stylestring;
}function drawball() {
ctx.fillStyle = this.fillstyle;
ctx.beginPath(); //ctx.fillStyle= rgb(0,0,0);
ctx.arc(this.sx, this.sy, this.rad, 0, Math.PI * 2, true);
ctx.fill();
}function moveball(dx, dy) { this.sx += dx; this.sy += dy;
}//Rect 方形function Myrectangle(sx, sy, swidth, sheight, stylestring) { this.sx = sx; this.sy = sy; this.swidth = swidth; this.sheight = sheight; this.fillstyle = stylestring; this.draw = drawrects; this.moveit = moveball;//move方法是一样的}function drawrects() {
ctx.fillStyle = this.fillstyle;
ctx.fillRect(this.sx, this.sy, this.swidth, this.sheight);
}//多边形function Polycard(sx, sy, rad, n, frontbgcolor, backcolor, polycolor) { this.sx = sx; this.sy = sy; this.rad = rad; this.draw = drawpoly; this.frontbgcolor = frontbgcolor; this.backcolor = backcolor; this.polycolor = polycolor; this.n = n; this.angle = (2 * Math.PI) / n; //parens may not be needed.
this.moveit = generalmove;
}//画多边形function drawpoly() {
ctx.fillStyle = this.frontbgcolor;
ctx.strokeStyle = this.backcolor;
ctx.fillRect(this.sx - 2 * this.rad, this.sy - 2 * this.rad, 4 * this.rad, 4 * this.rad);
ctx.beginPath();
ctx.fillStyle = this.polycolor; var i; var rad = this.rad;
ctx.beginPath();
ctx.moveTo(this.sx + rad * Math.cos(-.5 * this.angle), this.sy + rad * Math.sin(-.5 * this.angle)); for (i = 1; i View Code
2.获取鼠标位置：
(ev.layerX || ev.layerX == 0) {
mx == (ev.offsetX || ev.offsetX == 0) {
mx ==
这个游戏，关键就在于那个逻辑设计！书里用迷宫游戏做例子，教我们怎么搞出那些复杂的游戏逻辑。比如，怎么知道一个东西能不能过某个地方，又怎么防止它跑到不该去的地方？这可不仅仅是数学问题，还得有好的编程头脑才行。
七、本地存储与多媒体元素
function getkey(event) { var keyCode;
if(event == null)
{
keyCode = window.event.keyCode;
window.event.preventDefault();
} else
{
keyCode = event.keyCode;
event.preventDefault();
} switch(keyCode)
{ case 68: //按下D
deal(); break;
case 72: //按下H
playerdone(); break;
case 78: //按下N
newgame();
break;
default:
alert("Press d, h, or n.");
}
}
要让游戏更有趣，我们得利用好本地存储和多媒体元素。我学会了怎么用简易的本地存储存用户数据，还有放背景音乐和音效。虽然简单，但是这可是让游戏变得更好玩的秘诀！
八、实战案例分析
var canvas1 = document.getElementById('canvas');
canvas1.addEventListener('mousedown', startwall, false);//false表示事件冒泡的顺序。
canvas1.addEventListener('mousemove', stretchwall, false);
canvas1.addEventListener('mouseup', finish, false);
我最爱看实战案例那块儿！边敲代码边学理论，再把它们用到游戏开发里去，真的很实用。每个案例都让我对HTML5游戏开发有更深的认识。
九、书籍评价与个人建议
这书对老手来说有点浅显，不过对我这种新手来说挺好上手的。基本知识都有，挺实际的，而且作者讲得特别详细，好懂。
var mypent = new Token(100, 100, 20, "rgb(0,0,250)", 5);
everything.push(mypent); function drawall() {
ctx.clearRect(0, 0, cwidth, cheight); var i; for (i = 0; i 6.javascript面向对象的能力没有那些高级语言强，很多功能的实现都是巧妙的运用了数组。比如洗牌的动作。
//洗牌就是更换了牌的位置 function shuffle() { var i = deck.length - 1;//deck代表一副牌
var s; while (i>0) {//这里循环一次 每张牌平均更换了两次位置
s = Math.floor(Math.random()*(i+1));//随机范围是0-i (包括i)
swapindeck(s,i);//交换位置
i--;
}
}
function swapindeck(j,k) { var hold = new MCard(deck[j].num,deck[j].suit,deck[j].picture.src); //MCard 是一张牌的对象。
deck[j] = deck[k];
deck[k] = hold;
}
十、总结与展望
看完书后，我对HTML5游戏开发有了点皮毛的理解和实践经验。虽然还差得远，但这本书真的让我对游戏开发产生了兴趣。我已经迫不及待想把学到的东西用到更高级的游戏项目里，做出自己的游戏！
朋友们，聊聊呗！你在做游戏的过程中，遇见过哪些难关？都是怎么挺过去的？欢迎留言分享你的故事，我们互相取经，共同提高！别忘了点个赞，分享给别人看看HTML5游戏有多棒！
原文链接：https://www.icz.com/technicalinformation/web/2024/06/16391.html，转载请注明出处~~~ 
评论0