HTML+CSS+JS实现卡通人物吃水果游戏
【摘要】 HTML+CSS+JS实现卡通人物吃水果游戏
效果演示：
代码目录：
主要代码实现：
HTML代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/lufylegend-1.10.1.min.js"></script>
<script>
//当前浏览器是否是移动浏览器
if (LGlobal.canTouch) {
//指定要使用哪种缩放模式的值。
LGlobal.stageScale = LStageScaleMode.EXACT_FIT;
//如果是移动端的话 就平铺效果
LSystem.screen(LStage.FULL_SCREEN);
}
</script>
</head>
<body>
<div id="legend"></div>
</body>
</html>
<script>
// 引擎初始化函数。等同于 init
init(50, "legend", 800, 450, main);
//素材变量
var imgData = [{
name: "back",
path: "./images/back.jpg"
},
{
name: "player",
path: "./images/player.png"
},
{
name: "item0",
path: "./images/item0.png"
},
{
name: "item1",
path: "./images/item1.png"
},
{
name: "item2",
path: "./images/item2.png"
},
{
name: "item3",
path: "./images/item3.png"
},
{
name: "item4",
path: "./images/item4.png"
},
{
name: "item5",
path: "./images/item5.png"
},
{
name: "item6",
path: "./images/item6.png"
},
{
name: "item7",
path: "./images/item7.png"
}
];
var imglist;
//层对象
var backLayer, playerLayer, itemLayer, overLayer, loadingLayer;
var hero; //人物角色
var step = 50,
stepindex = 0; //速度和初始化的图片位置
var point = 0,
pointTxt; //积分 和 积分的文本
var hp = 1,
hpTxt; //生命值 和生命值显示的文本
function main() {
//创建一个加载层对象 1 - 7
loadingLayer = new LoadingSample3();
//将加载层放到舞台上面 (底图)
addChild(loadingLayer);
//加载素材
LLoadManage.load(imgData, function(progress) {
loadingLayer.setProgress(progress);
}, gameInit);
}
//游戏记载完素材后初始化
function gameInit(result) {
//删除掉加载层
removeChild(loadingLayer);
imglist = result;
//绘制背景层
//新建一个图层
backLayer = new LSprite();
//将背景图层添加到舞台上面
addChild(backLayer);
//添加背景图片 //自定义方法
addBackGround();
//添加人物 自定义方法
addPlayer();
//添加物品层
itemLayer = new LSprite();
//将物品添加到背景层
backLayer.addChild(itemLayer);
//初始化人物运动绑定事件
addEvent();
//添加分数
addText();
//添加一个游戏结束层
overLayer = new LSprite();
//将游戏结束层添加到背景层里面去
backLayer.addChild(overLayer);
}
function addText() {
//创建一个文本类的对象
hpTxt = new LTextField();
//填充颜色
hpTxt.color = "#ff0000";
hpTxt.size = 30;
hpTxt.x = 10;
hpTxt.y = 10;
backLayer.addChild(hpTxt);
//积分文本
pointTxt = new LTextField();
pointTxt.color = "#ffffff";
pointTxt.size = 30;
pointTxt.x = 10;
pointTxt.y = 50;
backLayer.addChild(pointTxt);
showText();
}
function showText() {
hpTxt.text = "生命：" + hp;
pointTxt.text = "积分：" + point;
}
//添加一个物品
function addItem() {
//实例化一个物品对象
var item = new Item();
item.x = 20 + Math.floor(Math.random() * (LGlobal.width - 50));
itemLayer.addChild(item);
}
//物品对象
function Item() {
//继承
base(this, LSprite, []);
var self = this;
//物品会有一个die模式
self.mode = "";
//随机产生一个下标
var index = Math.floor(Math.random() * 8);
//根据下标来判断一下物品是加分还是减分
self.value = index < 4 ? 1 : -1;
//获取图片对象
var bitmap = new LBitmap(new LBitmapData(imglist[`item${index}`]));
//将图片塞到物品对象里面
self.addChild(bitmap);
}
Item.prototype.run = function() {
var self = this;
self.y += 5; //往下落
var hit = self.checkHit(); //自定义的方法 检测碰撞
if (hit || self.y > LGlobal.height) {
self.mode = "die"; //消亡
}
}
//检测碰撞方法
Item.prototype.checkHit = function() {
var self = this;
if (LGlobal.hitTestArc(self, hero)) {
if (self.value > 0) {
//加分
point += 1;
} else {
//减生命值
hp -= 1;
}
return true;
}
return false;
}
function addEvent() {
backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onDown);
backLayer.addEventListener(LMouseEvent.MOUSE_UP, onUp);
//播放事件 播放帧动画
backLayer.addEventListener(LEvent.ENTER_FRAME, onframe);
}
function onDown(event) {
if (event.selfX < LGlobal.width / 2) {
hero.mode = "left";
hero.anime.setAction(1); //设置人物的第几行动画
} else {
hero.mode = "right";
hero.anime.setAction(2);
}
}
function onUp() {
hero.mode = "";
hero.anime.setAction(0); //弹起鼠标将人物回归正面
}
function onframe() {
//给人物运动自定义一个方法
hero.run();
//让物品层里面的所有物品都下落运动
for (var i = 0; i < itemLayer.childList.length; i++) {
//让所有的物品运动
itemLayer.childList[i].run();
if (itemLayer.childList[i].mode == "die") {
//销毁
itemLayer.removeChild(itemLayer.childList[i]);
}
}
if (stepindex++ > step) {
stepindex = 0;
//添加一个物品
addItem();
}
//更新积分
showText();
//游戏结束
if (hp <= 0) {
gameOver();
return false;
}
}
//游戏结束
function gameOver() {
//将背景层里面的所有事件全部消亡
backLayer.die();
//删除物品层里面所有的物品
itemLayer.removeAllChild();
var txt = new LTextField();
txt.color = "#ff0000";
txt.size = 50;
txt.text = "GAME OVER";
txt.x = (LGlobal.width - txt.getWidth()) * 0.5;
txt.y = 100;
//将文本放到游戏结束层里面去
overLayer.addChild(txt);
backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, function() {
backLayer.die(); //全部销毁
overLayer.removeAllChild(); //游戏结束层全部销毁
hp = 10;
point = 0;
addEvent(); //重新绑定事件
});
}
function addPlayer() {
//新建一个图层
playerLayer = new LSprite();
//把人物添加到背景层里面去
backLayer.addChild(playerLayer);
//将人物封装成一个对象
hero = new Player();
//设置人物的坐标
hero.x = hero.y = 350;
//将人物图片对象塞到人物层里面
playerLayer.addChild(hero);
}
//新建一个人物对象
function Player() {
//人物对象其实本身也是一个图层 所以需要继承
base(this, LSprite, []);
var self = this;
//人物可以往左边 还可以右边
self.mode = "";
//将一张256*256的一张图片切割成 4行4列的一个二维数组坐标
var list = LGlobal.divideCoordinate(256, 256, 4, 4);
//搞一个人物图片 先加载素材 -> 变成 图片对象
var data = new LBitmapData(imglist["player"], 0, 0, 64, 64);
//设置一组动画 让当前图层里面的图片按照指定的坐标顺序来动
self.anime = new LAnimation(self, data, list);
//限制人物的走动速度
self.step = 2, self.stepindex = 0;
}
//人物运动方法
Player.prototype.run = function() {
var self = this;
//限制速度 每隔3次才调用一次运动方法
if (self.stepindex++ > self.step) {
self.stepindex = 0;
self.anime.onframe(); //让人物动起来
}
//判断人物是往左边 还是右边
if (self.mode == "left") {
if (self.x > 10) {
self.x -= 10;
}
} else if (self.mode == "right") {
if (self.x < LGlobal.width - self.getWidth()) {
self.x += 10;
}
}
}
function addBackGround() {
// LBitmap将加载的图片素材变成一个具体的img对象 LBitmapData加载图片素材
var bitmap = new LBitmap(new LBitmapData(imglist['back']));
//将背景图片放到背景层里面去
backLayer.addChild(bitmap);
}
document.onkeydown = function(e) {
var e = e || event;
}
function keydown(e) {
var e = e || event;
var key = e.keyCode || e.which || e.charCode;
if (key == 32) {
if (hero.mode == "left") {
if (hero.x > 10) {
hero.x -= 20;
}
} else if (hero.mode == "right") {
if (hero.x < LGlobal.width - hero.getWidth()) {
hero.x += 20;
}
}
}
}
document.onkeydown = keydown;
</script>
上面的图片和js需要引入
源码获取
查看博主主页或私信博主获取
精彩推荐更新中：
打卡 文章 更新 40 / 100天
大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~！
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）