使用Javascript来编写贪食蛇（零基础）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪吃蛇</title>
<!--css样式-->
<style type="text/css">
body{font-size:24px; border:none; cursor:pointer;}
#SnakeArea{ width:420px; height:420px; border:#600 solid 2px; margin-top:-15px; margin-left:-10px; background:url(image/23.jpg);}
#Menu{background-image:url(image/40.gif); width:200px; height:410px; border:#90C solid 2px; margin-left:420px; margin-top:-410px; color:#FFF; text-align:center;}
a{ color:#FFF;text-decoration:none;}
.onMouseMove{ text-decoration:underline; font-size:28px; background-color:#90F; border:2px #30F solid;}
.onMouseOut{ text-decoration:none; font-size:24px; border: none;}
</style>
<!--下面是本人使用JavaScript来编写贪吃蛇,课外做的课堂作业,求高手点评出缺点,提出自己的看法意见-->
<script type="text/javascript">
var keyValue;//获取键盘键值
var snakeId = 0;//蛇身体(控件)的id号
var loca = 0;//蛇身(控件)交换的索引
var speed = 500;//蛇移动的速度
var num = 1;//玩家的积分
window.onload = function Lond(){//初始化蛇的位置
var leftPoint = 10;
for(var i=0;i<3;i++){//初始化蛇的长度
var SnakeLond = SnakeBody();
SnakeLond.style.position = "absolute";
SnakeLond.style.top = "100px";
SnakeLond.style.left = leftPoint+"px";
leftPoint += 10;
document.body.appendChild(SnakeLond);//把创建的蛇添加到页面上去
}
Food();//初始化事物
}
function Random(){//获取食物的随机位置
return Math.floor(Math.random()*(40));//生成随机数
}
function SnakeBody(){//构造一个蛇身并设置其初始的属性值
var SnakeLond = document.createElement("input");
SnakeLond.setAttribute("type","button");//初始类型
SnakeLond.style.width = "20px";
SnakeLond.style.height = "20px";
SnakeLond.setAttribute("id",snakeId);
snakeId++;
return SnakeLond;
}
function Food(){//构造食物方法
var x;
var y;
var SnakeLond = document.createElement("input");//创建食物
SnakeLond.setAttribute("type","button");//食物的类型是button类型
SnakeLond.style.width = "20px";
SnakeLond.style.height = "20px";
SnakeLond.setAttribute("id","food");//id为food
x = Random() * 10;
y = Random() * 10;
SnakeLond.style.position = "absolute";//绝对定位
SnakeLond.style.top = x+"px";
SnakeLond.style.left = y+"px";
SnakeLond.style.background = "blue";
document.body.appendChild(SnakeLond);
}
function $(id){//返回指定id号的实例
return document.getElementById(id);
}
function KeyDown(){//键盘键入事件,获取从键盘输入而得到的键值
if(keyValue == 38 && event.keyCode == 40)
event.keyCode = 38;
else if(keyValue == 40 && event.keyCode == 38)
event.keyCode = 40;
else if(keyValue == 37 && event.keyCode == 39)
event.keyCode = 37
else if(keyValue == 39 && event.keyCode == 37)
event.keyCode = 39;
keyValue = event.keyCode
Stir();//蛇移动
EatFood();//蛇吃食
}
function EatFood(){//吃食方法
var SnakeHead = Head();
var score = $("score");
//var leng = document.getElementsByTagName("input").length-2;
var food = $("food");
var s = SnakeHead.style;
//如果蛇的头部与食物刚好对应的话就表示蛇吃到了食物,蛇的长度和速度就会增加,并且要重置定时器的速度
if(s.top == food.style.top && s.left == food.style.left){
speed -= 30;//速度发生改变
if(speed- 30 <= 30)
speed = 5;
clearInterval(time);//清除定时器
time = setInterval("Tir()",speed);//重置定时器
score.innerHTML = "积分："+num;//积分增加
num++;
food.setAttribute("id",snakeId);
var x = parseInt(SnakeHead.style.top);
var y = parseInt(SnakeHead.style.left);
food.style.top = x+"px";//消化食物
food.style.left = y+"px";
snakeId++;
Food();
}
}
function SelfEnd(){//蛇自杀方法
var SnakeHead = Head();
var leng = document.getElementsByTagName("input").length-1;//得到蛇的长度
var SnakeItem = document.getElementsByTagName("input");//得到蛇身体所有的部位
var headTop = SnakeHead.style;
var head = $(SnakeItem.length-2);//得到蛇的头部
for(var i=0;i<SnakeItem.length;i++){//循环蛇的每个部位
var items = SnakeItem.item(i).style;
var id = SnakeItem.item(i).id;
//如果蛇的头部与蛇的其它部位相吻合的话就表示蛇咬到了自己
if(headTop.top == items.top && headTop.left == items.left && id<leng-2){
clearTimeout(time);
alert("<^GAME ^ OVER^>");//游戏结束
}
}
}
function BumpWall(){//蛇撞墙方法
var SnakeHead = Head();
var s = SnakeHead.style;
var top = parseInt(s.top);
var left = parseInt(s.left);
//如果蛇移动的坐标超过了边界,则蛇撞到了墙,游戏结束
if(top < 0 || top >= 410 || left < 0 || left >= 410){
clearTimeout(time);
alert("<^GAME ^ OVER^>");
}
}
function Stir(){//蛇移动方法
var pointx = 0;
var pointy = 0;
var leng = document.getElementsByTagName("input").length-1;
var SnakeHead = document.getElementById(leng-1);
var SnakeBody;//申明蛇的身体
var leftPoint = SnakeHead.style.left;
var topPoint = SnakeHead.style.top;
//设置蛇的样式
for(var i=0;i<leng;i++){
if(i==leng-1)
$(i).style.backgroundColor = "purple";
else
$(i).style.backgroundColor = "black";
}
//蛇根据你按下的上下左右键来进行移动行走
if(keyValue == 40){
pointy = parseInt(SnakeHead.style.top) + 10;
pointx = parseInt(SnakeHead.style.left);
}
else if(keyValue == 38){
pointy = parseInt(SnakeHead.style.top) - 10;
pointx = parseInt(SnakeHead.style.left);
}
else if(keyValue == 39){
pointx = parseInt(SnakeHead.style.left) + 10;
pointy = parseInt(SnakeHead.style.top);
}
else if(keyValue == 37){
pointx = parseInt(SnakeHead.style.left) - 10;
pointy = parseInt(SnakeHead.style.top);
}
else{
pointx = parseInt(SnakeHead.style.left) + 10;
pointy = parseInt(SnakeHead.style.top);
}
SnakeBody = $(loca);//得到蛇的各个身体
SnakeBody.style.left = leftPoint;
SnakeBody.style.top = topPoint;
loca++;
if(loca == leng-1)
loca = 0;
SnakeHead.style.left = pointx + "px";//蛇按照指定方向走动
SnakeHead.style.top = pointy + "px";
var snakeSpeed = $("speed");//用来记录蛇的坐标
snakeSpeed.innerHTML = "坐标：<br/>"+"X "+pointx+","+"Y "+pointy;
BumpWall();//调用蛇撞墙方法
SelfEnd();//调用蛇自杀方法
}
function Head(){//返回蛇的头部
var leng = document.getElementsByTagName("input").length-1;//蛇的长度
return document.getElementById(leng-1);//蛇的头部
}
function Pause(){//暂停方法
alert("暂停中......");
}
function Tir(){//计时器方法
Stir();
EatFood();
}
function onMouseMove(id){//鼠标移到指定选项的方法
var p = $(id);
p.className = "onMouseMove";
}
function onMouseOut(id){//鼠标移开指定选项的方法
var p = $(id);
p.className = "onMouseOut";
}
var time = setInterval("Tir()",speed);//定时器
</script>
</head> <body onkeydown="KeyDown()">
<div id="SnakeArea">
</div>
<!--游戏菜单-->
<div id="Menu">
<p style="color:#FF0;">游戏菜单</p>
<a href="Snake.html" id="start" onMouseMove="onMouseMove('start')" onMouseOut="onMouseOut('start')">重新开始</a>
<br/>
<p id="speed" onMouseMove="onMouseMove('speed')" onMouseOut="onMouseOut('speed')">坐标</p>
<p id="score" onMouseMove="onMouseMove('score')" onMouseOut="onMouseOut('score')">积分</p>
<p id="pause" onClick="Pause()" onMouseMove="onMouseMove('pause')" onMouseOut="onMouseOut('pause')">暂停</p>
<p id="end" onClick="javascript:window.close()" onMouseMove="onMouseMove('end')" onMouseOut="onMouseOut('end')">结束游戏</p>
</div>
</body>
</html>
View Snake
使用Javascript来编写贪食蛇（零基础）的更多相关文章
- 从零基础入门JavaScript（1）
从零基础入门JavaScript(1) 1.1 Javascript的简史 1995年的时候 由网景公司开发的,当时的名字叫livescript 为了推广自己的livescript,搭了j ...
- 《零基础学JavaScript(全彩版)》学习笔记
<零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...
- 零基础JavaScript编码（二）
任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...
- 零基础JavaScript编码（一）
任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...
- Javascript贪食蛇小游戏
试玩:http://hovertree.com/game/9/ 贪吃蛇是一种风靡全球的小游戏,就是一条小蛇,不停地在屏幕上游走,吃各个方向出现的蛋,越吃越长.只要蛇头碰到屏幕四周,或者碰到自己的身子, ...
- JavaScript强化教程 - 六步实现贪食蛇
1.首先创建div 并且给div加样式 <div id="pannel" style="width: 500px;height: 500px;z-index: 1; ...
- javascript入门视频第一天 小案例制作 零基础开始学习javascript
JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...
- JavaScript贪食蛇游戏制作详解
之前闲时开发过一个简单的网页版贪食蛇游戏程序,现在把程序的实现思路写下来,供有兴趣同学参考阅读. 代码的实现比较简单,整个程序由三个类,一组常量和一些游戏逻辑以外的初始化和控制代码组成,总共400多行 ...
- 网络安全(超级详细)零基础带你一步一步走进缓冲区溢出漏洞和shellcode编写！
零基础带你走进缓冲区溢出,编写shellcode. 写在前面的话:本人是以一个零基础者角度来带着大家去理解缓冲区溢出漏洞,当然如果你是开发者更好. 注:如果有转载请注明出处!创作不易.谢谢合作. 0. ...
随机推荐
- Elasticsearch——Rest API中的常用用法
本篇翻译的是Elasticsearch官方文档中的一些技巧,是使用Elasticsearch必不可少的必备知识,并且适用于所有的Rest Api. 返回数据格式化 当在Rest请求后面添加?prett ...
- 单纯形方法（Simplex Method）
最近在上最优理论这门课,刚开始是线性规划部分,主要的方法就是单纯形方法,学完之后做了一下大M算法和分段法的仿真,拿出来与大家分享一下.单纯形方法是求解线性规划问题的一种基本方法. 线性规划就是在一系列 ...
- JS魔法堂：再识Number type
Brief 本来只打算理解JS中0.1 + 0.2 == 0.30000000000000004的原因,但发现自己对计算机的数字表示和运算十分陌生,于是只好恶补一下.以下是恶补后的成果: 基础野:细说 ...
- JavaScript基础插曲---apply，call和URL编码等方法
Js基础学习 Js的压缩: 就是利用js的语法格式通过缩短变量名,去掉空格等来进行压缩. Apply和call的使用 1:apply方法:应用某一对象的方法,用于一个对象替换当前对象.主要是改变thi ...
- PHPcms 系统简单使用
1.站点/发布点的新建 1.1 发布点的新建: 发布点是设置站点与服务器之间的链接配置. 设置 - 发布点管理 - 添加发布点 发布点名:可以与接下来的站点名称相同 ftp服务器:用于设置PHPcms ...
- Razor练习3
Razor语法中,物质循环处理,它使用到三种: for, while,foreach. 下面Insus.NET分别在ASP.NET MVC环境中列举一个例子,附加源代码: while:<br / ...
- C# ~ NUnit单元测试
单元测试 单元测试(Unit Test)的一个测试用例(Test Case)是一小段代码,用于测试一个小的程序功能的行为是否正常,保证开发的功能子项能正确完成并实现其基本功能.一个单元测试是用于判断某 ...
- ubuntu16.4下用jexus部署asp.net core rtm
上篇文章介绍了下用vs发布部署到iis环境,今天说下ubuntu 下部署asp.net core,不需要安装.net core sdk,自带运行时方式部署,利用jexus服务器转发请求到asp.net ...
- Nofuser - deobfuscator for Confuser
google搜索了好久,最终找到这个工具,可直接使用. 虽然脱后有很多无用代码,但关键代码是还是很清晰的! ----------------------------NoFuser----------- ...
- 修正 XE6 TListView 上方 SearchBok 右边的清除钮显示
注意:XE7 已修正这个问题. Delphi Firemonkey TListView 提供了搜寻的功能,但在 XE6 以前的版本,可以显示右边的清除按钮,在 XE6 确消失了,这里提供一个修正的方案 ...