HTML5贪吃蛇源代码

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量142 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/llguanli/p/7078040.html
版权

显示效果例如以下：点击这里！

      代码下载：点击这里！



<script> 

function show(){ 
var date = new Date(); //日期对象 
var now = ""; 
now = date.getFullYear()+"年"; //读英文即可了 
now = now + (date.getMonth()+1)+"月"; //取月的时候取的是当前月-1假设想取当前月+1就能够了 
now = now + date.getDate()+"日"; 
now = now + date.getHours()+"时"; 
now = now + date.getMinutes()+"分"; 
now = now + date.getSeconds()+"秒"; 
document.getElementById("nowDiv").innerHTML = now; //div的html是now这个字符串 
setTimeout("show()",1000); //设置过1000毫秒就是1秒，调用show方法 
} 
</script>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网络人VS灰鸽子工作室</title>


<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
div{
background:-webkit-gradient(linear,0 0, 0 100%, from(yellow), to(red));/**Chrom Safari**/
background:-moz-linear-gradient(top, yellow, red); /** FireFox **/
background:-o-linear-gradient(top, yellow,red);/** Opear **/ 
background:-ms-linear-gradient(yellow 0%,red 100%);/** IE9 IE10 **/ 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow',endColorstr='red',grandientType=1); /** IE7 **/ 
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow',endColorstr='red',grandientType=1); /** IE8 **/ 
box-shadow:3px 3px 8px yellow;border-radius:5px;
}
input{
margin: 50px 0 0 50px;cursor:pointer;width:100px;height:50px;

-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
transform:rotate(20deg);
-webkit-transition:0.8s;
-moz-transition:0.8s;
}
input:hover{
-webkit-transform:rotate(360deg) scale(1.3);
-moz-transform:rotate(360deg) scale(1.3);
transform:rotate(360deg) scale(1.3);

box-shadow:10px 10px 15px #111;
}
</style>


<script type="text/javascript">
var snake=[];
var oDiv=null;
var oDivSize=600;
var dir="left";
var fruit=null;
var snakeWidth=20;
var t=null;
var aInp=null;
var aSpan=null;
window.οnlοad=function(){
oDiv=document.getElementsByTagName('div')[0];
aInp=document.getElementsByTagName('input');
aSpan=document.getElementsByTagName('span')[0];
oDiv.style.position='absolute';
oDiv.style.width=oDivSize+'px';
oDiv.style.height=oDivSize+'px';
oDiv.style.left ='350px';
   oDiv.style.top ='20px';
   oDiv.style.border = "15px solid rgba(35,150,60,1)";
   init(500);
   // t=setInterval(move,interval);
   aInp[0].οnclick=function(){
    var first = snake[0];
var fruitLeft = parseInt(fruit.style.left);
var fruitTop = parseInt(fruit.style.top);
var firstLeft = parseInt(first.style.left);
var firstTop = parseInt(first.style.top);
    if(!(firstLeft == - snakeWidth || firstLeft == oDivSize|| firstTop == - snakeWidth || firstTop == oDivSize)){
    clearInterval(t);
    t=setInterval(move,600);
    for(var i=0;i<aInp.length;i++){
    aInp[i].style.background='';
    }
    this.style.background="#ae5";
   } 
}
   aInp[1].οnclick=function(){
    var first = snake[0];
var fruitLeft = parseInt(fruit.style.left);
var fruitTop = parseInt(fruit.style.top);
var firstLeft = parseInt(first.style.left);
var firstTop = parseInt(first.style.top);
    if(!(firstLeft == - snakeWidth || firstLeft == oDivSize|| firstTop == - snakeWidth || firstTop == oDivSize)){
   clearInterval(t);
    t=setInterval(move,280);
    for(var i=0;i<aInp.length;i++){
    aInp[i].style.background='';
    }
    this.style.background="#f66";
   }
}
    aInp[2].οnclick=function(){
    var first = snake[0];
var fruitLeft = parseInt(fruit.style.left);
var fruitTop = parseInt(fruit.style.top);
var firstLeft = parseInt(first.style.left);
var firstTop = parseInt(first.style.top);
    if(!(firstLeft == - snakeWidth || firstLeft == oDivSize|| firstTop == - snakeWidth || firstTop == oDivSize)){
    clearInterval(t);
    t=setInterval(move,150);
    for(var i=0;i<aInp.length;i++){
    aInp[i].style.background='';
    }
    this.style.background="lightblue"
   }
}
    aInp[3].οnclick=function(){
    var first = snake[0];
var fruitLeft = parseInt(fruit.style.left);
var fruitTop = parseInt(fruit.style.top);
var firstLeft = parseInt(first.style.left);
var firstTop = parseInt(first.style.top);
    if(!(firstLeft == - snakeWidth || firstLeft == oDivSize|| firstTop == - snakeWidth || firstTop == oDivSize)){
    clearInterval(t);
    t=setInterval(move,100);
    for(var i=0;i<aInp.length;i++){
    aInp[i].style.background='';
    }
    this.style.background="red";
   }
}
   aInp[4].οnclick=function(){
    var first = snake[0];
var fruitLeft = parseInt(fruit.style.left);
var fruitTop = parseInt(fruit.style.top);
var firstLeft = parseInt(first.style.left);
var firstTop = parseInt(first.style.top);
    if(!(firstLeft == - snakeWidth || firstLeft == oDivSize|| firstTop == - snakeWidth || firstTop == oDivSize)){
    clearInterval(t);
    t=setInterval(move,50);
    for(var i=0;i<aInp.length;i++){
    aInp[i].style.background='';
    }
    this.style.background="#fd5"
   }
}
}
function move(){
for(var i=snake.length-1;i>0;i--){
var s = snake[i];
var s2 = snake[i-1];
s.style.left = s2.style.left ;
s.style.top =  s2.style.top ;
}
var ss = snake[0];
if(dir == "left"){
ss.style.left =  (parseInt(ss.style.left) - snakeWidth) + "px";
} else if(dir == "right"){
ss.style.left =  (parseInt(ss.style.left) + snakeWidth) + "px";
} else if(dir == "top"){
ss.style.top =  (parseInt(ss.style.top) - snakeWidth) + "px";
}else if(dir == "buttom"){
ss.style.top =  (parseInt(ss.style.top) + snakeWidth) + "px";
} 
check();
}
function init(appear){
var oneSnake=create(appear,snakeWidth * 2);
snake.push(oneSnake);
oDiv.appendChild(oneSnake);


var oneSnake=create(appear+snakeWidth,snakeWidth * 2);
snake.push(oneSnake);
oDiv.appendChild(oneSnake);


var oneSnake=create(appear+snakeWidth+snakeWidth,snakeWidth * 2);
snake.push(oneSnake);
oDiv.appendChild(oneSnake);


addFruit();
}


function create(left,top){
var div=document.createElement('div');
div.style.position='absolute';
div.style.left=left+'px';
div.style.top=top+'px';
div.style.width=snakeWidth+'px';
div.style.height=snakeWidth+'px';
div.style.border = "1px solid aqua";
return div;
}
function addFruit(){
var left=Math.floor(Math.random()*(oDivSize/snakeWidth))*snakeWidth;
var top=Math.floor(Math.random()*(oDivSize/snakeWidth))*snakeWidth;
for(i=0;i<snake.length;i++){
var s=snake[i];
if(left == parseInt(s.style.left)&&parseInt(top == s.style.top)){
addFruit();
return;
}
}
fruit=create(left,top);
oDiv.appendChild(fruit);
}


function onKeyupEvent(event){
var code = event.keyCode
if(code == 38 && dir != "buttom"){
dir = "top";
} if(code == 40 && dir != "top"){
dir = "buttom";
}if(code == 37 && dir != "right"){
dir = "left";
}if(code == 39 && dir != "left"){
dir = "right";
}
check();
}




function check(){
var num=0;
var first = snake[0];
var fruitLeft = parseInt(fruit.style.left);
var fruitTop = parseInt(fruit.style.top);
var firstLeft = parseInt(first.style.left);
var firstTop = parseInt(first.style.top);


if(firstLeft == - snakeWidth || firstLeft == oDivSize|| firstTop == - snakeWidth || firstTop == oDivSize){




clearInterval(t);
 var M=confirm('撞到墙上了,游戏结束！

是否又一次開始？');
                if(M){
                    document.location.reload();
                }else{
                    return false;
                }
return;//检验是否撞到墙上了 
}
for(var i = 1; i < snake.length ; i++){
var s = snake[i];
if(firstLeft == parseInt(s.style.left) && firstTop == parseInt(s.style.top)){
clearInterval(t);
var N=confirm('撞到自己了，游戏结束！

是否又一次開始？')
if(N){
document.location.reload();
}else{
return false;
}
return; //检验是否撞到自身
}
}

if((dir == "buttom" && (fruitTop - firstTop == snakeWidth) && fruitLeft == firstLeft) || 
  (dir == "top" && (fruitTop - firstTop == -snakeWidth) && fruitLeft == firstLeft) ||
  (dir == "right" && (fruitLeft - firstLeft == snakeWidth) && fruitTop == firstTop)||
  (dir == "left" && (fruitLeft - firstLeft == -snakeWidth) && fruitTop == firstTop)){
var temp = [];
temp.push(fruit);
snake = temp.concat(snake);//吃了
num++;
addFruit();
}


}
</script>


</head>


<style type="text/css">
img{
  position:absolute;
  left:1100px;
  top:100px;
  }
</style>


<body οnkeyup="onKeyupEvent(event)" style="background:rgba(50,50,50,1)">
<font color="pink" size="5" style='position:absolute;left:1000;top:300'>利用键盘上的↑ ↓ ← → 来控制方向 </font>


<a  href="../index.html"><img border="0" src="./image/4.jpg" alt="主页面" title="返回主页面"></a>




<div></div>

<ul>
<li><h1><input type="button" value="開始"></h1></li>
<li><input type="button" value="简单"></li>
<li><input type="button" value="0基础"></li>
<li><input type="button" value="一般"></li>
<li><input type="button" value="困难"></li>
</ul>


<span style="font-size:25px;color:#ae5;font-family:微软雅黑;margin-left:30px;position:absolute;left:10px;bottom:40px;";>请选择难度開始游戏<br>游戏过程中能够随时难度</span>

<br><br><br><br><br><br><br><br><br>
<p></p>
<h2 align=right><font color="blue">
<body οnlοad="show()">   <!-- 网页载入时调用一次 以后就自己主动调用了--> 
<font size="5" color="pink"> Design By：</font><a href="http://blog.csdn.net/qq_21792169/article/category/5907695" target="_blank"><font size="5" color="pink">网络人VS灰鸽子工作室</font></a>
<div id="nowDiv"></div> </body>
</font></h2>


</body>
</html>

转载于:https://www.cnblogs.com/llguanli/p/7078040.html

weixin_30823227
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 贪吃蛇游戏实现思路及源代码
12-13
通过方向键控制贪吃蛇上下左右移动。贪吃蛇吃到食物之后会变长一个长度。 游戏具体实现 游戏难点是怎么模拟贪吃蛇的移动。如果只是一个方块的话显然很简单。但是当蛇的长度变长之后要怎么样控制 每个方块的移动呢...
js 贪吃蛇 代码源文件
09-09
使用canvas 和js实现的不到100行的代码。 学习js时候个人做的贪吃蛇的小游戏，可以供大家参考。 。。。。。。。。。。。。。。
HTML实现简单的贪吃蛇小游戏（附完整源码）
热门推荐
m0_56417836的博客
07-04 2万+
项目简介： 贪吃蛇作为我们儿时经典的游戏之一，它是一款单机而又好玩的小游戏。今天，就让我们用html5技术实现一个简单的贪吃蛇小游戏！项目核心技术： html5的canvas技术+js技术操作步骤： 游戏玩家通过操作键盘的方向键（上下左右键）来控制小蛇的方向，使小蛇吃到红色的食物，然后促使小蛇长大。并且，如果得到的分数在不断上涨，游戏的难度也会不断的上升（小蛇的移动速度会越来越快）。如果小蛇头部撞到墙壁或蛇自身体，就会判定游戏失败。......
前端贪吃蛇小游戏（HTML、CSS、JS）
我们好像在哪见过
06-20 612
这是CSS代码，为游戏页面的样式和布局进行描述，这里只做了简单的样式，可以根据自己的需求添加样式。这是JS代码，用来设小蛇的动态效果和数据处理等功能，代码上有解析和注释。这是HTML代码，用来描述贪吃蛇小游戏页面的结构和内容。
前端编写贪吃蛇游戏-附详细代码
一步一个脚印，踏实努力，向着目标前进
06-23 1659
当我们在前端编写贪吃蛇游戏时，可以按照以下步骤进行：先看截图： 设置游戏板：创建一个HTML元素作为游戏板，可以使用元素，并为其设置合适的样式。绘制蛇和食物：使用JavaScript代码在游戏板上绘制蛇和食物。可以使用CSS样式设置蛇和食物的样式。移动蛇：编写函数来移动蛇的身体和头部。可以使用数组来表示蛇的身体，数组中的每个元素表示蛇的一个部分，如头部、身体和尾部。监听键盘事件：使用JavaScript代码监听键盘事件，根据按键来改变蛇的移动方向。检查碰撞：编写函数来检查蛇是否碰到边界或自身。如果蛇碰到边界
html实现贪吃蛇游戏(源码)
xcLeigh
11-01 4280
html实现贪吃蛇源码，酷炫的界面效果，点击开始游戏后，通过键盘的上下左右按键，操作移动方向，代码备注详细，一看就明白。
贪吃蛇完整代码
X-77
11-15 2620
HTML代码如下： <div class="container"> <div class="map"></div> <div class="btn begin"><button></button></div> <div class="btn pause"><button></button></div> </d
贪吃蛇源代码——前端（50）.rar
01-14
这是一个由前端实现的贪吃蛇的源代码，可以直接运行！可以根据需要加以修改哦！欢迎喜欢的朋友们下载！
贪吃蛇源代码
03-18
第一次写游戏，第一次写html5 感觉还是很吃力的。写完了，给大家分享下。互相交流.不懂的或者有建议的，可以留言给我。代码很短，就60行
原生web实现贪吃蛇
“代码农”微信公众号
10-10 2084
目录1、关键代码2、完整代码 1、关键代码 2、完整代码
html贪吃蛇源码
10-05
html,js缩所写的贪吃蛇，源码简介清晰你可以，根据所写的注释读
jQuery贪吃蛇网页版游戏代码
07-29
jQuery贪吃蛇网页版游戏代码,贪吃蛇网页版游戏代码基于jquery.1.11.3.min.js制作，贪吃蛇游戏是一款经典的益智游戏，有PC和手机等多平台版本，既简单又耐玩.Query网页版贪吃蛇游戏，带得分排行榜，交互的贪吃蛇游戏下载。 操作指南：1、输入游戏昵称（不输入默认“游客”）。2、点击“开始游戏”按钮启动游戏。Jquery网页版贪吃蛇益智类小游戏，代码可直接运行，使用键盘方向键(← ↑ → ↓)键来控制方向，空格键暂停。web前端永远不会过时. jQuery简单网页贪吃蛇大战小游戏代码，带分类统计，吃的越多，分数越多，贪吃蛇越长。实现代码来讲解贪吃蛇游戏的实现。因为贪吃蛇游戏的难点主要是JS 部分。利用jQuery实现网页版贪吃蛇游戏代码以及利用jQuery实现、网页版、贪吃蛇、游戏代码等js/jquery网页特效代码下载。
html5贪吃蛇源码
03-13
html5贪吃蛇源码,代码浅显易懂。
Web前端---HTML+CSS+JS实现的贪吃蛇游戏
chengyang_java的博客
10-28 1万+
目录 游戏设计步骤： 代码目录： 主要代码实现： 源码获取 效果演示：文末获取免费源码 游戏设计步骤： 1.首先是蛇的运动。蛇每往前走一步。就是增加一个头部点，去掉原来的尾巴点。中间的所有点都是不动的。 用程序化来表达就是，整条贪吃蛇可以是一个类似这样[[1,2],[1,3]]的带位置信息的数组，每移动一步，往数组推入一个新的坐标点，并移除第一个坐标点。 2.获取下一个点的坐标。我们的蛇理论上可以往上下左右四个方向移动。可以根据现在蛇头的坐标和方向计算出合适的x,y坐标...
HTML+CSS+JS实现 贪吃蛇游戏源码
java李阳勇的博客
09-06 2594
效果演示： 代码目录： 主要代码实现： 部分代码 : <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Docum...
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 808
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 482
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
element-ui的bug记录
nick_zhang的博客
04-29 384
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 129
注释很详细，直接上代码……
java贪吃蛇源代码下载
01-04
要下载Java贪吃蛇的源代码，首先需要在网络上搜索可靠的源代码资源。可以通过搜索引擎或开源代码库来查找可用的贪吃蛇源代码。 搜索时，关键词可能包括“Java贪吃蛇源代码”、“Java Snake源代码”等等。可以尝试...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值