《Android程序开发基础项目实践》实践报告
院 校：泉州信息工程学院
专业班级：软件工程(专升本)3班
姓 名：**
学 号：2103840332
实验时间：2022-12-9
指导老师： 罗杭春
《Android程序开发基础项目实践》实践报告
一、实验目的和内容
使用wxml、wxss、JavaScript语言，完成Android程序开发之《移动端游戏-贪吃蛇》项目开发，以此锻炼学生对移动开发基本组件的使用、熟悉移动端开发基本技术。
二、实验结果（效果截图及代码）
<view class="container">
<image src='/images/snake0.jpg' bindtap="gotoGame" data-time="{{600}}">image>
<image src="/images/snake1.jpg" bindtap="gotoGame" data-time="{{200}}">image>
view>
gotoGame:function(e){
console.log(e);
wx.navigateTo({
url: '/pages/snakes-game/game?time='+e.target.dataset.time,
})
},
<view class="container">
<view>当前分数：{{score}}view>
<canvas canvas-id="gameCanvas">canvas>
<view class="btnBox">
<button bindtap="changeDirection" data-direction="{{1}}">↑button>
<view>
<button bindtap="changeDirection" data-direction="{{2}}">←button>
<button bindtap="changeDirection" data-direction="{{-1}}">↓button>
<button bindtap="changeDirection" data-direction="{{-2}}">→button>
view>
view>
<button bindtap="myShowModal1">重新开始button>
view>
//表示蛇的数据对象
var width =600
var height =600
var snakeMap=[]
var stdwidth=20;//标准各自宽度
var direction=-2;//上：1 下：2 左：3 右：4
var ctx //canvas对象
var foodX
var foodY
var foodX2
var foodY2
var snakeX
var snakeY
var timePeriod//时间周期
var intervalID//定时器
var newX;
var newY;
var number;//随机是否产生有毒食物
Page({
/**
* 页面的初始数据
*/
data: {
score:0
},
/**
* 生命周期函数--监听页面加载
*/
onl oad:function(options) {
timePeriod=options.time;
this.initGameData(options);
},
/**
* 初始化游戏数据
*/
initGameData:function(options){
this.setData({ //重置分数为0
score:0
})
ctx=wx.createCanvasContext('gameCanvas');
//初始化蛇身
snakeMap=[{'x':20,'y':20},
{'x':40,'y':20},
{'x':60,'y':20},
{'x':80,'y':20},
{'x':100,'y':20},
{'x':120,'y':20}]
//蛇头所在的位置
snakeX=snakeMap[snakeMap.length -1].x;
snakeY=snakeMap[snakeMap.length -1].y;
//产生随机数
var random=Math.ceil(Math.random()*4);
switch(random){
case 1:
direction=-1;
break;
case 2:
direction=1;
break;
case 3:
direction=-2;
break;
case 4:
direction =2;
break;
default:
break;
}
direction=-1;
var that=this;//使得taht指向js对象
this.intervalID=setInterval(function(){
that.gameRefresh();},
timePeriod
);
this.makeFood();
},
/**
* 定时刷新，使得蛇能移动
*/
gameRefresh:function(){
//根据方向创建节点
snakeX=snakeMap[snakeMap.length -1].x;
snakeY=snakeMap[snakeMap.length -1].y;
switch(direction){
case 1:
newX=snakeX;
newY=snakeY -stdwidth;
break;
case -1:
newX=snakeX;
newY=snakeY +stdwidth;
break;
case 2:
newX=snakeX-stdwidth;
newY=snakeY;
break;
case -2:
newX=snakeX+stdwidth;
newY=snakeY;
break;
default:
break;
}
// 把新节点加入到蛇身
snakeMap.push({'x':newX, 'y':newY});
// 开始绘制蛇
ctx.fillStyle = 'red';
for(var i = 0; i < snakeMap.length - 1; i++){
// ctx.fillRect(snakeMap[i].x, snakeMap[i].y, stdwidth, stdwidth);
ctx.drawImage("/images/start.jpg",snakeMap[i].x, snakeMap[i].y, stdwidth, stdwidth);
}
var headUrl;
switch(direction){
case 1:
headUrl = "/images/head_up.jpg";
break;
case -1:
headUrl = "/images/head_down.jpg";
break;
case 2:
headUrl = "/images/head_left.jpg";
break;
case -2:
headUrl = "/images/head_right.jpg";
break;
default:
break;
}
ctx.drawImage(headUrl,snakeX, snakeY, stdwidth, stdwidth);
// 绘制食物
// ctx.fillRect(foodX, foodY, stdwidth, stdwidth);
ctx.drawImage("/images/food.jpg", foodX, foodY, stdwidth, stdwidth);
if(number > 0){
ctx.drawImage("/images/food2.jpg",foodX2, foodY2, stdwidth, stdwidth);
}
// 判断蛇是否吃到了食物：下一步要走的节点和食物节点的坐标重合
if(newX == foodX && newY == foodY){
// 改变食物坐标
this.setData({
score:this.data.score + 1
})
this.makeFood();
} else if(newX == foodX2 && newY == foodY2){ // 吃到了有毒食物
this.setData({
score:0
})
// 判断蛇身长度，决定是否死亡
if(snakeMap.length <= 5){
this.myShowModal("毒死");
}else{
var newArray = snakeMap.slice(snakeMap.length - 2);
snakeMap = newArray;
}
this.makeFood();
}
else{
// 没吃到，则正常前进，把尾巴删除
snakeMap.shift();
}
ctx.draw();
this.collisionTest();
},
makeFood:function(){
number = Math.ceil(Math.random()*2);
foodX = Math.ceil(Math.random() * ((width / stdwidth) / 2 -1)) * stdwidth;
foodY = Math.ceil(Math.random() * ((height / stdwidth) / 2 -1)) * stdwidth;
foodX2 = Math.ceil(Math.random() * ((width / stdwidth) / 2 -1)) * stdwidth;
foodY2 = Math.ceil(Math.random() * ((height / stdwidth) / 2 -1)) * stdwidth;
},
/**
* 改变贪吃蛇的方向
* @param {*} e
*/
changeDirection:function(e){
var newDiretion = e.target.dataset.direction;
direction = newDiretion + direction != 0 ? newDiretion : direction;
},
/**
* 碰撞检测
* @param {} param0
*/
collisionTest:function(){
var message = null;
// 如果下一个新节点就是蛇身自己本身的某个节点，那么就是咬到自己
for(var i = 0; i < snakeMap.length - 1; i++)
if(newX == snakeMap[i].x && newY == snakeMap[i].y){
message = "我寄";
}
if(snakeX <= 0 || snakeY <= 0 || snakeX >= width /2 || snakeY >= height / 2){
message = "撞墙死"
}
this.myShowModal(message);
},
/**
* 根据传来的信息显示是否游戏结束
* @param {*} message
*/
myShowModal:function(message){
if(message != null){
clearInterval(this.intervalID); // 清除定时器
var oriThis = this;
wx.showModal({
title:"是否重新开始游戏？",
content:message,
success:res=>{
if(res.confirm){
oriThis.initGameData();
}
if(res.cancel){
wx.navigateTo({
url: '/pages/snakes-home/home',
})
}
}
})
}
},
//重新开始
myShowModal1(){
this.setData({
score:0
})
wx.navigateTo({
url: '/pages/snakes-game/game',
})
},
canvas{
margin-top: 30rpx;
border: 1rpx solid black;
width: 320px;
height: 320px;
}
/* 方向键按钮整体区域 */
.btnBox{
margin-top: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
}
/* 方向键按钮第二行 */
.btnBox view{
display: flex;
flex-direction: row;
}
/* 所有方向键按钮 */
.btnBox button{
width: 100rpx;
height: 100rpx;
}
/* 所有按钮样式 */
button{
margin: 20rpx;
background-color:lime;
color: white;
}
三、本次项目实训的自我评价和感想
这次实训使我们明⽩我们所⽋缺的不仅仅是技术知识，更重要的是有⼀种处理事情的⽅法、⾯对问题的⼼态和动⼿能⼒。⾯对完全陌⽣的新知识、新技术、新项⽬以及整个IT⾏业，我们不能畏惧，要以⼀种积极的⼼态去⾯对，分析并抓住关键所在。因为我们所即将应对的每⼀个项⽬都是既需要实际操作，⼜需要详细规划的。作为组长，协调组员、激励其他学员和积极参与项⽬研发是我每天必做的⼯作。我认为每个⼈都应该在团队中做好⾃⼰应尽的职责，再优秀的个⼈也可能完成⼀个即庞⼤⼜复杂的项⽬⼯作，我们必需紧密的联合在⼀起，以⼀个团队的⾓⾊来⾯对。
版权声明：
1.大文斗范文网的资料来自互联网以及用户的投稿，用于非商业性学习目的免费阅览。
2.《《Android程序开发基础项目实践》实践报告》一文的著作权归原作者所有，仅供学习参考，转载或引用时请保留版权信息。
3.如果本网所转载内容不慎侵犯了您的权益，请联系我们，我们将会及时删除。