JavaScript实现的--贪吃蛇
总的实现思路：
一、效果部分：
1、编写html代码，加上样式。
二、JavaScript部分：
1.利用dom方法创建一块草坪，即活动区域；
2.创建一条蛇，并设置其初始位置；
3.创建一个随机出现的食物；
4. 最后编写移动函数： 头部移动；
吃掉食物后自身长度加长；
考虑它头部遇到墙壁和头部与自身相撞的情况；
5.编写按键操作环节、给按钮加点击事件。
HTML代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>贪吃蛇</title>
</head>
<body>
<div id="container">
<!-- 活动范围 -->
<div id="ground"></div>
<!-- 控制区 -->
<div id="gameControl">
<div id="button">
<button id="start">开始</button>
<button id="pause">暂停</button>
</div>
</div>
</div>
</body>
CSS代码如下:
*{
margin:;
padding:;
}
body { background: #aaa; }
#container{
width: 1000px;
height: 550px;
border: 30px solid #003040;
margin: 11px auto;
background: #000;
}
#ground{
width: 1000px;
height: 500px;
position: relative;
}
#button{
float: right;
height: 50px;
line-height: 50px;
margin-right: 350px;
}
button{
width: 85px;
height: 40px;
cursor: pointer;
background: #2D8DDA;
color: #fff;
font-size: 15px;
border: none;
margin: 0 30px;
}
.block{
width: 20px;
height: 20px;
background: #f1f1f1;
float: left;
}
.snakeBody{
width: 20px;
height: 20px;
position: absolute;
background: #000;
}
.food{
width: 20px;
height: 20px;
background: #00D936;
position: absolute;
}
JS代码如下:
var timer, diRection='right';
window.onload=function(){
//初始化
createGrass();
createSnake();
createFood();
document.getElementById('start').onclick=function(){
clearInterval(timer); //清空，防止多次点击开始
timer=setInterval(function(){
snakeMove(diRection);
},150);
snakeMove(diRection);
};
document.getElementById('pause').onclick=function(){
clearInterval(timer);
};
};
//创建草坪
function createGrass(){
var oGround=document.getElementById('ground');
var oDiv;
for(var i=0;i<50;i++){
for(var j=0;j<25;j++){
oDiv=document.createElement('div');
oDiv.className='block';
oGround.appendChild(oDiv);
}
}
}
//创建蛇 function createSnake(){
var oGround=document.getElementById('ground');
var oDiv;
for(var i=0;i<2;i++){
oDiv=document.createElement('div');
oDiv.className='snakeBody';
oDiv.style.right=(48-i)*20+'px';
oDiv.style.top='20px';
oGround.appendChild(oDiv);
snakeBody.push(oDiv);
}
} //创建食物
var snakeBody=[], oFood; function createFood(){
var flag = true; //初始化食物和蛇身不重合
var iLeft, iTop;
var oGround = document.getElementById('ground');
oFood = document.createElement('div');
oFood.className='food';
iLeft = parseInt(Math.random()*49)*20; // 为食物块出现的位置取一个随机数（取整数）。
iTop = parseInt(Math.random()*24)*20;
var len = snakeBody.length;
for(var i=0; i<len; i++){ //确定蛇身是否与出现的食物位置重合
if(snakeBody[i].offsetLeft==iLeft && snakeBody[i].offsetTop==iTop){
flag=false;
break;
}
}
if(flag==true){
oFood.style.left=iLeft+'px';
oFood.style.top=iTop+'px';
oGround.appendChild(oFood);
} else {
createFood(); //若生成的食物有重合则再次调用自身
}
}
//蛇运动
function snakeMove(direction){
var snakeHead = snakeBody[0]; //获取蛇头
diRection = direction; //用于防止比如蛇身本来往左边走，但是向右按钮仍然有效的情况
for(var i = snakeBody.length-1; i>0; i--){
snakeBody[i].style.left=snakeBody[i-1].offsetLeft+'px'; //移动蛇
snakeBody[i].style.top=snakeBody[i-1].offsetTop+'px';
}
switch (direction){ //蛇头的位置
case 'left': snakeHead.style.left = snakeHead.offsetLeft-20+'px'; break;
case 'right': snakeHead.style.left = snakeHead.offsetLeft+20+'px'; break;
case 'up': snakeHead.style.top = snakeHead.offsetTop-20+'px'; break;
case 'down': snakeHead.style.top = snakeHead.offsetTop+20+'px'; break;
} //蛇头碰到墙壁
if(snakeHead.offsetLeft == -20 || snakeHead.offsetLeft == 1000 || snakeHead.offsetTop == -20 || snakeHead.offsetTop == 500){
clearInterval(timer);
if(confirm('再来一次?')){
window.location.reload();
}
}
//蛇碰到自身
for(var j=1;j<snakeBody.length;j++){
if(snakeHead.offsetLeft == snakeBody[j].offsetLeft && snakeHead.offsetTop == snakeBody[j].offsetTop){
clearInterval(timer);
if(confirm('再来一次')){
window.location.reload();
}
}
}
//吃掉食物
if(snakeHead.offsetLeft == oFood.offsetLeft && snakeHead.offsetTop == oFood.offsetTop){
oFood.className = 'snakeBody snake-block'; //食物变成和蛇身一样的颜色
console.log(snakeBody[snakeBody.length-1].offsetTop); //console.log 用于输出普通信息
switch (direction){ //oFood的坐标采用蛇身最后一节的坐标
case 'left': oFood.style.left = snakeBody[snakeBody.length-1].offsetLeft+'px'; break;
case 'right': oFood.style.left = snakeBody[snakeBody.length-1].offsetLeft+'px'; break;
case 'up': oFood.style.top = snakeBody[snakeBody.length-1].offsetTop+'px'; break;
case 'down': oFood.style.top = snakeBody[snakeBody.length-1].offsetTop+'px'; break;
}
snakeBody.push(oFood);
//用push把吃掉的div添加到蛇尾
//不能添加到头部，因为如果食物节出现在边缘位置，那么吃掉后会超出墙范围或者直接撞墙
createFood();
}
}
/*
* onkeydown()
* 事件会在用户按下一个键盘按键时发生。
* 参数 描述
* SomeJavaScriptCode 必需。 规定该事件发生时执行的 JavaScript。
*/
//按键操作
document.onkeydown = function(e){
var event = e || window.event; //实现所有浏览器兼容，获取事件对象
var direction = event.keyCode;
switch (direction){
case 37:
if(diRection != 'right'){
snakeMove('left');
}
break; //左
case 39:
if(diRection != 'left'){
snakeMove('right');
}
break; //右
case 38:
if(diRection != 'down'){
snakeMove('up');
}
break; //上
case 40:if(diRection != 'up'){
snakeMove('down');
}
break; //下
}
}
常用的方法：
/*
* onkeydown()
* 事件会在用户按下一个键盘按键时发生。
* 参数 描述
* SomeJavaScriptCode 必需。 规定该事件发生时执行的 JavaScript。
*/
/*
*confirm(message) 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
*
* 参数 描述
* message 要在 window 上弹出的对话框中显示的纯文本（而非 HTML 文本）
*
*如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。
*
*在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 confirm() 时，
*将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。
*
*/
/* offsetLeft属性 :
* 此属性可以返回当前元素距离某个父辈元素左边缘的距离，当然这个父辈元素也是有讲究的。
* 1.如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。
* 2.如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。
效果图：
*/
JavaScript实现的--贪吃蛇的更多相关文章
- javascript 编写的贪吃蛇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript 小游戏 贪吃蛇
贪吃蛇 代码: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <met ...
- JavaScript新手入门 贪吃蛇
从小就在玩贪吃蛇,但是知道今天自己做了一遍才知道原理的具体的实现步骤. 刚进入界面时显示开始游戏(不重要,本人比较喜欢吹毛求疵) 中间黑色部分为游戏的主要展示部分 主要步骤及源码: body中代码,红 ...
- javascript实现游戏贪吃蛇
1.设计蛇:属性有宽.高.方向.状态(有多少节),方法:显示,跑 2.设计食物:属性宽.高 3.显示蛇:根据状态向地图里加元素 4.蛇跑起来:下一节到前一节的位置,蛇头根据方向变,删除原来的蛇,新建蛇 ...
- 原生JavaScript实现的贪吃蛇
github代码地址:https://github.com/McRayFE/snake 涉及到的知识点: 键盘事件 setInterval()定时器 javascript中数组的使用 碰撞的检测 of ...
- JavaScript 面向对象思想 贪吃蛇游戏
js代码: 游戏的对象 ,食物,蛇 ,游戏控制思路如下 (完整代码在https://github.com/774044859yf/ObjectSnakeGame下载) var snake = { aS ...
- JavaScript与html5写的贪吃蛇完整代码
JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...
- javascript实现贪吃蛇
<html> <head> <style> body { background:#444; } .rect { border:1px solid #94F; wid ...
- JavaScript版—贪吃蛇小组件
最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...
随机推荐
- javascript实现禁止右键和F12查看源代码
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- C# 校验帮助类-正则表达式
一.简介 很多时候我们都需要用到一些验证的方法,有时候需要用正则表达式校验数据时,往往需要到网上找很久,结果找到的还不是很符合自己想要的.所以我把自己整理的校验帮助类分享处理,在这里分享一下,给自己留 ...
- 浙江省新高中信息技术教材，将围绕Python进行并增加编程相关知识点
2017年初消息: 浙江省信息技术新教材,即将在2017级(2017年9月入学)高中新生中开始使用. 据了解,与目前的选考(可以理解为高考科目)要求的信息技术教材由3本<信息技术基础>.& ...
- etcd raft library设计原理和使用
早在2013年11月份,在raft论文还只能在网上下载到草稿版时,我曾经写过一篇blog对其进行简要分析.4年过去了,各种raft协议的讲解铺天盖地,raft也确实得到了广泛的应用.其中最知名的应用莫 ...
- Postgresql快速写入/读取大量数据（.net）
环境及测试 使用.net驱动npgsql连接post数据库.配置:win10 x64, i5-4590, 16G DDR3, SSD 850EVO. postgresql 9.6.3,数据库与数据都安 ...
- php接口加密
在实际开发中PHP接口开发是PHP常见的技术,可以通过接口进行一些操作,可以访问接口获取数据,给app提供数据接口等,但是如果接口没有加密解密的过程,很容易发生盗用和不安全的操作. 下边简单介绍一下A ...
- [基础架构]PeopleSoft都有哪些进程运行在进程服务器上
PSPRCSRV:(PSPRCSRV.EXE) 该进程负责启动所有服务进程. 每隔15s,该进程就会去看进程调度器中是否有需要运行的进程请求.如果没有需要运行的则sleep15s,然后再次检查. 如果 ...
- java 图片质量压缩
/** * 图片质量压缩 * @param file 要压缩的图片文件 * @param input 文件输入流 * @param quality 压缩质量(0-1) * @author ouyang ...
- zoj 3963 heap partion
https://vjudge.net/problem/ZOJ-3963 题意: 给出一个数列,可以用这个数列构造一种二叉树,这个二叉树满足数的下标 i <= j,并且 si <= sj,s ...
- 浅谈redux-form在项目中的运用
准则 先说一下redux的使用场景,因为如果没有redux,那更不会有redux-form. redux基于Flux架构思想,是一个状态管理框架,其目标是解决单页面应用中复杂的状态管理问题. 日常前端 ...