HTML实现贪吃蛇

谁践踏了优雅 2022-06-17 02:52 192阅读 0赞

<!doctype html><html><head></head><body>
    <div id="box" style="width:256px;font:25px/25px 宋体;background:#000;color:#9f9;"></div><script> var arr=[15]; var next=10;//最好判断一下arr[1]!=arr[0]+x document.onkeydown=function(e){ next={ '37':-1,'39':1,'38':-10,'40':10}[(e?e:event).keyCode]}; var run=setInterval(function(){ var list=['-1&&arr[0]%10==0','1&&arr[0]%10==9','-10&&arr[0]<10','10&&arr[0]>189']; var temp=arr[0]+next; if(list.some(function(x){ return eval('next=='+x)})||arr.indexOf(temp)>=0) return clearInterval(run)||alert('OVER'); arr.unshift(temp); if(this.food==null||food==temp){ list=[];//(list=Array(200)).forEach(function(val,i){list[i]=i}); for(var i=0;i<200;i++) list.push(i); list=list.filter(function(x){ return arr.indexOf(x)<0}); food=list[Math.round(Math.random()*(list.length-1))];//food是全局变量 } else arr.pop(); var s=''; for(var j=0;j<200;j++){ //这个循环还可以缩短 if(j%10==0&&j!=0) s+='<br/>'; if(arr.indexOf(j)>=0) s+='\u25a0'; else if(j==food) s+='\u2605'; else s+=' '; } document.getElementById("box").innerHTML=s; },200); </script></body></html>

结果：

![这里写图片描述][SouthEast]

[SouthEast]: /images/20220617/1a3d7206ca984dda99add8f96fc6c2bb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 C++ 实现贪吃蛇

本博客的主要目的是学习 Windows API 和各种有趣的函数，顺便观膜多函数分布的函数的源代码参考po主：[mayali123][mayali123]，非常感谢

比眉伴天荒/ 2023年07月18日 11:27/ 0 赞/ 37 阅读

相关贪吃蛇

这个游戏用到了最基础的js。 html部分 <!DOCTYPE html> <html> <head> <meta charset="

小咪咪/ 2023年06月27日 03:56/ 0 赞/ 32 阅读

相关贪吃蛇

/ 贪吃蛇小游戏。 / include<iostream> include<cstdio> include<

绝地灬酷狼/ 2022年08月23日 00:59/ 0 赞/ 283 阅读

相关 HTML5贪吃蛇代码

首先声明，这是网上摘录的贪吃蛇完整代码，放在我博客上仅作学习用。 <!DOCTYPE html> <html lang="en"> <head> <m

冷不防/ 2022年08月22日 11:30/ 0 赞/ 187 阅读

相关 HTML实现贪吃蛇

<!doctype html><html><head></head><body> <div id="box" style="width:256px;font:2

谁践踏了优雅/ 2022年06月17日 02:52/ 0 赞/ 193 阅读

相关贪吃蛇

include<stdio.h> include<windows.h>//基本型态定义。支援型态定义函数。使用者界面函数图形装置界面函数。 inclu

缺乏、安全感/ 2022年05月17日 09:20/ 0 赞/ 288 阅读

相关贪吃蛇

很多人都玩过贪吃蛇这个游戏，今天我们就来简单完成一个贪吃蛇的小游戏。首先，贪吃蛇有以下几个要求： 1. 只有一条蛇 2. 每次只出现一个食物 3. 蛇吃到食物长度会加1

àì夳堔傛蜴生んèń/ 2022年05月08日 09:34/ 0 赞/ 344 阅读

相关 js-实现贪吃蛇项目

近来在学习JS进阶，便学习着做个网页版贪吃蛇项目。 index.html <!DOCTYPEtml <html lang="en"> <head>

╰半夏微凉°/ 2022年03月18日 06:51/ 0 赞/ 251 阅读

相关贪吃蛇

学号：2017035107112 姓名：马铭泽我的码云贪吃蛇项目仓库：[https://gitee.com/mmz0217/number\_1/blob/master/m

灰太狼/ 2022年01月07日 14:15/ 0 赞/ 409 阅读

相关 Java实现贪吃蛇

贪吃蛇这是用Java的Swing工具实现的一个小程序。与传统的贪吃蛇游戏一样，通过“上、下、左、右”控制方向觅食死亡条件：①头碰到身体。②头碰到墙壁。

梦里梦外;/ 2021年09月21日 00:16/ 0 赞/ 453 阅读