javascript贪吃蛇小游戏

最新推荐文章于 2022-11-29 21:02:48 发布
最新推荐文章于 2022-11-29 21:02:48 发布
阅读量110 收藏 1
点赞数 1
分类专栏： JavaScript 文章标签： javascript 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013719012/article/details/49360435
版权 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>贪吃蛇</title>
<style type="text/css">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
}
#global {
    margin:auto;
    position: relative;
    width: 800px;
    height:500px;
    border: thick double #ff0000;
    background-color:#666666
}
#global #p {
    background-color: #999999;
    position: absolute;
    height: 500px;
    width: 500px;
    left:0px;
    top:0px;
    border-right-width: thick;
    border-right-style: double;
    border-right-color: #FF0000;     
}
#global #p #k {
    background-color: #0000FF;
    position: absolute;
    height: 25px;
    width: 25px;
    left:0px;
    top:0px;
}
#global #p .xin {
    position: absolute;
    height: 25px;
    width: 25px;
}
-->
</style>
<script language="javascript" type="text/javascript">
//获取新生元素位置
var bucunzai=true;//记录新元素是不是移动
var xinkx;
var xinky;
//页面载入后k元素定位
function lo(){
var objectp=document.getElementById("k")
objectp.style.left="250px"
objectp.style.top="250px"
//K元素最终样式代码
k_zz=objectp.currentStyle?document.getElementById("k").currentStyle:document.defaultView.getComputedStyle(objectp,null);
}
//记录位置的数组
var k_x=new Array()
var k_y=new Array()
//记录蛇的长度
var k_number=0
//方向键函数
document.οnkeydοwn=pmove;
var fx=0//获取上一次的按键直
function pmove(){
if(bucunzai){
xin();
bucunzai=false;
}
objectp=document.getElementById("k")
kcode=window.event?window.event:arguments[0];
if(kcode.keyCode==39&&fx!=39&&fx!=37){
fx=kcode.keyCode;
try{
clearInterval(kbottom);
}
catch(e){
}
try{
clearInterval(kright);
}
catch(e){
}
try{
clearInterval(ktop);
}
catch(e){
}
try{
clearInterval(kleft);
}
catch(e){
}
kleft=setInterval(function(){if(parseInt(objectp.style.left)>=475){alert("超出了");clearInterval(kleft);}else{if(k_x.length>=400){k_x.shift();k_y.shift();};k_x[k_x.length]=k_zz.left;k_y[k_y.length]

=k_zz.top;objectp.style.left=(parseInt(objectp.style.left)+25)+"px";}if(k_zz.left==xinkx&&k_zz.top==xinky){k_number++;xin();}k_kmove();},100)
}
if(kcode.keyCode==37&&fx!=39&&fx!=37){
fx=kcode.keyCode;
try{
clearInterval(kbottom);
}
catch(e){
}
try{
clearInterval(kright);
}
catch(e){
}
try{
clearInterval(ktop);
}
catch(e){
}
try{
clearInterval(kleft);
}
catch(e){
}
kright=setInterval(function(){if(parseInt(objectp.style.left)<=0){alert("超出了");clearInterval(kright);}else{if(k_x.length>=400){k_x.shift();k_y.shift();};k_x[k_x.length]=k_zz.left;k_y[k_y.length]

=k_zz.top;objectp.style.left=(parseInt(objectp.style.left)-25)+"px";}if(k_zz.left==xinkx&&k_zz.top==xinky){k_number++;xin();}k_kmove();},100)
}
if(kcode.keyCode==40&&fx!=40&&fx!=38){
fx=kcode.keyCode;
try{
clearInterval(kbottom);
}
catch(e){
}
try{
clearInterval(kright);
}
catch(e){
}
try{
clearInterval(ktop);
}
catch(e){
}
try{
clearInterval(kleft);
}
catch(e){
}
kbottom=setInterval(function(){if(parseInt(objectp.style.top)>=475){alert("超出了");clearInterval(kbottom);}else{if(k_x.length>=400){k_x.shift();k_y.shift();};k_x[k_x.length]=k_zz.left;k_y[k_y.length]

=k_zz.top;objectp.style.top=(parseInt(objectp.style.top)+25)+"px";}if(k_zz.left==xinkx&&k_zz.top==xinky){k_number++;xin();}k_kmove();},100)
}
if(kcode.keyCode==38&&fx!=40&&fx!=38){
fx=kcode.keyCode;
try{
clearInterval(kbottom);
}
catch(e){
}
try{
clearInterval(kright);
}
catch(e){
}
try{
clearInterval(ktop);
}
catch(e){
}
try{
clearInterval(kleft);
}
catch(e){
}
ktop=setInterval(function(){if(parseInt(objectp.style.top)<=0){alert("超出了");clearInterval(ktop);}else{if(k_x.length>=400){k_x.shift();k_y.shift();};k_x[k_x.length]=k_zz.left;k_y[k_y.length]

=k_zz.top;objectp.style.top=(parseInt(objectp.style.top)-25)+"px";}if(k_zz.left==xinkx&&k_zz.top==xinky){k_number++;xin();}k_kmove();},100)
}
}
//生成新的元素代码
function xin(){
var xinkleft=parseInt(Math.random()*20)*25+"px";
var xinktop=parseInt(Math.random()*20)*25+"px";
var xinkcolor1=parseInt(Math.random()*14).toString(16)
var xinkcolor2=parseInt(Math.random()*14).toString(16)
var xinkcolor3=parseInt(Math.random()*14).toString(16)
var xinkcolor4=parseInt(Math.random()*14).toString(16)
var xinkcolor5=parseInt(Math.random()*14).toString(16)
var xinkcolor6=parseInt(Math.random()*14).toString(16)
var xink=document.createElement("div")
xink.id="k"+k_number
xink.className="xin"
xink.style.left=xinkleft
xink.style.top=xinktop
xink.style.backgroundColor="#"+xinkcolor1+xinkcolor2+xinkcolor3+xinkcolor4+xinkcolor5+xinkcolor6
var pp=document.getElementById("p")
pp.appendChild(xink)
xinkx=xinkleft
xinky=xinktop
}
//新的元素跟随移动函数
function k_kmove(){
if(k_number==0){}
else{
for(var i=0;i<k_number;i++){
var move=document.getElementById("k"+i)
move.style.top=k_y[k_y.length-(i+1)]
move.style.left=k_x[k_x.length-(i+1)]
}
}
}
</script>
</head>
<body οnlοad="lo();">
<div id="global">
  <div id="p" style="top:0px; left:0px;">
    <div id="k"></div>
  </div>
</div>
</body>
</html>


YueLinbo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript制作贪吃蛇小游戏
m0_60264901的博客
01-04 7244
揭秘贪吃蛇小游戏代码
贪吃蛇小游戏得分html,JS实现贪吃蛇游戏
weixin_42131790的博客
06-04 824
本文实例为大家分享了JS实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下html部分：贪吃蛇小游戏css部分：.content{width: 640px;height: 640px;margin: 50px auto;position: relative;}.btn{width: 100%;height: 100%;position: absolute;left: 0;top: 0;backgr...
JavaScript实现贪吃蛇小游戏
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
JavaScript贪吃蛇小游戏
m0_51700376的博客
09-26 75
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style> * { margin: 0; padding: 0; } .btn { width: 80px; height: 30px; border: 1px solid #000000
javascript实现贪吃蛇小游戏
依古比古的博客
06-18 260
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <script> var map; //地图类对象 var snake; //蛇类对象 var food; //食物类对象 var timer; //定时器对象 var sum=0; //分数 //地图类 functi
学习JavaScript的面向对象编程——JavaScript贪吃蛇小游戏
qq_42586895的博客
02-14 1468
JavaScript贪吃蛇小游戏——学习JavaScript的面向对象编程 预览支持移动端和pc端哦。 Github源码地址：https://github.com/fu-x/snake 游戏预览：http://coolxiang.top/snake 编程思想：面向对象 分析 首先对贪吃蛇游戏进行逻辑分析。 1. 小蛇需要移动，需要一个参数表示移动方向。 2. 小蛇可以吃食物，蛇头和食物坐标相等让...
javascript实现小游戏贪吃蛇
style201904的博客
11-07 415
贪吃蛇 style <style> .face{ height: 400px; width: 600px; margin-left: auto; margin-right: auto; position: relative; bac...
JavaScript的小游戏——贪吃蛇
yh_31的博客
11-29 659
【代码】JavaScript的小游戏——贪吃蛇。
JavaScript——贪吃蛇小游戏
weixin_39150852的博客
12-28 143
链接地址：https://pan.baidu.com/s/14jElHxsB8z61d235fjwG_w 提取码：hhif
JavaScript贪吃蛇小游戏.zip
04-19
JavaScript贪吃蛇小游戏是一款基于网页的互动娱乐项目，利用JavaScript编程语言实现。JavaScript是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，它允许在浏览器端执行代码，为用户提供动态交互的体验...
纯JavaScript贪吃蛇小游戏
05-21
**JavaScript贪吃蛇小游戏详解** 贪吃蛇游戏是一款经典的像素级游戏，它的基本玩法是控制一个不断增长的蛇在有限的区域内移动，吃到食物后蛇的长度会增加，碰到边界或自身身体则游戏结束。本项目是用纯JavaScript...
jquery 文件上传 报错TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormEle
热门推荐
时光的当铺
05-17 1万+
&lt;script type="text/javascript"&gt; $(function() { $('#uploadSubmit').click(function() { //将这行替换为document.getElementById 就解决了--------- ...
Vue.js 实现购物车和v-for 实现checkbox复选框全选
时光的当铺
04-24 8391
Vue.js 实现购物车和v-for 实现checkbox复选框全选 1.实现效果 2.代码实现 2.1.html &lt;html&gt; &lt;head&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" ty
js特效——闪电
时光的当铺
10-23 2386
闪电闪烁背景 function blinkOn(){ theWin.document.bgColor = "000000" nTimes++ JSCTimeOutID = window.setTimeout("blinkOff()",50); } function blinkOff(){ theWin.document.bgColor = "FFFFFF" if (nT
JS 多种方法实现弹框确认
时光的当铺
09-23 1021
方法1 <a href="#" onclick= "if(confirm( '是否确定！ ')==false)return false; ">点击确定</a> 方法2 <a href="#" onclick= "return confirm('是否确定');">点击确 定</a> 方法3* function confirmAct() { if(confirm('确定要执行此操作吗
EasyUi 下拉选择框onchage( )事件
时光的当铺
08-17 987
HTML页面代码：<th> 所在仓库:</th> <td><input id="storageIdSearch" name="storageIdSearch" class="easyui-combobox" data-options="width:150"/>
html贪吃蛇小游戏
最新发布
06-15
HTML贪吃蛇小游戏是一种经典的基于Web技术实现的简单游戏，通常使用HTML、CSS和JavaScript来构建。HTML负责结构，CSS负责样式，JavaScript则负责游戏逻辑和交互。以下是一个简单的概述： 1. **HTML结构**：使用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值