新版JS版植物大战僵尸 - JavaScript - web - ITeye论坛
新版JS版植物大战僵尸
& 上一页 1
锁定老帖子
该帖已经被评为精华帖
LonelyStar
来自: 湖南
发表时间：&&
相关知识库：
最近刚改版的JavaScript植物大战僵尸
应该效率和资源占用比老版要好
关卡仍然停留在9关
换了个地址和空间访问似乎好一点不会出现down机情况了
兼容各种浏览器大家可以都测试下
欢迎各位拍砖
houfeng0923
等级: 初级会员
来自: 大连
发表时间：&&
请登录后投票
等级: 初级会员
来自: 大连
发表时间：&&
写个JS 版本的wow!
请登录后投票
LonelyStar
来自: 湖南
发表时间：&&
JS的WOW天赋模拟器倒是做过
不过JS毕竟也不是万能的
即使偶有那个能耐做出了类似WOW
但肯定效率和效果也是大有问题的。。。
请登录后投票
等级: 初级会员
来自: 南京
发表时间：&&
不错耶。界面也不错，更炫就好了，，，
请登录后投票
bixiayouyu
等级: 初级会员
来自: 深圳
发表时间：&&
牛人加神人一个，膜拜中
请登录后投票
来自: 吉林
发表时间：&&
大姐：opera 打不开...
请登录后投票
等级: 初级会员
来自: 江苏
发表时间：&&
如果楼主能够把设计思路和用到哪些js高级属性能够讲解下，我相信会更好。
共同学习才有进步吗？
请登录后投票
等级: 初级会员
发表时间：&&
最后修改：
在chrome里面运行还是比较流畅的。很不错，楼主把实现过程说下会更好！
请登录后投票
等级: 初级会员
来自: 北京
发表时间：&&
最后修改：
难道楼主是这个?
请登录后投票
& 上一页 1
跳转论坛:移动开发技术
Web前端技术
Java企业应用
编程语言技术摘要：通过原生的js+html实现简单的飞机大战小游戏效果，如图所示：
实现代码如下：
1.自己的飞机实现
飞机html：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&打飞机&/title&
position: relative;
width: 530px;
height: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background: url("game_images/bg.png") no-repeat 0 -9399px;
#myPlane {
position: absolute;
width: 60px;
height: 60px;
background:url('game_images/my_air.gif') no-repeat;
top: 530px;
left: 235px;
overflow: visible;
.enemyPlane{
position: absolute;
width: 47px;
height: 72px;
background:url("game_images/d_j_1.gif") no-repeat;
left: 240px;
overflow: visible;
position: absolute;
width: 9px;
height: 37px;
background:url("game_images/my_ari_1.gif") no-repeat;
&div id="bg"&
&div id="myPlane"&&/div&
&!--&div class="enemyPlane"&&/div&--&
&button onclick="bgStopMove()"&停止&/button&
&!--&button onclick="bgStartMove()"&启动&/button&--&
&script type="text/javascript" src="EnemyPlane.js"&&/script&
&script type="text/javascript" src="bullets.js"&&/script&
&script type="text/javascript" src="jquery-2.1.1.min.js"&&/script&
bgStartMove();
//敌机控制
var enemy_
//背景图的相关设置：
var bg_coordinate = -100;
var bg_move_
//用户飞机的相关设置
var move_speed = 11;
var myPlane_style_left = initialDOMPosition("myPlane","left");
var myPlane_style_top = initialDOMPosition("myPlane","top");
function bgMove() {
if (bg_coordinate & -1) {
bg_coordinate = -9399;
bg_coordinate += 1;
document.getElementById("bg").setAttribute("style", "background: red url('game_images/bg.png') no-repeat 0 " + bg_coordinate + "")
function bgStartMove() {
bg_move_controller = setInterval(bgMove, 30);
function bgStopMove() {
clearInterval(bg_move_controller);
function initialDOMPosition(DOMId,leftOrTop) {
var myDiv = document.getElementById(DOMId);
//获取指定DOM的style:
var myPlaneStyle = document.defaultView.getComputedStyle(myDiv, null);
if (leftOrTop == "left") {
Position = myPlaneStyle.
else if (leftOrTop == "top") {
Position = myPlaneStyle.
Position = Position.substring(0, Position.length - 2);
Position = parseInt(Position);//将字符串转化为整型；
function shoot(){
var planeLeft = initialDOMPosition("myPlane","left");
var planeTop = initialDOMPosition("myPlane","top");
var myBullet = new bullets(planeLeft,planeTop);
document.onkeydown = function () {
var key = event.keyC
switch (key) {
case 32://发子弹
case 38://上
myPlaneMoveTop();
case 40://下
myPlaneMoveDown();
case 37://左
myPlaneMoveLeft();
case 39://右
myPlayMoveRight();
//方向键：上：38；下：40；左：37；右：39；
//空格：32
function myPlaneMoveDown(){
if(myPlane_style_top & 540){
myPlane_style_top += move_
document.getElementById("myPlane").setAttribute("style","top:"+myPlane_style_top+"left:"+myPlane_style_left+"");
function myPlaneMoveTop(){
if(myPlane_style_top & 3){
myPlane_style_top -= move_
document.getElementById("myPlane").setAttribute("style","top:"+myPlane_style_top+"left:"+myPlane_style_left+"");
function myPlaneMoveLeft() {
//向左移动不能超过bg的边界；
if (myPlane_style_left & 1) {
myPlane_style_left -= move_
document.getElementById("myPlane").setAttribute("style", "left:" + myPlane_style_left + "top:"+myPlane_style_top+"");
function myPlayMoveRight() {
//向左移动不能超过bg的边界；
//相对于图片左边的坐标，所以坐标是：530 - 60；
if (myPlane_style_left & 470) {
myPlane_style_left += move_
document.getElementById("myPlane").setAttribute("style", "left:" + myPlane_style_left + "top:"+myPlane_style_top+"");
//敌机的自动调用
enemy_controller = setInterval(springEnemy,3000);
function springEnemy(){
var count = parseInt((Math.random() * 10)/2);
for (var i=0;i&i++){
var enemy = new EnemyPlane();
index控制HTML：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Title&/title&
&body&&style type="text/css"&
background-color: blueviolet;width: 500px; height: 500px;border: red 1px solid;
#m{border:rebeccapurple 1px solid;background-color: red;width: 50px; height: 50px;}
&div id="bg"&
&div id="m"&&/div&
&div id="send"&&/div&
&input type="button" value="开始"
onclick="startinterval()"&
&input type="button" value="结束"
onclick="closeinterval()"&
&script type="text/javascript"&
document.onkeydown =function (){
var ke=event.keyC
alert(ke);
var top_1=0;
function getid()
i+=1document.getElementById("send"
document.getElementById("m").setAttribute("style","margin-top:"+top_1+"");
setTimeout(getid,1000);
startinterval(){
endsetinterval=setInterval(getid,1000);
closeinterval(){
clearInterval(endsetinterval);
2.敌机的飞机 JS代码
* Created by mac on .
* 使用闭包函数法不能实现相关功能。
(function (window) {
//enemyType敌机1（d_j_1.gif）：0，
//敌机3（d_j_3.gif）:1
var enemy_
var enemy_
var EnemyPlane2 = function (enemyType) {
enemy_index = enemyI
this.init(enemyType);
enemy_top = this.initialEnemyTop();
this.startMove();
EnemyPlane2.prototype.initialEnemyTop = function () {
var Postion = $("#bg #" + enemy_index).css("top");
Postion = Postion.substring(0, Postion.length - 2);
Postion = parseInt(Postion);
EnemyPlane2.prototype.init = function (enemyType) {
var enemy = "&div class='enemyPlane' id='" + enemy_index + "'&&/div&";
$("#bg").append(enemy);
//Math.random();//生成一个0到1的随机数；
//parseInt();//取整
//$("#bg div:eq(0)").css("width"="72px");单个参数的用法
var enemy_left = parseInt(Math.random() * (530 - 64));
switch (enemyType) {
$("#bg #" + enemy_index).css({
"width": "47px",
"height": "72px",
"background": "url('./game_images/d_j_1.gif') no-repeat",
"left": enemy_left + "px"
$("#bg #" + enemy_index).css({
"width": "64px",
"height": "56px",
"background": "url('./game_images/d_j_3.gif') no-repeat",
"left": enemy_left + "px"
EnemyPlane2.prototype.startMove = function () {
var planeHeight = $("#bg #" + enemy_index).css("height");
planeHeight = planeHeight.substring(0, planeHeight.length - 2);
planeHeight = parseInt(planeHeight);
if ((enemy_top + planeHeight) & 598) {
$("#bg #" + enemy_index).remove();//与empty()的区别在于是否将本身删除。它们的子元素都会被删除
//enemy_top += 3;
//$("#bg #"+enemy_index).css("top",enemy_top + "px");
$("#bg #" + enemy_index).animate({"top": (600 - planeHeight) + "px"}, 4000, function () {
$("#bg #" + enemy_index).hide();
$("#bg #" + enemy_index).remove();
window.EnemyPlane2 = EnemyPlane2;
})(window);
* 通过类的思想，实现飞机的控制；
* @param enemyType
* @constructor
function EnemyPlane() {
var enemy_
var enemy_
var enemyId;
function initialEnemyTop() {
var Postion = $("#bg #e" + enemyId).css("top");
Postion = Postion.substring(0, Postion.length - 2);
Postion = parseInt(Postion);
function init() {
//随机生成飞机类型；
enemy_type = (parseInt(Math.random() * 10) & 5) ? 0 : 1;
//随机生成飞机id
enemyId = parseInt(Math.random() * 10000);
//向#bg中添加飞机；
var enemy = "&div class='enemyPlane' id='e" + enemyId + "'&&/div&";
$("#bg").append(enemy);
//获取敌机的值；
enemy_top = initialEnemyTop();
//Math.random();//生成一个0到1的随机数；
//parseInt();//取整
//$("#bg div:eq(0)").css("width"="72px");单个参数的用法
//随机生成敌机开始时的Left值
var enemy_left = parseInt(Math.random() * (530 - 64));
//根据随机出来的飞机类型，对飞机属性进行设置；
switch (enemy_type) {
$("#bg #e" + enemyId).css({
"width": "47px",
"height": "72px",
"background": "url('./game_images/d_j_1.gif') no-repeat",
"left": enemy_left + "px"
$("#bg #e" + enemyId).css({
"width": "64px",
"height": "56px",
"background": "url('./game_images/d_j_3.gif') no-repeat",
"left": enemy_left + "px"
//敌机开始移动
startMove();
//敌机开始移动
function startMove() {
//获取敌机的高度
var planeHeight = $("#bg #e" + enemyId).css("height");
planeHeight = planeHeight.substring(0, planeHeight.length - 2);
planeHeight = parseInt(planeHeight);
//获取敌机的宽度
var planeWidth = $("#bg #e" + enemyId).css("width");
planeWidth = planeWidth.substring(0, planeWidth.length - 2);
planeWidth = parseInt(planeWidth);
//随机获取敌机的Left（只有飞机走折线时采用）
var planeLeft = parseInt(Math.random() * (530 - planeWidth));
//随机敌机是走折线，还是走直线；
if (parseInt(Math.random() * 10) & 5) {
$("#bg #e" + enemyId).animate({"top": (600 - planeHeight) + "px"}, 3000, function () {
var planeHeight1 = $("#bg #e" + enemyId).css("top");
planeHeight1 = planeHeight1.substring(0, planeHeight1.length - 2);
planeHeight1 = parseInt(planeHeight1);
enemyDismiss();
//走折线时，第一次位置变化
$("#bg #e" + enemyId).animate({"top": (300 - planeHeight) + "px", "left": "1px"}, 1500, 'linear');
//第二次位置变化
$("#bg #e" + enemyId).animate({
"top": (600 - planeHeight) + "px",
"left": planeLeft + "px"
}, 1500, 'linear', function () {
//销毁敌机
enemyDismiss();
//销毁敌机
function enemyDismiss() {
$("#bg #e" + enemyId).hide();
$("#bg #e" + enemyId).remove();
function getEnemyPosition() {
var position_top = $("#bg #e" + enemyId).css("top");
var position_left = $("#bg #e" + enemyId).css("left");
var position = {"top": position_top, "left": position_left};
3.子弹实现 JS
* Created by mac on .
* 使用闭包函数法不能实现相关功能。
(function (window) {
//enemyType敌机1（d_j_1.gif）：0，
//敌机3（d_j_3.gif）:1
var enemy_
var enemy_
var EnemyPlane2 = function (enemyType) {
enemy_index = enemyI
this.init(enemyType);
enemy_top = this.initialEnemyTop();
this.startMove();
EnemyPlane2.prototype.initialEnemyTop = function () {
var Postion = $("#bg #" + enemy_index).css("top");
Postion = Postion.substring(0, Postion.length - 2);
Postion = parseInt(Postion);
EnemyPlane2.prototype.init = function (enemyType) {
var enemy = "&div class='enemyPlane' id='" + enemy_index + "'&&/div&";
$("#bg").append(enemy);
//Math.random();//生成一个0到1的随机数；
//parseInt();//取整
//$("#bg div:eq(0)").css("width"="72px");单个参数的用法
var enemy_left = parseInt(Math.random() * (530 - 64));
switch (enemyType) {
$("#bg #" + enemy_index).css({
"width": "47px",
"height": "72px",
"background": "url('./game_images/d_j_1.gif') no-repeat",
"left": enemy_left + "px"
$("#bg #" + enemy_index).css({
"width": "64px",
"height": "56px",
"background": "url('./game_images/d_j_3.gif') no-repeat",
"left": enemy_left + "px"
EnemyPlane2.prototype.startMove = function () {
var planeHeight = $("#bg #" + enemy_index).css("height");
planeHeight = planeHeight.substring(0, planeHeight.length - 2);
planeHeight = parseInt(planeHeight);
if ((enemy_top + planeHeight) & 598) {
$("#bg #" + enemy_index).remove();//与empty()的区别在于是否将本身删除。它们的子元素都会被删除
//enemy_top += 3;
//$("#bg #"+enemy_index).css("top",enemy_top + "px");
$("#bg #" + enemy_index).animate({"top": (600 - planeHeight) + "px"}, 4000, function () {
$("#bg #" + enemy_index).hide();
$("#bg #" + enemy_index).remove();
window.EnemyPlane2 = EnemyPlane2;
})(window);
* 通过类的思想，实现飞机的控制；
* @param enemyType
* @constructor
function EnemyPlane() {
var enemy_
var enemy_
var enemyId;
function initialEnemyTop() {
var Postion = $("#bg #e" + enemyId).css("top");
Postion = Postion.substring(0, Postion.length - 2);
Postion = parseInt(Postion);
function init() {
//随机生成飞机类型；
enemy_type = (parseInt(Math.random() * 10) & 5) ? 0 : 1;
//随机生成飞机id
enemyId = parseInt(Math.random() * 10000);
//向#bg中添加飞机；
var enemy = "&div class='enemyPlane' id='e" + enemyId + "'&&/div&";
$("#bg").append(enemy);
//获取敌机的值；
enemy_top = initialEnemyTop();
//Math.random();//生成一个0到1的随机数；
//parseInt();//取整
//$("#bg div:eq(0)").css("width"="72px");单个参数的用法
//随机生成敌机开始时的Left值
var enemy_left = parseInt(Math.random() * (530 - 64));
//根据随机出来的飞机类型，对飞机属性进行设置；
switch (enemy_type) {
$("#bg #e" + enemyId).css({
"width": "47px",
"height": "72px",
"background": "url('./game_images/d_j_1.gif') no-repeat",
"left": enemy_left + "px"
$("#bg #e" + enemyId).css({
"width": "64px",
"height": "56px",
"background": "url('./game_images/d_j_3.gif') no-repeat",
"left": enemy_left + "px"
//敌机开始移动
startMove();
//敌机开始移动
function startMove() {
//获取敌机的高度
var planeHeight = $("#bg #e" + enemyId).css("height");
planeHeight = planeHeight.substring(0, planeHeight.length - 2);
planeHeight = parseInt(planeHeight);
//获取敌机的宽度
var planeWidth = $("#bg #e" + enemyId).css("width");
planeWidth = planeWidth.substring(0, planeWidth.length - 2);
planeWidth = parseInt(planeWidth);
//随机获取敌机的Left（只有飞机走折线时采用）
var planeLeft = parseInt(Math.random() * (530 - planeWidth));
//随机敌机是走折线，还是走直线；
if (parseInt(Math.random() * 10) & 5) {
$("#bg #e" + enemyId).animate({"top": (600 - planeHeight) + "px"}, 3000, function () {
var planeHeight1 = $("#bg #e" + enemyId).css("top");
planeHeight1 = planeHeight1.substring(0, planeHeight1.length - 2);
planeHeight1 = parseInt(planeHeight1);
enemyDismiss();
//走折线时，第一次位置变化
$("#bg #e" + enemyId).animate({"top": (300 - planeHeight) + "px", "left": "1px"}, 1500, 'linear');
//第二次位置变化
$("#bg #e" + enemyId).animate({
"top": (600 - planeHeight) + "px",
"left": planeLeft + "px"
}, 1500, 'linear', function () {
//销毁敌机
enemyDismiss();
//销毁敌机
function enemyDismiss() {
$("#bg #e" + enemyId).hide();
$("#bg #e" + enemyId).remove();
function getEnemyPosition() {
var position_top = $("#bg #e" + enemyId).css("top");
var position_left = $("#bg #e" + enemyId).css("left");
var position = {"top": position_top, "left": position_left};
阅读(...) 评论()当前位置： >
> 基于JavaScript的植物大战僵尸版 v11.06.13
基于JavaScript的植物大战僵尸版 v11.06.13
源码大小：12.6MB
源码语言：简体中文
源码类型：
源码授权：免费软件
更新时间：
源码类别：网页游戏
源码官网：
应用平台：
网友评分：
内容介绍热点排行下载地址相关内容
xnova(ogame)是一款世界上最火的战争策略类网页游戏之一，也是大部分同类网页游戏效仿的对象。你只需要网页浏览器，无需下载客户端就可进行的网络游戏。此处提供的是v0.8版LonelyStar原版的植物大战僵尸JS开源程序
在非作者网站和本地使用绝无广告和插件
兼容各种主流浏览器
IE9-6,Chrome,FireFox,Safari,Opera等&星际争霸&地球人都知道吧，什么没玩过，呵呵打看浏览器直接就能玩！一开始我真的不感去相信这是JavaScript做的网站，我宁愿相信这是个用Flash做的小游戏，当PHP+Flash网页游戏斗地主，可三人同玩。下载后运行运行install.php，输入数据库相关信息提交即可，本游戏界面逼真，游戏相关数据记录在MYSQL中，无需客户端支持，打开即玩基于asp+access的网页斗地主游戏代码，喜欢的朋友可以测试下。前一段时间，侠客站长站发布了 《js星际争霸源码(网页版)》 ，今天侠客给站长一个特大惊喜，发布一个可以网络对战的星际争霸网页游戏源代码，完整网络版本，支持在线多人即JavaScript 连连看游戏代码，相信大家对连连看游戏并不陌生，编程爱好者用vb、VC/DELPHI都编写过这款游戏，今天发的版本是用Javascript写的，暂时没有声音，基本实现的了游JavaScript网页版泡泡龙游戏，单机版的泡泡龙游戏不知大家玩过没有，我觉得挺有意思，所以想用Js写一个，水平有限，不过总算写出来了，分享给大家，运行截图如上所示。玩法网页版的五子棋游戏，基于Flash+PHP+TXT，用TXT临时记录数据，打开网页给自己起一个名字就可以进入游戏了，不需要***任何客户端！同时对此有兴趣的朋友，也可以好好研究一Build 1005修正了不能***的问题，新增声音、注销等功能。
网页版的在线二人斗地主游戏，打开网页即可直接斗地主，无需下载客户端！
游戏流程跟QQ斗地主差不多，可使用注
基于JavaScript的植物大战僵尸版 v11.06.13
CopyRight &
JB51.Net , All Rights Reserved