HTML5 打地鼠
上周的那篇HTML5时钟竟然被推荐为热门博客，真是让我受宠若惊啊
。一直想用HTML5做个小游戏，但总是没有时间，今天抽了几个小时做了个打地鼠的小游戏，体验一下HTML5上的游戏开发。本着OSC的分享精神，特分享出来。没有花时间去找更多的素材，再加上本来就不怎么会做图，出了那个地洞的素材以外其他的全是从网上搜到的。代码也比较混乱，大家就凑合着看看吧，欢迎大家批评指正，也欢迎大家能把这个小游戏做的更完善些。
废话不说了，大家先看看效果吧：
HTML文件：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>打地鼠</title>
<script type="text/javascript" src="js/game.js"></script>
</head>
<body onload="init()">
<div class="container">
<canvas 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>
</html>
JS文件：
var canvas, ctx, info;
var bg;
var hammer, hamX, hamY;
var mouseState, mouseFrmLen = 10, mousePress = false;
var sprites = [], holes = [];
var score = 0;
var Sprite = function(w, h, x, y, state, image){
var self = this;
this.w = w;
this.h = h;
this.x = x;
this.y = y;
this.image = image;
this.state = state;
this.draw = function(){
if(this.state == 'show'){
ctx.drawImage(this.image, this.x, this.y, this.w, this.h);
setTimeout(function(){
self.state = 'hide';
},3000);
}
}
}
var HoleSprite = function(w, h, x, y, state, image){
var self = this;
this.w = w;
this.h = h;
this.x = x;
this.y = y;
this.image = image;
this.state = state;
this.draw = function(){
if(this.state == 'show'){
ctx.drawImage(this.image, this.x, this.y, this.w, this.h);
}
}
}
function HammerSprite(w, h, x, y, image){
HammerSprite.prototype.w = w;
HammerSprite.prototype.h = h;
HammerSprite.prototype.x = x;
HammerSprite.prototype.y = 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);
}
}
}
function clearScreen(){
//ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(bg, 0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScreen(){
clearScreen();
//绘制得分
ctx.font = "40px serif"
ctx.strokeStyle = "#FF00ff";
ctx.strokeText ("LION打地鼠", 50,50);
ctx.fillStyle = "#000000";
ctx.fillText("LION打地鼠",50,50);
ctx.fillStyle = "#ff0000";
ctx.fillText("你的得分:"+score,450,50);
for(i=0;i<3;i++){
for(j=0; j<3; j++){
holes[i][j].draw();
}
}
for(i=0;i<3;i++){
for(j=0; j<3; j++){
sprites[i][j].draw();
}
}
if(hammer){
hammer.draw(mousePress);
}
}
function updateLogic(){
for(i=0;i<3;i++){
for(j=0; j<3; j++){
sprites[i][j].state=='hide'
}
}
var a = Math.round(Math.random()*100)%3;
var b = Math.round(Math.random()*100)%3;
sprites[a][b].state='show';
}
function hammerMove(e){
if(hammer){
hammer.x = event.x-40;
hammer.y = event.y-40;
}
}
function hit(x, y){
for(i=0;i<3;i++){
for(j=0;j<3;j++){
var s = sprites[i][j];
if(s.state=='show'){
if(x>s.x+30 && y>s.y && x<(s.x+s.w+30) && y<(s.y+s.h)){
score++;
s.state = 'hide';
}
}
}
}
}
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.png';
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] = s;
}
sprites[i] = arr;
}
}
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] = s;
}
holes[i] = arr;
}
}
setInterval(drawScreen, 30);
setInterval(updateLogic, 3000);
};
function hammerDown(){
mousePress = true;
}
function hammerUp(){
info.innerHTML=event.x+':'+event.y;
mousePress = false;
hit(event.x, event.y);
}
function hideCursor(obj){
obj.style.cursor='none';
}
function showCursor(obj){
obj.style.cursor='';
}
资源图片：
