js植物大战僵尸实训1
2024-04-29 19:41:58
JavaScript植物大战僵尸实训1
界面制作：观看僵尸和草坪
最近实训做植物大战僵尸小游戏，能力有限，实现的功能不多，注释是我做的笔记，供大家参考，转载注明出处，谢谢！下是第一部分代码及实现效果：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="KeyWords" content="lonelystar,植物大战僵尸,网页版,JS植物大战僵尸,JS版,Javascript">
<meta name="Description" content="JavaScript版的植物大战僵尸 ">
<title>植物大战僵尸Javascript版</title>
<style type="text/css">
*{margin:0px;padding:0px;font-family: 宋体; font-size: 12px}
.WindowFrame{position:absolute;width:900px;height:600px;overflow: hidden;border:3px outset/*边框突出*/ ;}
.Menu{float:left;text-align:center;line-height:41px;font-weight:bold;font-family:黑体;color:#00CB08;height:41px;width:113px;background:url(images/interface/Button.png) no-repeat;font-size:14px;}
</style>
<script type="text/javascript">/*1、背景图片偏移 */window.οnlοad=function() {var ground = document.getElementById("tGround");/*（1）获取设置图片元素div，要保存该变量元素object*/ground.style.visibility = "visible";//使内容显示出来ground.style.backgroundImage = "url(images/interface/background1unsodded.jpg)";//设置游戏开始时背景图片var l = 0;//设置默认平移量初始值为0var groundTimer = setInterval(function () {/*（2）分析平移，每隔一段时间左偏移，用setInterval（做什么。每隔多少秒）不断移，产生平移效果*/l = l + 20;ground.style.backgroundPositionX = -l + "px";//-是从左到右if (-l <= -500) {clearInterval(groundTimer);//停止按时间一直做某事（在此是停止偏移）,cleanInterval和setInterval是相对的，开始，停止groundTimer=null;//2、出现僵尸 （1）设置僵尸区域的左偏移var zombie=document.getElementById("dZombie");zombie.style.left=(900-335)+"px";//偏移使得僵尸区域到指定位置，僵尸区域显现//（2）生成僵尸，并放入僵尸区域，可以根据html改写for(var i=0;i<5;i++) {var js = document.createElement("div");//生成一个新盒子，盒子是僵尸位置js.style.position = "absolute";//html改写成js，js.style...使用js.style.left = Math.random() * (335 - 166) + "px";js.style.top = Math.random() * (600 - 144) + "px";js.style.zIndex = 1;js.innerHTML = '<img src="data:images/interface/plantshadow32.png" style="position:absolute;left:72px;top:122px"> '+ '<img style="position:absolute;left:10px;top:0px" src="data:images/Zombies/Zombie/1.gif">';zombie.appendChild(js);//将盒子放入指定区域}//3、回到指定区域铺草setTimeout(function(){ //（1）停留2秒后，回到背景图片起点ground.style.backgroundPositionX="-115px";zombie.style.left="1065px";//（2）铺草var row=document.createElement("div");row.style.position="absolute";row.style.height="117px";row.style.width="0px";row.style.top="280px";row.style.left="132px";row.style.zIndex="1";row.style.backgroundImage="url(images/interface/sod1row.png)";row.style.backgroundPosition="0px 0px"row.style.backgroundRepeat="no-repeat";//对草皮进行初始化ground.appendChild(row);//把草皮加入背景var roll=document.createElement("img");//新建一个img元素roll.src="data:images/interface/sodRoll.png";roll.style.position="absolute";roll.style.height="141px";roll.style.width="68px";roll.style.top="250px";roll.style.left="132px";roll.style.zIndex="1";ground.appendChild(roll);//把草卷加入背景var cap=document.createElement("img");cap.src="data:images/interface/SodRollCap.png";cap.style.position="absolute";cap.style.height="61px";cap.style.width="63px";cap.style.top="365px";cap.style.left="132px";cap.style.zIndex="1";ground.appendChild(cap);//把草轴盖加入背景//草的铺开var l=0;//控制草皮宽度var w=0;//控制草卷宽度var sodTimer=setInterval(function(){l=l+25;w=w+1.7;row.style.width=l+"px";roll.style.width=(68-w)+"px";roll.style.left=(132+l)+"px";cap.style.height=(71-w)+"px";cap.style.width=(73-w)+"px";cap.style.left=(132+l)+"px";cap.style.top=(345+w/2)+"px";if(row.offsetWidth>=755){cleanInterval(sodTimer);}if(row.offsetWidth>=740){ground.removeChild(roll);ground.removeChild(cap);}},40);},2000);}},40);}
</script>
</head>
<body id="dBody" bgcolor="#008080"> <!--主界面EDAll-->
<div class="WindowFrame" id="dAll" style="position:absolute;top:0;width:900px;background:#000"><!--背景图片--><div style="position:absolute;width:1400px;height:600px;visibility:hidden;z-index:0" id="tGround"></div><!--出场僵尸显示--><div id="dZombie" style="position:absolute;width:335px;height:600px;left:1065px;top:0;z-index:1"></div>
</div>
<!--菜单-->
<div id="dMenu" style="visibility:hidden;position:absolute;cursor:pointer;width:226px;height:41px;left:677px;z-index:254"><div id="dMenu0" class="Menu" οnclick="">暂停游戏</div><div id="dMenu1" class="Menu" οnclick="">菜 单</div>
</div></body>
</html>js植物大战僵尸实训1相关推荐
- js植物大战僵尸实训2
此部分是太阳收集(可以通过改变flag来改版本,vip自动收集和普通用户版),效果图,最后为等待一段时间效果图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD H ...
- ＜山东大学项目实训＞——Unity开发植物大战僵尸（1）
关于关卡场景中小推车的添加 割草机(Lawn Mower),又称小推车,是益智策略类塔防御战游戏<植物大战僵尸>系列中的一种道具.当僵尸走至屏幕最后一格并触碰时,会启动并碾压一整行的僵尸. ...
- Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】
目 录 前言 基础理论(5天) 基础理论-Day01 基础理论-Day02 基础理论-Day03 基础理论-Day04 基础理论-Day05 项目实战 项目实战-Day01 项目实战-Day02 ...
- css+js+jq实训笔记
css+js+jq实训笔记 css第一天 css第二天 css第三天 css第四天 css第五天 css第六天 js第一天 js第二天 js第三天 js第四天 js第五天 js第六天 jq第一天 jq ...
- SEEK学习论坛-JavaWeb开发实训课题 (数据库MySQL+js+Ajax+Servlet)
关于这次学校实训,我们做了一个类似于CSDN博客的项目,然后我们小组取名叫SEEK,一个学习论坛,前面ppt有介绍,我主要是负责后端数据库的,与MySQL交互,由我的组长写好js代码,然后将前端所获取 ...
- js HTML5 网页版植物大战僵尸游戏
js HTML5 网页版植物大战僵尸游戏 源于:http://www.huiyi8.com/moban/ 植物大战僵尸Javascript版 HTML5模版 body{-moz-user-select ...
- JS实现植物大战僵尸小游戏，代码记录及效果展示
前几天看到了一个很有趣的demo,用js制作植物大战僵尸小游戏,本着学习的心态,对照着做了一下,发现这里面的一些代码设计的确很精妙,这里分享下源码和效果,如果有需要,可以看下. 效果如下: 下载地址
- SSM 实训笔记 -10- 使用 sessionStorage 存储数据、js 图片验证码、登录加载动画
SSM 实训笔记 -10- 使用 sessionStorage 存储数据.js 图片验证码.登录加载动画 本篇内容: (1)在登录成功时,使用 sessionStorage 存储用户的用户名,并在登录 ...
- educoder头歌实训 web课——JavaScript语言基础：JS循环语句
educoder头歌实训 太原理工大学web课程----JavaScript语法基础:JS运算符_玛卡巴卡的博客-CSDN博客 第1关:while类型 任务描述 质数的定义如下:大于1的自然数,且除 ...
- 【实训】第二期实训结课项目——外卖小程序
大二暑假的第二期实训,当时主要学的是小程序和maven,我在项目中担任组长,负责数据库的设计.后端代码的编写.ppt编写和最后的答辩. 课程结束后只给了四天的时间进行开发,大部分人都是第一次接触微信小 ...
最新文章
- vrp车辆路径问题 php,蚁群算法在车辆路径问题（VRP）中的应用.ppt
- 单调队列优化和决策单调性优化
- 腾讯35k招.NET Core开发，深扒这些技术要求 真的很难吗？
- eveningplan
- 隐秘的角落里数亿场AI战争正在发生
- 下班到点想走，但老员工都没动，怎么办？
- 华为云生态2020年政策FAQ（一）
- HttpModule 介绍(转)
- DataTable分组
- (转)Ubuntu10.04编译FFmpeg
- Windbg Configuration
- UML-----实现图（构件图、部署图）
- kthreaddk病毒查杀记录
- Kinect应用开发实战:用最自然的方式与机器对话
- 外媒预测2015年十大最热门工作
- 在哪买虚拟服务器,虚拟服务器是购买哪种
- 富士胶片3月底完成日立影像诊断业务收购；中国癌症早筛第一股诺辉健康登陆港交所 | 美通企业日报...
- Git、GitLab这辈子的错都报完了 You have not concludedUnlink of file、 Pulling is not possible、Your local changes
- LYTRO图像文件数据包
- 2021-03-18