html5 canvas 英雄打怪小游戏
2014-04-18 09:08
423 查看
具体参考:
http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/
http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/
// Create the canvas var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = 512; canvas.height = 480; document.body.appendChild(canvas); // Background image var bgReady = false; var bgImage = new Image(); bgImage.onload = function () { bgReady = true; }; bgImage.src = "images/background.png"; // Hero image var heroReady = false; var heroImage = new Image(); heroImage.onload = function () { heroReady = true; }; heroImage.src = "images/hero.png"; // Monster image var monsterReady = false; var monsterImage = new Image(); monsterImage.onload = function () { monsterReady = true; }; monsterImage.src = "images/monster.png"; // Game objects var hero = { speed: 256 // movement in pixels per second }; var monster = { speed: 128 // we let monster go. }; var monstersCaught = 0; // Handle keyboard controls var keysDown = {}; addEventListener("keydown", function (e) { keysDown[e.keyCode] = true; }, false); addEventListener("keyup", function (e) { delete keysDown[e.keyCode]; }, false); // Reset the game when the player catches a monster var reset = function () { hero.x = canvas.width / 2; hero.y = canvas.height / 2; // Throw the monster somewhere on the screen randomly monster.x = 32 + (Math.random() * (canvas.width - 64)); monster.y = 32 + (Math.random() * (canvas.height - 64)); }; var flagx = 1; var flagy = 1; // Update game objects var update = function (modifier) { if (38 in keysDown) { // Player holding up hero.y -= hero.speed * modifier; } if (40 in keysDown) { // Player holding down hero.y += hero.speed * modifier; } if (37 in keysDown) { // Player holding left hero.x -= hero.speed * modifier; } if (39 in keysDown) { // Player holding right hero.x += hero.speed * modifier; } //Here we let the monster go if(monster.x <= 0){ flagx = 1; }else if(monster.x >= canvas.width){ flagx = -1; } if(monster.y <= 0){ flagy = 1; }else if(monster.y >= canvas.height){ flagy = -1; } monster.x = monster.x + monster.speed * modifier * flagx; monster.y = monster.y + monster.speed * modifier * flagy; // 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(); } }; // Draw everything 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); }; // The main game loop var main = function () { var now = Date.now(); var delta = now - then; update(delta / 1000); render(); then = now; }; // Let's play this game! reset(); var then = Date.now(); setInterval(main, 1); // Execute as fast as possible
相关文章推荐
- html5 canvas 实现简易马祖小游戏
- 用html5 Canvas制作一个简单的游戏 英雄抓小怪物(中)
- html5 贪吃蛇canvas小游戏
- 网页HTML5--飞机大战小游戏开发--canvas的应用
- HTML5 Canvas 射击类小游戏 平滑的移动 思路
- [原] html5 canvas 贪吃蛇小游戏~~
- HTML5 canvas 小游戏练手
- 利用HTML5 <canvas>实现2048小游戏
- 如何开发一个简单的HTML5 Canvas 小游戏
- 如何开发一个简单的HTML5 Canvas 小游戏
- 用html5 Canvas制作一个简单的游戏 英雄抓小怪物(上)
- JQuery&HTML5--Canvas 之 相册
- HTML5开发之Canvas绘图之实战入门
- JS&HTML5 Canvas结合封装的JCanvas库——最新动态
- [HTML5 Canvas学习] 基础知识
- 玩转html5(四)----使用canvas画一个时钟(可以动的哦!)
- html5 canvas 详细使用教程
- [HTML5 Canvas学习]绘制矩形
- [HTML5实现人工智能]小游戏《井字棋》发布,据说IQ上200才能赢