HTML5贪吃蛇源代码
显示效果例如以下：点击这里！
代码下载：点击这里！
<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.onload=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].onclick=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].onclick=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].onclick=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].onclick=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].onclick=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 onkeyup="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 onload="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>
HTML5贪吃蛇源代码的更多相关文章
- C/C++编程笔记：C语言贪吃蛇源代码控制台（二），分数和食物！
接上文<C/C++编程笔记:C语言贪吃蛇源代码控制台(一),会动的那种哦!>如果你在学习C语言开发贪吃蛇的话,零基础建议从上一篇开始哦!接下来正式开始吧! 三.蛇的运动 上次我已经教大家画 ...
- WebGL实现HTML5贪吃蛇3D游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
- [置顶] 63行代码完美实现html5 贪吃蛇游戏
以前也很少关注html5,感觉选择html已经慢慢成为趋势,想了解下.就找了个游戏学习了,写完这个游戏感觉html5和js结合很紧密,如果js不是特别好.估计需要先补习下js,这个只是个人的建议,不一 ...
- 使用TypeScript实现简单的HTML5贪吃蛇游戏
TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已 ...
- C/C++编程笔记：C语言贪吃蛇源代码控制台（一），会动的那种哦！
前几天有个同学加我QQ私聊我说他们老师布置了一个贪吃蛇,他不知道怎么写所以来找我求解,我给他简单讲解了思路和一些难点之后他也能够自己独立将项目完成了!考虑到更多同学可能有贪吃蛇上的问题,今天有时间就来 ...
- 简易html5贪吃蛇
1. [图片] E6~0%QPA46ER843UQJ$0Z`H.jpg 2. [文件] snake.html <!DOCTYPE html><html><head> ...
- 【转】Android贪吃蛇源代码
/*TileView:tile有瓦片的意思,用一个个tile拼接起来的就是地图.TileView就是用来呈现地图的类*/ public class TileView extends View { /* ...
- WebGL实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
- 100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
随机推荐
- spark rdd saveAsTextFile保存为文件
sc.parallelize(["one", "two", "two", "three", "three&qu ...
- 设计url 通过分发的方式 Xadmin_demo
如 urlpatterns = [ url(r'^Xadmin/',([ url(r'^add/$', views.add) url(r'^delete/$', views.delete) ], No ...
- Random words
To choose a random word from the histogram, the simplest algorithm is to build a list with multiple ...
- java9新特性-13-增强的 Stream API
1.使用说明 Java 的 Steam API 是java标准库最好的改进之一,让开发者能够快速运算,从而能够有效的利用数据并行计算.Java 8 提供的 Steam 能够利用多核架构实现声明式的数据 ...
- Lua,github,nginx
个人觉得这几种工具都是大学里,至少是前几年未曾出现于课本中或者图书馆中的.而如今确实某些公司赫然出现在招聘需求中的东西. 什么是Lua,为什么要用Lua——做手机游戏而被推广的.Lua原来早在93年就 ...
- 使用 validate 进行输入验证
validate 官方教程网址: http://www.runoob.com/jquery/jquery-plugin-validate.html 在表单页面引入两个核心 js 文件 #官方的两个文件 ...
- [POI2008]PLA-Postering（单调栈）
题意 N个矩形,排成一排. 现在希望用尽量少的矩形海报Cover住它们. (n<=250000,wi,di<=109) 题解 这种一堆矩形,又不像数据结构的题,一般都是单调栈. 考虑一个贪 ...
- 利用NSProxy解决NSTimer内存泄漏问题
之前写过一篇利用RunTime解决由NSTimer导致的内存泄漏的文章,最近和同事讨论觉得这样写有点复杂,然后发现有NSProxy这么好用的根类,根类,根类,没错NSProxy与NSObject一样是 ...
- bzoj1066【SCOI2007】蜥蜴
1066: [SCOI2007]蜥蜴 Time Limit: 1 Sec Memory Limit: 162 MB Submit: 2512 Solved: 1238 [Submit][Statu ...
- CSU1608: Particle Collider(后缀数组)
Description In the deep universe, there is a beautiful planet named as CS on which scientists have d ...