酷勤网 C 程序员的那点事！
当前位置： >
浏览次数：次
你是不是曾经也有自己做一个游戏的冲动呢？是不是因为事情太多，手头没空或者没有做过游戏的基础而屡屡放弃了呢？现在HTML5正如火如荼，让我们一起使用HTML5中的新功能做一个小游戏玩玩吧。
先来看看效果：
在线演示地址：
源代码GitHub：
麻雀虽小，五脏俱全。先来说一下这个小游戏有的内容：
一个开始画面，写了游戏的名字和一个开始按钮。
游戏的主体内容，一个可以自己控制的小汽车，还有很多打酱油的汽车，另外还有马路及马路旁边的龙套树木和自行车道&
一个结束游戏的画面。
好了这就是全部游戏的内容。游戏的玩法很简单，相信大家应该都玩过，就是一辆汽车在马路上跑，你要尽量躲避开其他汽车，不与他们相撞，否则游戏结束，游戏会以你跑过的旅程计算分数。
主要用的技术是HTML5中的画布元素Canvas和JavaScript。主要要做的工作就是实现Canvas的tween动画，一些简单的矢量，速度，位移等效果的处理。另外还有一些Sprint动画的处理。
具体的实现过程会在以后的文章中详细讲解。
目前本人正在进一步完善这个简单的JavaScript游戏引擎，以便使用这个游戏引擎实现一个SRPG游戏。新的游戏正在开发当中，如果您对此感兴趣欢迎联系我：
& 相关主题：
本文来源：查看: 870|回复: 17
介绍一个简单的HTML5的小游戏——打地鼠
今天介绍一个打地鼠的小游戏，体验一下HTML5上的游戏开发。本着高精尖的分享精神，特分享出来。没有花时间去找更多的素材，欢迎大家批评指正，也欢迎大家能把这个小游戏做的更完善些。
　　 废话不说了，大家先看看效果吧：
5bccbab1d85a4.jpg (104.97 KB, 下载次数: 16)
16:03 上传
html文件：
&font size=&3& face=&微软雅黑& color=&#2f4f4f&&&body onload=&init()&&
& && &&&&div class=&container&&
& & & onmouseover=&hideCursor(this)& onmouseout=&showCursor&
& & onmousemove=&hammerMove(this);&
& & onmousedown=&hammerDown();& onmouseUp=&hammerUp();&
& & id=&screen& width=&700& height=&500& style=&border:1px solid #000&&&/canvas&
& && &&&&/div&
& && && &
& && &&&&div id=&info&&&/div&
& & &/body&&/font&复制代码
1、场景初始化代码：
&font size=&3& face=&微软雅黑& color=&#2f4f4f&& //初始化
function init(){
& & info = document.getElementById('info');
& & canvas = document.getElementById('screen');
& & ctx = canvas.getContext('2d');
& &&&
& & bg = new Image();
& & bg.src = 'bg.jpg';
& & bg.onload = function(){};
& &&&
& &&&
& & var hamImg = new Image();
& & hamImg.src = 'hammer.png';
& & hamImg.onload = function(){
& && &&&hammer = new HammerSprite(48, 48, 100, 100, hamImg);
& & }
& &&&
& & var msImg = new Image();
& & msImg.src = 'mouse.gif';
& &&&
& & msImg.onload = function(){
& && &&&for(i=0;i&3;i++){
& && && && &var arr = [];
& && && && &for(j=0; j&3; j++){
& && && && && & var s = new Sprite(60, 70, 50+240*i, 80+120*j, 'hide', msImg);
& && && && && & arr[j] =
& && && && &}
& && && && &sprites[i] =
& && &&&}& && &
& & }
& &&&
& & var holeImg = new Image();
& & holeImg.src = 'hole.png';
& & holeImg.onload = function(){
& && &&&for(i=0;i&3;i++){
& && && && &var arr = [];
& && && && &for(j=0; j&3; j++){
& && && && && & var s = new HoleSprite(80, 30, 40+240*i, 140+120*j, 'show', holeImg);
& && && && && & arr[j] =
& && && && &}
& && && && &holes[i] =
& && &&&}& && &
& & }
& &&&
& & (drawScreen, 30);
& & setInterval(updateLogic, 3000);
& &&&
};&/font&复制代码2、精灵初始化：
&font size=&3& face=&微软雅黑& color=&#2f4f4f&&
var Sprite = function(w, h, x, y, state, image){
& & var self =
& & this.w =
& & this.h =
& & this.x =
& & this.y =
& & this.image =
& & this.state =
& &&&
& & this.draw = function(){
& && &&&if(this.state == 'show'){
& && && && &ctx.drawImage(this.image, this.x, this.y, this.w, this.h);
& && && && &(function(){
& && && && && & self.state = 'hide';
& && && && &},3000);
& && &&&}
& & }
}&/font&复制代码3、洞穴初始化：
&font size=&3& face=&微软雅黑& color=&#2f4f4f&&var HoleSprite = function(w, h, x, y, state, image){
& & var self =
& & this.w =
& & this.h =
& & this.x =
& & this.y =
& & this.image =
& & this.state =
& &&&
& & this.draw = function(){
& && &&&if(this.state == 'show'){
& && && && &ctx.drawImage(this.image, this.x, this.y, this.w, this.h);
& && &&&}
& & }
}&/font&复制代码4、锤子初始化：
&font size=&3& face=&微软雅黑& color=&#2f4f4f&&function HammerSprite(w, h, x, y, image){
& & HammerSprite.prototype.w =
& & HammerSprite.prototype.h =
& & HammerSprite.prototype.x =
& & HammerSprite.prototype.y =
& &&&
& & HammerSprite.prototype.draw = function(isPress){
& && &&&if(isPress){
& && && && &ctx.save();
& && && && &
& && && && &ctx.translate(this.x-10, this.y+34);
& && && && &ctx.rotate(Math.PI/180*330);
& && && && &ctx.drawImage(image, 0, 0, w, h);
& && && && &
& && && && &ctx.restore();
& && &&&}else{
& && && && &ctx.drawImage(image, this.x, this.y, w, h);
& && &&&}
& && && &
& & }
}
&/font&复制代码5、绘制得分：
&font size=&3& face=&微软雅黑& color=&#2f4f4f&&ctx.font = &40px serif&
& & ctx.strokeStyle = &#fff&;
& & ctx.strokeText (&打地鼠&, 50,50);
& & ctx.fillStyle = &#fff&;
& & ctx.fillText(&打地鼠&,50,50);
& & ctx.fillStyle = &#fff&;
& & ctx.fillText(&你的得分:&+score,450,50);
& & for(i=0;i&3;i++){
& && &&&for(j=0; j&3; j++){
& && && && &holes[i][j].draw();
& && &&&}
& & }&/font&复制代码游客，如果您要查看本帖隐藏内容请
休息休息惺惺惜惺惺想寻
不错，新手报道，谢谢分享
学习了，谢谢分享~~~~~~
是用什么软件开发的啊
感謝謝大大熱心教學
我要看看行不
aaaaaaaaaaaaa
网站推荐 /1
从即日起关注蚂蚁社区官方微信，奖励30蚂蚁币，每月我们会随机抽取3名关注者，奖励月度VIP会员（1000蚂蚁币）。
邮箱: QQ: 木子牛HTML5工作室 版权所有
Powered by X3.2(教你用 HTML5 制作Flappy Bird（上） - 文章 - 伯乐在线
& 教你用 HTML5 制作Flappy Bird（上）
大概在两个月前，我给自己定了一个目标：每周在制作一个HTML5新游戏。截至目前，我已经有了9款游戏。现在很多人希望我能写一下如何制作这些游戏，在这篇文章中，让我们来一起用HTML5制作Flappy Bird。
Flappy Bird是一款非常优秀且容易上手的游戏，可以作为一个很好的HTML5游戏的教程。在这片教程中，我们使用Phaser框架写一个只有65行js代码的简化版Flappy Bird。
点击可以先体验一下我们即将要制作的游戏。
提示1：你得会JavaScript
提示2：想学习更多关于Phaser框架的知识可以看这篇文章（最近工作忙，稍后翻译）
先下载我为教程制作的,里面包括:
phaser.min.js, 简化了的Phaser框架v1.1.5
index.html, 用来展示游戏的文件
main.js, 我们写代码的地方
asset/, 用来保存小鸟和管子的图片的文件夹（bird.png和pipe.png）
用浏览器打开index.html，用文本编辑器打开main.js
在main.js中可以看到我们之前提到的Phaser工程的基本结构
// Initialize Phaser, and creates a 400x490px game
var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');
// Creates a new 'main' state that will contain the game
var main_state = {
preload: function() {
// Function called first to load all the assets
create: function() {
// Fuction called after 'preload' to setup the game
update: function() {
// Function called 60 times per second
// Add and start the 'main' state to start the game
game.state.add('main', main_state);
game.state.start('main');
12345678910111213141516171819202122
// Initialize Phaser, and creates a 400x490px gamevar game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');&// Creates a new 'main' state that will contain the gamevar main_state = {&&&&&preload: function() { &&&&&&&&// Function called first to load all the assets&&&&},&&&&&create: function() { &&&&&&&&// Fuction called after 'preload' to setup the game&&&&&&&&},&&&&&update: function() {&&&&&&&&// Function called 60 times per second&&&&},};&// Add and start the 'main' state to start the gamegame.state.add('main', main_state);&&game.state.start('main');
接下来我们一次完成preload(),create()和update()方法，并增加一些新的方法。
小鸟的制作
我们先来看如何添加一个用空格键来控制的小鸟。
首先我们来更新preload(),create()和update()方法。
preload: function() {
// Change the background color of the game
this.game.stage.backgroundColor = '#71c5cf';
// Load the bird sprite
this.game.load.image('bird', 'assets/bird.png');
create: function() {
// Display the bird on the screen
this.bird = this.game.add.sprite(100, 245, 'bird');
// Add gravity to the bird to make it fall
this.bird.body.gravity.y = 1000;
// Call the 'jump' function when the spacekey is hit
var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
space_key.onDown.add(this.jump, this);
update: function() {
// If the bird is out of the world (too high or too low), call the 'restart_game' function
if (this.bird.inWorld == false)
this.restart_game();
12345678910111213141516171819202122232425
preload: function() {&&&&&&// Change the background color of the game&&&&this.game.stage.backgroundColor = '#71c5cf';&&&&&// Load the bird sprite&&&&this.game.load.image('bird', 'assets/bird.png'); },&create: function() {&&&&&&// Display the bird on the screen&&&&this.bird = this.game.add.sprite(100, 245, 'bird');&&&&&// Add gravity to the bird to make it fall&&&&this.bird.body.gravity.y = 1000;&&&&&&&// Call the 'jump' function when the spacekey is hit&&&&var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);&&&&space_key.onDown.add(this.jump, this);&&&& },&update: function() {&&&&&&// If the bird is out of the world (too high or too low), call the 'restart_game' function&&&&if (this.bird.inWorld == false)&&&&&&&&this.restart_game();},
在这三个方法下面，我们再添加两个新的方法。
// Make the bird jump
jump: function() {
// Add a vertical velocity to the bird
this.bird.body.velocity.y = -350;
// Restart the game
restart_game: function() {
// Start the 'main' state, which restarts the game
this.game.state.start('main');
1234567891011
// Make the bird jump jump: function() {&&&&&&// Add a vertical velocity to the bird&&&&this.bird.body.velocity.y = -350;},&// Restart the gamerestart_game: function() {&&&&&&// Start the 'main' state, which restarts the game&&&&this.game.state.start('main');},
保存main.js并刷新index.html后你就可以得到一个用空格键来控制的小鸟了。
管子的制作
在preload()中添加管子的载入
this.game.load.image('pipe', 'assets/pipe.png');
this.game.load.image('pipe', 'assets/pipe.png');
然后再在create()中添加画一组管子的方法。因为我们在游戏中要用到许多管子，所以我们先做一个包含20段管子的组。
this.pipes = game.add.group();
this.pipes.createMultiple(20, 'pipe');
this.pipes = game.add.group();&&this.pipes.createMultiple(20, 'pipe');
现在我们需要一个新的方法来把管子添加到游戏中，默认情况下，所有的管子都没有被激活也没有显示。我们选一个管子激活他并显示他，保证他在不在显示的情况下移除他的激活状态，这样我们就有用不尽的管子了。
add_one_pipe: function(x, y) {
// Get the first dead pipe of our group
var pipe = this.pipes.getFirstDead();
// Set the new position of the pipe
pipe.reset(x, y);
// Add velocity to the pipe to make it move left
pipe.body.velocity.x = -200;
// Kill the pipe when it's no longer visible
pipe.outOfBoundsKill =
12345678910111213
add_one_pipe: function(x, y) {&&&&&&// Get the first dead pipe of our group&&&&var pipe = this.pipes.getFirstDead();&&&&&// Set the new position of the pipe&&&&pipe.reset(x, y);&&&&&// Add velocity to the pipe to make it move left&&&&pipe.body.velocity.x = -200; &&&&&// Kill the pipe when it's no longer visible &&&&pipe.outOfBoundsKill = true;},
之前的方法只显示了一段管子，但是我们在一条垂直的线上要显示6段，并保证中间有一个能让小鸟通过的缺口。下面的方法实现了此功能。
add_row_of_pipes: function() {
var hole = Math.floor(Math.random()*5)+1;
for (var i = 0; i & 8; i++)
if (i != hole && i != hole +1)
this.add_one_pipe(400, i*60+10);
add_row_of_pipes: function() {&&&&&&var hole = Math.floor(Math.random()*5)+1;&&&&&for (var i = 0; i & 8; i++)&&&&&&&&if (i != hole && i != hole +1) &&&&&&&&&&&&this.add_one_pipe(400, i*60+10);&& },
我们需要每1.5秒调用一次add_row_of_pipes()方法来实现管子的添加。为了达到这个目的，我们在create()方法中添加一个计时器。
this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);
this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);
最后在restart_game()方法的最前面添加下面这行代码来实现游戏重新开始时停止计时器。
this.game.time.events.remove(this.timer);
this.game.time.events.remove(this.timer);
现在可以测试一下了，已经有点儿游戏的样子了。
实现得分和碰撞
最后一步我们来实现得分和碰撞，这很简单。
在create()中添加下面的代码来实现分数的显示。
this.score = 0;
var style = { font: "30px Arial", fill: "#ffffff" };
this.label_score = this.game.add.text(20, 20, "0", style);
this.score = 0;&&var style = { font: "30px Arial", fill: "#ffffff" };&&this.label_score = this.game.add.text(20, 20, "0", style);
下面的代码放入add_row_of_pipes()用来实现分数的增加。
this.score += 1;
this.label_score.content = this.
this.score += 1;&&this.label_score.content = this.score;
下面的代码放入update()方法来实现每次碰到管子时调用restart_game()。
this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);
this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);
大功告成！恭喜你获得了一个Flappy bird的HTML5版。点击获得全部资源。
游戏的功能已实现，但实在是太简陋了。下面的教程我们来添加音效、动画、菜单等。
原文作者twitter:@lessmilk
关于作者：
可能感兴趣的话题
虽然简单，但基本效果都达到了。
没有接触过js有些那一块，但比较有兴趣。
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线}