HTML 5 超级玛丽小游戏源代码

时间:2014-04-18 03:26:16
【文件属性】:

文件名称:HTML 5 超级玛丽小游戏源代码

文件大小:105KB

文件格式:ZIP

更新时间:2014-04-18 03:26:16

HTML5 游戏代码

绝对不可错过的HTML5 最新技术,本人多年的WEB 开发,现提供HTML 5超级玛丽小游戏的 开发 ,代码里有很详细的注释。愿以大家分享,绝对不会让每位爱好者失望。物有所值,所以别怪分数高。 // 创建canvas,并初始化 (我们也可以直接以标签形式写在页面中,然后通过id等方式取得canvas) var canvas=document.createElement("canvas"); canvas.width=600; canvas.height=400; document.body.appendChild(canvas); // 取得2d绘图上下文 var context= canvas.getContext("2d"); // 加载图片,加载后在context上进行绘制. (图片是异步加载,所以在onload事件里进行绘制) var image = new Image(); image.src = "../res/bg.png"; image.onload=function(event){ var loadedImg=event.target; // 将加载后的图片,绘制在画布坐标[dx,dy]处,也就是图片的左上角坐标为[dx,dy] var dx=10, dy=10 ; context.drawImage(loadedImg,dx,dy); };


【文件预览】:
step-by-step
----step8()
--------step8-1.html(2KB)
--------enemy.js(977B)
--------Base.js(828B)
--------Game.js(3KB)
--------player.js(3KB)
--------Animation.js(2KB)
--------Sprite.js(2KB)
----step3()
--------step3-2.html(5KB)
--------step3-1.html(4KB)
----step4()
--------Base.js(585B)
--------step4-1.html(3KB)
--------Animation.js(2KB)
--------Sprite.js(2KB)
----step7()
--------enemy.js(973B)
--------Base.js(828B)
--------Game.js(3KB)
--------step7-1.html(2KB)
--------player.js(3KB)
--------Animation.js(2KB)
--------Sprite.js(2KB)
----step1()
--------step1-1.html(1KB)
--------step1-2.html(2KB)
----step2()
--------step2-1.html(3KB)
----step6()
--------Base.js(828B)
--------Game.js(2KB)
--------step6-1.html(4KB)
--------Animation.js(2KB)
--------Sprite.js(2KB)
----step5()
--------Base.js(631B)
--------Animation.js(2KB)
--------step5-1.html(5KB)
--------Sprite.js(2KB)
----res()
--------bg.png(51KB)
--------enemy.png(5KB)
--------player.png(10KB)

网友评论

  • 感觉比较简洁,对于正在学习的我帮助很大,适合基础者学习借鉴。
  • 一般般啊,感觉内容太少
  • 没有跟用户的交互,都没实际操作成功,无非就是一步一步的 对于菜鸟来说并不是什么比较好的资源 还10分………………唉
  • 用了10个积分下载了这个,感觉和超级玛丽还是有些出入,不过确实学到了好多,让朋友羡慕了一把!
  • 教程做得很详细,比较适合初学者学习HTML5使用。游戏整体来说与超极玛丽差距有点大,但是很好的实现了HTML5的画布功能。高手可以绕道了!
  • 源码还是不错的,但是感觉和超级玛丽出入有点大
  • 只有一个页面,不过是一步一步写的代码
  • 一般般吧!我是看不懂的
  • 还不错,对初学者挺有用的
  • 一般般,比较简单。有点贵
  • 正在学习html5,这个不错
  • 一个界面一个界面的DEMO,和用户的交互也没有,居然还要十分,我勒个去,无非是一堆的JavaScript而已。。。。 打了一个有史以来的最低分一分。。。
  • 注释很详细,对我这样的初学者很有帮助
  • 太简单了吧,用处不大
  • 仅仅适合初学者,比较简单
  • 代码很有帮助
  • 做的还行,适合初学者滴
  • 这个好像不能跳啊,似乎光是一个界面的DEMO吧?
  • 注释很详细,适合htm5初学者或者对前端开发感兴趣的朋友研究研究。
  • 注释很多...有助于初学者
  • 是大城小胖的代码吧, 也没注明一下出处