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>// 引擎初始化函數。等同于 initinit(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 - 7loadingLayer = 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需要引入?
源碼獲取
查看博主主頁或私信博主獲取
精彩推薦更新中：
HTML5大作業實戰100套
??打卡 文章 更新?40??/? 100天
大家可以點贊、收藏、關注、評論我啦 、需要完整文件隨時聯系我或交流喲~！
總結
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️卡通人物吃水果游戏❤️的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android 控件 margin,An
- 下一篇： HTML+CSS+JS实现 ❤️圣诞抓礼