贪食蛇小游戏
来源:互联网 发布:ok组合三连冠数据 编辑:程序博客网 时间:2024/04/29 03:26
学习制作贪食蛇小游戏的部分代码,今天学习了一部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
#container{
width:800px;
margin:auto;
margin_top:60px;
}
#map{
width:800px;
height:400px;
background-color:#ccc;
overflow:hidden;
position:absolute;
}
</style>
<script type="text/javascript">
function Food(){
this.w=20;
this.h=20;
this.color='red';
//显示食物
this.display=function(){
//显示食物,要知道大小,位置,属性
var new_div=document.createElement('div');
new_div.style.width=this.w+'px';
new_div.style.height=this.h+'px';
//求出有多少空格
//位置采用0.1.2
this.x=Math.round(Math.random()*39);
this.y=Math.round(Math.random()*19);
new_div.style.left=(this.w*this.x)+'px';
new_div.style.top=(this.h*this.y)+'px';
new_div.style.backgroundColor=this.color;
new_div.style.position ='absolute';
document.getElementById('map').appendChild(new_div);
}
}
//显示蛇
function snake(){
this.w=20;
this.h=20;
this.direct='right';
this.display=function(){
//通过数组来保存蛇身。一个元素代表一个蛇节
this.body=[
{x:5,
y:3,
color:"blue"
},
{
x:4,
y:3,
color:"red"
},
{
x:3,
y:3,
color:"red"
}
]
for(var i=0;i<this.body.length;i++){
var snake_div = document.createElement('div');
snake_div.style.width = this.w+'px';
snake_div.style.height = this.h+'px';
snake_div.style.position ='absolute';
snake_div.style.left=(this.w*this.body[i].x)+'px';
snake_div.style.top =(this.h*this.body[i].y)+'px';
snake_div.style.backgroundColor = this.body[i].color;
document.getElementById('map').appendChild(snake_div);
}
}
}
function init(){
food = new Food();
food.display();
snake = new snake();
snake.display();
}
</script>
<body onload="init();">
<div id="container">
<input type="button" onclick="start()" value="开始">
<div id="map"></div>
<div>
</body>
</html>
- 贪食蛇 - 自己动手小游戏
- 贪食蛇小游戏
- 贪食蛇小游戏
- 贪食蛇小游戏
- 贪食蛇小游戏 完整版
- 贪食蛇java小游戏
- 嵌入式 贪食蛇小游戏
- 小游戏,贪食蛇
- Java贪食蛇小游戏
- c语言小游戏(贪食蛇)
- 用js写的贪食蛇小游戏
- 贪食蛇小游戏 能动啦 高兴ing
- JS小游戏 贪食蛇v1.0
- as 贪食蛇小游戏(一)
- as贪食蛇小游戏(二)
- 使用C++设计贪食蛇小游戏
- python模仿开发贪食蛇小游戏历程
- java swing版本 贪食蛇 小游戏
- .Net线程问题解答
- 求转置矩阵问题
- 解决MDI窗体最大化状态小切换窗体时闪烁问题
- MySQL的一些基本操作
- LL1文法分析(First集,Follow集,Select集,ll分析表,语句分析)
- 贪食蛇小游戏
- DetectVMware.Source
- 超越“讲课”,给学生以更切实际的支持
- 解决android4.0 触摸屏分辨率映射不准
- DFS算法,BFS算法遍历图
- 测试人员必知必会的SQL知识10
- HDU 4455 DP
- insert 函数
- USB人体学输入设备黄色感叹号