<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<head>
<meta charset="UTF-8" />
<title>植物大战僵尸</title>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
background-image: url(assets/background.png);
background-size: cover;
background-repeat: no-repeat;
color:white;
padding: 0;
margin: 0;
font-family: 微软雅黑,Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
canvas {
border: 0;
margin: auto;
}
a {
color: white;
}
body {
font-size: 12px;
}
#game {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.info {
position: absolute;
padding: 10px;
margin: 5px;
background: #0a0a11;
opacity: 0.5;
z-index: 999;
border-radius: 15px;
overflow-y:auto;
}
#loading {
position: fixed;
width: 90%;
border-radius: 15px;
z-index: 999;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
#test1{
width: 250px;
height: 250px;
background: #fff;
color: #000;
position: relative;
}
#test1 p{
height: 25%;
text-align: center;
margin: 0px;
}
#test1 .cdkey a{
color: #000;
text-decoration: none;
color: blue;
}
#test1 .dia-close{
position: absolute;
top: 0px;
display: block;
text-align: center;
text-decoration: none;
color: #000;
background: #ccc;
}
</style>
</head>
<body>
<div id="loading" style="display:none">
<img width ="100%" src="assets/shuoming.png">
</div>
<div id="game"></div>
<script type="text/javascript">
var lastTime = 0;
$('body').css('background-size', document.documentElement.clientWidth + 'px' + ' ' + document.documentElement.clientHeight + 'px');
//radio为宽高比率
var ratio = 1.59;
//游戏高为屏幕高-20px
var height = document.documentElement.clientHeight;
// 游戏宽为屏幕高的1.6倍
var width = height / ratio;
//scale为分割高的最小单位
var scale = height / 720;
//导入游戏画布
var game = new Phaser.Game(document.documentElement.clientWidth, height, Phaser.CANVAS, 'game', { preload: preload, create: create, update: update });
//预导入内容
function preload() {
//添加背景
game.load.image('background', 'assets/gamebackground.jpg');
//引入坚果
game.load.image('ball','assets/bowlingball.png');
//左边按键
game.load.spritesheet('leftbtn', 'assets/btn-left.png',192,720);
//右边按键
game.load.spritesheet('rightbtn', 'assets/btn-right.png',192,720);
// //添加基础僵尸
game.load.spritesheet('zombie-normal', 'assets/zombie-normal.png', 126, 133);
//添加太阳僵尸
game.load.spritesheet('zombie-sun', 'assets/zombie-sun.png', 130, 150);
//添加旗子僵尸
game.load.spritesheet('zombie-flag', 'assets/zombie-flag.png', 155, 150);
//添加大僵尸
game.load.spritesheet('zombie-snow', 'assets/zombie-snow.png', 230,180);
//添加水沟
game.load.image('ditchleft', 'assets/ditchleft.jpg');
game.load.image('ditchright', 'assets/ditchright.jpg');
//添加按钮
game.load.image('button', 'assets/btnreplay.png');
//添加按钮
game.load.image('btnmore', 'assets/btnmore.png');
//添加按钮
game.load.image('btnshare', 'assets/btnshare.png');
//说明按钮
game.load.image('instruction','assets/shuomingchakan.png');
//添加图片
game.load.image('backgroundblack', 'assets/bb.jpg');
game.load.image('gameover', 'assets/over1.png');
}
//背景
var bg1;
var bg2;
//背景滚动速率
var scrollSpeed = 5 ;
//基础速度
const baseVelocity = 10 * scale;
//加入基础僵尸
var zombies;
var zombie = null;
//引入基础僵尸函数
var timer1;
var timer2;
var timer3;
var timer4;
//分数
var score = 0;
var scoreText;
var middletext;
var addscoreText = 0;
//连击数
var comboText;
var maxcomboText;
var combo = 0;
var maxcombo = 0;
var combaddscoreText = 0;
//僵尸身体碰撞基数
var zombieBodySize = 0.5;
var button2 = null;
var encouragetext = null;
var encouragetext2 = null;
var keyvalue = null;
//创建游戏背景
function createBackground() {
bg1 = game.add.sprite(0, 0, 'background');
bg2 = game.add.sprite(0, -bg1.height * scale, 'background');
bg1.width = document.documentElement.clientWidth;
bg2.width = document.documentElement.clientWidth;
bg1.scale.y = scale;
// bg2.scale.x = scale;
bg2.scale.y = scale;
}
//创建保龄球
function createBall(){
ball = game.add.sprite(game.world.centerX,game.world.height-200*scale, 'ball');
ball.scale.setTo(0.1*scale,0.1*scale);
ball.anchor.setTo(0.5, 0.5);
game.physics.arcade.enable(ball);
}
//添加基础僵尸
function addZombie(){
var zombie = zombies.create(30*scale+(game.world.width-156*scale)*Math.random(),-133*scale, 'zombie-normal');
zombie.scale.setTo(scale,scale);
zombie.animations.add('alive', [0,1,2,3,2,1],5, true);
zombie.animations.add('dead', [7,8,9,10,11,12,13],15, true);
zombie.animations.play('alive');
zombie.outOfBoundsKill = true;
zombie.body.setSize(zombie.body.width*zombieBodySize,zombie.body.height*zombieBodySize,38*scale,0);
zombie.body.velocity.y = 300*scale;
}
//添加太阳僵尸
function addSunZombie(){
var sunZombie = sunZombies.create(30*scale+(game.world.width-160*scale)*Math.random(),-150*scale, 'zombie-sun');
sunZombie.scale.setTo(scale,scale);
sunZombie.animations.add('alive', [0,1,2,3,4,5,6,7,8,9,8,7,6,5,4,3,2,1],5, true);
sunZombie.animations.add('dead', [10,11,12,13,14,15,16,17],15, true);
sunZombie.animations.play('alive');
sunZombie.outOfBoundsKill = true;
sunZombie.body.setSize(sunZombie.body.width*zombieBodySize,sunZombie.body.height*zombieBodySize,39*scale,0);
sunZombie.body.velocity.y = 300*scale;
}
//添加旗子僵尸
function addFlagZombie(){
var flagZombie = flagZombies.create(30*scale+(game.world.width-185*scale)*Math.random(),-150*scale, 'zombie-flag');
flagZombie.scale.setTo(scale,scale);
flagZombie.animations.add('alive', [0,1,2,3,4,3,2,1],5, true);
flagZombie.animations.add('dead', [5,6,7,8,9,10,11,12,13],15, true);
flagZombie.animations.play('alive');
flagZombie.outOfBoundsKill = true;
flagZombie.body.setSize(flagZombie.body.width*zombieBodySize,flagZombie.body.height*zombieBodySize,55.5*scale,0);
flagZombie.body.velocity.y = 300*scale;
}
//添加大僵尸
function addBigZombie(){
var bigzombie = bigZombies.create(5*scale+(game.world.width-230*scale)*Math.random(),-180*scale, 'zombie-snow');
bigzombie.scale.setTo(scale,scale);
bigzombie.animations.add('alive', [0,1,2,3,4,5,4,3,2,1],5, true);
bigzombie.animations.add('dead', [6,7,8,9,10,11,12],15, true);
bigzombie.animations.play('alive');
bigzombie.outOfBoundsKill = true;
bigzombie.body.setSize(bigzombie.body.width*zombieBodySize, bigzombie.body.height*zombieBodySize,0);
bigzombie.body.velocity.y = 300*scale;
}
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
//引入背景
createBackground();
//加入水沟
ditchleft = game.add.sprite(0, 0, 'ditchleft');
ditchleft.scale.setTo(scale, scale);
game.physics.arcade.enable(ditchleft);
ditchright = game.add.sprite(game.world.width, 0, 'ditchright');
ditchright.scale.setTo(scale, scale);
ditchright.anchor.setTo(1,0);
game.physics.arcade.enable(ditchright);
//加入僵尸
zombies = game.add.group();
zombies.enableBody = true;
timer1 = game.time.events.loop(400+600*Math.random(), addZombie, this);
//加入太阳僵尸
sunZombies = game.add.group();
sunZombies.enableBody = true;
timer3 = game.time.events.loop(2000+3000*Math.random(), addSunZombie, this);
//加入旗子僵尸
flagZombies = game.add.group();
flagZombies.enableBody = true;
timer4 = game.time.events.loop(2000+3000*Math.random(), addFlagZombie,
html5植物打僵尸小游戏源码，各种web前端技术
版权申诉
5星 · 超过95%的资源 148 浏览量
2022-07-09
09:40:54
上传
评论
收藏 3.06MB ZIP 举报 
html5植物打僵尸小游戏源码.zip （26个子文件） 
html5植物打僵尸小游戏源码 html5植物撞僵尸小游戏源码-zwdzjs assets 
btnreplay.png 18KB zombie-sun.png 149KB btn-left.png 7KB shuomingchakan.png 3KB background.png 1.81MB btnmore.png 21KB
ditchleft.jpg 6KB btnshare.png 19KB zombie-normal.png 121KB bb.jpg 1KB btn-right.png 7KB zombie-snow.png 252KB over1.png 33KB gamebackground.jpg 47KB ditchright.jpg 6KB shuoming.png 69KB zombie-flag.png 166KB bowlingball.png 122KB
phaser.map 0B
index.html 23KB js jquery.js 261KB game9g.utils.js 4KB phaser.min.js 587KB phaser.map 0B icon.png 7KB share.png 32KB资源评论
彭钟乐2022-09-09感谢大佬，让我及时解决了当下的问题，解燃眉之急，必须支持！
莫白媛2022-12-15嘻嘻
