记录下开放过程。做小游戏开发,又要跨平台,flash又不支持iPhone,html5是最好的选择。

先看看最后效果:

好了,开始demo。

1.准备工作:

 图片素材(省略...最后代码一起打包)

了解 HTML5 Canvas API

2.开工:

 首先创建Canvas

 <div style=" background-image:url(sudoku-bg.png); width:590px; height:632px; position:relative">
<canvas id="CanvasCup" width="540" height="500"></canvas>
</div>

ok,简单明了,现在要搞清楚的是摆放9张图片到Canvas,计算下x,y坐标,下面我定义一个数组

    var bgImg=[];
bgImg[0]=[20,0];
bgImg[1]=[190,0];
bgImg[2]=[360,0];
bgImg[3]=[20,170];
bgImg[4]=[190,170];
bgImg[5]=[360,170];
bgImg[6]=[20,340];
bgImg[7]=[190,340];
bgImg[8]=[360,340];

要画在Canvas上面,直接循环下即可,首先定义下 Canvas对象,Image对象,初始化Image对象高,宽

var imageWidth = 150;  var imageheight = 150;,然后调用HTML5 Canvas API 去绘画

var canvas =document.getElementById("CanvasCup");
var context2D = canvas.getContext("2d");
var pic = new Image();
pic.src = "bg.png"; //注意目录结构,这里是把图片和html放在一个目录
for(var i =0;i<9;i++){
pic.onload = function(){
context2D.drawImage(pic,bgImg[i][0], bgImg[i][1],imageWidth,imageheight);
}
}

好了,现在就可以看到9张图片摆放的整整齐齐。

接下来的动作就是动画效果,从第1~9张图片 一张一张 向中间移动,既然要向中间移动的话就要知道中间的坐标位置,就是bgImg[4]=[190,170];第一张坐标是bgImg[1]=[20,0] ,相当于是从20移动到190,0移动到170,移动的时候按Speed计算,这里我把速度初始化为 Speed = 1,fps = 1000的话 ,那么1毫秒x移动1个单位,y移动1个单位。第二的时候 x坐标等于190,y坐标0,相对中心点而言,只需移动y坐标即可,以此类推。最后去维护一个setInterval函数

 function draw(){
if( iy+Speed == CenterPint[1] || ix + Speed == CenterPint[0] || ix == CenterPint[0] && iy == CenterPint[1] ){
if(t<9){t++; ix = bgImg[t][0]; iy = bgImg[t][1];}
}
if(ix != CenterPint[0]){
CenterPint[0]-ix > 0 ? ix = ix + Speed : ix = ix - Speed;

if(iy != CenterPint[1]){
CenterPint[1]-iy > 0 ? iy = iy + Speed : iy = iy - Speed;
} context2D.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));
if( t >= 4) {context2D.drawImage(pic,bgImg[4][0], bgImg[4][1],imageWidth,imageheight);};
for(var i =0;i<9;i++){
if( t < i ){
context2D.drawImage(pic,bgImg[i][0], bgImg[i][1],imageWidth,imageheight);
}
}
context2D.save();//保存画笔状态
context2D.translate(ix ,iy);
context2D.drawImage(pic,0, 0,imageWidth,imageheight);
context2D.restore();//绘制结束以后,恢复画笔状态 }interval = setInterval(draw, 1000/fps);

这样就可以实现动画效果了。(截图的时候正在移动.....)

最终都会移动到中心点集合。现在又要返回去移动到原来的9个点的坐标,就是从中心点向外移动。原理与正方向移动一样,这里还需要维护一个正方向和反方向的bool,反方向时候的第一次初始化x,y, 这里我重新改造下draw函数,增加反方向到最后一个的时候 增加点击事件

 var direction = true; //true正面转动,false 反面转动  stop(); return;
var bool = true; //维护反方向 x坐标 第一次初始化赋值
var booly = true; //维护反方向 y坐标 第一次初始化赋值
function draw(){
if(t > 8){ direction=false;t--;ix = bgImg[t][0]; iy = bgImg[t][1];}
if(t < 0){ direction=true; t++; stop(); boxclick(canvas,context2D); return;}//点击事件
if(direction){
if( iy+Speed == CenterPint[1] || ix + Speed == CenterPint[0] || ix == CenterPint[0] && iy == CenterPint[1] ){
if(t<9){t++; ix = bgImg[t][0]; iy = bgImg[t][1];}
}
}
else{
if(iy+Speed == bgImg[t][1] || ix+Speed == bgImg[t][0] || ix == CenterPint[0] && iy == CenterPint[1])
if(t>=0){t--; ix = bgImg[t][0];iy = bgImg[t][1]; bool=true; booly=true;}
}
if(ix != CenterPint[0]){
if(direction){CenterPint[0]-ix > 0 ? ix = ix + Speed : ix = ix - Speed;}
else{
if(CenterPint[0]-ix < 0){
if(bool){
bool =false;
ix = CenterPint[0];
}
ix = ix+ Speed;
}
else { if(bool){
bool =false;ix = CenterPint[0];
}
ix = ix- Speed;}
}
}
if(iy != CenterPint[1]){
if(direction){
CenterPint[1]-iy > 0 ? iy = iy + Speed : iy = iy - Speed;}
else{
if(CenterPint[1]-iy < 0){
if(booly){
booly =false;
iy = CenterPint[1];
}
iy = iy+ Speed;
}
else { if(booly){
booly =false;iy = CenterPint[1];
}
iy = iy - Speed;
}
}
}
context2D.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));
if( t >= 4) {context2D.drawImage(pic,bgImg[4][0], bgImg[4][1],imageWidth,imageheight);};
for(var i =0;i<9;i++){
if( t < i ){
context2D.drawImage(pic,bgImg[i][0], bgImg[i][1],imageWidth,imageheight);
}
}
context2D.save();//保存画笔状态
context2D.translate(ix ,iy);
context2D.drawImage(pic,0, 0,imageWidth,imageheight);
context2D.restore();//绘制结束以后,恢复画笔状态
}
interval = setInterval(draw, 1000/fps);

下面是点击事件函数,当点击的时候获取到点击的坐标,然后去判断坐标区域在9个坐标的哪个坐标范围内,再进行图片替换。我这里是demo就直接图片替换了,做成抽奖的话,还需要通过后台概率,然后返回前端去显示对应的图片。

 function boxclick(canvas,context2D){
canvas.onclick = function(e) {
var canvasOffset = $(canvas).offset();
var canvasX = Math.floor(e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top);
//console.log("x:"+canvasX +" y:"+canvasY);
var p = new Image();
p.src = "get-2.png"; //注意目录结构,这里是把图片和html放在一个目录的
lottery(canvasX,canvasY,context2D,p);
}
}
function lottery(x,y,context2D,p){
//alert("x:"+x+"y:"+y);
for(var i =0;i<9;i++){
var w = bgImg[i][0] + imageWidth;
var h = bgImg[i][1] + imageheight; if(bgImg[i][0] <=x && x <= w && bgImg[i][1]<=y && y<=h)
{
console.log("p:"+i);
var pWidth = bgImg[i][0];
var pHeight = bgImg[i][1];
p.onload = function(){
context2D.drawImage(p,pWidth,pHeight,imageWidth,imageheight);
}
}
}
}
function stop(){
clearInterval(interval);
}

请各位大牛们指点,小弟在此由衷的感谢。

附件:源代码 下载

菜鸟做HTML5小游戏 - 翻翻乐的更多相关文章

  1. 菜鸟做HTML5小游戏 - 刮刮乐

    继上篇翻翻乐之后,又来刮刮乐.还是先上效果图: 开始demo的世界: 1.css去绘制界面效果.(源码提供) 2.原理:要实现刮刮卡内容的出现,我用div做了背景层去显示刮出的内容结果[重点].中间C ...

  2. 使用PixiJS做一个小游戏

    PixiJS PixiJS使用WebGL,是一个超快的HTML5 2D渲染引擎.作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的.轻量级而且是兼任所有设备的2D库. 官方 ...

  3. 推荐10款超级有趣的HTML5小游戏

    HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...

  4. HTML5小游戏UI美化版

    HTML5小游戏[是男人就下一百层]UI美化版 之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍 ...

  5. 通通制作Html5小游戏——第二弹(仿flappy bird像素鸟)

    亲爱的博友们,我又回来啦~因为我们技术宅的思想只有技术宅懂得,好不容易写了点好玩的东西发QQ空间,结果只有11的UV,0回复....10分钟ps一个女神的素描效果发QQ空间朋友圈,一大堆回复加赞,作为 ...

  6. Html5 小游戏 俄罗斯方块

    导言 在一个风和日丽的一天,看完了疯狂HTML 5+CSS 3+JavaScript讲义,跟着做了书里最后一章的俄罗斯方块小游戏,并做了一些改进,作为自己前端学习的第一站. 游戏效果: 制作思路 因为 ...

  7. HTML5小游戏源码收藏

    html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...

  8. 原生js做h5小游戏之打砖块

    前言 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语 ...

  9. HTML5小游戏之见缝插针

    今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 简洁大气 黑白搭配游戏画面非常的简洁,米白色的背景中央,放置着一个不断旋转的太阳状的球体, ...

随机推荐

  1. 推荐IOS开发3个工具:Homebrew、TestFight、Crashlytics-备

    1. Homebrew 什么是Homebrew? Homebrew is the easiest and most flexible way to install the UNIX tools App ...

  2. 被墙的情况(同时下载AndroidSDK达到200+kb/s)

    相信大家都遇到过google搜索被墙掉的情况吧:现在用修改Hosts的方法来解决哈 linux下: sudo gedit /etc/hosts win7下: 到目录C:\Windows\System3 ...

  3. 俄罗斯方块:Python实现

    网上搜到一个Pygame写的俄罗斯方块(tetris),大部分看懂的前提下增加了注释,Fedora19下运行OK的 主程序: #coding:utf8 #! /usr/bin/env python # ...

  4. 从windows server 2003中学到的事儿

    2003让我学会了几件事儿, 第一.自己会装系统了. 第二.知道很多选项是可以自己进行设置的.这点很重要,本来xp用得很习惯,然后很多都理所当然得认为,就应该是那个样子,可是,并不是的. 在2003不 ...

  5. 探讨c#中的unchecked是什么意思,起什么作用?

    Checked与Unchecked     对于因为整数类型参与算术操作和类型转换时产生的“溢出异常”——System.OverflowException,在某些算法来讲不算真正的“异常”,相反这种溢 ...

  6. Android新浪微博客户端(一)——主框架搭建

    原文出自:方杰| http://fangjie.info/?p=62 转载请注明出处 提前声明的是,我是按照Ivan的这套教程学下来的. 首先,对于任何应用我们都需要建立一套消息处理机制,就是当用户在 ...

  7. hdu2444The Accomodation of Students

    思路: 二分图判断+最大匹配模板 二分图判断的方法很好想,没有离散的基础凭空给你个图让你判断也很容易想到染色法,简单的介绍下就是用queue来做,标记一个点为x则他所有的邻点都为x',然后递归的执行下 ...

  8. Hadoop分布式文件系统HDFS详解

    Hadoop分布式文件系统即Hadoop Distributed FileSystem.        当数据集的大小超过一台独立的物理计算机的存储能力时,就有必要对它进行分区(Partition)并 ...

  9. ubuntu下,thinkphp验证码不能用

    首先安装gd库 使用apt-get方式为Ubuntu安装PHP+MYSQL+Apache 默认是没有GD库的 1.安装gd库 命令:sudo apt-get install php5-gd 2.给权限 ...

  10. Css轮廓

    css code: p{ outline-width:2px; outline-color:aqua; outline-style: groove; }