非淡泊无以明志，非宁静无以致远
直入正题，用JS实现一个简单的打地鼠游戏
因为功能比较简单就直接裸奔JS了，先看看效果图，或者&&吧&
如果点击颜色比较深的那个（俗称坏老鼠），将扣分50；如果点击颜色比较浅的那个（俗称好老鼠），将得分100
老鼠好像有点难画，又不想用图片，就直接用CSS画个简单的图代表老鼠和坑吧
挺简单，用9个&li&标签代表坑，用9个&div&标签代表老鼠
　　&div class="container"&
&h4&无聊打打地鼠&/h4&
&div class="game-top"&
&p&&input type="button" value="开始游戏" id="game-start"&&p&
&p&得分：&span id="game-score"&0&/span&&/p&
&p&剩余时间：&span id="game-time"&60&/span& s&/p&
&div class="game-content"&
&li&&div&&/div&&/li&
&li&&div&&/div&&/li&
&li&&div&&/div&&/li&
&li&&div&&/div&&/li&
&li&&div&&/div&&/li&
&li&&div&&/div&&/li&
&li&&div&&/div&&/li&
&li&&div&&/div&&/li&
&li&&div&&/div&&/li&
有点小技巧
对于坑，加个box-shadow: ...&inset&美化一下样式
.game-content li {
float: left;
margin-top: 50px;
margin-left: 30px;
width: 100px;
height: 50px;
border-radius: 50%;
background-color: #67d0b4;
box-shadow: 0 0 50px #706565 inset;
对于老鼠，用 border-radius：50%/40% 绘制，第二个参数还是有点使用价值的
.game-content div {
position: relative;
margin-top: -15px;
margin-left: 25px;
width: 50px;
height: 70px;
border-radius: 50%/40%;
background-color: #dfb25d;
opacity: 0;
而要让老鼠动起来，这里的处理方式就是用动画了，老鼠运动的时候，先往上再往下即可，控制好相对位置看起来和谐一点就行
@keyframes mouse-move {
margin-top: -40px;
opacity: 1;
margin-top: -15px;
opacity: 0;
.game-content div.active {
animation: mouse-move 2s ease-in-out infinite;
注意&animation: ... infinite 的使用，让动画能一直进行下去，我们使用JS控制好时间差判断应该显示那个老鼠，应该显示多少只老鼠即可
不然的画，会发现动画完成了再也无法让它继续进行了
点击的是好老鼠还是坏老鼠，应该给出提示如：
可以直接用CSS的伪元素::after置入对错，在点击的时候，根据不同的性质设置不同的值及颜色
.game-content div.good {
background-color: #dfb25d;
.game-content div.good[clicked="1"]::after {
content: "?";
line-height: 70px;
font-size: 40px;
color: #0ad845;
.game-content div.bad {
background-color: #a48f5c;
.game-content div.bad[clicked="1"]::after {
content: "?";
line-height: 70px;
font-size: 40px;
color: #db1536;
1 .container {
width: 500px;
height: 300px;
margin: 50px auto;
border: 1px solid #ddd;
text-align: center;
9 .game-top {
padding-top: 10px;
width: 100%;
height: 90px;
14 .game-top p {
margin: 5px;
18 .game-content {
overflow: auto;
width: 100%;
border-top: 1px solid #ddd;
background-color: #ddf;
25 .game-content ul {
list-style: none;
28 .game-content li {
float: left;
margin-top: 50px;
margin-left: 30px;
width: 100px;
height: 50px;
border-radius: 50%;
background-color: #67d0b4;
box-shadow: 0 0 50px #706565 inset;
38 .game-content li:last-child {
margin-bottom: 50px;
42 .game-content div {
position: relative;
margin-top: -15px;
margin-left: 25px;
width: 50px;
height: 70px;
border-radius: 50%/40%;
background-color: #dfb25d;
opacity: 0;
53 .game-content div.good {
background-color: #dfb25d;
56 .game-content div.good[clicked="1"]::after {
content: "?";
line-height: 70px;
font-size: 40px;
color: #0ad845;
63 .game-content div.bad {
background-color: #a48f5c;
66 .game-content div.bad[clicked="1"]::after {
content: "?";
line-height: 70px;
font-size: 40px;
color: #db1536;
73 @media screen and (max-width: 500px) {
.container {
width: 290px;
.game-content ul {
padding: 0;
.game-content li {
margin-left: 5px;
width: 90px;
.game-content div {
margin-left: 20px;
89 @-webkit-keyframes mouse-move {
margin-top: -40px;
opacity: 1;
margin-top: -15px;
opacity: 0;
99 @keyframes mouse-move {
margin-top: -40px;
opacity: 1;
margin-top: -15px;
opacity: 0;
110 .game-content div.active {
-webkit-animation: mouse-move 2s ease-in-out infinite;
animation: mouse-move 2s ease-in-out infinite;
逻辑是点击开始游戏，倒计时开始，同时好坏老鼠不断运动，控制好坑中好坏老鼠及其数量的随机性，点击好老鼠加分，点击坏老鼠减分，时间到结束游戏。
先看看老鼠的运动
　　// 运动操作
moveUpAndDown: function() {
var that = this;
// 定时器随机定义good|bad老鼠个数，以及需要显示的个数
that.moveTime = setInterval(function() {
for (var i = 0, j = that.mouses. i & ++i) {
that.mouses[i].setAttribute('clicked', '0');
that.mouses[i].className = 'good active';
that.mouses[i].style.display = 'none';
// bad 的个数
var badNum = that.getRandom(0, 8);
for (var i = 0; i & badN i++) {
that.mouses[that.getRandom(0, 8)].className = 'bad active';
// 要显示的个数
var showNum = that.getRandom(0, 8);
for (var i = 0; i & showN i++) {
that.mouses[that.getRandom(0, 8)].style.display = 'block';
使用定时器，定时器的循环与CSS中的动画设置一致，保证循环连贯性
设置class为good 即可定义出一只好老鼠，同理bad 为坏老鼠
在开始游戏，进行调用时，设置class为active&即可让老鼠运动起来
对于打老鼠的操作，要注意到只有运动的老鼠才能点击，每只老鼠只能点击一次
　　// 打地鼠操作
that.mousesWrap[0].addEventListener('click', function(e) {
e = e || window.
var elem = e.target || e.srcE
// 如果当前项被隐藏则不操作，多次点击只取第一次分数
if (elem.style.display !== 'block' || elem.getAttribute('clicked') === '1') {
if (elem.className.indexOf('bad') !== -1) {
that.score -= that.badS
that.score += that.goodS
elem.setAttribute('clicked', '1');
that.text(that.gameScore[0], that.score);
}, false);
倒计时结束之后，清除两个计时器，同时将所有老鼠项display都设为none 即可（否则动画会一直循环展示出来）
// 倒计时，当前剩余游戏时间
countDown: function() {
var that = this;
var t = setInterval(function() {
that.text(that.gameTime[0], --that.totalTime);
if (that.totalTime === 0) {
clearInterval(t);
clearInterval(that.moveTime);
for (var i = 0, j = that.mouses. i & ++i) {
that.mouses[i].style.display = 'none';
alert('游戏结束，得分为：' + that.score);
function MouseGame() {
this.mousesWrap = this.$('.game-content');
this.mouses = this.$('.game-content div');
this.gameStart = this.$('#game-start');
this.gameTime = this.$('#game-time');
this.gameScore = this.$('#game-score');
this.goodScore = 100;
this.badScore = 50;
this.bindEvent();
MouseGame.prototype = {
constructor: MouseGame,
* 获取元素
{String} elem 元素的字符串标识
* @example
* $('div') | $('p.active')
* @return {NodeList}
获取的元素集
$: function(elem) {
return document.querySelectorAll(elem);
* 获取给定范围的随机数
{Number} from 起始
{Number} to
* @return {Number}
getRandom: function(from, to) {
return Math.floor(Math.random() * (to - from + 1)) +
* 设置元素内容
{HTMLElement} elem 要设置的元素
{String} val
设置的内容
* @return {String}
设置好的内容|元素本身的内容
text: function(elem, val) {
if (elem.textContent) {
return val !== undefined ? elem.textContent = val : elem.textC
} else if (elem.innerText) {
return val !== undefined ? elem.innerText = val : elem.innerT
// 运动操作
moveUpAndDown: function() {
var that = this;
// 定时器随机定义good|bad老鼠个数，以及需要显示的个数
that.moveTime = setInterval(function() {
for (var i = 0, j = that.mouses. i & ++i) {
that.mouses[i].setAttribute('clicked', '0');
that.mouses[i].className = 'good active';
that.mouses[i].style.display = 'none';
// bad 的个数
var badNum = that.getRandom(0, 8);
for (var i = 0; i & badN i++) {
that.mouses[that.getRandom(0, 8)].className = 'bad active';
// 要显示的个数
var showNum = that.getRandom(0, 8);
for (var i = 0; i & showN i++) {
that.mouses[that.getRandom(0, 8)].style.display = 'block';
// 打地鼠操作
bindEvent: function() {
var that = this;
// 监听游戏开始/重新开始
that.gameStart[0].addEventListener('click', function() {
that.startGame();
}, false);
// 打地鼠操作
that.mousesWrap[0].addEventListener('click', function(e) {
e = e || window.
var elem = e.target || e.srcE
// 如果当前项被隐藏则不操作，多次点击只取第一次分数
if (elem.style.display !== 'block' || elem.getAttribute('clicked') === '1') {
if (elem.className.indexOf('bad') !== -1) {
that.score -= that.badS
that.score += that.goodS
elem.setAttribute('clicked', '1');
that.text(that.gameScore[0], that.score);
}, false);
// 倒计时，当前剩余游戏时间
countDown: function() {
var that = this;
var t = setInterval(function() {
that.text(that.gameTime[0], --that.totalTime);
if (that.totalTime === 0) {
clearInterval(t);
clearInterval(that.moveTime);
for (var i = 0, j = that.mouses. i & ++i) {
that.mouses[i].style.display = 'none';
alert('游戏结束，得分为：' + that.score);
// 开始游戏
startGame: function() {
this.score = 0;
this.totalTime = 60;
this.text(this.gameTime[0], this.totalTime);
this.text(this.gameScore[0], this.score);
this.countDown();
this.moveUpAndDown();
new MouseGame();
代码有注释应该不难看懂了
阅读(...) 评论()Android打地鼠游戏的修改和优化 - 简书
Android打地鼠游戏的修改和优化
最近在研究android原生的游戏，主要是打地鼠这款经典小游戏的熟悉和修改，因为直接copy的是开源的代码，不过因为年代久远，再加上要修改的符合需求，所以做了一些调整，先看界面：
1.打地鼠的实现图
这个界面是用自定义View来实现的，所以可扩展性比较强，HP是血量，总共20ms，进行倒计时操作，Grade是分数，每打中一次地鼠，则增加100分，首先，我们先看看这两个是如何绘制的:
2.HP和Grade的绘制
也就五行代码，利用Paint画笔，设置字体颜色为红色，字体大小为30sp，利用Canva的drawText()方法进行字体文本的绘制，同时GameAgrs这个类是游戏属性的封装类，里面的HP_X和HP_Y，Grade_X和Grade_Y分别对应着各自的横坐标和纵坐标。接下来，我们来仔细讲解一下这九个老鼠窝的绘制，因为老鼠窝有九个，但是其中的每个属性都是一样的，我们先来看看其中一个鼠窝究竟有哪些元素和属性构成的：
3.每个方块的属性页方法
因为是直接拿源码直接来改的，所以这里面的倒计时有一点问题，利用的是自减而非传统的CountDownTime等倒计时的方式，所以会倒计时会出现一点问题，这个未来会做相应的修改。得到每个方块的属性和方法之后，我们虽然可以绘制鼠窝，但是为了给老鼠一个美丽的家，所以我们设置一下背景和老鼠弹出、撤退的图片。
4.鼠窝背景和老鼠的三个状态的设置
利用Map存储老鼠的三个状态，暴露出一个getBitmap的方法让外界进行调用，获取鼠窝的背景和老鼠的三个状态。到目前为止，我们完成了单个鼠窝的属性，背景和老鼠的绘制，接下来我们需要对九个鼠窝进行绘制，由于代码太多，就不截图了，直接看代码public classGameViewextendsView {public static intspeed=100;//刷新速度private static final intsHeight=298;private booleanisCancel=publicGameView(Context context) {
super(context);
initView(context);
GameView.this.post(updatePaint);//刷新画面线程
GameView.this.postDelayed(setMouse,1000);//增加地鼠的线程,1s后执行}publicGameView(Context context,@NullableAttributeSet attrs) {
super(context,attrs);
initView(context);
GameView.this.post(updatePaint);//刷新画面线程
GameView.this.postDelayed(setMouse,1000);//增加地鼠的线程,1s后执行
Log.i("GameViewThread:",Thread.currentThread() +"");}publicGameView(Context context,@NullableAttributeSet attrs, intdefStyleAttr) {
super(context,attrs,defStyleAttr);
initView(context);
GameView.this.post(updatePaint);//刷新画面线程
GameView.this.postDelayed(setMouse,1000);//增加地鼠的线程,1s后执行}public static voidinitView(Context context){
DisplayMetrics dMetrics =newDisplayMetrics();
//获取屏幕分辨率
dMetrics = context.getResources().getDisplayMetrics();
GameAgrs.InitArgs(dMetrics);
MainMapManager.Init(context);
VolumsPlayer.init(context);}intstart_X= GameAgrs.start_X;//开始画方块的X坐标intstart_Y= GameAgrs.start_Y;//开始画方块的Y坐标privateRandomrandom=newRandom();//定义一个随机函数//初始化每块方块的信息privateListmainList=newArrayList(GameAgrs.Total_Count);{
for(inti =0;i & GameAgrs.Total_Ci++) {
mainList.add(newEpicture());
}}RunnableupdatePaint=newRunnable() {@Overridepublic voidrun() {
GameView.this.invalidate();
GameView.this.postDelayed(this,speed);//每100ms刷新一次}};Runnable setMouse=new
Runnable() {@Overridepublic void run() {
LinkedList
tempList =new
LinkedList();
for(inti =0;i
Epicture epicture =mainList.get(i);
if(epicture.getCurrenty() == GameAgrs.Hole_Empty) {
tempList.add(epicture);}}inttempSize = tempList.size();if(tempSize ==1) {tempList.poll().toShow();}else if(tempSize &1) {//随机出一个或者两个地鼠for(inti =0;itempList.remove(random.nextInt(tempList.size())).toShow();}GameView.this.invalidate();}GameView.this.postDelayed(this,800- GameAgrs.Grade/20);}};private void
drawMessage(Canvas canvas) {Paint paint =new
Paint();paint.setColor(Color.RED);paint.setTextSize(GameAgrs.text_size);canvas.drawText("HP："+ GameAgrs.HP,GameAgrs.HP_X,GameAgrs.HP_Y,paint);canvas.drawText("\nGrade:
"+ GameAgrs.Grade,GameAgrs.Grade_X,GameAgrs.Grade_Y,paint);}//游戏结束处理private void
doGameOver() {AlertDialog.Builder builder =new
AlertDialog.Builder(getContext());if(GameAgrs.Grade&2500)builder.setTitle("继续努力O(∩_∩)O");else if(GameAgrs.Grade&3500)builder.setTitle("那你很棒棒呦（。＾▽＾）");elsebuilder.setTitle("哇!你坠棒(?o??o?)??");builder.setMessage("得分:"+ GameAgrs.Grade+",是否重新开始游戏?");builder.setPositiveButton("确定", newDialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, intwhich) {GameAgrs.Reset();//用户信息重置isCancel=initView(getContext());GameView.this.post(updatePaint);//刷新画面线程GameView.this.postDelayed(setMouse,1000);}});builder.setNegativeButton("取消", newDialogInterface.OnClickListener() {@Overridepublic voidonClick(DialogInterface dialog, intwhich) {isCancel=GameAgrs.Reset();//用户信息重置initView(getContext());GameView.this.invalidate();}});builder.setCancelable(false);AlertDialog dialog = builder.create();dialog.show();}@Overrideprotected void
onMeasure(intwidthMeasureSpec, intheightMeasureSpec) {super.onMeasure(widthMeasureSpec,heightMeasureSpec);setMeasuredDimension(ViewGroup.LayoutParams.MATCH_PARENT,sHeight);}@Overrideprotected void
onDraw(Canvas canvas) {super.onDraw(canvas);if(GameAgrs.HP&=0) {getHandler().removeCallbacks(updatePaint);getHandler().removeCallbacks(setMouse);doGameOver();}canvas.drawColor(Color.WHITE);//将背景设置为白色drawMessage(canvas);//显示用户信息if(isCancel) {for(inti =0;iEpicture epicture =mainList.get(i);intx = i % GameAgrs.Colums_C//获得所在列inty = i / GameAgrs.Colums_C//获得所在行canvas.drawBitmap(MainMapManager.getBitmap(epicture.getEmpty()),start_X+ x * GameAgrs.EpicSize,start_Y+ y* GameAgrs.EpicSize, null);}}for(inti =0;iEpicture epicture =mainList.get(i);intx = i % GameAgrs.Colums_C//获得所在列inty = i / GameAgrs.Colums_C//获得所在行canvas.drawBitmap(MainMapManager.getBitmap(epicture.getCurrenty()),start_X+ x * GameAgrs.EpicSize,start_Y+ y* GameAgrs.EpicSize, null);epicture.toNext();//进入下一个状态}}//触摸事件@Overridepublic boolean
onTouchEvent(MotionEvent event) {if(event.getAction() != MotionEvent.ACTION_DOWN) {}floatx = event.getX();floaty = event.getY();intX = (int) ((x -start_X) / GameAgrs.EpicSize);intY = (int) ((y -start_Y) / GameAgrs.EpicSize);if(X &0|| Y &0|| X &=3|| Y &=4) {//如果打击不在方块范围内则不响应//点击外围的时候，则开始游戏startGame();}intnum = Y * GameAgrs.Colums_Count+ X;Log.i("game-----------",num +"");if(num &9){//暂时先解决数组出界的问题Epicture epicture =mainList.get(num);epicture.beHited();}}private void
startGame() {GameAgrs.Reset();//用户信息重置initView(getContext());isCancel=GameView.this.post(updatePaint);//刷新画面线程GameView.this.postDelayed(setMouse,1000);}}代码不长，但是有几个方法，首先定义了updatePaint和setMouse的两个runnable，分别用来更新UI界面和老鼠动作，onDraw()方法用来绘制九个鼠窝和背景和老鼠的动作状态，onTouchEvent主要用来处理点击事件，具体的可以看看代码，都有注释，并不难理解，doGameOver()，则定义了一个弹窗，点击确定则继续开始，点击取消，则重置页面初始状态。以上就是打地鼠的代码了，虽然不全，但是精华已经全都交代出来了，另外这个还只是最初的修改版本，未来工作中还有更多的修改，包括页面的重绘，逻辑的修改等等。
?开启? 【iAPP实现进入界面执行逐一显】 〖 15:22:14〗 《//首先开一个线程，因为你有这么多的stop要执行，其次必须使用ufusui（）,否则可能不会显示你的字体。切记:文字必须设置“text=”,否则很尴尬，还有我这里的8,14是两个文...
Android中使用图形处理引擎，2D部分是android SDK内部自己提供，3D部分是用Open GL ES 1.0 大部分2D使用的api都在android.graphics和android.graphics.drawable包中。他们提供了图形处理相关 的： Can...
前言： 在接触Android这么长时间，看到很多大牛都在和大家分享自己的知识，深有体会，刚好前段时间写了一个Demo,在此分享给大家。 下面就直接进入主题： 1.绘制的逻辑： 首先绘制一个矩形，然后获取矩形长、宽各自的起始位置且划分为n等份，就成了带刻度尺的正方形，然后根据...
一、Android开发初体验监听器使用匿名内部类的好处：1，因为匿名内部类的使用，我们可在同一处实现监听器方法，代码更清晰可读。2，事件监听器一般只在同一处使用，使用匿名内部类可避免不必要的命名类实现。 二、Android与MVC设计模式模型对象存储着应用的数据和业务逻辑。...
一、概述 1. 四线格与基线 小时候，我们在刚开始学习写字母时，用的本子是四线格的，我们必须把字母按照规则写在四线格内。 比如： 那么问题来了，在canvas在利用drawText绘制文字时，也是有规则的，这个规则就是baseline（基线）！ 我们先来看一下什么是基线： ...
原创文章，教师、家长经验实录 转载请注明出处“妈妈在进步” 01. 平平抬起头，冲着妈妈喊：“文具盒又没有错，你要向文具盒道歉！” 平平捧着裂开的文具盒伤心地哭着，妈妈看着平平豆大的泪珠，内疚地站着。过了一会，妈妈说：“对不起。”平平抬起头，冲着妈妈喊：“文具盒又没有错，你...
1104文学作品作业提交： 中--》韩 ??? ????? ??? ???? ? ??? ??? ?? ? ??? ??? ??? ?? ?? ??. ??? ????? ???? ??? 6?? ?? ?? ?? ???? ?????. ??? ?? ?? ???? ??...
“生了个女孩！” 这句话对父亲来说十分特别，比以往任何时候都有理由开瓶香槟庆祝。 哈佛商学院上个月的一项研究发现，女儿给父亲带来的可不只是“甜蜜、乐趣和一切美好的事”，对他的事业也很有好处，能使他成为更好的丈夫，甚至还有延年益寿的功效。 最终得以了解女人的性别 让丈夫了解妻...论文发表、论文指导
周一至周五
9：00&22：00
基于计算思维的《手机游戏编程之打地鼠》教学设计
　　【摘 要】中小学算法与程序设计教学一直被诟病为大学程序设计教育的下放，且在超越技能训练方面一直停滞不前，需要努力探索新的道路。从教学理念来看，以计算思维为指导开展算法与程序课堂教学，不仅有利于克服传统教学“只见代码不见人”的弊端，且有利于将计算思维塑造成一种基本的科学素养;从教学工具来看，以Scratch、App Inventor等为代表的可视化、积木式编程工具解放了学生的双手，有利于学生创新能力的培养，应成为中小学算法与程序设计教育的主流工具。基于此，本课题以打地鼠游戏设计为例，采用App Inventor工具，以计算思维为指引设计具体教学目标和教学任务，努力培养学生的计算思维和创新能力。 中国论文网 /9/view-6748359.htm　　【关键词】App I计算思维;打地鼠游戏 　　【中图分类号】G434 &【文献标识码】B 　　【论文编号】（8-04 　　当今时代，以平板、手机为代表的智能移动终端得到极大推广，移动应用开发成为程序设计领域的新宠。这一时代变化也应当在基础教育有所映射，以消解程序设计教育领域的“PC霸权”。面向移动终端的编程语言有很多，但专业的开发工具需要涉及较多的语法学习，往往令初学者望而生畏。App Inventor具有零基础、无门槛、可视化、模块化等特点，符合新手的自然经验逻辑，只需“创意+代码拼接”，就可以开发自己的移动应用。将其作为一种事件驱动式编程语言，也有利于学生计算思维的培养。[1]因此，App Inventor一经对外开放使用，就受到了国内外教师和学生的青睐。 　　当然，选择一种合适的教学语言只是第一步，我们还应该特别关注“教什么”和“如何教”的问题。当前，中小学的算法与程序教学过分强调变量、函数、语句结构等编程语言和程序结构的技能，忽视了其内在的“算法思想”，长期以来陷入“狭隘工具论”误区而难以自拔。幸运的是，计算思维的提出为走出这一误区提供了新的方向。其提出肇始于2006年卡内基?梅隆大学计算机科学系主任周以真（Jeannette M. Wing）的界定：计算思维是运用计算机科学的基础概念进行问题求解、系统设计以及人类行为理解的涵盖计算机科学之广度的一系列思维活动。[2]如今，计算思维受到广泛重视，不少学者对该概念进行了深入解读。其中，Karen Brennan和Mitchel Resnick的研究工作具有较强的实践指导性。他们从Scratch交互式媒体设计活动的特征出发，建立了计算思维的三维框架。第一个维度是计算概念，包括顺序、循环、事件、并行、条件、运算符、数据;第二个维度是计算实践，包括递增与迭代、测试与调试、抽象与模块化;第三个维度是计算观念，包括表达（通过创建交互性媒体表达观点和创意）、联系（交流）、质疑（理解技术）。[3]可见，这个三维框架并不仅局限于概念、知识和原理层面，还包括超越算法和编程之外更多的学习结果，包括学生在创建互动媒体过程中的问题分析与解决能力、系统思考与设计能力、社交能力、人格塑造与思维品质发展以及价值观的形成。[4] 　　Marc Prensky曾指出，娱乐与教学合为一体的教学模式才是真正适合于青少年的教学模式。[5]研究表明，将游戏设计融入教学可以激发学生的探究欲，消除畏难心理;增强师生互动，使课堂更加生动有趣，实现教师和学生的双赢。本课题以经典的打地鼠游戏设计为例，基于上述三维框架设计教学目标，挖掘App Inventor开发游戏的功能，为通过算法与程序教学培养学生的计算思维能力提供新的思路。 　　方案设计 　　1. &教材与学生情况分析 　　本课是自编教材《跟我学App Inventor》第三章《打地鼠游戏》的第一课。教学内容以打地鼠游戏为主线，重点关注“过程”这一计算概念，以及抽象和模块化、测试和调试等计算实践，培养学生从界面设计、功能设计等不同角度开发游戏，激发更多的创意。 　　本课的教学对象是浙江省温州中学高一学生。通过前面几节课的学习，学生已熟练掌握了手机游戏程序的开发流程，对事件、属性、变量、选择结构、数学运算、逻辑运算等重要概念已经有了一定的认识。另外，通过之前的积累，学生已经对运用App Inventor开发游戏产生了浓厚的兴趣，在界面设计与编程能力方面都有了显著的提升，对游戏设计也有了自己的想法。 　　2. &教学目标 　　计算概念：掌握“过程”的定义与使用。 　　计算实践：学生在设计、创建、探究和调试的过程中，逐步内化抽象和模块化、过程调用和代码复用、测试和调试计算实践策略。 　　计算观念：通过体验App Inventor，设计并制作打地鼠游戏，表达自己的想法。 　　3. &可选方案的设计与选择 　　基于上述教材和学情分析以及本课的教学目标，笔者初步设计了三种教学方案（见表1）。 　　表1 &打地鼠方案 　　名 　　称 方案内容 关键组件 　　计算概念 　　计算实践 　　计算观念 　　方 　　案 　　一 地鼠随机产生，被击中得分，否则失分 画布组件、一个图像精灵组件、时钟组、声音组件 简单选择结构、自定义过程 抽象和模块化、测试和调试、代码复用 表达 　　方 　　案 　　二 地鼠随机产生，被击中得分，否则失分;根据分数，地鼠出现频率不同 同上 多个选择结构、自定义过程 抽象和模块化、测试和调试、过程调用和代码复用 表达、 　　联系 　　方 　　案 　　三 地鼠，青蛙，兔子随机产生，击中不同角色，得分不同 画布组件、多个图像精灵组件、时钟组件、声音组件 复杂选择结构、多个自定义过程 多种水平抽象和模块化、测试和调试、过程调用和代码复用 表达、
　　联系 　　整体而言，三个方案具有由易到难、逐步递进的关系。从计算概念的角度来看，方案一突出了“过程”的内涵及意义，方案二、三在此基础上更强调运算及数据。从计算实践的角度来看，方案一注重学生通过角色扮演掌握抽象和模块化的思想，并在不断试误的过程中掌握修正问题的方法及代码复用策略。方案二、三更强调学生对教师作品的再利用和再创造，完成更复杂的作品。方案三除了涉及地鼠对象层→控件信息层→数据结构层→编程语言层的抽象，还包括青蛙、兔子等不同对象及其之间关系的抽象。从计算观念来看，方案一主要让学生学会利用计算表达自己的想法。方案二、三更关注培养学生的联系观念，强调学生通过再修改他人的代码增加游戏的趣味性，创造自己的个性化作品。从可操作性的角度来看，方案二、三需设计多种交互效果，代码块更为复杂，容易使学生望而生畏，对于初学者而言不太合适。根据上述分析，本课将重点围绕方案一展开，其他方案作为拓展性方案在教学后半段呈现，以激发学生更多的创意，同时为那些基础较好的学生做预设准备。 　　4. &程序编写 　　打地鼠应用程序共分为五个部分：一是屏幕初始化事件的程序：借助随机函数，设置地鼠产生的位置。二是计时器事件的程序：借助随机函数，设置地鼠定时产生的位置。三是地鼠触碰事件的程序：地鼠被打中，发出敲中声，位置也随机发生变化。四是画布触碰事件所进行的计分程序：如果触碰到画布上的地鼠，分数加一，否则减一。五是重新开始的程序：点击重新开始按钮，界面上得分、失分文本框内容清空为零。 　　“过程”概念的讲解主要有两种教学思路。一是根据角色扮演及流程图，引导学生编写代码。学生在编写程序时，可能会发现上述一、二、三部分程序中均有相同的代码，实现的功能有相同之处（地鼠在画布上随机产生）;教师再自然引出“过程”这一概念，讲解其意义及使用方法。二是教师直接讲解“过程”的概念、意义并示范建立“过程”。在实际教学中，笔者选择了思路一，因为学生从多次重复出现的代码中很容易想到如何缩短程序、提高代码可读性的问题，方便引出“过程”的含义及使用。 　　5. &拓展应用 　　人类学习具有“聚类”特点，不管是新知识的获取还是原有知识的同化，都习惯以“类”为依据进行加工、存储和提取。教学设计与实施理应体现这种逻辑，以某种聚类方式将相关学习内容连成组块，从而在局部上聚类知识内容，在宏观上形成课程内容的集合，逐步呈现给学习者，从而达到较好的教学效果。根据已有研究，大致有三种聚类方式：以相似的功能、相似的技术思想、相似的目标聚类。[6] 　　通过这一课的学习，学生理解了过程，学会了抽象和模块化、代码复用、测试和调试计算实践策略，并能够利用计算表达自己的观念。按照上述聚类思想，可以拓展出很多的应用。例如，以相似的功能（实现地鼠的出现）来聚类设计打地鼠项目，可以借助列表建立多个洞口;建立多种音效和游戏规则，使游戏具有更强的交互性;以相似的技术思想为例，学生可建立多个游戏角色并分别设置相应行为，增加游戏挑战度及趣味性，更好地进行个性化表达。因此，教学中希望学生以界面设计、功能设计为触发点，尽可能多地发散出有聚类性质的作品。 　　教学实践 　　在本次教学中，笔者主要通过四个环节来完成教学。 　　1. &游戏体验 &引入新课 　　首先，让学生玩打地鼠游戏，激发其探究欲望，同时抛出一个问题：这个游戏如何设计。游戏体验结束后，请一位学生回答。本环节的设计有利于教学的展开，也可为后面学生的拓展应用做铺垫。 　　2. &角色扮演 &脑力震荡 　　学生角色扮演打地鼠游戏。首先引导学生小组讨论：如果现场模拟打地鼠游戏，我们需要几位同学？每位同学在游戏中的角色是什么？每个人的游戏规则是什么？脑力震荡后，请一组学生进行现场表演。每位演员对自己的角色进行功能及规则介绍。经过角色扮演，学生成功地将打地鼠游戏任务分解为不同模块，并抽象成程序可解决的问题。本环节注重引导学生对问题进行抽象与模块化（见表2）。学生归纳出的计算概念如表3所示。 　　表2 &角色扮演――抽象与模块化问题解决策略 　　演员上场 布置相关控件工具 　　演员化妆 对控件进行属性设置 　　加入剧本 1.地鼠随机出现 　　2.画布触碰事件计分设计 　　3.地鼠触碰音效设计 　　欣赏演出 启动程序 　　表3 &计算概念解析 　　组件分析 地鼠精灵，得分标签，失分标签，时钟，重置按钮、画布 　　地鼠坐标范围 X轴：[0，画布宽度-地鼠宽度] 　　Y轴：[0，画布高度-地鼠高度]数学运算 　　地鼠随机产生 Random integer from随机数运算 　　得分 数学运算及逻辑判断 　　组件动作 　　（针对组件的事件、方法） 重置按钮：Click事件;图像小精灵：Touched事件; 　　画布：Touched事件;时钟：Timer事件 　　打地鼠项目的思路清晰之后，笔者引导学生画相关流程图，即开展抽象建模，将解决问题的过程用流程图的方式表达出来。以画布触碰事件的程序流程图为例（如图1），让学生独立完成流程图设计，形象直观的流程图使得各种操作一目了然，不会产生“歧义性”，便于发现有错误的算法，并有利于转化为程序。 　　图1 &画布触碰事件流程图 　　经过上面的分析之后，笔者已经引导学生将打地鼠游戏题转化为易于理解和实现的程序问题。 　　3. &突破重点 &解决疑惑 　　经过上一环节的角色扮演，学生迫切希望能够亲自设计打地鼠应用。笔者先演示屏幕初始化事件的程序，随后向学生提出任务一：实现地鼠在屏幕初始化、时钟控制、地鼠被击中时均可随机出现。学生在笔者的指引下完成任务。这时，学生会发现三个事件的程序块相同，纷纷提出如何避免编写重复代码的问题，从而引出教学重点“过程”这一概念。笔者演示过程的建立及调用。学生修改原有的程序，重写代码，不断测试和调试，观察是否实现同样效果，以深化对“过程”的理解――“过程”中的代码可以被重复地调用，从而减少编程的工作量，优化代码结构，也方便日后对程序的阅读、维护、使用。
　　接下来，笔者提出任务二：地鼠被点中则加一分;否则，减一分并设置声效。让学生继续通过自主探究完成任务。学生在调试程序时，会发现点中地鼠时分数并没有发生变化。此时，应留给学生充足的自主探究空间和时间，让学生自由讨论，发散他们的思维，提出不同的解决方案，以便让学生更好地掌握测试和调试计算实践策略。如果学生未能解决问题，引导学生回顾计分原理：利用if选择语句，实现成绩累加，并强调细节，即得分框、失分框的text属性一开始均应设置为“0”，方能实现数学运算。 　　4. &拓展提升 &课堂总结 　　学完本课，为鼓励学生产生一些创意想法，笔者为学生提供了一份表格供学生参考（见表4），让学生将自己的创意记录下来。学生可以从界面设计或者功能设计两个角度出发记录创意。 　　表4 创意 　　创意维度 具体描述 　　添加按钮，实现游戏背景音乐控制 　　界面设计 建立多个界面，成绩超过定值后，跳转到另外界面 　　添加多个角色，地鼠外其他动物 　　分数达到定值后，时钟频率加快，游戏难度增加 　　功能设计 地鼠从多个洞出现 　　...... 　　最后，笔者对本节课进行了总结（如图2），并告诉学生App Inventor可以开发很多生动有趣的游戏，只要我们大胆想象，设计游戏是一件轻松惬意的事情。App Inventor课程不仅仅是让大家掌握手机开发的知识和技术，更希望大家在学习完课程后能够开发出更有创意、有生活意义的作品。在体验这一过程中提高自己的计算思维能力。 　　图2 &打地鼠游戏总结 　　教学反思 　　本课的教学重点是“过程”的内涵，抽象和模块化、测试和调试计算实践策略。从任务完成情况来看，全部学生完成了基础任务。对于拓展任务，许多学生利用课堂时间实现了创意想法。部分学生在游戏界面上进行了想象，加入青蛙角色、游戏开始界面、游戏结束界面等;还有学生加入多重if判断、背景音乐等，提高游戏难度及趣味性。整个教学过程生动有趣，学生在玩中学、学中玩，提高了计算思维能力、创新能力。 　　教学过程中，笔者先让学生带着问题玩游戏，并通过玩游戏初步归纳打地鼠所需要的元素;再让学生角色扮演，激发学生主动参与学习活动的热情，也实现了对游戏的抽象。通过任务一，学生自主发现“过程”这一计算概念，并修改原有设计，理解了代码复用的思想和价值。通过任务二，学生在调试中优化自己的方案设计，更好地表达自己的想法。最后通过体验他人的打地鼠游戏应用，学生感受游戏中一些有创意的、有趣的设计，进一步拓宽知识视野。 　　基金项目：江苏省2014年度普通高校研究生实践创新计划项目“APP INVENTOR在高中算法与程序设计教学中的应用研究”;教育部人文社会科学研究青年基金项目“义务教育STEM校本课程的开发与应用研究”（项目编号：13YJC880121） 　　（作者单位：江苏南京师范大学教育科学学院）
转载请注明来源。原文地址：
【xzbu】郑重声明：本网站资源、信息来源于网络，完全免费共享，仅供学习和研究使用，版权和著作权归原作者所有，如有不愿意被转载的情况，请通知我们删除已转载的信息。
xzbu发布此信息目的在于传播更多信息，与本网站立场无关。xzbu不保证该信息（包括但不限于文字、数据及图表）准确性、真实性、完整性等。}