HTML5 Canvas实现小游戏

标签: +HTML5  Web开发

文件结构

game.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Simple Canvas Game</title>
	</head>
	<body>
	</body>
    <script src="js/game.js"></script>
</html>

game.js

//创建画布
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
//加载游戏资源
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () { bgReady = true };
bgImage.src = "images/background.png";

var heroReady = false;
var heroImage = new Image();
heroImage.onload = function() { heroReady = true };
heroImage.src = "images/hero.png";

var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function() { monsterReady = true };
monsterImage.src = "images/monster.png";
//游戏对象
var hero = { speed: 256 }; // px/s
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
var monster = {};
var monstersCaught = 0;
//捕捉输入
var keysDown = {};
addEventListener("keydown", function(e){
    keysDown[e.keyCode] = true;
},false)
addEventListener("keyup",function(e){
    delete keysDown[e.keyCode];
},false)
//游戏函数
var reset = function () {
    monster.x = 32 + (Math.random() * (canvas.width - 64 - 32));
    monster.y = 32 + (Math.random() * (canvas.height - 64 - 32));
}
var update = function (modifier) {
    if (38 in keysDown) { // Player holding up
        if (hero.y-hero.speed * modifier>=32)hero.y -= hero.speed * modifier;
    }
    if (40 in keysDown) { // Player holding down
        if(hero.y+hero.speed * modifier<canvas.height-64)hero.y += hero.speed * modifier;
    }
    if (37 in keysDown) { // Player holding left
        if(hero.x-hero.speed * modifier>=32)hero.x -= hero.speed * modifier;
    }
    if (39 in keysDown) { // Player holding right
        if(hero.x+hero.speed * modifier<canvas.width-64)hero.x += hero.speed * modifier;
    }
    if (hero.x <= (monster.x + 32) && monster.x <= (hero.x + 32)
        && hero.y <= (monster.y + 32) && monster.y <= (hero.y + 32)) {
        ++monstersCaught;
        reset();
    }
};
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); }

    ctx.fillStyle = "rgb(250, 250, 250)";
    ctx.font = "24px Helvetica";
    ctx.textAlign = "left";
    ctx.textBaseline = "top";
    ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
};
var main = function () {
    var now = Date.now();
    var delta = now - then;
    update(delta / 1000);
    render();
    then = now;
    requestAnimationFrame(main);
};
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
var then = Date.now();
reset();
main();




Reference

1.canvas link~
2.深入理解 requestAnimationFrame link~
3.深入理解HTML5定时器requestAnimationFrame的使用 link~

原文链接:加载失败,请重新获取