Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”
Effect demonstration:Home page source code
Code directory:
Main code implementation:
HTML code:
<! DOCTYPEhtml>
<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>
// The current browser is a mobile browser
if (LGlobal.canTouch) {
// Specify which zoom mode value to use.
LGlobal.stageScale = LStageScaleMode.EXACT_FIT;
// Tiling effect for mobile
LSystem.screen(LStage.FULL_SCREEN);
}
</script>
</head>
<body>
<div id="legend"></div>
</body>
</html>
<script>
// Engine initialization function. Equal to the init
init(50."legend".800.450, main);
// Material variables
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;
/ / object
var backLayer, playerLayer, itemLayer, overLayer, loadingLayer;
var hero; // Characters
var step = 50,
stepindex = 0; // Speed and initialization of the image position
var point = 0,
pointTxt; // Integral and integral text
var hp = 1,
hpTxt; // Health and health display text
function main() {
// Create a load layer object 1-7
loadingLayer = new LoadingSample3();
// Put the loading layer on the stage.
addChild(loadingLayer);
// Load the material
LLoadManage.load(imgData, function(progress) {
loadingLayer.setProgress(progress);
}, gameInit);
}
// The game is initialized after recording the material
function gameInit(result) {
// Delete the loading layer
removeChild(loadingLayer);
imglist = result;
// Draw the background layer
// Create a new layer
backLayer = new LSprite();
// Add the background layer above the stage
addChild(backLayer);
// Add background image // custom method
addBackGround();
// Add character custom methods
addPlayer();
// Add item layer
itemLayer = new LSprite();
// Add the item to the background layer
backLayer.addChild(itemLayer);
// Initializes the character movement binding event
addEvent();
// Add a score
addText();
// Add a game end layer
overLayer = new LSprite();
// Add the game end layer to the background layer
backLayer.addChild(overLayer);
}
function addText() {
// Create a text-like object
hpTxt = new LTextField();
// Fill the color
hpTxt.color = "#ff0000";
hpTxt.size = 30;
hpTxt.x = 10;
hpTxt.y = 10;
backLayer.addChild(hpTxt);
// Integral text
pointTxt = new LTextField();
pointTxt.color = "#ffffff";
pointTxt.size = 30;
pointTxt.x = 10;
pointTxt.y = 50;
backLayer.addChild(pointTxt);
showText();
}
function showText() {
hpTxt.text = "Life:" + hp;
pointTxt.text = "Integral:" + point;
}
// Add an item
function addItem() {
// Instantiate an object
var item = new Item();
item.x = 20 + Math.floor(Math.random() * (LGlobal.width - 50));
itemLayer.addChild(item);
}
// Object object
function Item() {
/ / inheritance
base(this, LSprite, []);
var self = this;
// Items have a die mode
self.mode = "";
// Randomly generate a subscript
var index = Math.floor(Math.random() * 8);
// Use the subscript to determine whether an item is a plus or minus
self.value = index < 4 ? 1 : -1;
// Get the image object
var bitmap = new LBitmap(new LBitmapData(imglist[`item${index}`]));
// Insert the image into the object
self.addChild(bitmap);
}
Item.prototype.run = function() {
var self = this;
self.y += 5; / / to fall
var hit = self.checkHit(); // Custom methods to detect collisions
if (hit || self.y > LGlobal.height) {
self.mode = "die"; / / die}}// Check the collision method
Item.prototype.checkHit = function() {
var self = this;
if (LGlobal.hitTestArc(self, hero)) {
if (self.value > 0) {
/ / points
point += 1;
} else {
// Reduce health
hp -= 1;
}
return true;
}
return false;
}
function addEvent() {
backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onDown);
backLayer.addEventListener(LMouseEvent.MOUSE_UP, onUp);
// Play the event to play the frame animation
backLayer.addEventListener(LEvent.ENTER_FRAME, onframe);
}
function onDown(event) {
if (event.selfX < LGlobal.width / 2) {
hero.mode = "left";
hero.anime.setAction(1); // Set the character's action picture
} else {
hero.mode = "right";
hero.anime.setAction(2); }}function onUp() {
hero.mode = "";
hero.anime.setAction(0); // Click the mouse to return the character to the front
}
function onframe() {
// Create a custom method for the character movement
hero.run();
// Make all items in the item layer fall
for (var i = 0; i < itemLayer.childList.length; i++) {
// Make all objects move
itemLayer.childList[i].run();
if (itemLayer.childList[i].mode == "die") {
/ / destroyitemLayer.removeChild(itemLayer.childList[i]); }}if (stepindex++ > step) {
stepindex = 0;
// Add an item
addItem();
}
// Update the integral
showText();
// Game over
if (hp <= 0) {
gameOver();
return false; }}// Game over
function gameOver() {
// All events in the background layer disappear
backLayer.die();
// Delete all items in the items layer
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;
// Put the text in the end game layer
overLayer.addChild(txt);
backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, function() {
backLayer.die(); // All destroyed
overLayer.removeAllChild(); // The end of the game layer is destroyed
hp = 10;
point = 0;
addEvent(); // Rebind the event
});
}
function addPlayer() {
// Create a new layer
playerLayer = new LSprite();
// Add the character to the background layer
backLayer.addChild(playerLayer);
// Encapsulate the character as an object
hero = new Player();
// Set the coordinates of the character
hero.x = hero.y = 350;
// Insert the character image object into the character layer
playerLayer.addChild(hero);
}
// Create a new character object
function Player() {
// The character object is itself a layer and needs to be inherited
base(this, LSprite, []);
var self = this;
// Characters can go left or right
self.mode = "";
// Cut a 256*256 image into 4 rows and 4 columns of a two-dimensional array coordinate
var list = LGlobal.divideCoordinate(256.256.4.4);
// Create a character image first load material -> become the image object
var data = new LBitmapData(imglist["player"].0.0.64.64);
// Set a set of animations that move the images in the current layer in the specified coordinate order
self.anime = new LAnimation(self, data, list);
// Limit the movement speed of the character
self.step = 2, self.stepindex = 0;
}
// Figure movement method
Player.prototype.run = function() {
var self = this;
// Limit the speed to call the movement method every 3 times
if (self.stepindex++ > self.step) {
self.stepindex = 0;
self.anime.onframe(); // Make the characters move
}
// Determine if the character is to the left or right
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 turns the loaded image into a concrete IMG object
var bitmap = new LBitmap(new LBitmapData(imglist['back']));
// Put the background image inside the background layer
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>
Copy the codeThe above image and JS need to be introduced
The source code for
View the homepage of the blogger or private message from the blogger
Wonderful recommendation update:
HTML5 big homework actual combat 100 sets
Clocked articles updated **40 ** / 100 days
You can like, collect, pay attention to, comment on me, need to complete the document at any time contact me or exchange yo ~!
