html5游戏--初试
我觉得，html5很有前景，移动终端智能化、普及是一个大趋势，html5的应用有跨平台这一大的优势，传统的应用很依赖终端的系统，同样一个应用，html5也能实现，它就可以在所有的智能终端下使用，而且又有本地存储，离线使用等特性，这使得它成为未来的主流用html5开发游戏是一件很激动人心的事，好的，开始我的html5游戏之路吧
先不看别人怎么写的，先去看一下html5给我们提供什么东西，然后说说我的想法吧
经过阅读html5 Canvas API，发现，提供的东西不多，无非是一些数学图形画法，有点、线、矩形等，然后还有一个外加载图像的功能，不过有一个激动人心的东西，就是它也提供像素级处理，这个强大，因为直接对像素处理可以进行复杂的图像变换，比强像ps里面的滤镜效果，除此之外，还有一些样式控制，状态控制。这个Canvas让我想到了和Ps的里的对比，只是让我们直观了解下Canvas
首先，Canvas里的beginPath等就是Ps里的路径，stroke就像是描边，fill就是油漆桶填充，Gradient就是渐变，bezierCurveTo就是钢笔绘贝塞尔曲线
做动画，首先想到的是，像html的div移动一样，不断改变div的css值就行了，后来发现，Canvas是绘图的，不是做动画的，它没有图层的概念，你将某个图片放到画布上，它就是整一个图片了，你不可能控制这个图片的移动了。后来想，那就不移动它，再重新画一张就行了
以Flash的模式来用Canvas做游戏动画
舞台、祯、元件这些概念用在Canvas上
想一想Flash的逐祯动画的制作过程
一个小丑的移动过程：每一祯都是一幅图像，每一幅图像中，小丑向前移动一步，Flash控制每隔很短的时间显示一祯，这样就形成了一个动画
对就Canvas里就可以这么做，一个舞台对象，舞台上有各种小丑（元件），一祯一祯的显示，这一祯显示完了就把舞台清空，然后重新绘制下一祯
Flash里边涉及两个问题：
一条主控时间线，控制舞台的显示，然后对于每个元件，可能还会一个自己的时间线，就是当元件是动画的时候
那么在Canvas里，就可以对应着这样的设计模式
构造一个舞台对像Stage，将各个元件放在舞台上，不要时间主线，Stage有一个擦空原来舞台，根据Stage的各元件状态重绘舞台的方法，每一个元件要做动画的时候就生成一个自己的时间线，比如小丑要移动的时候，可以在任何时候要求舞台Stage重绘舞台，这样，可能会在某个时刻，没有一个元件要求重绘舞台，那么Canvas的祯频就是0，这样的帧频是动态变化的
var Stage = {};Stage.paint(){//根据舞台上每个小丑当前时刻的状态，重绘舞台}function Sprite(){this.go = function(){ setInterval(goAhead,100); function goAhead(){ //一些状态改变代码....... Stage.paint();//要求舞台重绘 }}}function Sprite2(){This.go = function(){ setInterval(goAhead,100); function goAhead(){ //一些状态改变代码....... Stage.paint();//要求舞台重绘 }}} 另外一种设计模式是，只有一个时间线，每隔固定时间显示一祯，就是每隔一定时间舞台Stage步进一祯，步进的时候舞台上所有元件同时步进一次，任何元件要产生动画的时候，加入到这个时间主线中，跟着Stage步进而步进，这样的帧频是固定的，即使在不产生动画的情况下，Stage也是在不停地重绘着var Stage = {};Stage.players = {//...将小丑添加至舞台};Stage.step(){for(i in Stage.players){ Stage.players.step();//舞台上每个小丑步进}setTimeout(this.step,100);//舞台每隔一定时间步进}function Sprite(){this.step = function(){ //......步进}}
写了一个简单的控制小丑移动的程序
]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title></title></head><body><canvas id='canvas' width="800" height="800"></canvas><script type='text/javascript' src='jquery.js'></script><script type='text/javascript'>var kit = {};var FPS = 30;kit.imgArr = ["img/player.gif","img/bg.png"];kit.load = function(){this.img = [];for(i in this.imgArr){this.img = new Image();this.img.src = this.imgArr;}}kit.load();var ctx = document.getElementById("canvas").getContext("2d");var controller = {};//控制对象controller.stage = {};//舞台对象controller.stage.players = {//舞台上的小丑们 scen:new Scen(),player1:new Sprite()//一个小精灵}controller.stage.paint = function(){//绘制桢ctx.fillStyle = "#fff";//清除前桢ctx.fillRect(0,0,800,800);for(every in this.players){ this.players.paint();//小丑们添加动作到舞台}}controller.stage.endPaint = function(){ctx.fillStyle = "#fff";//清除前桢ctx.fillRect(0,0,800,800);for(every in this.players){ this.players.endPaint();//小丑们添加动作到舞台}}controller.walk = function(){//让精灵前进吧var that = this;clearInterval(kit.playerTime);function go(){ that.stage.players.player1.walk();//精灵自己走一步吧 that.stage.paint();//绘制此桢}kit.playerTime = setInterval(go,1000/FPS);}controller.back = function(){//让精灵后退吧var that = this;clearInterval(kit.playerTime);function back(){ that.stage.players.player1.back();//精灵自己走一步吧 that.stage.paint();//绘制此桢}kit.playerTime = setInterval(back,1000/FPS);}controller.jump = function(){var that = this;clearInterval(kit.playerTime);var count = 0;function jump(){ count++; that.stage.players.player1.jump(); that.stage.paint(); if(count < 50){ setTimeout(jump,1000/FPS); }}jump();}function Sprite(){//一个精灵类this.stageCount = 0;//记录精灵向舞台添加的次数this.nowDot = ;//精灵现在的坐标this.towards = 0;this.frame = [];this.frame = [ ];this.frame = [ , , ];this.frame = [ , , ];this.frame = [];var i = 0;this.walk = function(){//精灵向前走 this.nowDot++; this.towards = 1; this.stageCount++;}this.back = function(){//精灵向后走 this.nowDot--; this.towards = 2; this.stageCount++;}this.jump = function(){ this.nowDot--; this.stageCount++;}this.paint = function(){//精灵添加动作到舞台 var i = this.stageCount/4% this.frame.length; i = parseInt(i); var t = this.frame; ctx.drawImage(kit.img,t,t,t,t,this.nowDot,this.nowDot,t*2,t*2);}this.endPaint = function(){ i = 0; var t = this.frame; ctx.drawImage(kit.img,t,t,t,t,this.nowDot,this.nowDot,t*2,t*2);}}function Scen(){this.paint = function (){ ctx.drawImage(kit.img,0,0);}this.endPaint = this.paint;}var state = 0;$(document).keydown(function(e){ if(state > 0) return; if(e.keyCode == 37) { controller.back(); state ++; } if(e.keyCode == 39){ controller.walk(); state++; } if(e.keyCode == 38){ controller.jump(); state++; }});$(document).keyup(function(e){ state = 0; clearInterval(kit.playerTime); controller.stage.endPaint();});</script></body></html>
接着学习中……
页:
[1]