打地鼠原理游戏的原理是怎样的

来源：蜘蛛抓取(WebSpider) 时间：2016-06-15 08:42 标签： 打地鼠游戏机
能告诉如何一步一步达到这个目标最好了 比如要学习什么知识之类的（我就是一个好吃懒做的伸手党吧喂……）⊙▽⊙
上周写了一个js版本的，可以看下线上地址：手机端的，其中game.js的逻辑大概是这样：/**
* @author fuqiang3@.cn
* @fileoverview 打地鼠游戏
(function(win, doc) {
var Crafty = win.C
if (!Crafty) {
throw new Error('must have Crafty.js!');
var Events = function() {
this.map = {};
Events.prototype = {
constructor: Events,
trigger: function(name, args) {
var cbs = this.map[name];
if (cbs) {
cbs.forEach(function(fn) {
fn.apply(this, args);
on: function(name, cb) {
if (this.map[name]) {
this.map[name].push(cb);
this.map[name] = [cb];
var hitMouse = function() {
var viewConfig = {
width: 530,
this.Constant = this.initConstant();
this.config = viewC
this.prec = win.screen.width / viewConfig.
if (this.prec & 1) {
this.prec = 1;
Events.call(this);
hitMouse.Crafty = C
hitMouse.prototype = {
constructor: hitMouse,
initGame: function(config) {
this.score = 0;
this.initTimeBar();
this.initScore();
this._initHoleAndMouse(config.line, config.col);
this.bindGameEvent();
this.trigger('gameStart', [this]);
this._startMouseMove();
initMuen: function() {
var self = this,
Constant = this.Constant,
STARTBTN = Constant.STARTBTN,
LOGO = Constant.LOGO,
TITLE = Constant.TITLE;
var startBtn = Crafty.e('2D,DOM,StartBtn,Mouse').attr({
w: STARTBTN.width,
h: STARTBTN.height,
x: self.alignCenter(STARTBTN),
y: STARTBTN.marginTop
var logo = Crafty.e('2D,DOM,LOGO').attr({
w: LOGO.width,
h: LOGO.height,
x: self.alignCenter(LOGO),
y: LOGO.marginTop
var title = Crafty.e('2D,DOM,TITLE').attr({
w: TITLE.width,
h: TITLE.height,
x: self.alignCenter(TITLE),
y: TITLE.marginTop
startBtn.bind('MouseDown', function() {
startBtn.destroy();
title.destroy();
logo.destroy();
startBtn.unbind('MouseDown');
self.initGame(self.config);
initTimeBar: function() {
var self =
var Constant = this.Constant,
CLOCK = Constant.CLOCK,
GAME_TIME = Constant.GAME_TIME;
this.clock = Crafty.e('2D,DOM,CLOCK').attr({
w: CLOCK.width,
h: CLOCK.height,
x: CLOCK.marginLeft,
y: CLOCK.marginTop
var clockAttr = {
w: CLOCK.timeWidth,
h: CLOCK.timeHeight,
x: CLOCK.marginLeft + CLOCK.width,
y: CLOCK.marginTop + CLOCK.timeDifferenceTop
this.timeBarBg = Crafty.e('2D,DOM,Color').attr(clockAttr).color('#FFFFFF');
this.timeBar = Crafty.e('2D,DOM,Color').attr(clockAttr).color('#FFD227');
this.now = 0;
var t = setInterval(function() {
if (self.now &= GAME_TIME) {
self.now = 0;
self._stopMouseMove();
clearInterval(t);
self.endGame();
self.now++;
self.trigger('playing', [self.now, self]);
self.timeBar.attr({
w: CLOCK.timeWidth - ((CLOCK.timeWidth / GAME_TIME) * self.now)
initScore: function(x, y) {
var SCORE = this.Constant.SCORE;
this.scoreText = Crafty.e('2D,DOM,Text').attr({
x: x || SCORE.marginLeft,
y: y || SCORE.marginTop,
w: SCORE.width
}).textFont({
size: SCORE.FONTSIZE
}).textColor("#FFFFFF").text("得分:" + this.score);
init: function() {
var self = this,
config = this.
this._initBgMap(config.width, win.screen.height, function() {
self._initComponent();
self.initMuen();
_initHoleAndMouse: function(line, size) {
var self =
var Constant = this.Constant,
MOUSE = Constant.MOUSE,
HOLE = Constant.HOLE,
BEFORE_HOLE = Constant.BEFORE_HOLE,
MAIN_VIEW_MARGIN_TOP = Constant.MAIN_VIEW_MARGIN_TOP;
this.holes = [];
this.mouses = [];
var forCenterLeft = (self.config.width - (self.config.col - 1) * (MOUSE.marginLeft + MOUSE.width)) / 2;
this._eachMap(line, size, function(i, j) {
var HOLE1 = {
x: (HOLE.width + HOLE.marginLeft) * i,
y: (HOLE.height + HOLE.marginTop) * j,
z: HOLE.zIndex
var HOLE2 = {
x: (BEFORE_HOLE.width + BEFORE_HOLE.marginLeft) * i,
y: (BEFORE_HOLE.height + BEFORE_HOLE.marginTop) * j + BEFORE_HOLE.differenceTop,
z: BEFORE_HOLE.zIndex
var mouseAttr = {
x: (MOUSE.width + MOUSE.marginLeft) * i,
//y: (MOUSE.height + MOUSE.marginTop) * j + MOUSE.differenceTop,
y: (MOUSE.height + MOUSE.marginTop) * j + 40,
z: MOUSE.zIndex
mouseAttr.x += forCenterL
mouseAttr.y += MAIN_VIEW_MARGIN_TOP;
var mouse = Crafty.e('2D,DOM,Image,MOUSE,Tween,Mouse').attr(mouseAttr);
mouse.initY = mouseAttr.y;
HOLE1.x += forCenterL
HOLE2.x += forCenterL
HOLE1.y += MAIN_VIEW_MARGIN_TOP;
HOLE2.y += MAIN_VIEW_MARGIN_TOP;
self.holes.push([Crafty.e('2D,DOM,HOLE1').attr(HOLE1), Crafty.e('2D,DOM,HOLE2').attr(HOLE2)]);
self.mouses.push(mouse);
_initBgMap: function(width, height, cb) {
var self = this,
Constant = this.Constant,
BG = Constant.BG,
CONTAINER = Constant.CONTAINER,
MAIN_VIEW_MARGIN_TOP = Constant.MAIN_VIEW_MARGIN_TOP,
SCORE = Constant.SCORE,
assetReg = /png|jpg|jpeg|gif/;
var ASSETS = {
images: function() {
var imgs = [];
for (var i in Constant) {
if (Constant.hasOwnProperty(i)) {
for (var key in Constant[i]) {
if (Constant[i].hasOwnProperty(key)) {
if (typeof Constant[i][key] === 'string' && assetReg.test(Constant[i][key])) {
imgs.push(Constant[i][key]);
this.setDivStyle();
Crafty.init(width, height, CONTAINER.ele);
Crafty.background(BG.color +' url(' + BG.img + ') top center repeat-x');
Crafty.viewport.scale(this.prec);
var loading = Crafty.e("2D, DOM, Text").attr({
x: self.alignCenter({width:250}),
y: MAIN_VIEW_MARGIN_TOP,
}).textFont({
size: SCORE.FONTSIZE
Crafty.load(ASSETS, function() {
loading.destroy();
}, function(e) {
loading.text("资源加载中: " + parseInt(e.percent,10) + '%');
_initComponent: function() {
var Constant = this.Constant,
BEFORE_HOLE = Constant.BEFORE_HOLE,
HOLE = Constant.HOLE,
MOUSE = Constant.MOUSE,
SHAREBTN = Constant.SHAREBTN,
STARTBTN = Constant.STARTBTN,
TITLE = Constant.TITLE,
CLOCK = Constant.CLOCK,
LOGO = Constant.LOGO,
RESTART = Constant.RESTART;
Crafty.sprite(SHAREBTN.img, {
Share: [0, 0, SHAREBTN.width, SHAREBTN.height]
Crafty.sprite(TITLE.img, {
TITLE: [0, 0, TITLE.width, TITLE.height]
Crafty.sprite(LOGO.img, {
LOGO: [0, 0, LOGO.width, LOGO.height]
Crafty.sprite(RESTART.img, {
Restart: [0, 0, RESTART.width, RESTART.height]
Crafty.sprite(STARTBTN.img, {
StartBtn: [0, 0, STARTBTN.width, STARTBTN.height]
Crafty.sprite(MOUSE.img, {
MOUSE: [0, 0, MOUSE.width, MOUSE.height]
Crafty.sprite(HOLE.img, {
HOLE1: [0, 0, HOLE.width, HOLE.height]
Crafty.sprite(BEFORE_HOLE.img, {
HOLE2: [0, 0, BEFORE_HOLE.width, BEFORE_HOLE.height]
Crafty.sprite(CLOCK.img, {
CLOCK: [0, 0, CLOCK.width, CLOCK.height]
_eachMap: function(line, size, cb) {
for (i = 0; i & i++) {
for (j = 0; j & j++) {
_resetMouseY: function() {
this.mouses.forEach(function(mouse) {
mouse.attr({
y: mouse.initY
_stopMouseMove: function() {
this.gameStop =
this.trigger('gameEnd', [this.score, this]);
_startMouseMove: function() {
var self =
var Constant = this.Constant,
MOUSE_MIN = Constant.MOUSE_MIN,
MOUSE = Constant.MOUSE;
//因为长时间有偏差，重置一次位置.XXX
this.gameStop =
self._resetMouseY();
var indexs = this.getUpMouseIndexs(MOUSE_MIN - 1, self.mouses.length);
self.mouses.forEach(function(mouse, index) {
if (indexs.indexOf(index) & -1) {
var oldY = parseInt(mouse.y, 10);
var differenceTop = parseInt(MOUSE.differenceTop, 10);
mouse.tween({
y: oldY - differenceTop
}, MOUSE.tweenDelayMS).timeout(function() {
mouse.tween({
}, MOUSE.tweenDelayMS).timeout(function() {
if (index === indexs[indexs.length - 1] && self.gameStop === false) {
self._startMouseMove();
}, MOUSE.tweenDelayMS);
}, MOUSE.tweenDelayMS);
_hitMouseDown: function(my, e) {
var self =
var target = e.
var Constant = my.Constant,
SCORE = Constant.SCORE,
MOUSE = Constant.MOUSE;
if (!self.isHit && my.hasClass(target, 'MOUSE')) {
self.isHit =
my.score += SCORE.oneH
my.scoreText.text('得分:' + my.score);
my.trigger('hit', [my.score, my]);
self.image(MOUSE.hitImg);
setTimeout(function() {
self.image(MOUSE.img);
self.isHit =
bindGameEvent: function() {
var self =
this.mouses.forEach(function(mouse) {
mouse.bind('MouseDown', self._hitMouseDown.bind(mouse, self));
unbindGameEvent: function() {
var self =
this.mouses.forEach(function(mouse) {
mouse.unbind('MouseDown', self._hitMouseDown.bind(mouse, self));
_destroyMain: function() {
this.mouses.forEach(function(mouse) {
mouse.destroy();
this.holes.forEach(function(hole) {
hole[0].destroy();
hole[1].destroy();
this.timeBarBg.destroy();
this.timeBar.destroy();
this.clock.destroy();
this.scoreText.destroy();
endGame: function() {
var self =
var Constant = this.Constant,
LOGO = Constant.LOGO,
SCORE = Constant.SCORE,
SHAREBTN = Constant.SHAREBTN,
RESTART = Constant.RESTART;
this._destroyMain();
var logo = Crafty.e('2D,DOM,LOGO').attr({
w: LOGO.width,
h: LOGO.height,
x: self.alignCenter(LOGO),
y: LOGO.marginTop
this.initScore(self.alignCenter(SCORE), SCORE.endTop);
var share = Crafty.e('2D,DOM,Share,Mouse').attr({
w: SHAREBTN.width,
h: SHAREBTN.height,
x: self.alignCenter(SHAREBTN),
y: SHAREBTN.marginTop
}).bind('MouseDown', function() {
self.trigger('share', [self.score, self]);
var restart = Crafty.e('2D,DOM,Restart,Mouse').attr({
w: RESTART.width,
h: RESTART.height,
x: self.alignCenter(RESTART),
y: RESTART.marginTop
}).bind('MouseDown', function() {
restart.destroy();
logo.destroy();
share.destroy();
self.scoreText.destroy();
self.initGame(self.config);
alignCenter: function(obj) {
var width = this.config.
return (width - obj.width) / 2;
setDivStyle: function() {
var CONTAINER = this.Constant.CONTAINER;
doc.getElementById(CONTAINER.ele).style.cssText += CONTAINER.styleT
initConstant: function() {
var Constant = {
CONTAINER: {
style: 'margin:0position:relative',
ele: 'gameDiv'
GAME_TIME: 20,
MOUSE_MIN: 1,
MOUSE_MAX: 3,
MAIN_VIEW_MARGIN_TOP: 200,
color:"#E5E32C",
img: 'images/bg.jpg'
img: 'images/logo.png',
width: 101,
height: 87,
marginTop: 250
img: 'images/title.png',
width: 234,
height: 68,
marginTop: 380
RESTART: {
img: 'images/btnRestart.png',
width: 250,
height: 58,
marginTop: 500
STARTBTN: {
img: 'images/btnStart1.png',
width: 250,
height: 58,
marginTop: 500
FONTSIZE: '29px',
width: 150,
oneHit: 1,
marginLeft: 400,
marginTop: 110,
endLeft: 220,
endTop: 400
img: 'images/clock.png',
width: 60,
height: 74,
timeWidth: 400,
timeHeight: 20,
marginLeft: 25,
marginTop: 35,
timeDifferenceTop: 28
img: 'images/mouse1.png',
hitImg: 'images/mouse2.png',
width: 134,
height: 80,
zIndex: 2,
marginLeft: 10,
marginTop: 70,
differenceTop: 50,
tweenDelayMS: 1000
img: 'images/hole1.png',
width: 134,
height: 80,
zIndex: 1,
marginLeft: 10,
marginTop: 70
BEFORE_HOLE: {
img: 'images/hole2.png',
width: 134,
height: 80,
zIndex: 3,
marginLeft: 10,
marginTop: 70,
differenceTop: 40
SHAREBTN: {
img: 'images/btnShare.png',
width: 250,
height: 58,
marginTop: 600
setConstant: function(config) {
for (var name in config) {
if (this.Constant.hasOwnProperty(name)) {
for (var key in config[name]) {
if (this.Constant[name].hasOwnProperty(key)) {
this.Constant[name][key] = config[name][key];
setLineCol: function(line, col) {
this.config.line =
this.config.col =
hasClass: function(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') & -1;
getRangeRandom: function(start, end) {
return Math.floor(Math.random() * (start - end + 1) + end);
getUpMouseIndexs: function(start, end) {
var Constant = this.Constant,
MOUSE_MIN = Constant.MOUSE_MIN,
MOUSE_MAX = Constant.MOUSE_MAX,
size = this.getRangeRandom(MOUSE_MIN - 1, MOUSE_MAX + 1);
var mouseIndexs = [];
while (mouseIndexs.length & size) {
var num = this.getRangeRandom(start - 1, end);
if (mouseIndexs.indexOf(num) === -1) {
mouseIndexs.push(num);
return mouseIndexs.sort();
hitMouse.prototype.trigger = Events.prototype.
hitMouse.prototype.on = Events.prototype.
var myHitMouse = new hitMouse();
myHitMouse.Constant.GAME_TIME = 1;
myHitMouse.Constant.BG.img = "images/bg.png";
myHitMouse.Constant.BG.color = "#2ee52c";
hitMouse.prototype.endGame = function(){
var self =
var Constant = this.Constant,
LOGO = Constant.LOGO,
SCORE = Constant.SCORE,
SHAREBTN = Constant.SHAREBTN,
RESTART = Constant.RESTART;
var Crafty = hitMouse.C
this._destroyMain();
var logo = Crafty.e('2D,DOM,LOGO').attr({
w: LOGO.width,
h: LOGO.height,
x: self.alignCenter(LOGO),
y: LOGO.marginTop
this.initScore(self.alignCenter(SCORE), SCORE.endTop);
var TopTitle = Crafty.e('2D,DOM,TopTitle').attr({
x:self.alignCenter({width:367}),
var share = Crafty.e('2D,DOM,Share,Mouse').attr({
w: SHAREBTN.width,
h: SHAREBTN.height,
x: self.alignCenter(SHAREBTN),
y: SHAREBTN.marginTop
}).bind('MouseDown', function() {
self.trigger('share', [self.score, self]);
var restart = Crafty.e('2D,DOM,Restart,Mouse').attr({
w: RESTART.width,
h: RESTART.height,
x: self.alignCenter(RESTART),
y: RESTART.marginTop
}).bind('MouseDown', function() {
restart.destroy();
TopTitle.destroy();
logo.destroy();
share.destroy();
self.scoreText.destroy();
self.initGame(self.config);
hitMouse.prototype.initMuen =
function() {
var self = this,
Constant = this.Constant,
STARTBTN = Constant.STARTBTN,
LOGO = Constant.LOGO,
TITLE = Constant.TITLE;
var Crafty = hitMouse.C
Crafty.sprite('images/Toptitle.png',{
TopTitle:[0,0,367,40]
var TopTitle = Crafty.e('2D,DOM,TopTitle').attr({
x:self.alignCenter({width:367}),
var startBtn = Crafty.e('2D,DOM,StartBtn,Mouse').attr({
w: STARTBTN.width,
h: STARTBTN.height,
x: self.alignCenter(STARTBTN),
y: STARTBTN.marginTop
var logo = Crafty.e('2D,DOM,LOGO').attr({
w: LOGO.width,
h: LOGO.height,
x: self.alignCenter(LOGO),
y: LOGO.marginTop
var title = Crafty.e('2D,DOM,TITLE').attr({
w: TITLE.width,
h: TITLE.height,
x: self.alignCenter(TITLE),
y: TITLE.marginTop
startBtn.bind('MouseDown', function() {
startBtn.destroy();
title.destroy();
logo.destroy();
TopTitle.destroy();
startBtn.unbind('MouseDown');
self.initGame(self.config);
myHitMouse.init();
myHitMouse.on('hit', function(score, my) {
my.now = my.now - 1;
if(my.now & my.Constant.GAME_TIME){
my.now = my.Constant.GAME_TIME;
myHitMouse.on('playing', function(now, my) {
if (now & my.Constant.GAME_TIME * (1 / 3)) {
my.Constant.MOUSE.tweenDelayMS = 800;
if (now & my.Constant.GAME_TIME * (1 / 4)) {
my.Constant.MOUSE.tweenDelayMS = 500;
myHitMouse.on('gameEnd', function(score, my) {
//console.log(my.Constant.MOUSE.tweenDelayMS);
my.Constant = my.initConstant();
//console.log(my.Constant.MOUSE.tweenDelayMS);
var MyShareClass = win.MyShareC
myHitMouse.on('share', function(score) {
//alert('点击右上角分享到朋友圈!');
win.readConfig.share.content = '我在中超媒体杯决赛中，获得了'+score+'分';
var shareCom = new MyShareClass();
shareCom.wantShare(true,function(){
alert('分享成功');
})(window, document);
使用的框架是比较原始的一款js游戏引擎，其中实现的主要逻辑简单说一下：先分3个场景，菜单，游戏，结束。每个场景的原件配置到常量中。每个原件在对应的时机初始化和注销。位置自己动态计算，或者写死。游戏的时候，时间条是2个长方形叠加实现的，时间是扣点的方式。老鼠和洞，分3层，背景洞，老鼠，前景洞，然后设置老鼠的递归运动。框架有检测点击的方法，判断一下点击到老鼠了就加一分，时间没了游戏结束，给出分数就ok了。打老鼠很简单的一款游戏，规则比较清晰，实现也不复杂，建议大家都写写试试，我的代码比较多，主要为了解耦和以后这个游戏可以改成各种不同主题的，所以看起来可能比较麻烦，设计了几个特殊的api和event。。那个android下某些机型的scale可能还有些bug。。目前还没找到太好的办法，等比缩小全屏等问题还在解决中。。
鉴于我以前也和楼主一样年少轻狂与冲动，为了&b&她&/b&而做有趣的软件，当然我自认为我做的比你的霸气多了，我做的是把她放在整个太阳系中，以她为中心，我的照片不断的围绕她，咳咳咳...不多说了。&br&&br&而我这里只会告诉你如何去完成这个目标，因为我相信你的&b&动力是非常充足&/b&的，说是朋友，当然我肯定不会信的，所以说你打了鸡血都是轻的。&br&&br&首先，我觉得你应该选择一个快速易实现的，推荐你C#：&a href=&///?target=http%3A///en-us/library/aa8v%3Dvs.71%2529.aspx& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&C# Tutorials (C#)&i class=&icon-external&&&/i&&/a&，这个弄快速GUI程序比你现在学的C语言强很多，你现在去下载一个Visual Studio 2013：&a class=& wrap external& href=&///?target=http%3A///en-us/products/& target=&_blank& rel=&nofollow noreferrer&&Visual Studio with MSDN Overview&i class=&icon-external&&&/i&&/a&，&a class=& wrap external& href=&///?target=http%3A///en-us/download/details.aspx%3Fid%3D40787& target=&_blank& rel=&nofollow noreferrer&&Microsoft Visual Studio Express 2013 for Windows Desktop&i class=&icon-external&&&/i&&/a&，这两者都是可以的。然后我再指你一条明路，去弄WinForm或者WPF，两个拖GUI的速度都是杠杆的，然后我现在以WinForm为例(&a class=& wrap external& href=&///?target=http%3A///en-us/library/dd492132.aspx& target=&_blank& rel=&nofollow noreferrer&&)Step 1: Create a Windows Forms Application Project&i class=&icon-external&&&/i&&/a&，&a class=& wrap external& href=&///?target=http%3A///en-us/library/ms8v%3Dvs.110%2529.aspx& target=&_blank& rel=&nofollow noreferrer&&Getting Started with Windows Forms&i class=&icon-external&&&/i&&/a&），现在对应你要做的游戏，首先你这个游戏主要与时间有关，就是一跳一跳的，所以你在WinForm中，去研究一下Timer类:&a href=&///?target=http%3A///en-us/library/system.windows.forms.timer%2528v%3Dvs.110%2529.aspx& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Timer Class (System.Windows.Forms)&i class=&icon-external&&&/i&&/a&，然后你这个小游戏还有一个关键点，是实践捕捉，如到了一定的时间间隔就要做一些事情，比如重绘等，那么你要研究：&a class=& wrap external& href=&///?target=http%3A///en-us/library/dacysss4%2528v%3Dvs.110%2529.aspx& target=&_blank& rel=&nofollow noreferrer&&Creating Event Handlers in Windows Forms&i class=&icon-external&&&/i&&/a&，另外，你这个里面肯定会涉及很多图片资源的东西：&a href=&///?target=http%3A///en-us/library/system.windows.forms.imageliststreamer%2528v%3Dvs.110%2529.aspx& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ImageListStreamer Class (System.Windows.Forms)&i class=&icon-external&&&/i&&/a&，另外，你的游戏还有Button等东西，你自己去把我给的那个WinForm的教程看完，然后结合这些关键类，就可以开动了。&br&&br&额外建议，你做个普通的打地鼠有什么意思，比如你现在可以把你和她都放进游戏里面啊，然后背景音乐放上她喜欢的歌曲，然后再放一点点儿“彩蛋”，比如过关了会怎么怎么样啊什么的，我只能帮你到这里了！！！加油，趁着大学，赶紧牵一个走，不要学我，来的时候一个人，走的时候还是一个人。
鉴于我以前也和楼主一样年少轻狂与冲动，为了她而做有趣的软件，当然我自认为我做的比你的霸气多了，我做的是把她放在整个太阳系中，以她为中心，我的照片不断的围绕她，咳咳咳...不多说了。而我这里只会告诉你如何去完成这个目标，因为我相信你的动力是非…
已有帐号？
无法登录？
社交帐号登录
www.tuer.me能告诉如何一步一步达到这个目标最好了 比如要学习什么知识之类的（我就是一个好吃懒做的伸手党吧喂……）⊙▽⊙
只能帮到这里了~
鉴于我以前也和楼主一样年少轻狂与冲动，为了&b&她&/b&而做有趣的软件，当然我自认为我做的比你的霸气多了，我做的是把她放在整个太阳系中，以她为中心，我的照片不断的围绕她，咳咳咳...不多说了。&br&&br&而我这里只会告诉你如何去完成这个目标，因为我相信你的&b&动力是非常充足&/b&的，说是朋友，当然我肯定不会信的，所以说你打了鸡血都是轻的。&br&&br&首先，我觉得你应该选择一个快速易实现的，推荐你C#：&a href=&///?target=http%3A///en-us/library/aa8v%3Dvs.71%2529.aspx& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&C# Tutorials (C#)&i class=&icon-external&&&/i&&/a&，这个弄快速GUI程序比你现在学的C语言强很多，你现在去下载一个Visual Studio 2013：&a class=& wrap external& href=&///?target=http%3A///en-us/products/& target=&_blank& rel=&nofollow noreferrer&&Visual Studio with MSDN Overview&i class=&icon-external&&&/i&&/a&，&a class=& wrap external& href=&///?target=http%3A///en-us/download/details.aspx%3Fid%3D40787& target=&_blank& rel=&nofollow noreferrer&&Microsoft Visual Studio Express 2013 for Windows Desktop&i class=&icon-external&&&/i&&/a&，这两者都是可以的。然后我再指你一条明路，去弄WinForm或者WPF，两个拖GUI的速度都是杠杆的，然后我现在以WinForm为例(&a class=& wrap external& href=&///?target=http%3A///en-us/library/dd492132.aspx& target=&_blank& rel=&nofollow noreferrer&&)Step 1: Create a Windows Forms Application Project&i class=&icon-external&&&/i&&/a&，&a class=& wrap external& href=&///?target=http%3A///en-us/library/ms8v%3Dvs.110%2529.aspx& target=&_blank& rel=&nofollow noreferrer&&Getting Started with Windows Forms&i class=&icon-external&&&/i&&/a&），现在对应你要做的游戏，首先你这个游戏主要与时间有关，就是一跳一跳的，所以你在WinForm中，去研究一下Timer类:&a href=&///?target=http%3A///en-us/library/system.windows.forms.timer%2528v%3Dvs.110%2529.aspx& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Timer Class (System.Windows.Forms)&i class=&icon-external&&&/i&&/a&，然后你这个小游戏还有一个关键点，是实践捕捉，如到了一定的时间间隔就要做一些事情，比如重绘等，那么你要研究：&a class=& wrap external& href=&///?target=http%3A///en-us/library/dacysss4%2528v%3Dvs.110%2529.aspx& target=&_blank& rel=&nofollow noreferrer&&Creating Event Handlers in Windows Forms&i class=&icon-external&&&/i&&/a&，另外，你这个里面肯定会涉及很多图片资源的东西：&a href=&///?target=http%3A///en-us/library/system.windows.forms.imageliststreamer%2528v%3Dvs.110%2529.aspx& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ImageListStreamer Class (System.Windows.Forms)&i class=&icon-external&&&/i&&/a&，另外，你的游戏还有Button等东西，你自己去把我给的那个WinForm的教程看完，然后结合这些关键类，就可以开动了。&br&&br&额外建议，你做个普通的打地鼠有什么意思，比如你现在可以把你和她都放进游戏里面啊，然后背景音乐放上她喜欢的歌曲，然后再放一点点儿“彩蛋”，比如过关了会怎么怎么样啊什么的，我只能帮你到这里了！！！加油，趁着大学，赶紧牵一个走，不要学我，来的时候一个人，走的时候还是一个人。
鉴于我以前也和楼主一样年少轻狂与冲动，为了她而做有趣的软件，当然我自认为我做的比你的霸气多了，我做的是把她放在整个太阳系中，以她为中心，我的照片不断的围绕她，咳咳咳...不多说了。而我这里只会告诉你如何去完成这个目标，因为我相信你的动力是非…
上周写了一个js版本的，可以看下线上地址：&br&&a href=&///?target=http%3A///yc/zcmtb/index%3Fvt%3D4& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/yc/zcmtb/inde&/span&&span class=&invisible&&x?vt=4&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&手机端的，其中game.js的逻辑大概是这样：&br&&br&&div class=&highlight&&&pre&&code class=&language-text&&/**
* @author fuqiang3@.cn
* @fileoverview 打地鼠游戏
(function(win, doc) {
var Crafty = win.C
if (!Crafty) {
throw new Error('must have Crafty.js!');
var Events = function() {
this.map = {};
Events.prototype = {
constructor: Events,
trigger: function(name, args) {
var cbs = this.map[name];
if (cbs) {
cbs.forEach(function(fn) {
fn.apply(this, args);
on: function(name, cb) {
if (this.map[name]) {
this.map[name].push(cb);
this.map[name] = [cb];
var hitMouse = function() {
var viewConfig = {
width: 530,
this.Constant = this.initConstant();
this.config = viewC
this.prec = win.screen.width / viewConfig.
if (this.prec & 1) {
this.prec = 1;
Events.call(this);
hitMouse.Crafty = C
hitMouse.prototype = {
constructor: hitMouse,
initGame: function(config) {
this.score = 0;
this.initTimeBar();
this.initScore();
this._initHoleAndMouse(config.line, config.col);
this.bindGameEvent();
this.trigger('gameStart', [this]);
this._startMouseMove();
initMuen: function() {
var self = this,
Constant = this.Constant,
STARTBTN = Constant.STARTBTN,
LOGO = Constant.LOGO,
TITLE = Constant.TITLE;
var startBtn = Crafty.e('2D,DOM,StartBtn,Mouse').attr({
w: STARTBTN.width,
h: STARTBTN.height,
x: self.alignCenter(STARTBTN),
y: STARTBTN.marginTop
var logo = Crafty.e('2D,DOM,LOGO').attr({
w: LOGO.width,
h: LOGO.height,
x: self.alignCenter(LOGO),
y: LOGO.marginTop
var title = Crafty.e('2D,DOM,TITLE').attr({
w: TITLE.width,
h: TITLE.height,
x: self.alignCenter(TITLE),
y: TITLE.marginTop
startBtn.bind('MouseDown', function() {
startBtn.destroy();
title.destroy();
logo.destroy();
startBtn.unbind('MouseDown');
self.initGame(self.config);
initTimeBar: function() {
var self =
var Constant = this.Constant,
CLOCK = Constant.CLOCK,
GAME_TIME = Constant.GAME_TIME;
this.clock = Crafty.e('2D,DOM,CLOCK').attr({
w: CLOCK.width,
h: CLOCK.height,
x: CLOCK.marginLeft,
y: CLOCK.marginTop
var clockAttr = {
w: CLOCK.timeWidth,
h: CLOCK.timeHeight,
x: CLOCK.marginLeft + CLOCK.width,
y: CLOCK.marginTop + CLOCK.timeDifferenceTop
this.timeBarBg = Crafty.e('2D,DOM,Color').attr(clockAttr).color('#FFFFFF');
this.timeBar = Crafty.e('2D,DOM,Color').attr(clockAttr).color('#FFD227');
this.now = 0;
var t = setInterval(function() {
if (self.now &= GAME_TIME) {
self.now = 0;
self._stopMouseMove();
clearInterval(t);
self.endGame();
self.now++;
self.trigger('playing', [self.now, self]);
self.timeBar.attr({
w: CLOCK.timeWidth - ((CLOCK.timeWidth / GAME_TIME) * self.now)
initScore: function(x, y) {
var SCORE = this.Constant.SCORE;
this.scoreText = Crafty.e('2D,DOM,Text').attr({
x: x || SCORE.marginLeft,
y: y || SCORE.marginTop,
w: SCORE.width
}).textFont({
size: SCORE.FONTSIZE
}).textColor(&#FFFFFF&).text(&得分:& + this.score);
init: function() {
var self = this,
config = this.
this._initBgMap(config.width, win.screen.height, function() {
self._initComponent();
self.initMuen();
_initHoleAndMouse: function(line, size) {
var self =
var Constant = this.Constant,
MOUSE = Constant.MOUSE,
HOLE = Constant.HOLE,
BEFORE_HOLE = Constant.BEFORE_HOLE,
MAIN_VIEW_MARGIN_TOP = Constant.MAIN_VIEW_MARGIN_TOP;
this.holes = [];
this.mouses = [];
var forCenterLeft = (self.config.width - (self.config.col - 1) * (MOUSE.marginLeft + MOUSE.width)) / 2;
this._eachMap(line, size, function(i, j) {
var HOLE1 = {
x: (HOLE.width + HOLE.marginLeft) * i,
y: (HOLE.height + HOLE.marginTop) * j,
z: HOLE.zIndex
var HOLE2 = {
x: (BEFORE_HOLE.width + BEFORE_HOLE.marginLeft) * i,
y: (BEFORE_HOLE.height + BEFORE_HOLE.marginTop) * j + BEFORE_HOLE.differenceTop,
z: BEFORE_HOLE.zIndex
var mouseAttr = {
x: (MOUSE.width + MOUSE.marginLeft) * i,
//y: (MOUSE.height + MOUSE.marginTop) * j + MOUSE.differenceTop,
y: (MOUSE.height + MOUSE.marginTop) * j + 40,
z: MOUSE.zIndex
mouseAttr.x += forCenterL
mouseAttr.y += MAIN_VIEW_MARGIN_TOP;
var mouse = Crafty.e('2D,DOM,Image,MOUSE,Tween,Mouse').attr(mouseAttr);
mouse.initY = mouseAttr.y;
HOLE1.x += forCenterL
HOLE2.x += forCenterL
HOLE1.y += MAIN_VIEW_MARGIN_TOP;
HOLE2.y += MAIN_VIEW_MARGIN_TOP;
self.holes.push([Crafty.e('2D,DOM,HOLE1').attr(HOLE1), Crafty.e('2D,DOM,HOLE2').attr(HOLE2)]);
self.mouses.push(mouse);
_initBgMap: function(width, height, cb) {
var self = this,
Constant = this.Constant,
BG = Constant.BG,
CONTAINER = Constant.CONTAINER,
MAIN_VIEW_MARGIN_TOP = Constant.MAIN_VIEW_MARGIN_TOP,
SCORE = Constant.SCORE,
assetReg = /png|jpg|jpeg|gif/;
var ASSETS = {
images: function() {
var imgs = [];
for (var i in Constant) {
if (Constant.hasOwnProperty(i)) {
for (var key in Constant[i]) {
if (Constant[i].hasOwnProperty(key)) {
if (typeof Constant[i][key] === 'string' && assetReg.test(Constant[i][key])) {
imgs.push(Constant[i][key]);
this.setDivStyle();
Crafty.init(width, height, CONTAINER.ele);
Crafty.background(BG.color +' url(' + BG.img + ') top center repeat-x');
Crafty.viewport.scale(this.prec);
var loading = Crafty.e(&2D, DOM, Text&).attr({
x: self.alignCenter({width:250}),
y: MAIN_VIEW_MARGIN_TOP,
}).textFont({
size: SCORE.FONTSIZE
Crafty.load(ASSETS, function() {
loading.destroy();
}, function(e) {
loading.text(&资源加载中: & + parseInt(e.percent,10) + '%');
_initComponent: function() {
var Constant = this.Constant,
BEFORE_HOLE = Constant.BEFORE_HOLE,
HOLE = Constant.HOLE,
MOUSE = Constant.MOUSE,
SHAREBTN = Constant.SHAREBTN,
STARTBTN = Constant.STARTBTN,
TITLE = Constant.TITLE,
CLOCK = Constant.CLOCK,
LOGO = Constant.LOGO,
RESTART = Constant.RESTART;
Crafty.sprite(SHAREBTN.img, {
Share: [0, 0, SHAREBTN.width, SHAREBTN.height]
Crafty.sprite(TITLE.img, {
TITLE: [0, 0, TITLE.width, TITLE.height]
Crafty.sprite(LOGO.img, {
LOGO: [0, 0, LOGO.width, LOGO.height]
Crafty.sprite(RESTART.img, {
Restart: [0, 0, RESTART.width, RESTART.height]
Crafty.sprite(STARTBTN.img, {
StartBtn: [0, 0, STARTBTN.width, STARTBTN.height]
Crafty.sprite(MOUSE.img, {
MOUSE: [0, 0, MOUSE.width, MOUSE.height]
Crafty.sprite(HOLE.img, {
HOLE1: [0, 0, HOLE.width, HOLE.height]
Crafty.sprite(BEFORE_HOLE.img, {
HOLE2: [0, 0, BEFORE_HOLE.width, BEFORE_HOLE.height]
Crafty.sprite(CLOCK.img, {
CLOCK: [0, 0, CLOCK.width, CLOCK.height]
_eachMap: function(line, size, cb) {
for (i = 0; i & i++) {
for (j = 0; j & j++) {
_resetMouseY: function() {
this.mouses.forEach(function(mouse) {
mouse.attr({
y: mouse.initY
_stopMouseMove: function() {
this.gameStop =
this.trigger('gameEnd', [this.score, this]);
_startMouseMove: function() {
var self =
var Constant = this.Constant,
MOUSE_MIN = Constant.MOUSE_MIN,
MOUSE = Constant.MOUSE;
//因为长时间有偏差，重置一次位置.XXX
this.gameStop =
self._resetMouseY();
var indexs = this.getUpMouseIndexs(MOUSE_MIN - 1, self.mouses.length);
self.mouses.forEach(function(mouse, index) {
if (indexs.indexOf(index) & -1) {
var oldY = parseInt(mouse.y, 10);
var differenceTop = parseInt(MOUSE.differenceTop, 10);
mouse.tween({
y: oldY - differenceTop
}, MOUSE.tweenDelayMS).timeout(function() {
mouse.tween({
}, MOUSE.tweenDelayMS).timeout(function() {
if (index === indexs[indexs.length - 1] && self.gameStop === false) {
self._startMouseMove();
}, MOUSE.tweenDelayMS);
}, MOUSE.tweenDelayMS);
_hitMouseDown: function(my, e) {
var self =
var target = e.
var Constant = my.Constant,
SCORE = Constant.SCORE,
MOUSE = Constant.MOUSE;
if (!self.isHit && my.hasClass(target, 'MOUSE')) {
self.isHit =
my.score += SCORE.oneH
my.scoreText.text('得分:' + my.score);
my.trigger('hit', [my.score, my]);
self.image(MOUSE.hitImg);
setTimeout(function() {
self.image(MOUSE.img);
self.isHit =
bindGameEvent: function() {
var self =
this.mouses.forEach(function(mouse) {
mouse.bind('MouseDown', self._hitMouseDown.bind(mouse, self));
unbindGameEvent: function() {
var self =
this.mouses.forEach(function(mouse) {
mouse.unbind('MouseDown', self._hitMouseDown.bind(mouse, self));
_destroyMain: function() {
this.mouses.forEach(function(mouse) {
mouse.destroy();
this.holes.forEach(function(hole) {
hole[0].destroy();
hole[1].destroy();
this.timeBarBg.destroy();
this.timeBar.destroy();
this.clock.destroy();
this.scoreText.destroy();
endGame: function() {
var self =
var Constant = this.Constant,
LOGO = Constant.LOGO,
SCORE = Constant.SCORE,
SHAREBTN = Constant.SHAREBTN,
RESTART = Constant.RESTART;
this._destroyMain();
var logo = Crafty.e('2D,DOM,LOGO').attr({
w: LOGO.width,
h: LOGO.height,
x: self.alignCenter(LOGO),
y: LOGO.marginTop
this.initScore(self.alignCenter(SCORE), SCORE.endTop);
var share = Crafty.e('2D,DOM,Share,Mouse').attr({
w: SHAREBTN.width,
h: SHAREBTN.height,
x: self.alignCenter(SHAREBTN),
y: SHAREBTN.marginTop
}).bind('MouseDown', function() {
self.trigger('share', [self.score, self]);
var restart = Crafty.e('2D,DOM,Restart,Mouse').attr({
w: RESTART.width,
h: RESTART.height,
x: self.alignCenter(RESTART),
y: RESTART.marginTop
}).bind('MouseDown', function() {
restart.destroy();
logo.destroy();
share.destroy();
self.scoreText.destroy();
self.initGame(self.config);
alignCenter: function(obj) {
var width = this.config.
return (width - obj.width) / 2;
setDivStyle: function() {
var CONTAINER = this.Constant.CONTAINER;
doc.getElementById(CONTAINER.ele).style.cssText += CONTAINER.styleT
initConstant: function() {
var Constant = {
CONTAINER: {
style: 'margin:0position:relative',
ele: 'gameDiv'
GAME_TIME: 20,
MOUSE_MIN: 1,
MOUSE_MAX: 3,
MAIN_VIEW_MARGIN_TOP: 200,
color:&#E5E32C&,
img: 'images/bg.jpg'
img: 'images/logo.png',
width: 101,
height: 87,
marginTop: 250
img: 'images/title.png',
width: 234,
height: 68,
marginTop: 380
RESTART: {
img: 'images/btnRestart.png',
width: 250,
height: 58,
marginTop: 500
STARTBTN: {
img: 'images/btnStart1.png',
width: 250,
height: 58,
marginTop: 500
FONTSIZE: '29px',
width: 150,
oneHit: 1,
marginLeft: 400,
marginTop: 110,
endLeft: 220,
endTop: 400
img: 'images/clock.png',
width: 60,
height: 74,
timeWidth: 400,
timeHeight: 20,
marginLeft: 25,
marginTop: 35,
timeDifferenceTop: 28
img: 'images/mouse1.png',
hitImg: 'images/mouse2.png',
width: 134,
height: 80,
zIndex: 2,
marginLeft: 10,
marginTop: 70,
differenceTop: 50,
tweenDelayMS: 1000
img: 'images/hole1.png',
width: 134,
height: 80,
zIndex: 1,
marginLeft: 10,
marginTop: 70
BEFORE_HOLE: {
img: 'images/hole2.png',
width: 134,
height: 80,
zIndex: 3,
marginLeft: 10,
marginTop: 70,
differenceTop: 40
SHAREBTN: {
img: 'images/btnShare.png',
width: 250,
height: 58,
marginTop: 600
setConstant: function(config) {
for (var name in config) {
if (this.Constant.hasOwnProperty(name)) {
for (var key in config[name]) {
if (this.Constant[name].hasOwnProperty(key)) {
this.Constant[name][key] = config[name][key];
setLineCol: function(line, col) {
this.config.line =
this.config.col =
hasClass: function(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') & -1;
getRangeRandom: function(start, end) {
return Math.floor(Math.random() * (start - end + 1) + end);
getUpMouseIndexs: function(start, end) {
var Constant = this.Constant,
MOUSE_MIN = Constant.MOUSE_MIN,
MOUSE_MAX = Constant.MOUSE_MAX,
size = this.getRangeRandom(MOUSE_MIN - 1, MOUSE_MAX + 1);
var mouseIndexs = [];
while (mouseIndexs.length & size) {
var num = this.getRangeRandom(start - 1, end);
if (mouseIndexs.indexOf(num) === -1) {
mouseIndexs.push(num);
return mouseIndexs.sort();
hitMouse.prototype.trigger = Events.prototype.
hitMouse.prototype.on = Events.prototype.
var myHitMouse = new hitMouse();
myHitMouse.Constant.GAME_TIME = 1;
myHitMouse.Constant.BG.img = &images/bg.png&;
myHitMouse.Constant.BG.color = &#2ee52c&;
hitMouse.prototype.endGame = function(){
var self =
var Constant = this.Constant,
LOGO = Constant.LOGO,
SCORE = Constant.SCORE,
SHAREBTN = Constant.SHAREBTN,
RESTART = Constant.RESTART;
var Crafty = hitMouse.C
this._destroyMain();
var logo = Crafty.e('2D,DOM,LOGO').attr({
w: LOGO.width,
h: LOGO.height,
x: self.alignCenter(LOGO),
y: LOGO.marginTop
this.initScore(self.alignCenter(SCORE), SCORE.endTop);
var TopTitle = Crafty.e('2D,DOM,TopTitle').attr({
x:self.alignCenter({width:367}),
var share = Crafty.e('2D,DOM,Share,Mouse').attr({
w: SHAREBTN.width,
h: SHAREBTN.height,
x: self.alignCenter(SHAREBTN),
y: SHAREBTN.marginTop
}).bind('MouseDown', function() {
self.trigger('share', [self.score, self]);
var restart = Crafty.e('2D,DOM,Restart,Mouse').attr({
w: RESTART.width,
h: RESTART.height,
x: self.alignCenter(RESTART),
y: RESTART.marginTop
}).bind('MouseDown', function() {
restart.destroy();
TopTitle.destroy();
logo.destroy();
share.destroy();
self.scoreText.destroy();
self.initGame(self.config);
hitMouse.prototype.initMuen =
function() {
var self = this,
Constant = this.Constant,
STARTBTN = Constant.STARTBTN,
LOGO = Constant.LOGO,
TITLE = Constant.TITLE;
var Crafty = hitMouse.C
Crafty.sprite('images/Toptitle.png',{
TopTitle:[0,0,367,40]
var TopTitle = Crafty.e('2D,DOM,TopTitle').attr({
x:self.alignCenter({width:367}),
var startBtn = Crafty.e('2D,DOM,StartBtn,Mouse').attr({
w: STARTBTN.width,
h: STARTBTN.height,
x: self.alignCenter(STARTBTN),
y: STARTBTN.marginTop
var logo = Crafty.e('2D,DOM,LOGO').attr({
w: LOGO.width,
h: LOGO.height,
x: self.alignCenter(LOGO),
y: LOGO.marginTop
var title = Crafty.e('2D,DOM,TITLE').attr({
w: TITLE.width,
h: TITLE.height,
x: self.alignCenter(TITLE),
y: TITLE.marginTop
startBtn.bind('MouseDown', function() {
startBtn.destroy();
title.destroy();
logo.destroy();
TopTitle.destroy();
startBtn.unbind('MouseDown');
self.initGame(self.config);
myHitMouse.init();
myHitMouse.on('hit', function(score, my) {
my.now = my.now - 1;
if(my.now & my.Constant.GAME_TIME){
my.now = my.Constant.GAME_TIME;
myHitMouse.on('playing', function(now, my) {
if (now & my.Constant.GAME_TIME * (1 / 3)) {
my.Constant.MOUSE.tweenDelayMS = 800;
if (now & my.Constant.GAME_TIME * (1 / 4)) {
my.Constant.MOUSE.tweenDelayMS = 500;
myHitMouse.on('gameEnd', function(score, my) {
//console.log(my.Constant.MOUSE.tweenDelayMS);
my.Constant = my.initConstant();
//console.log(my.Constant.MOUSE.tweenDelayMS);
var MyShareClass = win.MyShareC
myHitMouse.on('share', function(score) {
//alert('点击右上角分享到朋友圈!');
win.readConfig.share.content = '我在中超媒体杯决赛中，获得了'+score+'分';
var shareCom = new MyShareClass();
shareCom.wantShare(true,function(){
alert('分享成功');
})(window, document);
&/code&&/pre&&/div&&br&使用的框架是&a href=&///?target=http%3A//& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&br&比较原始的一款js游戏引擎，其中实现的主要逻辑简单说一下：&br&&br&先分3个场景，菜单，游戏，结束。&br&每个场景的原件配置到常量中。&br&每个原件在对应的时机初始化和注销。&br&位置自己动态计算，或者写死。&br&游戏的时候，时间条是2个长方形叠加实现的，时间是扣点的方式。&br&老鼠和洞，分3层，背景洞，老鼠，前景洞，然后设置老鼠的递归运动。&br&框架有检测点击的方法，判断一下点击到老鼠了就加一分，时间没了游戏结束，给出分数就ok了。&br&&br&打老鼠很简单的一款游戏，规则比较清晰，实现也不复杂，建议大家都写写试试，我的代码比较多，主要为了解耦和以后这个游戏可以改成各种不同主题的，所以看起来可能比较麻烦，设计了几个特殊的api和event。。&br&&br&那个android下某些机型的scale可能还有些bug。。目前还没找到太好的办法，等比缩小全屏等问题还在解决中。。
上周写了一个js版本的，可以看下线上地址：手机端的，其中game.js的逻辑大概是这样：/**
* @author fuqiang3@.cn
* @fileoverview 打地鼠游戏
(function(win, doc) {
var Crafty = win.Crafty…
已有帐号？
无法登录？
社交帐号登录
博客：http://www.courtier.cc

我要回帖

更多关于 打地鼠游戏机 的文章

 

随机推荐