HTML5小游戏抓怪兽,应用Canvas等超多的HTML5技巧编写而成,下面来向大家汇报实现步骤:
1、创建游戏画布:
var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = 512; canvas.height = 480; document.body.appendChild(canvas);
我们需要做的第一件事是创建一个 canvas元素。我这样做的JavaScript,而不是HTML演示如何轻松完成。一旦我们拥有的元素,我们得到一个参考的情况下,设置它的尺寸,它附加到文档的身体。前端框架分享
2、包括图像:
var bgReady = false; var bgImage = new Image(); bgImage.onload = function () { bgReady = true; }; bgImage.src = "images/background.png";
我们加载一些图像。我想,以做这个尽可能简单,所以它是只是一个图像,而不是被包裹起来的一个很好的类或东西。 使用bgReady让画布知道,当它的安全来绘制它。
3、 游戏对象:
var hero = {//英雄 speed: 256, // 每秒256像素 x: 0, y: 0 }; var monster = {//怪兽 x: 0, y: 0 }; var monstersCaught = 0; //抓到了几个怪兽
4、 玩家输入:前端框架分享
// 处理键盘输入 var keysDown = {}; addEventListener("keydown", function (e) { keysDown[e.keyCode] = true; }, false); addEventListener("keyup", function (e) { delete keysDown[e.keyCode]; }, false);
5、 新游戏
//当怪兽被抓住时,需执行 Var reset = function () { hero.x = canvas.width / 2; hero.y = canvas.height / 2; // 使怪物出现在场景的某个地方(随机化) monster.x = 32 + (Math.random() * (canvas.width - 64)); monster.y = 32 + (Math.random() * (canvas.height - 64)); };
6、 更新对象:
var update = function (modifier) { if (38 in keysDown) { // 向上 hero.y -= hero.speed * modifier; } if (40 in keysDown) { // 向下 hero.y += hero.speed * modifier; } if (37 in keysDown) { // 向左 hero.x -= hero.speed * modifier; } if (39 in keysDown) { // hero.x += hero.speed * modifier; } // Are they touching? if ( hero.x <= (monster.x + 32) && monster.x <= (hero.x + 32) && hero.y <= (monster.y + 32) && monster.y <= (hero.y + 32) ) { ++monstersCaught; reset(); } };
7、 渲染对象:前端资源分享
var render = function () { if (bgReady) { ctx.drawImage(bgImage, 0, 0); } if (heroReady) { ctx.drawImage(heroImage, hero.x, hero.y); } if (monsterReady) { ctx.drawImage(monsterImage, monster.x, monster.y); } // Score ctx.fillStyle = "rgb(250, 250, 250)"; ctx.font = "24px Helvetica"; ctx.textAlign = "left"; ctx.textBaseline = "top"; ctx.fillText("Goblins caught: " + monstersCaught, 32, 32); };
8、 游戏主循环:
var main = function () { var now = Date.now(); var delta = now - then; update(delta / 1000); render(); then = now; };
9、 开始游戏:
reset(); var then = Date.now(); setInterval(main, 1);
相关推荐
JAVA打飞机游戏设计与实现(论文+源代码) JAVA打飞机游戏设计与实现(论文+源代码) JAVA打飞机游戏设计与实现(论文+源代码) JAVA打飞机游戏设计与实现(论文+源代码) JAVA打飞机游戏设计与实现(论文+源代码) JAVA打飞机...
JAVA泡泡堂网络游戏的设计与实现(源代码+论文) JAVA泡泡堂网络游戏的设计与实现(源代码+论文) JAVA泡泡堂网络游戏的设计与实现(源代码+论文) JAVA泡泡堂网络游戏的设计与实现(源代码+论文) JAVA泡泡堂网络游戏的设计...
JAVA五子棋手机网络对战游戏的设计与实现(源代码+论文) JAVA五子棋手机网络对战游戏的设计与实现(源代码+论文) JAVA五子棋手机网络对战游戏的设计与实现(源代码+论文) JAVA五子棋手机网络对战游戏的设计与实现(源...
基于Java ME无线网络移动端的俄罗斯方块游戏的实现(源代码+论文)基于Java ME无线网络移动端的俄罗斯方块游戏的实现(源代码+论文)基于Java ME无线网络移动端的俄罗斯方块游戏的实现(源代码+论文)基于Java ME无线网络...
JAVA物业管理系统设计与实现(论文+源代码) JAVA物业管理系统设计与实现(论文+源代码) JAVA物业管理系统设计与实现(论文+源代码) JAVA物业管理系统设计与实现(论文+源代码) JAVA物业管理系统设计与实现(论文+源代码) ...
canvas 做游戏还是比较有趣的,另外还可以把这个游戏加以扩展,改成手机版,画布尺寸通过获取屏幕宽高确定,键盘部分改成触摸事件(touchstart、touchmove、touchend),怪兽出现方式也可以改成从屏幕顶端随机下落,...
JAVA语言考试系统的设计与实现(论文+源代码+文献综述+外文翻译+开题报告) JAVA语言考试系统的设计与实现(论文+源代码+文献综述+外文翻译+开题报告) JAVA语言考试系统的设计与实现(论文+源代码+文献综述+外文翻译+...
JAVA网上拍卖系统的设计与实现(源代码+论文) JAVA网上拍卖系统的设计与实现(源代码+论文) JAVA网上拍卖系统的设计与实现(源代码+论文) JAVA网上拍卖系统的设计与实现(源代码+论文) JAVA网上拍卖系统的设计与实现(源...
JAVA3D的网络三维技术的设计与实现(源代码+论文+说明) JAVA3D的网络三维技术的设计与实现(源代码+论文+说明) JAVA3D的网络三维技术的设计与实现(源代码+论文+说明) JAVA3D的网络三维技术的设计与实现(源代码+论文+...
JAVA局域网飞鸽传书软件设计与实现(源代码+论文) JAVA局域网飞鸽传书软件设计与实现(源代码+论文) JAVA局域网飞鸽传书软件设计与实现(源代码+论文) JAVA局域网飞鸽传书软件设计与实现(源代码+论文) JAVA局域网飞鸽传...
基于JAVA CS远程监控系统软件的实现(源代码+论文) 基于JAVA CS远程监控系统软件的实现(源代码+论文) 基于JAVA CS远程监控系统软件的实现(源代码+论文) 基于JAVA CS远程监控系统软件的实现(源代码+论文) 基于JAVA CS...
基于Java的在线购物系统的设计与实现(源代码+系统)基于Java的在线购物系统的设计与实现(源代码+系统)基于Java的在线购物系统的设计与实现(源代码+系统)基于Java的在线购物系统的设计与实现(源代码+系统)基于...
JAVA音像店租赁管理系统的设计与实现(源代码+论文) JAVA音像店租赁管理系统的设计与实现(源代码+论文) JAVA音像店租赁管理系统的设计与实现(源代码+论文) JAVA音像店租赁管理系统的设计与实现(源代码+论文) JAVA音像...
基于Java的在线购物系统的设计与实现(源代码+论文) 基于Java的在线购物系统的设计与实现(源代码+论文) 基于Java的在线购物系统的设计与实现(源代码+论文) 基于Java的在线购物系统的设计与实现(源代码+论文) 基于Java...
基于Misty1算法的加密软件(JAVA)的实现(源代码+论文) 基于Misty1算法的加密软件(JAVA)的实现(源代码+论文) 基于Misty1算法的加密软件(JAVA)的实现(源代码+论文) 基于Misty1算法的加密软件(JAVA)的实现(源代码+论文) ...
基于Java的两个通用安全模块的设计与实现(源代码+论文) 基于Java的两个通用安全模块的设计与实现(源代码+论文) 基于Java的两个通用安全模块的设计与实现(源代码+论文) 基于Java的两个通用安全模块的设计与实现(源...