快乐的小鸟之避难(一)
欢迎查看我的cancvs画图类实践
纯前端的简单cancvs学习之路,没有复杂的业务逻辑,不涉及高深的算法,只为自我充实。
代码提取:
链接:https://pan.baidu.com/s/1NyrAxJi9S03H-bjGtL3O9g
提取码:bfjn
整体效果图
- 窗口的大小改变,支持自适应;
- 游戏提示,支持国际化;
- 简易的操作过程,支持自定义操作按钮;
窗口变化
- 使用resize进行监听窗口大小
$(window).resize(function () {//重绘窗口大小
init_window();
})
/**
* 初始化窗口大小
* size 9最大化 2缩小 0默认大小屏幕的二分之一
*/
function init_window(size) {
if(window) {
var birdsyle = {};
if(size === 9) {//最大化
sWidth = document.body.clientWidth-10;//有效宽度
sHeight = document.body.clientHeight-10;//有效高度
birdsyle = {"height":sHeight, "width":sWidth, "margin-top":0};
} else if (size === 2) {//当前大小的二分之一缩小
sWidth = sWidth/2;
sHeight = sHeight/2;
if(sWidth < document.body.clientWidth/4) {
alert("已经足够小了,不能更小了.");
return;
}
birdsyle = {"height":sHeight, "width":sWidth, "margin-top": (document.body.clientHeight -sHeight)/2};
} else {//默认大小二分之一大小
sWidth = document.body.clientWidth/2;//有效宽度
sHeight = document.body.clientHeight/2;//有效高度
birdsyle = {"height":sHeight, "width":sWidth, "margin-top":(document.body.clientHeight -sHeight)/2};
}
$("#main_bird").css(birdsyle);
init_playwindow();
} else {
alert("请联系管理员!");
}
}
支持国际化
- 使用统一语言管理的方式,加载语言
var lable ={
welcome: "欢迎:",//0
playname: "快乐的小鸟之避难", //1
playpathurl: "https://blog.csdn.net/ljcc122",
playpathtitle: "去快乐的小鸟官网",//2
zoomout :"缩小", //3
zoomouttitle : "缩小", //
maximum : "最大化",//4
maximumtitle : "最大化",
shutdow : "退出",//5
shutdowtitle : "退出",
shutdowmsg : "是否确定退出?",//6
username : "素雪年华",//7
error: "发生异常,请联系管理员!",//8
lifyname:"当前生命值:",//9
motionerror:"方向错误,请按照正确的方向移动",//10
rewelcome:"欢迎下次再来!",//11
gemover:"游戏结束,是否再来一局?",//12
keydowerror:"请选择指定的按钮",//13
protection:"剩余无敌时间:",//14
survive:"生存时间:",//15
gold: "金币:",
integral: "积分:",
description:"关于使用说明",
description1:"使用'A'或者'<-'左移动, 'D'或者'->’右移动躲避移动的物体,生存时间越长,获得的积分越高。",
startplay : "游戏#time#秒后开始",
}
- 语言展示
/**
* 初始化游戏数据,以及展示语言,实现方式一
*/
function init_msg() {
$("#playname").text(lable.playname).attr({"href":lable.playpathurl, "title":lable.playpathtitle});
$(".zoomout").text(lable.zoomout).attr({"title":lable.zoomouttitle});
$(".maximum").text(lable.maximum).attr({"title":lable.maximumtitle});
$(".shutdow").text(lable.shutdow).attr({"title":lable.shutdowtitle});
$(".username").text(lable.welcome+lable.username);
$(".integral").text(lable.integral+userbase.integral).attr({"title":(lable.integral+userbase.integral)});
$(".gold").text(lable.gold+userbase.gold).attr({"title":(lable.gold+userbase.gold)});
}
支持自定义操作按钮
//全局键盘事件
$(document).keydown(function(event){
fnkeydow(event);
});
/**
* 键盘事件
*/
function fnkeydow(event) {
// 这里监听左右移动
if(event.keyCode == birdbase.leftbtn || event.keyCode == 37 ) {//左移动
bird.motion("left");
} else if( event.keyCode == birdbase.rightbtn || event.keyCode == 39 ) {//右移动
bird.motion("right");
} else {
if(window.console) console.log(lable.keydowerror);
}
}
//这里自定义相关数据,在加载前设定
var birdbase = {
protection:3,
fontsize : "12px Arial",
fontsize_20: '20px Arial',
startendtime: 3,
leftbtn:65,//左
rightbtn: 68,//右
birdspeed :5,//鸟的移动速度
birdfirepower:1,//鸟的火力
} ;
主要问题
- 监听窗口变化,依据窗口大小重置游戏窗口大小,使用window.resize实现。
- 多语言,使用统一标签管理,在初始化前进行加载,类似系统异步请求。
- 抽象数据类型,都具有生命,位置,速度等共有属性。
- 动画效果,可以使用定时器,或者window.requestAnimationFrame的动画函数。
- 碰撞检测依据位置检测。
- 生命检测,依据鸟实例的生命值进行检测。
演示
样式修改:
主要利用css的动画:animation
body{
background:#95c2f7;
animation:mymove 5s infinite;
/*Safari 和 Chrome:*/
-webkit-animation:mymove 5s infinite;
}
@keyframes mymove{
from {background-color:#95c2f7;}
to {background-color:#b5d5fb;}
}
最后这只是小白的简单实现,下一步小白将修改样式,同时继续扩展并完善相关功能。